jQuery中的關(guān)系查找方法

更新時(shí)間：2022年03月20日 09:47:01 作者：小白可別不舉鐵

這篇文章主要介紹了jQuery中的關(guān)系查找方法，關(guān)系查找方法分有children()子級(jí)、siblings()兄弟的一些方式，下文都有介紹到，文章內(nèi)容介紹詳細(xì)，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助

一、jQuery關(guān)系查找方法

$(this):在原生的DOM操作中,事件函數(shù)內(nèi)部都有一個(gè)this關(guān)鍵字指向的就是觸發(fā)事件的事件源;在jQuery中將this關(guān)鍵字傳遞給$()方法,得到的就是指向自己的jQuery對(duì)象,這樣就可以使用jQuery方法了.
parent()父級(jí):jQuery對(duì)象都有一個(gè)parent()方法,得到的是自己的父級(jí),父級(jí)得到的也是一個(gè)jQuery對(duì)象,可以直接繼續(xù)打點(diǎn)調(diào)用jQuery方法和屬性
children()子級(jí):可以得到自己的所有子級(jí)元素組成的jQuery對(duì)象;得到的子級(jí)組成的jQuery對(duì)象可以繼續(xù)調(diào)用jQuery方法和屬性
- children()可以傳遞參數(shù),參數(shù)是字符串格式的選擇器,在選中所有子級(jí)的情況下,保留滿足選擇器的部分,進(jìn)行二次選擇.
siblings()兄弟:jQuery對(duì)象通過(guò)調(diào)用siblings()方法可以得到除了自己以外的所有同級(jí)元素(兄弟)組成的jQuery對(duì)象,找到的只能是親的兄弟,不能是旁系(叔叔家)的兄弟
- siblings()方法的到的jQuery對(duì)象可以進(jìn)行二次選擇,通過(guò)給參數(shù)傳遞字符串格式得到選擇器

<head>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? .box{
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 60px;
? ? ? ? ? ? border: 1px solid #000;
? ? ? ? ? ? margin-top: 2px;
? ? ? ? }
? ? ? ? .box p,.box h2{
? ? ? ? ? ? float: left;
? ? ? ? ? ? width: 60px;
? ? ? ? ? ? height: 60px;
? ? ? ? ? ? margin-right: 20px;
? ? ? ? ? ? background-color: rgb(164, 247, 233);
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="box">
? ? ? ? <p></p>
? ? ? ? <p></p>
? ? ? ? <p></p>
? ? ? ? <p></p>
? ? ? ? <h2>h2</h2>
? ? </div>
? ? <div class="box">
? ? ? ? <p></p>
? ? ? ? <p></p>
? ? ? ? <p></p>
? ? ? ? <p></p>
? ? ? ? <h2>h2</h2>
? ? </div>
? ? <div class="box">
? ? ? ? <p></p>
? ? ? ? <p></p>
? ? ? ? <p></p>
? ? ? ? <p></p>
? ? ? ? <h2>h2</h2>
? ? </div>
? ? <div class="box">
? ? ? ? <p></p>
? ? ? ? <p></p>
? ? ? ? <p></p>
? ? ? ? <p></p>
? ? ? ? <h2>h2</h2>
? ? </div>
? ? <script src="../jq/jquery-1.12.4.min.js"></script>
? ? <script>
? ? ? ? var $p = $("p");
? ? ? ? var $box = $(".box")
? ? ? ? $p.click(function(){
? ? ? ? ? ? //點(diǎn)擊自己，發(fā)生顏色改變
? ? ? ? ? ??
? ? ? ? ? ? //使用$()包裹this，this由指向觸發(fā)事件的原生js對(duì)象，變成指向jQuery對(duì)象自己
? ? ? ? ? ? $(this).css("background-color","pink");
? ? ? ? ? ? // $(this).parent() 找到事件源的父級(jí)元素
? ? ? ? ? ? $(this).parent().css("background-color","skyblue");

? ? ? ? ? ? //siblings()
? ? ? ? ? // ?$(this).siblings().css("background-color","purple");
? ? ? ? ? ? //除了點(diǎn)擊的以外，它的兄弟都變成了紫色
? ? ? ? ? ? // 添加參數(shù)后，會(huì)按照指定的選擇器在子級(jí)中進(jìn)行二次選擇
? ? ? ? ? ? $(this).siblings("h2").css("background", "purple");
? ? ? ? ? ? //兄弟元素同時(shí)是好標(biāo)簽

? ? ? ? })

? ? ? ? //通過(guò)點(diǎn)擊div 獲取它的子級(jí)元素
? ? ? ? $box.click(function(){
? ? ? ? ? ? //獲取子級(jí)
? ? ? ? ? ?// $(this).children().css("background","pink");
? ? ? ? ? ??
? ? ? ? ? ?// 添加參數(shù)后，會(huì)按照指定的選擇器在子級(jí)中進(jìn)行二次選擇
? ? ? ? ? ? $(this).children("h2").css("background", "orange");

? ? ? ? })

? ? ? ? //查找兄弟元素 ?sinblings（）
? ? ? ? // 寫在$P方法中
? ? </script>
</body>

二、jQuery其他關(guān)系查找方法

find()后代元素:傳遞一個(gè)規(guī)定的選擇器作為參數(shù),查找范圍是jQuery對(duì)象的所有后代

兄弟元素

緊鄰的兄弟元素方法:

next()下一個(gè)兄弟
prev()前一個(gè)兄弟

多選方法：

nextAll()后面所有兄弟
preAll()前面所有兄弟

<style>
? ?*{
? ? ?margin: 0;
? ? ?padding: 0;
? ? }
? ?.box{
? ? ? border: 1px solid #000;
? ? ? background-color: white;
? ? ? width: 500px;
? ? ? height: 50px;
? ? ? margin-left: 4px;
? ? ? margin-top: 4px;
? ?}
? p{
? ? ?width: 50px;
? ? ?height: 50px;
? ? ?background-color: rgb(185, 185, 185);
? ? ?float: left;
? ? ?margin-right: 8px;
? ?}
??
? span{
? ? ? ?float: left;
? ? ? ?width: 50px;
? ? ? ?height: 50px;
? ? ? ?margin-right: 8px;
? ? ? ?background-color: pink;
? ? ?}
</style>
? ?
? <body>
? ? ? <div class="box">
? ? ? ? ? <p></p>
? ? ? ? ? <p></p>
? ? ? ? ? <p></p>
? ? ? ? ? <span></span>
? ? ? ? ? <span></span>
? ? ? ? ? <span></span>
? ? ? </div>
? ? ? <div class="box">
? ? ? ? ? <p></p>
? ? ? ? ? <p></p>
? ? ? ? ? <p></p>
? ? ? ? ? <span></span>
? ? ? ? ? <span></span>
? ? ? ? ? <span></span>
? ? ? </div>
? ? ? <div class="box">
? ? ? ? ? <p></p>
? ? ? ? ? <p></p>
? ? ? ? ? <p></p>
? ? ? ? ? <span></span>
? ? ? ? ? <span></span>
? ? ? ? ? <span></span>
? ? ? </div>
??
??
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
? var $box = $(".box")
? var $p = $("p")
? ? ? ? ??
? //實(shí)現(xiàn)點(diǎn)擊一個(gè)子級(jí)標(biāo)簽，讓它自己變成紅色，使它的前面的兄弟變紫色，后面的兄弟變橘色
? var $child = $box.children();
? $child.click(function(){
? ? ?$(this).css("background-color","red")
? ? ?.prevAll().css("background-color","purple")
? ? $(this).css("background-color","red")
? ? ?.nextAll().css("background-color","orange")
??
? </script>
</body>

通過(guò)傳遞參數(shù)可以進(jìn)行二次選擇，參數(shù)是字符串格式的選擇器，在前面或后面兄弟中選中符合選擇器規(guī)定的部分。

parents()祖先級(jí)

通過(guò)該方法得到的是指定對(duì)象的包含body在內(nèi)的所有祖先級(jí)元素組成的jQuery對(duì)象

通過(guò)傳參進(jìn)行二次選擇，參數(shù)位置是字符串格式的選擇器

代碼示例：

?//實(shí)現(xiàn)點(diǎn)擊一個(gè)子級(jí)標(biāo)簽，自己變紅色，使它的祖先級(jí)變成藍(lán)色
?// parents（） 查找包含body在內(nèi)的祖先級(jí)
?// $(this).css("background-color","red")
?// .parents().css("background-color","skyblue") ? ? ??
? ? ? ? ? ? ? ? ? ?
// parents()傳參數(shù)，可以篩選去掉不是div的元素
?$(this).css("background-color", "red")
? .parents("div").css("background-color", "skyblue")
})

到此這篇關(guān)于jQuery中的關(guān)系查找方法的文章就介紹到這了,更多相關(guān)jQuery關(guān)系查找內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: