Selectors - 요약&정리

출처 : http://blog.naver.com/topsaga/140155594732

jQuery Selectors

- jQuery selectors는 여러개 또는 한 개의 HTML 엘리먼트를 선택하고 조작할 수 있게 합니다.

 

[jQuery Selectors]

앞의 강좌에서 서로 다른 HTML 엘리먼트를 선택하는 방법을 알아봤습니다.

키포인트는 jQuery를 이용하여 효과를 주기 원하는 엘리먼트를 정확하게 선택하는 방법을 배우는 것이다.

jQuery selector는 엘리먼트 이름, 특성이름, 또는 content로 HTML 엘리먼트를 선택할 수 있게 합니다.

※ HTML DOM에 따르면, selectors는 DOM 엘리먼트를 그룹단위 혹은 개별 node 단위로 조작할 수 있게 합니다.

 

[jQuery Element Selectors]

jQuery는 HTML 엘리먼트를 선택할 때 CSS selector를 이용합니다.

$(“p")는 모든 <p> 엘리먼트를 선택합니다.

$(“p.intro")는 class="intro" 인 모든 <p> 엘리먼트를 선택합니다.

$(“p#demo")는 id="demo" 인 모든 <p> 엘리먼트를 선택합니다.

 

[jQuery Attribute Selectors]

jQuery는 XPath 표현을 사용하여 특정 특성(attribute)을 가진 엘리먼트를 선택합니다.

$(“[href]")는 href 특성을 가진 모든 엘리먼트를 선택합니다.

$(“[href='#']")는 href의 값이 ‘#’인 모든 엘리먼트를 선택합니다.

$(“[href!='#']")는 href 특성이 ‘#’이 아닌 모든 엘리먼트를 선택합니다.

$(“[href$='.jpg']”)는 href 특성이 ‘.jpg'로 끝나는 모든 엘리먼트를 선택합니다.

 

[jQuery CSS selectors]

jQuery CSS selector는 HTML 엘리먼트의 CSS 속성을 바꿀 수 있습니다.

아래의 예제는 모든 p 엘리먼트의 배경색을 노란색으로 바꾸는 예제입니다.

$(“p").css("background-color","yellow");

 

[추가적인 예제]

$(this) → 현재 HTML 엘리먼트

$(“p") → 모든 <p> 엘리먼트

$(“p.intro") → class="intro"인 모든 엘리먼트

$(“p#intro") → id="intro"인 모든 엘리먼트

$(“p#intro:first") → id="intro"인 첫 번째 엘리먼트

$(“.intro") → class="intro"인 모든 엘리먼트

$(“#intro") → id="intro"인 첫 번째 엘리먼트

$(“ul li:first") → 첫 번째 ul의 첫 번째 li 엘리먼트

$(“ul li:first-child") → 모든 ul의 첫 번째 li 엘리먼트

$(“[href$='.jpg']") → ".jpg"로 끝나는 href 특성을 가진 모든 엘리먼트

$(“div#intro .head") → id="intro"인 div 엘리먼트 안의 class="head"인 모든 엘리먼트

first-child 실습예제

Test.html