기본 필터 메서드 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 |