jQuery 문법

jQuery를 블로그에 적용하기 위해서는  jQuery 문법을 알고 있어야 적용하기 쉬울거라 생각하여 먼저 jQuery의 기본적인 문법을 정리하였습니다.

 

jQuery 문법
jQuery 문법은 선택자와 액션으로 구성되어 있으며 선택자는 엘리먼트를 지정하는 부분, 액션 함수는 요소가 수행할 액션을 지정합니다

jQuery 문법 예제
 $(this).hide();
     해당 요소를 감추게 하는 jQuery hide() 메소드

$("divid").hide();
    id가 divid인(id = "divid") 요소를 감추게 한다.

$("p").hide();
    모든 <p> 요소를 감추게 한다.

$(".menu").hide();
     CSS 클래스가 menu인(class=".menu") 모든 요소를 감추게한다.

jQuery 문법

  jQury 문법은 HTML 요소를 원하는대로 선택하고 그 요소에 어떤 액션을 수행하게 만드는 형식으로 작성합니다.

 

  기본 문법은 $(selector).action()의 형식으로 구성됩니다.
    - $ 표시는 jQuery라는 것을 정의
    - (selector)는 "질의하거나 찾을" HTML 요소를 의미하여
    - jQuery action()은 이 요소가 수행할 액션입니다.

 

   jQuery 문법 예제를 들어보면
     $(this).hide() - 현재의 요소를 감춘다.
     $("p").hide() - 모든 <P>요소를 감춘다.
     $("p.test").hide() - class가 test인(class="test") 모든 단락을 감춘다.
     $("#divid").hide() - id가 divid인(id="divid") 모든 요소를 감춘다.

 

   jQuery는 XPATH와 CSS selector 문법을 혼합해서 사용합니다.

jQuery 실행의 기본

 

jQuery의 모든 메서드나 함수들은 document.ready() 함수 안에 위치하게 될 것입니다.

  $(document).ready(function(){
     /*  여러가지 jQuery 함수들 작성 */

});

 

코드 완성의 예

 

 

$(document).ready(function(){

   /* Complete code */

       $("a").click(function(event){
     alert("Thanks for visiting!");
   });
 });

 

jQuery 메서드가 document.ready() 함수 안에 위치하는 것은 jQuery 코드가 문서가 로딩이 끝나기 전(혹은 문서가 준비되기 전)에 실행 되는 것을 막기 위한 것입니다.

지금까지 jQuery를 사용하기 위한 가장 기본적인 문법을 정리하였습니다.

 

다음은 jQuery의 셀렉터에 대하여 정리하도록 하겠습니다.

 

jQuery selectors
   - jQuery의 가장 강력한 부분은 요소를 마음대로 탐색할 수 있다는 것입니다.
   - jQuery selectors는 여러개 또는 한 개의요소를 선택하고 조작할 수 있습니다.

 

[jQuery Element Selectors]
  jQuery는 요소를 선택할 때 CSS 셀렉터를 사용합니다.
    $("P") 는 모든 <P> 엘레먼트를 선택
    $("p.test") 는 class="test"인 모든 <P>를 선택
    $("p#demo")는 id="demo" 인 모든 <P>를 선택

 

[jQuery 속성 셀렉터]
  jQuery는 XPATH 표현을 사용하여 특정 속성을 가진 요소를 선택할 수 있습니다.
  $("[href]")는 href 특성을 가진 모든 요소를 선택
  $("[href=#]")는 href의 값이 '#'인 모든 요소를 선택
  $("[href!=#]")는 href 특성이 '#'이 아닌 모든 요소를 선택
  $("[href$='.jpg']")는 href 특성이 '.jpg'로 끝나는 모든 요소를 선택

 

[jQuery CSS 셀렉터]
  jQuery CSS 셀렉터는 요소의 CSS 속성을 변경할 수 있습니다.
  다음의 예제는 모든 p 요소의 배경색을 빨간색으로 변경하는 예제입니다.
   $("p").css("background-color","red")

 

[jQuery 추가 예제]
   $(this) : 현재의 모든 요소
   $("p") :  모든 <p> 요소
   $("p.intro") : class="intro"인 모든 <P> 요소
   $("p#intro) : id="intro"인 모든 <P>  요소
   $("p#intro:first') :  id="intro"인 <P>요소 중 첫번째 요소
   $(".intro") : class="intro"인 모든 요소
   $("#intro") : id="intro"인 모든 요소
   $("ul li:first") : 첫번째 ul의 첫번째 li 요소
   $("[href$='.png']") : '.png'로 끝나는 href 특성을 가진 요소
   $("div#intro.head") : id=intro인 div 요소 안의 class="head"인 모든 요소

다음에는 jQuery의 이벤트에 대하여 정리 후 블로그 디자인을 바꾸면서 jQuery를 적용해보도록 하겠습니다.