溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細(xì)介紹“jquery查找方法怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“jquery查找方法怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。
查找方法有：1、parent()，可查找當(dāng)前元素的父元素；2、parents()，可查找當(dāng)前元素的祖先元素；3、children()，可查找當(dāng)前元素的子元素；4、find()，可查找當(dāng)前元素的后代元素；5、contents()；6、siblings()；7、next()；8、nextAll()；9、nextUntil()；10、prev()；11、prevUntil()等等。
為了更靈活地操作元素，除了選擇器之外，jQuery還為我們提供了以“方法”形式存在的兩種方式：一種是“過濾方法”；另外一種是“查找方法”。過濾方法和查找方法，其實(shí)就是對(duì)jQuery選擇器的一種補(bǔ)充。
過濾方法，指的是對(duì)所選元素進(jìn)一步地篩選。查找方法，主要是以當(dāng)前所選元素為基點(diǎn)，找到這個(gè)元素的父元素、子元素或兄弟元素。
在jQuery中，對(duì)于查找方法，我們可以分為以下3種情況。
查找祖先元素
查找后代元素
查找兄弟元素
jQuery查找祖先元素
在jQuery中，如果想要查找當(dāng)前元素的祖先元素（父元素、爺元素等），我們有以下3種方法。
（1）parent()
（2）parents()
（3）parentsUntil()
1、parent()
在jQuery中，我們可以使用parent()方法來查找當(dāng)前元素的“父元素”。注意，元素只有一個(gè)父元素。
語法：
$.parent(selector)
說明：
selector是一個(gè)可選參數(shù)，它是一個(gè)選擇器，用來查找符合條件的父元素。當(dāng)參數(shù)省略，表示父元素不需要滿足任何條件；當(dāng)參數(shù)不省略時(shí)，表示父元素需要滿足條件。
舉例：不帶參數(shù)的parent()
<!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>
默認(rèn)情況下，預(yù)覽效果如下圖所示。
當(dāng)鼠標(biāo)移到某一個(gè)單元格上面時(shí)，此時(shí)預(yù)覽效果如下圖所示。
分析：
$(this).parent()表示選取當(dāng)前td元素的父元素（tr），但是爺元素（table）不會(huì)被選中。
舉例：帶參數(shù)的parent()
<!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>
默認(rèn)情況下，預(yù)覽效果如下圖所示。
當(dāng)鼠標(biāo)移到class="select"的td元素上時(shí)，此時(shí)預(yù)覽效果如下圖所示。
分析：
$(this).parent(".select")表示選取當(dāng)前td元素的父元素（tr），并且父元素必須含有類名“select”。
2、parents()
在jQuery中，我們可以使用parents()方法來查找當(dāng)前元素的“祖先元素”。注意，元素可以有多個(gè)祖先元素
parent()和parents()這兩個(gè)方法很好區(qū)分。其中，parent()是單數(shù)，因此查找的元素只有一個(gè)，那就是父元素。parents()是復(fù)數(shù)，因此查找的元素有多個(gè)，那就是所有的祖先元素（包括父元素、爺元素等）。
語法：
$().parents(selector)
說明：
selector是一個(gè)可選參數(shù)，它是一個(gè)選擇器，用來查找符合條件的祖先元素。當(dāng)參數(shù)省略，表示祖先元素不需要滿足任何條件；當(dāng)參數(shù)不省略時(shí)，表示祖先元素需要滿足條件。
舉例：查找所有祖先元素
<!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>綠葉學(xué)習(xí)網(wǎng)</span>
</strong>
</p>
</div>
</body>
</html>
控制臺(tái)輸出結(jié)果如下圖所示。
分析：
("span").parents()返回的是一個(gè)jQuery對(duì)象集合，在這個(gè)例子中，我們使用.each()來遍歷span元素的所有祖先元素。對(duì)于.each()方法，我們?cè)诤罄m(xù)章節(jié)會(huì)詳細(xì)介紹。有些小伙伴們就會(huì)問了：“獲取元素的標(biāo)簽名，不是應(yīng)該使用(this).tagName嗎？為什么這里使用的是this.tagName呢？”
$(this)是jQuery對(duì)象，它調(diào)用的是jQuery的方法或?qū)傩?，例如click()、keyup()等。this是DOM對(duì)象，它調(diào)用的是DOM對(duì)象的方法或?qū)傩?，例如this.id、this.value等。由于tagName屬性是屬于DOM對(duì)象的，所以我們這里使用的是this.tagName。
3、parentsUntil()
在jQuery中，parentsUntil()方法是parents()方法的一個(gè)補(bǔ)充，它可以查找“指定范圍”的所有祖先元素，相當(dāng)于在parents()方法返回的集合中截取一部分。
語法：
$().parentsUntil(selecotr)
說明：
selector是一個(gè)可選參數(shù)，它是一個(gè)選擇器，用來選擇符合條件的祖先元素。
舉例：
<!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>綠葉學(xué)習(xí)網(wǎng)</span>
</strong>
</p>
</div>
</body>
</html>
控制臺(tái)輸出結(jié)果如下圖所示。
分析：
在實(shí)際開發(fā)中，我們一般只會(huì)用到parent()方法和parents()這兩個(gè)，極少用到parentsUntil()。因此對(duì)于parentsUntil()方法，我們了解一下就行。
jQuery查找后代元素
在jQuery中，如果想要查找當(dāng)前元素的后代元素（子元素、孫元素等），我們有以下3種方法：
（1）children()
（2）find()
（3）contents()
1、children()
在jQuery中，我們可以使用children()方法來查找當(dāng)前元素的“子元素”。注意，children()方法只能查找子元素，不能查找其他后代元素。
語法：
$().children(selector)
說明：
selector是一個(gè)可選參數(shù)，它是一個(gè)選擇器，用來查找符合條件的子元素。當(dāng)參數(shù)省略，表示選擇所有子元素；當(dāng)參數(shù)不省略時(shí)，表示選擇符合條件的子元素。
舉例：
<!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>
默認(rèn)情況下，預(yù)覽效果如下圖所示。
當(dāng)鼠標(biāo)移到id="wrapper"的div元素上面，此時(shí)預(yù)覽效果如下圖所示。
分析：
$(this).children(".select")表示獲取當(dāng)前元素下的class="select"的子元素。我們可以發(fā)現(xiàn)，class="select"的孫元素卻不會(huì)被選中。
2、find()
在jQuery中，我們可以使用find()方法來查找當(dāng)前元素的“后代元素”。注意，find()方法不僅能查找子元素，還能查找其他后代元素。
語法：
$().find(selector)
說明：
selector是一個(gè)可選參數(shù)，它是一個(gè)選擇器，用來查找符合條件的后代元素。當(dāng)參數(shù)省略，表示選擇所有后代元素；當(dāng)參數(shù)不省略時(shí)，表示選擇符合條件的后代元素。
舉例：
<!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>
默認(rèn)情況下，預(yù)覽效果如下圖所示。
當(dāng)鼠標(biāo)移到id="wrapper"的div元素上面，此時(shí)預(yù)覽效果如下圖所示。
分析：
$(this).find(".select")表示不僅會(huì)選取當(dāng)前元素下的class="select"的子元素，還會(huì)選取class="select"的孫元素。
3、contents()
在jQuery中，我們可以使用contents()方法來獲取子元素及其內(nèi)部文本。contents()方法和children()方法相似，不同的是，contents()返回的jQuery對(duì)象中不僅包含子元素，還包含文本內(nèi)容。而children()方法返回的jQuery對(duì)象中只會(huì)包含子元素，不包含文本內(nèi)容。
在實(shí)際開發(fā)中，我們極少會(huì)用到contents()方法，因此小伙伴們不需要深入了解，這里簡單認(rèn)識(shí)一下即可。
jQuery查找兄弟元素
兄弟元素，指的是該元素在同一個(gè)父元素下的同級(jí)元素。
在jquery中，查詢同級(jí)元素一般有七個(gè)方法：siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()
siblings()方法，主要用于獲得指定元素的同級(jí)所有元素
next()方法，主要用于獲得指定元素的下一個(gè)同級(jí)元素
nextAll()方法，主要用于獲得指定元素的下一個(gè)同級(jí)的所有元素
nextUntil()方法，主要用于獲得指定元素的下一個(gè)同級(jí)元素，這個(gè)同級(jí)元素必須為指定元素與nextUntil()方法所設(shè)置元素之間的元素
prev()方法，主要用于獲得指定元素的上一級(jí)同級(jí)元素
prevAll()方法，主要用于獲得指定元素上一級(jí)所有的同級(jí)元素
prevUntil()方法，主要用于獲得指定元素的上一個(gè)同級(jí)元素，這個(gè)同級(jí)元素必須為指定元素與prevUntil()方法所設(shè)置元素之間的元素
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 (父節(jié)點(diǎn))
<li>li (兄弟節(jié)點(diǎn))</li>
<li>li (兄弟節(jié)點(diǎn))</li>
<li class="start">li (類名為"start"的兄弟節(jié)點(diǎn))</li>
<li>li (類名為"start"的li節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn))</li>
<li>li (類名為"start"的li節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn))</li>
<li>li (類名為"start"的li節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn))</li>
<li class="stop">li (類名為"stop"的兄弟節(jié)點(diǎn))</li>
</ul>
</div>
<p>在這個(gè)例子中,我們返回在類名為“star”和類名為“stop”的 li元素之間的所有下一個(gè)兄弟元素。</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 (父節(jié)點(diǎn))
<li>li (兄弟節(jié)點(diǎn))</li>
<li>li (類名為"start"的li節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn))</li>
<li class="start">li (類名為"start"的li節(jié)點(diǎn))</li>
<li>li (兄弟節(jié)點(diǎn))</li>
<li>li (兄弟節(jié)點(diǎn))</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的上一個(gè)兄弟節(jié)點(diǎn))</li>
<li>li (類名為"start"的li的上一個(gè)兄弟節(jié)點(diǎn))</li>
<li>li (類名為"start"的li的上一個(gè)兄弟節(jié)點(diǎn))</li>
<li class="start">li (類名為"start"的li節(jié)點(diǎn))</li>
<li>li (兄弟節(jié)點(diǎn))</li>
<li>li (兄弟節(jié)點(diǎn))</li>
</ul>
</div>
<p>在這個(gè)例子中,我們返回類名稱為“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 (父節(jié)點(diǎn))
<li class="stop">li (類名為"stop"的兄弟節(jié)點(diǎn))</li>
<li>li (類名為"start"的li節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn))</li>
<li>li (類名為"start"的li節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn))</li>
<li>li (類名為"start"的li節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn))</li>
<li class="start">li (類名為"start"的li節(jié)點(diǎn))</li>
<li>li (兄弟節(jié)點(diǎn))</li>
<li>li (兄弟節(jié)點(diǎn))</li>
</ul>
</div>
<p>在這個(gè)例子中,我們返回在類名為“star”和“stop”的li元素之間的所有上一個(gè)兄弟元素,。</p>
</body>
</html>
讀到這里，這篇“jquery查找方法怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
