제이쿼리에서는 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지도 사용할 수 있습니다.
선택한 요소의 저장
제이쿼리에서는 선택한 요소들을 변수에 저장하여 사용할 수 있습니다.
$(function() {
const items = $('li');
$("button").on("click", function() {
$("#len").text("저장된 <li>요소의 총 개수는 " + items.length + "개 입니다.");
});
});하지만 이렇게 저장된 요소들은 변수에 저장될 당시의 요소들만 저장합니다.
즉, 요소가 저장된 이후에 문서에 추가되거나 삭제된 요소들을 자동으로 갱신하지는 않습니다.
선택한 요소의 필터링
선택한 요소 중에서 더욱 세분화된 선택을 하기 위한 필터링을 진행할 수 있습니다.
$(function() {
$("button").on("click", function() {
$("li.has(span)").text("<span>요소를 가지고 있는 아이템이에요!");
});
});- eq(n): 선택한 요소 중에서 인덱스가 n인 요소
- gt(n): n보다 큰 요소
- lt(n): n보다 작은 요소
- even: 짝수
- odd: 홀수
- first: 첫 번째 요소
- last: 마지막 요소
- animated: 애니메이션 효과가 실행중인 요소
- header: h1 ~ h6
- lang(언어): 지정한 언어의 요소
- not: 지정한 선택자와 일치하지 않는 요소
- root: 최상위 루트 요소
- target: 웹 페이지 URI의 fragment 식별자와 일치하는 요소
- contains(텍스트): 지정한 텍스트를 포함하는 요소
- has(선택자): 지정한 선택자와 일치하는 자손 요소를 갖는 요소
- empty: 자식 요소를 가지고 있지 않은 요소
- parent: 자식 요소를 가지고 있는 요소
