기본 필터 메서드 filter(), filter(function(){})
<script> $(document).ready(function() { // $('h3:even').css({ // background: 'black', // color: 'orange' // }); $('h3').filter(':even').css({ background: 'black', color: 'orange' }) }); </script> </head> <body> <h3> header3-0 </h3> <h3> header3-1 </h3> <h3> header3-2 </h3> <h3> header3-3 </h3> <h3> header3-4 </h3> <h3> header3-5 </h3> <h3> header3-6 </h3> <h3> header3-7 </h3> </body></html>
$(document).ready(function() { $('h3').filter(':even').css({ background: 'black', color: 'orange' }) $('h3').filter(function(index) { return index % 3 == 0; }).css({ background: 'black', color: 'red' }); });
end()
<script> $(document).ready(function() { //end (), filter를 이용한 선택의 한단계 위로 이동. $('h1').css('background-color','orange') .filter(':even').css('color','white') .end().filter(':odd').css('color','red'); }); </script> </head> <body> <h1> header1-0 </h1> <h1> header1-1 </h1> <h1> header1-2 </h1> <h1> header1-3 </h1> <h1> header1-4 </h1> <h1> header1-5 </h1> <h1> header1-6 </h1> <h1> header1-7 </h1>
특정 위치의 문서 객체 선택 eq(), first(), last()
$(document).ready(function() { $('h1').eq(0).css('background','orange'); $('h1').eq(-3).css('background','orange'); $('h1').last().css('background','orange'); });
add()
- add ( ) 메서드를 사용하면 현재 선택한 문서 객체의 범위를 확장할 수 있음
$(document).ready(function() { $('h1').css('border','5px solid #333') .add('h3').css('color','blue'); });
'front-end > Javascript & jquery' 카테고리의 다른 글
| [jquery] 문서 객체의 속성 컨트롤 /addClass() / attr() / css() (0) | 2020.12.02 |
|---|---|
| [jquery] innerhtml과 같은 기능 (0) | 2020.12.02 |
| [jquery] 특정태그 선택 / xml 파싱 / $.parseXML() (0) | 2020.12.02 |
| [jquery] 배열관리 / each / addclass (0) | 2020.12.02 |
| [jquery] 기본 (0) | 2020.12.02 |
| [자바스크립트 ] 이벤트 삭제 (0) | 2020.11.30 |
| [자바스크립트] 이벤트 전달 / 막기 (bubbling) / stopPropagation (0) | 2020.11.30 |