반응형
필터링
| 메소드 | 설 명 |
| $(selector).first() | 선택한 요소의 첫 번째 요소를 반환 |
| $(selector).last() | 선택한 요소의 마지막 요소를 반환 |
| $(selector).eq(index) | 선택한 요소 중 index 번째 요소를 반환 |
| $(selector).filter(criteria, function(index)) | 선택한 요소 중 특정 조건(criteria)에 일치하는 요소들을 반환 |
| $(selector).not(criteria, function(index)) | 선택한 요소 중 특정 조건(criteria)에 일치하는 요소를 제거하고 반환 |
| $(selector).is(selectorElement, function(index, element)) | 선택된 요소 중 하나가 selectorElement와 일치하는 지 확인. true 또는 false를 리턴 |
- filter()
1. 선택자 활용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h4>filter(): 선택자, 변수, 함수를 이용해 필터링하는 메소드</h4>
<div id="d1">
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<input type="button" value="filter()">
</div>
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
$('input').on('click', function(){
// 선택자 활용
$('li').filter(':even').css('color', 'red');
$('li').filter(':first-child').css('backgroundColor', 'gray');
});
</script>
</body>
</html>
2. 변수 활용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h4>filter(): 선택자, 변수, 함수를 이용해 필터링하는 메소드</h4>
<div id="d1">
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<input type="button" value="filter()">
</div>
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
$('input').on('click', function(){
// 변수 활용
let a = ':odd'; // 홀수 선택 가상클래스
let b = $('li').eq(3);
$('li').filter(a).css('border', '4px double blue');
$('li').filter(b).css('box-shadow', '4px 4px 2px blue');
});
</script>
</body>
</html>
3. 함수 활용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h4>filter(): 선택자, 변수, 함수를 이용해 필터링하는 메소드</h4>
<div id="d1">
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<input type="button" value="filter()">
</div>
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
$('input').on('click', function(){
// 함수 활용
$('li').filter(function(i, v){
console.log(i, v); // i: 인덱스 / v-li
return i == 0 || i == 3
}).css('color', 'pink');
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h4>filter(): 선택자, 변수, 함수를 이용해 필터링하는 메소드</h4>
<div id="d1">
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<input type="button" value="filter()">
</div>
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
$('input').on('click', function(){
// 함수 활용
/* $('li').filter(function(i, v){
console.log(i, v); // i: 인덱스 / v-li
return i == 0 || i == 3
}).css('color', 'pink'); */
// 위의 함수와 반대되는 결과물
$('li').not(function(i, v){
console.log(i, v); // i: 인덱스 / v-li
return i == 0 || i == 3
}).css('color', 'yellow');
});
</script>
</body>
</html>
- is()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="../js/jquery-3.7.1.min.js"></script>
<h4>is(): 일치여부를 boolean으로 반환</h4>
<div id="d2">
<!-- id = d2 내부 div를 부모로 가진/갖지않은 p요소 -->
<div>
<p>부모(div)있는 p</p>
</div>
<p>부모(div)없는 p</p>
<div>
<p>부모(div)있는 p</p>
</div>
<form id="frm">
<p>부모(form)있는 p</p>
</form>
</div>
<script>
$('p').on('click',function(){
if( $(this).parent().is('#d2 div') ) {
// 해당 부모영역에 스타일 적용
$(this).parent().css('backgroundColor', 'gold');
} else {
// 조건에 맞지 않는 부모의 type과 id 정보를 출력
alert(`부모의 요소 타입은 ${$(this).parent().prop('tagName')} 이고, `
+ `id = ${$(this).parent().attr('id')}` );
}
});
</script>
</body>
</html>
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] 18장 콜백 함수와 체이닝, 동기와 비동기 (1) | 2024.02.27 |
|---|---|
| [jQuery] 17장 효과, 애니메이션 (0) | 2024.02.27 |
| [jQuery] 15장 DOM 탐색 (0) | 2024.02.26 |
| [jQuery] 14장 trigger와 trigger Handler (0) | 2024.02.26 |
| [jQuery] 13장 이벤트 연결 메소드 (0) | 2024.02.23 |