jQuery 선택자

 

선택자를 사용하여 HTML 문서의 하나의 요소나 요소들의 그룹을 선택할 수 있다. 선택자의 종류는 엘레멘트 선택자와 속성 선택자가 있다. 엘레멘트 선택자는 태그를 기준으로 선택하고, 속성 선택자는 태그의 속성을 기준으로 HTML 요소를 선택한다.

  

■ 엘레멘트 선택자

$("p")  :  <p>요소(문서안의 모든 <p> 태그요소를 선택합니다.)

$("p.intro")  :   <p>태그요소의 class 속성이 "intro"인 태그요소

$("p#demo")  :   <p>태그요소의 id 속성이 "demo"인 태그요소

$(".intro")  :  class 속성이 intro인 엘리멘트

$("#demo")  :  id 속성이 demo인 엘리멘트

$("div.intro #demo")  :   <div>요소안의 class 속성값이 intro인 요소와 id속성값이 demo인 엘레멘트

  

■ 속성 선택자

$("[href]")  :  HTML 요소 중 href 속성을 가진 모든 엘리멘트

$("[href='#']")  :  href 속성을 가진 엘리멘트에서 href 속성의 값이 '#'인 엘리멘트

 

jQuery는 달러기호($)를 사용하여 선택자를 지정한다. 하지만, prototype.js 같은 라이브러리도 달러기호($)를 사용한다. 이 때 jQuery의 선택자의 달러표시($)를 구분하기 위해 다음처럼 jQuery.noConflict()함수를 사용하여 선택자의 달러표시를 변경할 수 있다.

 

<script type="text/javascript">
var $jq=jQuery.noConflict();

 

$jq(document).ready(function(){

    $jq("button").click(function(){ $jq("p").hide(); });
});
</script>