728x90
반응형
필터링 메소드
1) eq() 메서드 : 선택한 엘리먼트들 중에 인덱스로 탐색
2) slice() 메서드: 선택한 엘리먼트들 중에 인덱스 길이로 탐색
3) first() 메서드: 선택한 엘리먼트들 중에 첫번째 요소 탐색
4) last() 메서드 : 선택한 엘리먼트들 중에 마지막 요소 탐색
<body>
<body>
<pre>
<b>eq() 메서드 : 선택한 엘리먼트들 중에 인덱스로 탐색</b>
<b>slice() 메서드: 선택한 엘리먼트들 중에 인덱스 길이로 탐색</b>
<b>first() 메서드: 선택한 엘리먼트들 중에 첫번째 요소 탐색</b>
<b>last() 메서드 : 선택한 엘리먼트들 중에 마지막 요소 탐색</b>
</pre>
<div>
<p>eq()</p>
<p>slice()</p>
<p>first()</p>
<p>last()</p>
</div>
</body>
<script>
<script type="text/javascript">
//1. p eq() 누르면 toggle()
$("p").eq(0).click(function(){
$("pre b").eq(0).toggle();
});
// $("div>p").eq(0).click(function(){
// $("pre b").eq(0).toggle();
// });
//2. p slice() 누르면 toggle()
$("p").eq(1).click(function(){
$("pre b").slice(1,2).toggle();
});
// $("div>p").eq(1).click(function(){
// $("pre b").slice(1,2).toggle();
// })
//3. 첫번째 p 색상변경
$("p").eq(2).click(function(){
$("pre b").first().toggle();
});
// $("div>p").eq(2).click(function(){
// //$("pre b").first().css("color","orange");
// //$("pre b").eq(2).toggle();
// $("pre b").first().css("color","olive").end().eq(2).toggle();
// });
//4. 마지막 p 색상변경
$("p").eq(3).click(function(){
$("pre b").last().toggle();
})
// $("div>p").eq(3).click(function(){
// $("pre b").last().toggle();
// })
</script>728x90
반응형
'Web > JQuery' 카테고리의 다른 글
| [JQ]DOM_기타탐색메소드 (0) | 2020.07.31 |
|---|---|
| [JQ]DOM_트리탐색메소드 (0) | 2020.07.31 |
| [JQ]selector_03 (0) | 2020.07.31 |
| [JQ]selector_02 (0) | 2020.07.31 |
| [JQ]selector_01 (0) | 2020.07.31 |
