확장 집합 다루기

. 확장된 집합의 크기(개수) : length, size()

  $('#someDiv').html('페이지에는 총 '+$('a').size()+'개의 링크가 있다.');

 

. 확장된 집합에서 (하나 또는 모든) 엘리먼트 획득하기 : [0], get(0)

  $('img[alt]')[0] 또는

  $('img[alt]').get(0)

  var allLabeledButtons = $('label+button').get();

 

. 인덱스 확인 : index(element)

  발견되지 않으면 -1 return

  var n = $('img').index( $('img#findMe')[0] );

  * element 집합을 전달할 경우, 첫 번째 엘리먼트의 인덱스를 반환

 

 

. 확장 집합에 다른 엘리먼트 추가하기 : add(jQuery셀렉터|HTML코드|DOM엘리먼트[집합])

  $('img[alt],img[title]') ← alt나 title을 가진 모든 img

  $('img[alt]').add('img[title]')

 

  $('img[alt]').addClass('thickBorder').add('img[title]').addClass('seeThrough')

  alt 어트리뷰트를 가진 img 집합에 thickBorder 클래스를 적용하고

  여기에 title 어트리뷰트를 가진 img 집합을 추가한 후

  이들 전체에 seeThrough 클래스를 적용

 

 

. 확장 집합에서 셀렉터 표현식과 일치하는 엘리먼트 제거 : not(필터 표현식|엘리먼트[집합])

  $('img[title]').not('[title*=puppy]')

 

. 확장 집합에서 셀렉터 표현식과 일치하지 않는 엘리먼트 제거 : filter(필터 표현식|필터 함수)

  필터 함수는 집합에 있는 모든 엘리먼트마다 호출된다.

  호출된 함수는 해당 시점의 엘리먼트를 함수 콘텍스트인 this로 이용한다.

  호출 결과로 false를 반환하는 엘리먼트가 모두 집합에서 제거된다.

  $('img').addClass('seeThrough').filter('[title*=dog]').addClass('thickBorder')

 

 

. 확장 집합에서 부분 집합 얻기 : slice(begin, end) ← 엘리먼트를 획득하는 get()과 다름

  begin : 부분 집합에 포함될 첫 엘리먼트의 위치. 0 부터 시작가능

  end : 부분 집합에 포함될 마지막 엘리먼트의 바로 다음 위치. 생략하면, 집합의 마지막까지 포함.

  $('*').slice(2,3);

  $('*').slice(0,4);

  $('*').slice(4);

 

 

* 관계를 통해 새로운 확장 집합을 얻을 수 있는 메서드 

메서드	설명
children()	확장 엘리먼트의 고유한 자식으로 구성된 확장 집합을 반환
contents()	확장 집합에서 엘리먼트의 콘텐츠로 구성된 확장 집합을 반환  텍스트 노드도 포함되며, 주로 <iframe> 엘리먼트의 콘텐츠를 얻고자 사용
next()	확장 집합 내의 각 확장 엘리먼트 바로 다음에 나오는 형제로 구성된 확장 집합을 반환
nextAll()	확장 집합 내의 각 확장 엘리먼트 다음에 나오는 모든 형제로 구성된 확장 집합을 반환
parent()	확장 집합 내에 있는 모든 확장 엘리먼트의 바로 위 부모로 구성된 확장 집합을 반환
parents()	모든 확장 엘리먼트의 조상으로 구성된 확장 집합을 반환  문서 루트(document root)는 포함되지 않는다.
prev()	확장 집합 내의 각 확장 엘리먼트 바로 이전에 나오는 형제로 구성된 확장 집합을 반환
prevAll()	확장 집합 내의 각 확장 엘리먼트 이전에 나오는 모든 형제로 구성된 확장 집합을 반환
siblings()	확장 엘리먼트의 모든 형제를 포함하는 확장 집합을 반환

 ※ contents를 제외한 모든 메서드가 필터링할 용도로 쓸 문자열 매개변수를 받아들인다.

 

 

. 확장 집합에서 표현식과 일치하는 새로운 확장 집합 반환 : find(selector)

  확장 집합에 포함된 엘리먼트의 자손 엘리먼트도 표현식과 일치하는지 평가된다?

  변수.find('p cite');

  $('p cite',변수);

 

. 확장 집합에 표현식과 일치하는 엘리먼트가 있는지 확인 : is(selector)

  하나라도 일치하면 true, 아니면 false

  var hasImage = $('*').is('img');

 

 

. 확장 집합을 복사하여 새로운 확장 집합 생성 : clone()

  $('img').clone().appendTo('#somewhere');

 

. 이전 확장 집합으로 돌아가기 : end()

  $('img').clone().appendTo('#somewhere').end().addClass('beenCloned');

 

. 이전 확장 집합 2개를 하나로 합치기 : andSelf()