2012. 11. 29. 학습일지(2장-01)

02. 요소 선택

jQuery의 가장 강력한 특징 중 하나는 DOM 요소를 쉽게 선택할 수 있는 능력입니다.

다양한 선택자와 메서드로부터 얻는 결과는 항상 jQuery 객체입니다.

선택자 종류

▶ $() 함수

CSS에서 사용할 수 있는 표현이라면 무엇이든 문자열 형태로 $() 함수에 넘겨주면 해당 요소에 jQuery 메서드를 적용할 수 있습니다.

$(달러표시)는 jQuery의 줄인 표현입니다.

선택자의 세 가지 구성요소는 다음과 같습니다.

1. 태그명 (ex : $('div'))

2. ID (ex : $'#some-id'))

3. 클래스 (ex : $('myclass'))

$() 함수를 사용하면 요소의 집합에 접근하기 위해 직접 for 반복문을 사용할 필요가 없습니다.

▶ CSS 선택자

$('#selected-plays > li').addClass 등등 ........ : 최상위 항목에만 추가할 수 있게 자식 콤비네이터(>)를 사용. 자식요소 중에서 li를 찾음!

$('#selectd-play li : not(.horizontal') : horizontal 클래스를 가지고 있지 않은 #select-play의 자손 li 선택!

▶ 속성 선택자

 속성 선택자는 정규 표현식과 유사한 문법 지원합니다.

1. ^=a : a로 시작하는

2. $=b : b로 끝나는

3. *=c : c를 포함하는

$('a[href^="mailto:") : a 태그의 href 속성이 mailto로 시작할 때

$('a[herf$=".pdf") : a 태그의 href 속성이 pdf로 끝날 때

$('a[href^="http"][href*="henry"]) : a 태그의 href 속성이 http로 시작하며 henry를 포함할 때

▶ 사용자 정의 선택자 (성능이 굉장히 중요할 때는 자주 이용하지 않는 편이 좋습니당!)

CSS의 의사 클래스 구문처럼 선택자의 구문은 콜론(")으로 시작합니다.

1. :eq(n) : n+1 번째 (n은 0부터 시작하기 때문!)

2. :odd, :even : 홀수, 짝수

3. :nth-child(n) : n번째 (1부터 시작하는 유일한 jQuery 선택자!)

4. :contains(text) : text를 포함하는

$('div.myclass:eq(1)') : myclass를 가지는 2번째 div

$('tr:even') : 홀수 번째 tr (홀수인데 even을 사용한 이유는 첫 번째 행은 0, 두번 째 행은 1로 표현하기 때문!)

$('tr:nth-child(odd)') : 홀수 번째 tr

$('td:contains(Henry)') : Henry라는 텍스트를 포함한 td (대소문자를 구분합니다!)

▶ 폼 선택자

위치 기반 요소 검색에 한정되어 있지 않고, 폼 선택자로 원하는 요소만 간단하게 뽑아낼 수 있습니다.

1. :input : 입력, 텍스트영역, 셀렉트, 버튼 요소

2. :button : 버튼 요소와 type 속성이 button인 input 요소

3. enabled : 활성화된 폼 요소

4. disabled : 비활성화된 폼 요소

5. :checked : 선택된 라디오 버튼 혹은 체크박스

6. :selected : 선택된 옵션 요소

$('input[type="radio"]:checked) : 선택된 라디오 입력 요소

$('input[type="password"] : 모든 비밀번호 입력 요소

$('input[type="text"]:disabled') : 모든 비활성화된 입력 요소