Rumah > Artikel > hujung hadapan web > Apakah kaedah carian jquery?
Apakah kaedah carian jquery?
- 青灯夜游asal
- 2023-01-28 13:56:252154semak imbas
Kaedah carian ialah: 1. ibu bapa(), yang boleh mencari unsur induk bagi unsur semasa 2. ibu bapa(), yang boleh mencari unsur nenek moyang unsur semasa; , yang boleh mencari anak-anak unsur semasa; (); 9. nextUntil(); 10. prev( );
Persekitaran pengendalian tutorial ini: sistem windows7, versi jquery3.6, komputer Dell G3.
Untuk mengendalikan elemen dengan lebih fleksibel, sebagai tambahan kepada pemilih, jQuery juga menyediakan kami dengan dua cara dalam bentuk "kaedah": satu ialah "kaedah penapis"; Kaedah penapisan dan kaedah carian sebenarnya adalah tambahan kepada pemilih jQuery.
Kaedah penapisan merujuk kepada penapisan lanjut elemen yang dipilih. Kaedah carian terutamanya menggunakan elemen yang dipilih pada masa ini sebagai titik asas untuk mencari elemen induk, elemen anak atau unsur adik-beradik elemen ini.
Dalam jQuery, untuk kaedah carian, kita boleh membahagikannya kepada 3 situasi berikut.
Cari unsur nenek moyang
Cari unsur keturunan
Cari unsur adik beradik
jQuery Mencari Elemen Leluhur
Dalam jQuery, jika anda ingin mencari elemen nenek moyang elemen semasa (elemen induk, elemen induk , dsb.), kami mempunyai 3 kaedah berikut.
(1) ibu bapa()
(2) ibu bapa()
(3 ) parentsUntil()
1 parent()
Dalam jQuery, kita boleh menggunakan kaedah parent() untuk mencari " elemen induk. ". Ambil perhatian bahawa elemen hanya mempunyai satu elemen induk.
Sintaks:
$.parent(selector)
Penerangan:
pemilih ialah parameter pilihan, iaitu pemilih yang digunakan untuk mencari elemen induk yang memenuhi syarat. Apabila parameter ditinggalkan, ini bermakna elemen induk tidak perlu memenuhi sebarang syarat; apabila parameter tidak ditinggalkan, ia bermakna elemen induk tidak perlu memenuhi syarat.
Contoh: induk() tanpa parameter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table, tr, td{border:1px solid silver;}
td
{
width:40px;
height:40px;
line-height:40px;
text-align:center;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("td").hover(function () {
$(this).parent().css("background-color", "silver");
}, function () {
$(this).parent().css("background-color", "white");
})
})
</script>
</head>
<body>
<table>
<tr>
<td>2</td>
<td>4</td>
<td>8</td>
</tr>
<tr>
<td>16</td>
<td>32</td>
<td>64</td>
</tr>
<tr>
<td>128</td>
<td>256</td>
<td>512</td>
</tr>
</table>
</body>
</html>Secara lalai, kesan pratonton adalah seperti yang ditunjukkan di bawah.
Apabila tetikus bergerak ke atas sel tertentu, kesan pratonton adalah seperti yang ditunjukkan di bawah.
Analisis:
$(this).parent() bermaksud memilih elemen induk (tr) unsur td semasa, tetapi elemen induk ( jadual) tidak akan dipilih.
Contoh: parent() dengan parameter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table, tr, td{border:1px solid silver;}
td
{
width:40px;
height:40px;
line-height:40px;
text-align:center;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("td").hover(function () {
$(this).parent(".select").css("background-color", "silver")
}, function () {
$(this).parent(".select").css("background-color", "white")
})
})
</script>
</head>
<body>
<table>
<tr>
<td>2</td>
<td>4</td>
<td>8</td>
</tr>
<tr class="select">
<td>16</td>
<td>32</td>
<td>64</td>
</tr>
<tr>
<td>128</td>
<td>256</td>
<td>512</td>
</tr>
</table>
</body>
</html>Secara lalai, kesan pratonton adalah seperti yang ditunjukkan di bawah.
Apabila tetikus bergerak ke atas elemen td class="select", kesan pratonton adalah seperti yang ditunjukkan di bawah.
Analisis:
$(this).parent(".select") bermaksud memilih elemen induk (tr) unsur td semasa dan elemen induk mesti mengandungi nama kelas " pilih".
2. ibu bapa()
Dalam jQuery, kita boleh menggunakan kaedah ibu bapa() untuk mencari "elemen nenek moyang" elemen semasa. Ambil perhatian bahawa unsur boleh mempunyai berbilang unsur nenek moyang
Dua kaedah parent() dan parents() mudah dibezakan. Antaranya, parent() ialah nombor tunggal, jadi hanya ada satu elemen yang perlu dicari, iaitu elemen induk. parents() ialah nombor jamak, jadi terdapat berbilang unsur yang perlu dicari, iaitu semua unsur nenek moyang (termasuk unsur induk, unsur datuk, dll.).
Sintaks:
$().parents(selector)
Penerangan:
pemilih ialah parameter pilihan, iaitu pemilih yang digunakan untuk mencari unsur nenek moyang yang memenuhi syarat. Apabila parameter ditiadakan, ia bermakna unsur nenek moyang tidak perlu memenuhi sebarang syarat;
Contoh: Cari semua unsur nenek moyang
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var parents = $("span").parents();
var result = [];
$.each(parents, function(){
var item = this.tagName.toLowerCase();
result.push(item);
});
console.log(result.join(","));
})
</script>
</head>
<body>
<div>
<p>
<strong>
<span>绿叶学习网</span>
</strong>
</p>
</div>
</body>
</html>Output konsol adalah seperti yang ditunjukkan di bawah.
Analisis:
("span").parents() mengembalikan koleksi objek jQuery Dalam contoh ini, kami menggunakan .each() untuk melintasi elemen span All ancestor elemen. Untuk kaedah .each(), kami akan memperkenalkannya secara terperinci dalam bab seterusnya. Sesetengah rakan akan bertanya: "Untuk mendapatkan nama tag bagi elemen, bukankah anda patut menggunakan (ini).tagName? Mengapa this.tagName digunakan di sini
$(this) ialah objek jQuery , yang memanggil kaedah atau sifat jQuery, seperti klik(), keyup(), dsb. ini ialah objek DOM, yang memanggil kaedah atau sifat objek DOM, seperti this.id, this.value, dsb. Memandangkan atribut tagName tergolong dalam objek DOM, kami menggunakan this.tagName di sini.
3、parentsUntil()
在jQuery中，parentsUntil()方法是parents()方法的一个补充，它可以查找“指定范围”的所有祖先元素，相当于在parents()方法返回的集合中截取一部分。
语法：
$().parentsUntil(selecotr)
说明：
selector是一个可选参数，它是一个选择器，用来选择符合条件的祖先元素。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var parents = $("span").parentsUntil("div");
var result = [];
$.each(parents, function(){
var item = this.tagName.toLowerCase();
result.push(item);
});
console.log(result.join(","));
})
</script>
</head>
<body>
<div>
<p>
<strong>
<span>绿叶学习网</span>
</strong>
</p>
</div>
</body>
</html>控制台输出结果如下图所示。
分析：
在实际开发中，我们一般只会用到parent()方法和parents()这两个，极少用到parentsUntil()。因此对于parentsUntil()方法，我们了解一下就行。
jQuery查找后代元素
在jQuery中，如果想要查找当前元素的后代元素（子元素、孙元素等），我们有以下3种方法：
- （1）children()
- （2）find()
- （3）contents()
1、children()
在jQuery中，我们可以使用children()方法来查找当前元素的“子元素”。注意，children()方法只能查找子元素，不能查找其他后代元素。
语法：
$().children(selector)
说明：
selector是一个可选参数，它是一个选择器，用来查找符合条件的子元素。当参数省略，表示选择所有子元素；当参数不省略时，表示选择符合条件的子元素。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style lang="">
p{margin:6px 0;}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("#wrapper").hover(function(){
$(this).children(".select").css("color", "red");
},function(){
$(this).children(".select").css("color", "black");
})
})
</script>
</head>
<body>
<div id="wrapper">
<p>子元素</p>
<p>子元素</p>
<div>
<p>孙元素</p>
<p>孙元素</p>
</div>
<p>子元素</p>
<p>子元素</p>
</div>
</body>
</html>默认情况下，预览效果如下图所示。
当鼠标移到id="wrapper"的div元素上面，此时预览效果如下图所示。
分析：
$(this).children(".select")表示获取当前元素下的class="select"的子元素。我们可以发现，class="select"的孙元素却不会被选中。
2、find()
在jQuery中，我们可以使用find()方法来查找当前元素的“后代元素”。注意，find()方法不仅能查找子元素，还能查找其他后代元素。
语法：
$().find(selector)
说明：
selector是一个可选参数，它是一个选择器，用来查找符合条件的后代元素。当参数省略，表示选择所有后代元素；当参数不省略时，表示选择符合条件的后代元素。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style lang="">
p{margin:6px 0;}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("#wrapper").hover(function(){
$(this).find(".select").css("color", "red");
},function(){
$(this).find(".select").css("color", "black");
})
})
</script>
</head>
<body>
<div id="wrapper">
<p>子元素</p>
<p>子元素</p>
<div>
<p>孙元素</p>
<p>孙元素</p>
</div>
<p>子元素</p>
<p>子元素</p>
</div>
</body>
</html>默认情况下，预览效果如下图所示。
当鼠标移到id="wrapper"的div元素上面，此时预览效果如下图所示。
分析：
$(this).find(".select")表示不仅会选取当前元素下的class="select"的子元素，还会选取class="select"的孙元素。
3、contents()
在jQuery中，我们可以使用contents()方法来获取子元素及其内部文本。contents()方法和children()方法相似，不同的是，contents()返回的jQuery对象中不仅包含子元素，还包含文本内容。而children()方法返回的jQuery对象中只会包含子元素，不包含文本内容。
在实际开发中，我们极少会用到contents()方法，因此小伙伴们不需要深入了解，这里简单认识一下即可。
jQuery查找兄弟元素
兄弟元素，指的是该元素在同一个父元素下的同级元素。
在jquery中，查询同级元素一般有七个方法：siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()
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()方法
<!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>
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").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>
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").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>
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").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>
【推荐学习：jQuery视频教程、web前端视频】
Atas ialah kandungan terperinci Apakah kaedah carian jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Artikel berkaitan
Lihat lagi- Apakah peristiwa yang biasa digunakan dalam jquery
- Bagaimana untuk mengubah suai nilai atribut elemen anak dalam jquery
- Bagaimana untuk memadam elemen saudara dalam jquery
- Apakah fail js yang diperlukan oleh jquery?
- Apakah kaedah yang digunakan untuk memanipulasi kandungan elemen dalam jquery
- Apakah kaedah objek matematik dalam jquery