[펌]jQuery in Action 정리 2장 - 기능이 확장된 엘리먼트 집합 생성하기

2.1 조작하려는 엘리먼트 선택하기

• jQuery는 우리에게 익숙한 CSS문법을 사용한다.
• jQuery 정의 메서드 역시 CSS문법을 확장해서 사용한다.

2.1.1 기본 CSS 셀렉터 사용하기

• a - 모든링크(<a>) 엘리먼트와 일치하는 셀렉터
• #specialID - specialID를 아이디로 가지는 엘리면트와 일치 셀렉터
• .specialClass - specialClass를 클래스로 가지는 셀렉터
• a#specialID.specialClass - 아이디가 specialID이고 specialClass를 클래스로 가지는 링크와 일치하는 셀렉터
• p a.specialClass - <p> 에리먼트 내에 선언되고 specialClass를 클래스로 가지는 모든링크와 일치하는 셀렉터
• 몇몇 예외사항을 제외하고 CSS3를 완벽하게 준수한다.

2.1.2 자식셀렉터, 컨테이너 셀렉터, 어트리뷰트 셀렉터

• p > a - 자식셀렉터
• a[href^=http://] - 어트리뷰트 셀렉터 (^)는 값의 시작부분이 일치함을 의미함
• form[method] - 특정 어트리뷰트를 가진 셀렉터 선택
• input[type=text] - 일치하는 어트리뷰트를 가짐
• a[href$=.pdf] - 끝값이 일치하는 어트리뷰트 셀렉터
• a[href*=jquery.com] - 문자열을 포함하는 어트리뷰트 셀렉터
• li:has(a) - <a>엘리먼트를 포함하는 모든 <li>엘리먼트와 일치한다.

2.1.3 위치로 선택하기

• :first - 첫번째 일치 엘리먼트
• :last - 마지막 일치 엘리먼트
• :first-child - 첫번째 자식 엘리먼트
• :last-child - 마지막 자식 엘리먼트
• :only-child - 형제가 없는 엘리먼트
• :nth-child(n) - n번째 자식 엘리먼트
• :nth-child(even|odd) - 짝수 또는 홀수 자식 엘리먼트
• :nth-child(Xn+Y) - 공식에 따른 엘리먼트 ex)li:nth-child(3n)
• :even / :odd -  짝수 홀수 엘리먼트
• :eq(n) - n번째 일치 엘리먼트 (인덱스 0부터 시작)
• :gt(n) - n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치
• :lt(n) - n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치
• 자식셀렉터는 1부터 시작

2.1.4 jQuery 정의 셀렉터 사용하기

• :animated - 에니메이션 적용된
• :button - 모든 버튼
• :checkbox - 체크박스엘리먼트
• :checked - 선택된 체크박스
• :contains(foo) - 문자열 foo를 포함하는 엘리먼트
• :disabled - 비활성화 상태인 모든 폼엘리먼트
• :enabled - 활성화 상태인 모든 폼엘리먼트
• :file - 파일엘리먼트
• :header - 헤더 엘리먼트
• :hidden - 감춰진 엘리먼트
• :image - 폼 이미지 선택
• :input - 폼 엘리먼트만 선택(input, select, textarea, button)
• :not(filter) - 필터의 값을 반대로 변경
• :parent - 빈 엘리먼트 제외 텍스트포함 자식엘리먼트를 가지는 엘리먼트
• :password - 패스워드 엘리먼트
• :radio - 라디오 버튼
• :reset - 리셋 버튼
• :selected - 선택된 엘리먼트
• :submit - 전송 버튼
• :text - 텍스트 엘리먼트
• :visible - 보이는 엘리먼트

2.2 새로운 HTML 생성하기

• $("<div>안녕</div>")
• $("<div>") 는 $("<div></div>")와 같다
• .appendTo() 메서드도 있다.

2.3 확장된 엘리먼트 집합 관리하기

2.3.1 확장된 집합의 크기 결정하기

• $('#someDiv').html('페이지에는 총 '+$('a').size() + '개의 링크가 있다');
• 확장집합의 엘리먼트 개수

2.3.2 확장 집합에서 엘리먼트 획득하기

• $('img[alt]')[0] - 배열을 이용
• $('img[alt]').get(0) - 위와 동일. 0 생략시 배열 반환
• $('img').index($('img#findMe')[0]) - 이미지들중 id가 findMe인 이미지가 몇번째인지 인덱스를 반환

2.3.3 확장 엘리먼트 집합 재편성하기

• $('img[alt]').add('img[title]') - 엘리먼트를 확장집합에 추가한다.
• $('p').add('<div>안녕!</div>') - 새 html 생성해서 추가
• $('img'[title]').not('[title*=puppy]') - title 어트리뷰트를 지닌 모든 img엘리먼트 선택할때 puppy를 포함은 제외(true를 제외)
• $('img').addClass('seeThrough').filter('[title*=dog]') - not 메서드와는 반대의 결과 (부합하지 않는 false를 제외)
• $('*').slice(0,4); - 전체 엘리먼트에서 처음부터 4개의 엘리먼트를 포함한 집합생성
• $('*').slice(4); - 4개 이후(5번째 부터)에서 끝까지의 확장 집합생성

2.3.4 관계를 이용해 확장집합 얻기

• children() - 고유한 자식으로 구성된 확장집합 반환
• contents() - 엘리먼트 콘텐츠로 구성된 확장집합 반환. 주로 iframe 엘리먼트 콘텐츠를 얻고자 함(텍스트 노드포함)
• next() - 확장집합내의 각 확장 엘리먼트 바로 다음에 나오는 형제
• nextAll() - 확장집합내의 각 확장 엘리먼트 다음에 나오는 모든 형제
• parent() - 모든 확장 엘리먼트의 바로 위 부모로 구성된 엘리먼트
• parents() - 모든 확장 엘리먼트의 조상으로 구성된 확장집합 반환(root 미포함)
• prev() - 각 확장 엘리먼트 바로 이전 형제로 구성된 확장집합
• prevAll() - 각 확장엘리먼트 이전에 나오는 모든 형제로 구성된 확장집합
• sibilings() - 확장 엘리먼트의 모든 형제를 포함하는 확장집합을 반환

2.3.5 확장집합을 이용하는 기타 방법들

• wrappedSet.find('p cite') - wrappedSet 집합에서 <p>에 포함된 <cite>엘리먼트 구성 확장집합
• var hasImage=$('*').is('img'); - img 엘리먼트가 있는지 true false 반환

2.3.6 jQuery 체인 관리하기

• $('img').clone().appendTo('#somewhere').end() - appendTo() 이전 확장 집합으로 돌아간다.
• andSelf() - 커멘드체인에서 이전 확장집합 두개를 하나로 합친다.