jQuery 필터링 : 선택된 집합에서 다시 조건에 맞는 jQuery 집합을 선택

jQuery 필터링 : 선택된 집합에서 다시 조건에 맞는 jQuery 집합을 선택

메서드	설명
eq()	인덱스 번호에 해당하는 노드를 찾는다. index 0은 첫 번째 노드 의미
filter()	선택된 노드 집합에서 선택자를 추가하거나 함수를 사용하여 원하는 결과를 추출할 수 있다.
first()	선택된 노드 집합에서 첫 번째 자식 노드를 찾는다.
has()	선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소한다.
is()	매개 변수로 selector, element, jQuery를 입력하여 입력한 객체가 있으면 true를 반환한다.
last()	선택된 노드 집합에서 마지막 자식 노드를 찾는다.
map()	대상이 되는 노드 집합을 변경한다.
not()	조건에 맞지 않는 것들만 찾아서 선택한다.
slice()	선택된 집합을 조건의 범위로 재선택해준다. 배열의 slice()와 같은 기능

 

jQuery 필터링 : 선택된 집합에서 다시 조건에 맞는 jQuery 집합을 선택

$('div#main p').first() // id가 main인 <div> 태그의 첫번재 <p> 태그 선택
$('div#main p').last() // id가 main인 <div> 태그의 마지막 <p> 태그 선택
$('div#main p').eq(1) // id가 main인 <div> 태그의 두 번째 <p> 태그를 선택한다. 인덱스는 0부터 시작
$('div').filter(".middle") // <div>태그 중에서 클래스 속성 값이 middle인 것을 선택
$('div).not('.middle') // <div>태그 중에서 클래스 속성 값이 middle이 아닌 것을 선택
$('li').has('ul') // <li>태그 자손 중에 <ul>태그가 있는 <li>태그 선택

*** Selectors의 :first vs Traversing의 first()
=> 선택된 집합에서 첫번째 노드를 반환하는 것에는 차이가 없다. 다만 Selector의 :first보다 Travesing의 first()가 더 최신 버전이기 때문에 
필터링하는 속도가 빠르고 여러 가지 메서드를 연속해서 나열할 수 있는 메서드 체인 방식의 표기에 더 적합한다.
=> 전체 div 노드에 click 이벤트를 설정하고 첫번재 div노드의 배경색을 변경하는 코드를 작성하면 다음과 같은 차이가 있다.

// Selector의 :first
$("div").click(fn);
$("div:first").css("background-color", "red");

// Traversing의 first()
$("div").click(fn).first().css("background-color", "red");

=> 이러한 이유로 보통 Traversing의 메서드 사용을 더 추천한다고 한다.

http://api.jquery.com/category/traversing/filtering

Filtering | jQuery API Documentation