본문으로 바로가기

jQeury 셀렉터

category 스터디/Javascript · jQuery 2014. 10. 7. 11:45

jquery의 선택자는 css선택자와 동일합니다. 그래서 css를 알면 jquery선택자에서 매우 유리합니다.
jquery는 모질라 파이어폭스,인터넷 익스플로러 7, 사파리와 같은 최신브라우져가 지원하는 차세대 css를 사용해 고급 셀렉터를 지원합니다.

jQuery가 지원하는 기본 CSS 셀렉터

*  /* 모든 엘리먼트와 일치 */
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와 일치 */


때로는 페이지에 있는 엘리먼트 위치나 다른 엘리먼트와 연관된 관계를 기반으로 엘리먼트를 선택해야 합니다.
예를들어, 페이지에서 첫번째 링크나 홀수 및 짝수번째 문단 또는 리스트마다 자리한 마지막 아이템을 선택하는것과 같은 기법이 필요할 때도 있습니다.
이때 위치를 기반으로 한 셀렉터가 유용합니다.

jQuery가 지원하는 고급위치기반 셀렉터

:first  /* 페이지에서 처음으로 일치하는 엘리먼트. li a:first는 리스트 아이템의 첫번째 링크를 반환한다 */
:last  /* 페이지에서 마지막으로 일치하는 엘리먼트. li a:last는 리스트 아이템의 마지막 링크를 반환한다 */
:fist-child  /* 첫번째 자식 엘리먼트, li:first-child는 각 리스트의 첫번째 아이템을 반환한다 */
:last-child  /* 마지막 자식 엘리먼트. li:last-child는 각 리스트의 마지막 아이템을 반환한다 */
:only-child  /* 형제가 없는 모든 엘리먼트를 반환한다 */
:nth-child(n)  /* 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번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치 */


css만으로는 표현할 수 없는 특성이 있는 엘리먼트를 선택해야 할 때도 있습니다. 이럴때는 정의 셀렉터를 이용하면 편리합니다.

jQuery 정의 필터 셀렉터

:animated  /* 현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다 */
:button  /* 모든 버튼을 선택한다 (input[type=submit], input[type=reset], input[button], button) */
:checkbox  /* 체크박스 엘리먼트만 선택한다 (input[type=checkbox]) */
:checked  /* 선택된 체크박스나 라디오 버튼만을 선택한다 (CSS에서 지원) */
:contains(foo)  /* 택스트 foo를 포함하는 엘리먼트만 선택한다 */
:disabled  /* 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다 */
:enabled  /* 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다 */
:file  /* 모든 엘리먼트를 선택한다 (input[type=file]) */
:header  /* 해더 엘리먼트만 선택한다  */
:hidden  /* 감춰진 엘리먼트만 선택한다 */
:image  /* 폼 이미지를 선택한다 (input[type=image]) */
:input  /* 폼 엘리먼트만 선택한다 (input, select, textarea, button) */
:not(selector)  /* selectior가 아닌것을 선택한다.괄호안의 조건이 아닌것을 선택한다 */
:parent  /* 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다 */
:password  /* 패스워드 엘리먼트만 선택한다 (input[type=password]) */
:radio  /* 라디오 버튼 엘리먼트만 선택한다 (input[type=radio]) */
:reset  /* 리셋 버튼을 선택한다 (input[type=reset]이나 button[type=reset]) */
:selected  /* 선택된 엘리먼트만 선택한다 */
:submit  /* 전송 버튼을 선택한다 (button[type=submit] 이나 input[type=submit] */
:text  /* 텍스트 엘리먼트만 선택한다 (input[type=text]) */
:visible  /* 보이는(visible) 엘리먼트만 선택한다 */


[출처: 대문블로그] : http://demun.tistory.com/

'스터디 > Javascript · jQuery' 카테고리의 다른 글

콜백패턴  (0) 2014.10.07
on, off 그리고 one  (0) 2014.10.07
트리거 trigger  (0) 2014.10.07
jquery has / :has  (0) 2014.10.07
JavaScript 함수  (0) 2014.10.07