[JQUERY] 셀렉터(selector)

Jquery Selector*

*	모든 엘리먼트와 일치
E	태그명이 E인 모든 엘리먼트와 일치
E F	E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치
E>F	E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치
E+F	E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치
E~F	E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치
E:has(F)	태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치
E.C	클래스명 C를 가지는 모든 엘리먼트 E와 일치. E의 생략은 *.C와 동일함.
E#I	아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함.
E[A]	어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A=V]	값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A^=V]	값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A$=V]	값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A*=V]	값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

 

고급위치셀렉터*

 

:first	페이지에서 처음으로 일치하는 엘리먼트. li a:first는 리스트 아이템의 첫 번째 링크를 반환한다.
:last	페이지에서 마지막으로 일치하는 엘리먼트. li a:last는 리스트 아이템의 마지막 링크를 반환한다.
:first-child	첫 번째 자식 엘리먼트. li:first-child는 각 리스트의 첫 번째 아이템을 반환한다.
:last-child	마지막 자식 엘리먼트. li:last-child는 각 리스트의 마지막 아이템을 반환한다.
:only-child	형제가 없는 모든 엘리먼트를 반환한다.
:nth-child	n번째 자식 엘리먼트. li:nth-child(2)는 각 리스트의 두 번째 리스트 아이템을 반환한다.
:nth-child(even|odd)	짝수 또는 홀수 자식 엘리먼트. li:nth-child(even)은 각 목록의 짝수 번째 자식 엘리먼트를 반환한다.
:nth-child(Xn+Y)	전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인 경우 생략 가능하다. li:nth-child(3n)은 3의 배수 번째 아이템을 반환한다.   li:nth-child(5n+1)은 5의 배수 +1 번째 아이템을 반환한다.
:even / :odd	페이지 전체의 짝수/홀수 번째 엘리먼트. li:even은 모든 짝수 번째 아이템을 반환한다.
:eq(n)	n번째로 일치하는 엘리먼트.
:gt(n)	n번째 엘리먼트 이후의 엘리먼트와 일치.
:lt(n)	n번째 엘리먼트 이전의 엘리먼트와 일치.

 

셀렉터라는 말그대로 Jquery셀렉터는 DOM 엘리먼트를 선택하고 제어할 수 있습니다.

기본 폼에서 목록을 만들어봤습니다.

$("li a:first").css("font-weight","bold").css("color","red");
위의 명령은  :first가 페이지에서 첫 번째로 일치하는 아이템을 반환한다는 뜻으로

엘리먼트 li에서 <a>를 포함하는 엘리먼트 중 첫 번째 리스트에 css를 적용하라는 뜻입니다~
$("li a:last").css("font-weight","bold").css("color","blue");

그리고 :last는 페이지에서 마지막으로 일치하는 아이템을 반환한다는 뜻으로 엘리먼트 li에서 <a>를 포함하는 엘리먼트 중

마지막 리스트에 css를 적용하라는 뜻입니다.



페이지에서 처음으로 만나는 리스트 아이템인 Jquery지원사항 list에 css가 적용되었습니다.



폰트 칼라를 blue로 했더니 잘 안보여서-.-ㅋㅋㅋㅋㅋㅋ

red로 했을 경우 a태그가 걸려있는 마지막 li의 폰트를 red로 바꿔주니 CSS3이 바뀌겠네요.

 

 나머지도 다 같은 맥락-.-ㅋ

li:first-child 같은 경우는 li에서 첫 번째 나오는 아이템들에게 태그를 적용할 것이고,

li:last-child는 마지막에 나오는 아이템들에게 태그를 적용하겠네요.

그리고 마지막으로

$("ul.myList > li > a").css("color","red");

요거는 ㅎㅎㅎㅎㅎ ul목록중 .myList<< 즉 .이 클래스를 뜻하므로 클래스가 myList인 녀석의 a태그를 포함하고 있는

li에 태그를 적용하란 뜻입니다.

결과 화면은 다음과 같겟네요.