Jquery의 순회 방법은 무엇입니까?
- 青灯夜游원래의
- 2023-03-15 13:59:452098검색
순회 메서드는 다음과 같습니다. 1. 일치하는 요소 집합에 요소를 추가하는 데 사용되는 add() 2. 선택한 요소의 모든 직접 하위 요소를 반환하는 데 사용되는 children() 선택한 요소의 첫 번째 조상 요소 4. 선택한 요소의 모든 직접 하위 요소를 반환하는 데 사용됩니다. 5. 일치하는 각 요소에 대해 함수를 실행하는 데 사용됩니다. .find(); 9. first(); 10. is();
이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6 버전, Dell G3 컴퓨터.
jQuery 순회 방법 요약
jQuery 순회 기능에는 요소 필터링, 찾기 및 연결을 위한 방법이 포함되어 있습니다.
| Method | Description |
|---|---|
| add() | 일치하는 요소 집합에 요소 추가 |
| addBack() | 이전 요소 집합을 현재 집합에 추가 |
| 앤셀프 () | 버전 1.8에서는 더 이상 사용되지 않습니다. addBack() |
| children() | 의 별칭은 선택한 요소의 모든 직계 자식을 반환합니다 |
| closest() | 선택한 요소의 첫 번째 조상을 반환합니다 |
| contents() | 선택한 요소의 모든 직계 하위 요소 반환(텍스트 및 주석 노드 포함) |
| each() | 일치하는 각 요소에 대해 함수 실행 |
| end() | 현재에서 가장 최근 요소 종료 체인 필터 연산을 수행하고 일치하는 요소 집합을 이전 상태로 되돌립니다. |
| eq() | 선택한 요소의 지정된 인덱스 번호를 가진 요소를 반환합니다. |
| filter() | 일치하는 요소 집합을 줄입니다. 선택기 또는 일치 함수의 반환 값과 일치하는 새 요소 |
| find() | 선택한 요소의 하위 요소를 반환 |
| first() | 선택한 요소의 첫 번째 요소를 반환 |
| has () | 내부에 하나 이상의 요소가 있는 모든 요소를 반환합니다. |
| is() | 선택기/요소/jQuery 개체를 기반으로 일치하는 요소 집합을 확인하고 최소한 하나라도 있으면 true를 반환합니다. 일치하는 요소 하나 |
| last() | 선택한 요소의 마지막 요소를 반환합니다 |
| map() | 현재 일치 집합의 각 요소를 함수에 전달하고 반환 값을 포함하는 새 jQuery 객체를 생성합니다. |
| next() | 선택한 요소의 다음 형제 요소를 반환합니다. |
| nextAll() | 선택한 요소 뒤의 모든 형제 요소를 반환합니다. |
| nextUntil() | 주어진 두 요소 사이의 값을 반환합니다. 요소 매개변수 사이의 각 요소 뒤의 모든 형제 요소 |
| not() | 일치하는 요소 집합에서 요소를 제거합니다. |
| offsetParent() | 첫 번째 위치에 있는 상위 요소를 반환합니다. |
| parent() | 선택한 요소의 직접 상위 요소를 반환합니다. |
| parents() | 선택한 요소의 모든 상위 요소를 반환합니다. |
| parentsUntil() | 주어진 두 매개변수 사이의 값을 반환합니다. | 의 모든 상위 요소
| prev() | 선택한 요소의 이전 형제 요소를 반환합니다. |
| prevAll() | 선택한 요소 이전의 모든 형제 요소를 반환합니다. |
| prevUntil() | 각 요소 이전의 모든 형제 요소를 반환합니다. 주어진 두 매개변수 사이 |
| siblings() | 선택한 요소의 모든 형제 요소를 반환합니다. |
| slice() | 일치 요소 집합이 지정된 범위의 하위 집합으로 축소됩니다 |
하위 요소를 순회하는 두 가지 방법
children() 방법: 이 요소 아래의 직접 하위 집합 요소를 가져옵니다.
-
find() 방법: 이 요소 아래의 모든(하위 집합의 하위 집합 포함) 하위 집합 요소를 가져옵니다.
차이점:
children() 메서드는 선택한 요소의 모든 직접 하위 요소를 반환합니다(직접 하위 요소, 손자는 검색하지 않고 아들만 찾습니다(즉, 재귀 순회 없음).
find() 메소드는 현재 요소 컬렉션에 있는 각 요소의 자손을 얻습니다(find() 메소드의 경우 매개변수를 전달해야 합니다. 그렇지 않으면 유효하지 않습니다)
예: 모든 하위 요소 쿼리
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<style>
div * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("button").on("click", function() {
$("ul").find("*").css({
"color": "red",
"border": "2px solid red"
});
});
});
</script>
</head>
<body class="ancestors">
<div style="width:500px;">div (父节点)
<ul>ul (指定元素)
<li>li (子节点1)
<span>span (孙节点1)</span>
</li>
<li>li (子节点2)
<span>span (孙节点2)</span>
</li>
<li>li (子节点3)
<span>span (孙节点3)</span>
</li>
</ul>
</div>
<button>选取ul的所有子元素</button>
</body>
</html>
7가지 방법 형제 요소 탐색 방법:
siblings() 메서드, 주로 지정된 요소의 동일한 수준에 있는 모든 요소를 얻는 데 사용됩니다.
next() 메서드, 주로 지정된 요소의 다음 형제 요소를 얻는 데 사용됩니다. 요소
nextAll() 메서드는 주로 지정된 요소의 다음 형제 요소를 가져오는 데 사용됩니다.
nextUntil() 메서드는 주로 지정된 요소의 다음 형제 요소를 가져오는 데 사용됩니다. 지정된 요소의 nextUntil과 동일해야 합니다. () 메서드
prev() 메서드로 설정된 요소 사이의 요소로, 주로 지정된 요소
prevAll(의 상위 수준 형제 요소를 가져오는 데 사용됩니다. ) 메소드, 주로 지정된 요소의 상위 요소를 가져오는 데 사용됩니다. 모든 형제 요소
prevUntil() 메소드는 주로 지정된 요소의 이전 형제 요소를 가져오는 데 사용됩니다. 이 형제 요소는 지정된 요소 사이의 요소여야 합니다. prevUntil() 메소드
siblings() 메소드
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>
$("p").siblings(".selected").css("background", "yellow");
</script>
</body>
</html>
next() 메소드
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li.third-item').next().css('background-color', 'red'); </script> </body> </html>
nextAll() 메소드
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li.third-item').nextAll().css('background-color', 'red'); </script> </body> </html>
nextUntil() 메소드에 의해 설정된 요소
아아아아
prev() 메서드
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").nextUntil("li.stop").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
<li class="start">li (类名为"start"的兄弟节点)</li>
<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
<li class="stop">li (类名为"stop"的兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。</p>
</body>
</html>
prevAll() 메서드
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prev().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
</body>
</html>
prevUntil() 메서드
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prevAll().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (parent)
<li>li (类名为"start"的li的上一个兄弟节点)</li>
<li>li (类名为"start"的li的上一个兄弟节点)</li>
<li>li (类名为"start"的li的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。</p>
</body>
</html>
each() 및 map() 메서드는 순회할 수 있습니다. 배열
Each() 배열 탐색
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prevUntil("li.stop").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li class="stop">li (类名为"stop"的兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。</p>
</body>
</html>
map() 배열 탐색
<script>
var arr = [1,3,5,7,9];
var obj = {0:1,1:3,2:5,3:7,4:9};
/**
* 利用jQuery的each静态方法遍历
* 第一个参数：当前遍历到的索引
* 第二个元素：遍历到的元素
* 注意：jQuery的each方法可以遍历伪数组
*/
$.each(arr,function(index,value){
console.log("jQuery-each方法遍历数组：",index,value);
})
$.each(obj,function(index,value){
console.log("jQuery-each方法遍历伪数组：",index,value);
})
</script>
확장 지식: Each 사용법
1. 배열의 각
rrre 에에2. Dom 요소 순회
<script>
var arr = [1,3,5,7,9];
var obj = {0:1,1:3,2:5,3:7,4:9};
/**
*1.利用原生JS的map方法遍历
*第一个参数：遍历到的元素
*第二个参数：当前遍历到的索引
*第三个参数：当前被遍历的数组
*注意：和原生的forEach方法一样，不能遍历伪数组
*/
arr.map(function(value,index,array){
console.log("原生map遍历数组:",index,value,array);
});
/**
obj.map(function(value,index,array){
console.log("原生map遍历伪数组:",index,value,array);
//Uncaught TypeError: obj.forEach is not a function
});
*/
/**
* 2.利用jQuery的each静态方法遍历
* 第一个参数：要遍历的数组
* 每遍历一个元素之后执行的回调函数
* 回调函数的参数：
* 第一个参数：遍历到的元素
* 第二个元素：当前遍历到的索引
* 注意：和jQuery的each方法一样可以遍历伪数组
*/
$.map(arr,function(value,index){
console.log("jQuery-map方法遍历数组：",index,value);
})
$.map(obj,function(value,index){
console.log("jQuery-map方法遍历伪数组：",index,value);
})
</script>커피, 우유, 소다
3. 각각의 비교와 맵
다음 예는 각 멀티의 ID 값을 얻는 것입니다. -box;
각 방법:
각 방법을 통해 빈 배열을 정의하고, 마지막으로 배열을 문자열로 변환한 후 이 값을 경고합니다. 메소드:
각각 실행: this.id를 반환하는 확인란을 선택하고 이러한 반환 값을 반환합니다. 자동으로 jQuery 객체로 저장한 다음 get 메소드를 사용하여 기본 Javascript 배열로 변환한 다음 Join 메소드를 사용하여 문자열로 변환하고 마지막으로 값을 알려줍니다.
复制代码
var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
});
//上面这个each输出的结果分别为：one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其实arr1为一个二维数组，item相当于取每一个一维数组，
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为：1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(i) {
alert(obj[i]);
});
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1 2 3 4배열 값이 필요한 경우 map을 사용하는 방법이 매우 편리합니다.
4. 요소 인덱스와 콘텐츠를 모두 사용하여 jquery에서 Each
를 사용하여 배열을 탐색합니다. (i는 인덱스, n은 내용) 코드는 다음과 같습니다.
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>멤버 이름과 변수 내용을 모두 사용하여 객체를 예시합니다. (i는 멤버 이름, n은 변수 내용)
코드는 다음과 같습니다.
$(function(){
var arr = [];
$(":checkbox").each(function(index){
arr.push(this.id);
});
var str = arr.join(",");
alert(str);
})dom 요소 순회 예, 여기서는 입력 양식 요소를 예로 사용합니다.
돔에 이와 같은 코드가 있는 경우
$(function(){
var str = $(":checkbox").map(function() {
return this.id;
}).get().join();
alert(str);
}) 그런 다음 각각을 다음과 같이 사용합니다. $.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});5 각 항목에서 이를 기반으로 요소를 찾습니다.
实现效果”回复”两个字只有在鼠标经过的时候才显示出来
<ol class="commentlist">
<li class="comment">
<div class="comment-body">
<p>嗨，第一层评论</p>
<div class="reply">
<a href="#" class=".comment-reply-link">回复</a>
</div>
</div>
<ul class="children">
<li class="comment">
<div class="comment-body">
<p>第二层评论</p>
<div class="reply">
<a href="#" class=".comment-reply-link">回复</a>
</div>
</div></li>
</ul>
</li>
</ol>js代码如下
$("div.reply").hover(function(){
$(this).find(".comment-reply-link").show();
},function(){
$(this).find(".comment-reply-link").hide();
});
实现效果，验证判断题是否都有选择
html
<ul id="ulSingle">
<li class="liStyle">
1. 阿斯顿按时<label id="selectTips" style="display: none" class="fillTims">请选择</label>
<!--begin选项-->
<ul>
<li class="liStyle2">
<span id="repSingle_repSingleChoices_0_labOption_0">A </span>.阿萨德发<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl00$hidID" id="repSingle_repSingleChoices_0_hidID_0" value="1" />
<input id="repSingle_repSingleChoices_0_cheSingleChoice_0" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl00$cheSingleChoice" /></li>
<li class="liStyle2">
<span id="repSingle_repSingleChoices_0_labOption_1">B </span>.阿萨德发<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl01$hidID" id="repSingle_repSingleChoices_0_hidID_1" value="2" />
<input id="repSingle_repSingleChoices_0_cheSingleChoice_1" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl01$cheSingleChoice" /></li>
<li class="liStyle2">
<span id="repSingle_repSingleChoices_0_labOption_2">C </span>.阿斯顿<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl02$hidID" id="repSingle_repSingleChoices_0_hidID_2" value="3" />
<input id="repSingle_repSingleChoices_0_cheSingleChoice_2" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl02$cheSingleChoice" /></li>
</ul>
<!--end选项-->
<br />
</li>
</ul>js代码
//验证单选题是否选中
$("ul#ulSingle>li.liStyle").each(function (index) {
//选项个数
var count = $(this).find("ul>li>:checkbox").length;
var selectedCount = 0
for (var i = 0; i < count; i++) {
if ($(this).find("ul>li>:checkbox:eq(" + i + ")").attr("checked")) {
selectedCount++;
break;
}
}
if (selectedCount == 0) {
$(this).find("label#selectTips").show();
return false;
}
else {
$(this).find("label#selectTips").hide();
}
})ps:传说中attr("property", "value");在部分浏览器中不管用可以用prop，如果只是判断可以用$(this).find("ul>li>:checkbox:eq(" + i + ")").is(":checked");
6.官方解释
以下是官方的解释：
jQuery.each(object, [callback])
概述
通用例遍方法，可用于例遍对象和数组。
不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
参数
objectObject ：需要例遍的对象或数组。
callback (可选)Function ：每个成员/元素执行的回调函数。
【推荐学习：jQuery视频教程、web前端视频】
위 내용은 Jquery의 순회 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jquery 포커스 이벤트란 무엇입니까?다음 기사：jquery 포커스 이벤트란 무엇입니까?