| Methode |
Beschreibung |
| add() |
Elemente zum Satz übereinstimmender Elemente hinzufügen |
| addBack() |
Vorherigen Satz von Elementen zum aktuellen Satz hinzufügen |
| und Selbst () |
ist in Version 1.8 veraltet. Alias von addBack() |
| children() |
Gibt alle direkten Kinder des ausgewählten Elements zurück |
| closest() |
Gibt den ersten Vorfahren des ausgewählten Elements zurück |
| contents() | Alle direkten untergeordneten Elemente des ausgewählten Elements zurückgeben (einschließlich Text- und Kommentarknoten) |
| each() |
Führen Sie die Funktion für jedes übereinstimmende Element aus. |
| end() |
Beenden Sie das aktuellste Verketten Sie den Filtervorgang und bringen Sie den Satz übereinstimmender Elemente in den vorherigen Zustand zurück. |
| eq() |
Gibt das Element mit der angegebenen Indexnummer des ausgewählten Elements zurück to Ein neues Element, das mit dem Rückgabewert des Selektors oder der passenden Funktion übereinstimmt. |
| find() |
Gibt das untergeordnete Element des ausgewählten Elements zurück. |
| first() |
Gibt das erste Element des ausgewählten Elements zurück |
has ()
| Gibt alle Elemente zurück, die ein oder mehrere Elemente enthalten. |
|
is()
| Überprüft den Satz übereinstimmender Elemente basierend auf dem Selektor-/Element-/jQuery-Objekt und gibt true zurück, wenn mindestens ein Element vorhanden ist ein passendes Element | |
last()
| Gibt das letzte Element des ausgewählten Elements zurück |
|
map()
| Übergeben Sie jedes Element im aktuellen passenden Satz an die Funktion und generieren Sie ein neues jQuery-Objekt, das den Rückgabewert enthält |
|
next()
| Gibt das nächste gleichgeordnete Element des ausgewählten Elements zurück |
|
nextAll()
| Gibt alle gleichgeordneten Elemente nach dem ausgewählten Element zurück |
|
nextUntil()
| Gibt den Wert zwischen zwei angegebenen zurück elements Alle Geschwisterelemente nach jedem Element zwischen den Parametern |
|
not()
| Entfernt das Element aus der Menge der übereinstimmenden Elemente |
|
offsetParent()
| Gibt das erste positionierte übergeordnete Element zurück |
|
parent()
| Gibt das direkte übergeordnete Element des ausgewählten Elements zurück. |
|
parents()
| Gibt alle Vorgängerelemente des ausgewählten Elements zurück. |
|
parentsUntil()
| Gibt den Wert zwischen den beiden angegebenen Parametern zurück. Alle Vorgängerelemente von | |
prev()
| Gibt das vorherige Geschwisterelement des ausgewählten Elements zurück |
|
prevAll()
| Gibt alle Geschwisterelemente vor dem ausgewählten Element zurück |
|
prevUntil() | Gibt alle Geschwisterelemente vor jedem Element zurück zwischen den beiden angegebenen Parametern |
|
siblings()
| Gibt alle Geschwisterelemente des ausgewählten Elements zurück |
|
slice()
| Match Die Menge der Elemente wird auf eine Teilmenge des angegebenen Bereichs reduziert |
|
Zwei Methoden zum Durchlaufen von untergeordneten Elementen
children()-Methode: Holen Sie sich die direkten Teilmengenelemente unter diesem Element
-
find()-Methode: Holen Sie sich alle (einschließlich Teilmengen von Teilmengen) unter diesem Element) Teilmengenelemente
Unterschied:
children()-Methode gibt alle direkten untergeordneten Elemente des ausgewählten Elements zurück (direkte untergeordnete Elemente, sucht nur nach Söhnen und nicht nach Enkelkindern (d. h. keine rekursive Durchquerung)
Die find() Die Methode ruft die Nachkommen jedes Elements in der aktuellen Elementsammlung ab (beachten Sie, dass für die find()-Methode Parameter übergeben werden müssen, sonst ist sie ungültig)
Beispiel: Alle untergeordneten Elemente abfragen
<!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 Arten Methode zum Durchlaufen von Geschwisterelementen:
siblings()-Methode, die hauptsächlich zum Abrufen aller Elemente derselben Ebene des angegebenen Elements verwendet wird.
next()-Methode, die hauptsächlich zum Abrufen des nächsten Geschwisterelements des angegebenen Elements verwendet wird Element
nextAll()-Methode, die hauptsächlich zum Abrufen aller Elemente des nächsten Geschwisterelements des angegebenen Elements verwendet wird.
nextUntil()-Methode, die hauptsächlich zum Abrufen des nächsten Geschwisterelements des angegebenen Elements verwendet wird Das Element muss mit dem angegebenen Element und dem angegebenen Element identisch sein nextUntil Die Elemente zwischen den Elementen, die durch die ()-Methode festgelegt werden
prev() Methode, wird hauptsächlich verwendet, um die Geschwisterelemente der oberen Ebene des angegebenen Elements zu erhalten
-
prevAll( )-Methode, die hauptsächlich zum Abrufen der oberen Ebene des angegebenen Elements verwendet wird. Alle Geschwisterelemente. Die prevUntil()-Methode wird hauptsächlich zum Abrufen des vorherigen Geschwisterelements des angegebenen Elements verwendet. Dieses Geschwisterelement muss das Element zwischen dem angegebenen Element sein und das durch die prevUntil()-Methode festgelegte Element.
siblings()-Methode
-
next()-Methode Until()-Methode
<!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>
prev()-Methode
<!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>
prevAll()-Methode 
<!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>
prevUntil()-Methode 
<!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>
each()- und map()-Methoden können Durchqueren Sie das Array
every() durchläuft das Array <!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>
map() durchläuft das Array<!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>
Erweiterte Kenntnisse: Verwendung von every
1. jedes im Array
<!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>
2. Durchqueren Sie das Dom-Element -box; 
jede Methode: Definieren Sie ein leeres Array, fügen Sie den ID-Wert zum Array hinzu und geben Sie den Wert bekannt; Methode:
Führen Sie jedes aus: Kontrollkästchen, um this.id zurückzugeben und diese Rückgabewerte zurückzugeben. Speichern Sie es automatisch als jQuery-Objekt, konvertieren Sie es dann mit der Get-Methode in ein natives Javascript-Array und verwenden Sie dann die Join-Methode Konvertieren Sie es in eine Zeichenfolge und geben Sie schließlich den Wert an.
<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>
Wenn Sie einen Array-Wert benötigen, verwenden Sie die Methode „map“.
4. Verwenden Sie every
in jquery, um das Array zu durchlaufen und dabei sowohl den Elementindex als auch den Inhalt zu verwenden. (i ist der Index, n ist der Inhalt) Der Code lautet wie folgt:
<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>Beispiel für das Objekt, wobei sowohl Mitgliedsnamen als auch Variableninhalte verwendet werden. (i ist der Mitgliedsname, n ist der Variableninhalt) Der Code lautet wie folgt:
复制代码
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 4Beispiel für das Durchlaufen von Dom-Elementen, hier wird ein Eingabeformularelement als Beispiel verwendet. Wenn Sie einen Code wie diesen in Ihrem Dom haben
<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> Dann verwenden Sie jeden wie folgt
Der Code lautet wie folgt: $(function(){
var arr = [];
$(":checkbox").each(function(index){
arr.push(this.id);
});
var str = arr.join(",");
alert(str);
})5. Suchen Sie in jedem nach Elementen
实现效果”回复”两个字只有在鼠标经过的时候才显示出来
<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，其它返回值将被忽略。
参数
【推荐学习：jQuery视频教程、web前端视频】
