JQuery
6. JQuery 요소 검색하기
황민준
2022. 8. 30. 16:07
여러 가지 함수를 통해 원하는 요소만을 검색할 수 있다.
| 요소.first() | 가져온 요소들 중에 첫 번째 요소를 가져온다. |
| 요소.last() | 가져온 요소들 중에 마지막 요소를 가져온다. |
| 요소.eq(인덱스번호) | 가져온 요소들 중에 원하는 인덱스를 가져온다. (인덱스 번호 = 원하는 순서 -1) |
| 요소.filter("태그 혹은 셀렉터") | 가져온 요소들 중에 원하는 태그 혹은 셀렉터에 해당하는 요소들을 가져온다. |
| 요소.not("태그 혹은 셀렉터") | 가져온 요소들 중에 입력한 태그 혹은 셀렉터에 해당하지 않는 요소들을 가져온다. |
* first() / last() / eq() / filter() / not() 예시
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
<style>
</style>
</head>
<body>
<div style="border: 1px solid black;">
<p>1번째 div 요소</p>
<p class="sel">2번째 div 요소</p>
<p>3번째 div 요소</p>
<p class ="sel">4번째 div 요소</p>
</div>
<div style="border: 1px solid black;">
<p>5번째 div 요소</p>
<p class="sel">6번째 div 요소</p>
<p>7번째 div 요소</p>
<p class ="sel">8번째 div 요소</p>
</div>
</body>
<script>
//배열 개념 : 덩어리로 가져와서 n 번째
// console.log($("div p"));
// console.log($("div p").first());
// console.log($("div p").last());
console.log($("div p").eq(3));
//필터 개념(가져온 녀석을 한 번 더 걸러낸다)
console.log($("p").filter(".sel")); //p태그 중에서 class가 sel인 요소
console.log($("p").not(".sel")); //p태그 중에서 class가 sel이 아닌 요소
</script>
</html>