이 기사에서는 DOM 노드를 순회하는 jQuery의 filter() 메서드를 분석하는 예제를 사용합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
.filter(선택기)
이 방법은 일치하는 요소에서 선택기 표현식을 기준으로 필터링하는 데 사용됩니다.
기억하세요: 이 방법을 사용할 때 선택기 표현식 매개변수를 전달해야 합니다. 그렇지 않으면 "'nodeType'이 비어 있거나 객체가 아닙니다."라는 오류가 보고됩니다.
또한 이 필터 메서드와 jquery의 find 메서드 사이의 차이점에 유의하세요.
필터 메소드는 일치하는 요소를 필터링하고, find 메소드는 일치하는 요소의 하위 요소를 필터링합니다.
jquery 버전 1.4부터 필터 메서드에 두 가지 새로운 사용법이 추가되어 이제 총 네 가지 사용법이 있습니다.
이 네 가지 사용법을 자세히 살펴보겠습니다.
1. 필터(선택기)
이 사용법은 주어진 선택기 매개변수(jquery 선택기 표현식)에 따라 일치하는 요소를 필터링한 다음 일치하는 요소를 jquery 요소 컬렉션으로 패키징하고 반환하는 것입니다. 이 방법은 일치 범위를 좁히는 데 사용됩니다. 선택기 매개변수는 쉼표로 연결된 여러 표현식일 수 있습니다.
예제 보기:
HTML 코드:
<ul> <li>11111</li> <li class="item">22222</li> <li>33333</li> <li>44444</li> <li>55555</li> <li>66666</li> <li>77777</li> </ul>
Jquery 코드:
$("ul>li").filter(":even").css("color","red"); //将索引为偶数的li背景变为红色
위 jquery 코드는 다음 jquery 코드와 동일한 효과를 가집니다
$("ul>li:even").css("color","red"); //将索引为偶数的li背景变为红色
쉼표와 연결된 선택기 표현식의 사용을 살펴보겠습니다.
$("ul>li").filter(":even,.item").css("color","blue"); //将索引为偶数和calss为item的li背景变为蓝色
데모 예시는 다음과 같습니다.
<ul> <li>11111</li> <li class="item">22222</li> <li>33333</li> <li>44444</li> <li>55555</li> <li>66666</li> <li>77777</li> </ul> <input type="button" id="test1" value="获取索引为偶数的li"> <input type="button" id="test2" value="获取索引为偶数和calss为item的li"> <script> $(function(){ $("#test1").click(function(){ $("ul>li").filter(":even").css("color","red");//将索引为偶数的li背景变为红色 //这个式子和 $("ul>li:even").css("color","red"); 等效 }); $("#test2").click(function(){ $("ul>li").filter(":even,.item").css("color","blue");//将索引为偶数和calss为item的li背景变为蓝色 }); }); </script>
2.filter( 함수(색인) )
이 사용 방법은 함수(index)에서 반환된 값이 true이면 해당 요소가 선택됩니다. 반환 값이 false이면 해당 요소는 선택되지 않습니다.
index 매개변수는 원본 요소 컬렉션에서 현재 일치하는 요소의 인덱스입니다.
위 설명이 잘 이해가 안 되시는 분들은(제 표현력이 좀 부족하네요~^_^) 아래 예시를 참고하시면 됩니다.
HTML 코드:
<div id="first"></div> <div id="second"></div> <div id="third"></div> <div id="fourth"></div> <div id="fifth"></div> <div id="sixth"></div>
jquery 코드:
$("div").filter(function(index) { return index == 1 || $(this).attr("id") == "fourth"; }).css("border", "5px double blue");
위 코드의 결과는 두 번째 div 요소와 id가 "fourth"인 div 요소의 테두리가 파란색의 이중선 색상이 되는 것입니다
데모 예시는 다음과 같습니다.
<style> div{ width:60px; height:60px; margin:5px; float:left;border:3px white solid;background:#ff0000 } </style> <div id="first"></div> <div id="second"></div> <div id="third"></div> <div id="fourth"></div> <div id="fifth"></div> <div id="sixth"></div> <br><br><br><br><br><br> <input type="button" id="test" value="点击我看看上面的div的变化"> <script> $("#test").click(function(){ $("div").filter(function(index) { return index == 1 || $(this).attr("id") == "fourth"; }).css("border", "5px double blue"); }); </script>
3. 필터( 요소 )
요소 매개변수는 DOM 개체입니다. 요소 DOM 개체와 일치하는 요소가 동일한 요소이면 이 요소가 일치됩니다. 이 사용법은 1.4 버전에 새로 추가된 기능인데 아직 어떤 용도인지는 모르겠습니다
예제 보기:
그래도 위의 HTML 코드를 보면서 jquery 코드를 살펴보세요.
결과적으로 ID가 3번째인 div 요소의 테두리가 변경되었습니다.
이 예는 매우 쓸모가 없습니다. 직접 가는 것이 더 좋습니다:
$("#third").css("border", "5px double blue");
저도 그런 생각이 들긴 하는데 1.4 버전에 새로 추가되었기 때문에 분명 유용할 것이고 쓸모가 없을 것입니다. 단지 제 jquery 수준이 아직 너무 낮아서 아직 발견하지 못했을 뿐입니다. 어떤 독자라도 용도에 대한 아이디어가 있다면 저를 깨우쳐 주실 수 있기를 바랍니다!
데모 예시는 다음과 같습니다.
<style> div{ width:60px; height:60px; margin:5px; float:left;border:3px white solid;background:#ff0000 } </style> <div id="first"></div> <div id="second"></div> <div id="third"></div> <div id="fourth"></div> <div id="fifth"></div> <div id="sixth"></div> <br><br><br><br><br><br> <input type="button" id="test" value="点击我看看上面的div的变化"> <script> $("#test").click(function(){ $("div").filter(document.getElementById("third")).css("border", "5px double blue"); }); </script>
4.filter(jQuery 개체)
이 사용법은 위의 .filter(element) 사용법과 유사합니다. 단, 한 매개변수는 DOM 개체이고 다른 매개변수는 jquery 개체라는 점만 다릅니다.
예 보기:
위의 동일한 HTML 코드에 대해서는 jquery 코드를 살펴보세요.
$("div").filter($("#third")).css("border", "5px double blue");
결과적으로 ID가 3번째인 div 요소의 테두리가 변경되었습니다.
다음 jquery 코드를 직접 사용하는 것이 더 좋습니다.
$("#third").css("border", "5px double blue");
데모 예시는 다음과 같습니다.
<style> div{ width:60px; height:60px; margin:5px; float:left;border:3px white solid;background:#ff0000 } </style> <div id="first"></div> <div id="second"></div> <div id="third"></div> <div id="fourth"></div> <div id="fifth"></div> <div id="sixth"></div> <br><br><br><br><br><br> <input type="button" id="test" value="点击我看看上面的div的变化"> <script> $("#test").click(function(){ $("div").filter($("#third")).css("border", "5px double blue"); }); </script>
더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자들은 이 사이트에서 특별한 주제를 확인할 수 있습니다: "JQuery 순회 알고리즘 및 기술 요약", "jQuery 테이블(테이블) 작업 기술 요약 " , "jQuery 드래그 효과 및 기법 요약", "jQuery 확장 기법 요약", "jQuery 공통 클래식 특수 효과 요약" , "jQuery 애니메이션 및 특수 효과 사용 요약", "jquery 선택기 사용 요약" 및 "jQuery 일반 플러그인 및 사용 요약"
이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.