jquery查找后代元素的方法

發(fā)布時(shí)間：2020-08-31 10:59:56 來(lái)源：億速云閱讀：1095 作者：小新欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)jquery查找后代元素的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

一：查找后代元素三種方法

（1）children()；

（2）contents()；

（3）find()；

所謂的后代元素，就是某個(gè)元素的“子元素”、“孫元素”……。孫元素，在前端雖然沒(méi)這個(gè)說(shuō)法，但是卻比較形象，所以這一節(jié)使用這一個(gè)說(shuō)法。

二：jquery獲取后代元素方法

1.children()方法

在jQuery中，我們可以使用children()方法來(lái)查找當(dāng)前元素的“所有子元素”或“部分子元素”。注意，children()方法只能查找子元素，不能查找其他后代元素。

語(yǔ)法：children(expression)

說(shuō)明：參數(shù)expression表示jQuery選擇器表達(dá)式，用來(lái)過(guò)濾子元素。當(dāng)參數(shù)省略時(shí)，則將選擇所有的子元素。如果參數(shù)不省略，則表示選擇符合條件的子元素。

舉例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".wrapper").hover(function () {
                $(this).children(".test").css("color", "red");
            }, function () {
                $(this).children(".test").css("color", "black");
            })
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="test">子元素</div>
        <ul>
            <li>孫元素</li>
            <li class="test">孫元素</li>
            <li>孫元素</li>
        </ul>
        <div class="test">子元素</div>
    </div>
    <hr />
    <div class="wrapper">
        <div class="test">子元素</div>
        <ul>
            <li>孫元素</li>
            <li class="test">孫元素</li>
            <li>孫元素</li>
        </ul>
        <div class="test">子元素</div>
    </div>
</body>
</html>

效果如下：

jquery查找后代元素的方法

當(dāng)我們鼠標(biāo)移到第1個(gè)class為wrapper的div元素上時(shí)，在瀏覽器預(yù)覽效果如下：

jquery查找后代元素的方法

分析：$(this).children(".test")表示選擇當(dāng)前元素下class為test的“子元素”。在這里我們會(huì)發(fā)現(xiàn)，雖然也有class為test的“孫元素”，但是使用children()方法卻不會(huì)將“孫元素”選中。

2.contents()方法

與children()方法相似，contents()方法也是用來(lái)查找子內(nèi)容的，但它不僅獲取子元素，還可以獲取文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)等。因此讀者可以把它視為DOM中childNodes屬性的jQuery實(shí)現(xiàn)。contents()方法很少用，作為初學(xué)者我們可以直接忽略這個(gè)方法。

我記得在之前不少教程中，對(duì)于常見(jiàn)但不常用的一些知識(shí)，都會(huì)多少提及一下。很多熱心的建議說(shuō)，站長(zhǎng)啊，既然這個(gè)知識(shí)用不到，浪費(fèi)篇幅，干嘛提及呢？直接刪除都行了。其實(shí)嘛，道理很簡(jiǎn)單：學(xué)習(xí)知識(shí)，知道“哪些不用深入學(xué)習(xí)”，跟“知道哪些需要深入學(xué)習(xí)”是同等重要的。一來(lái)為了方便讀者理清思路，二來(lái)以后碰到這個(gè)知識(shí)了，也有那么點(diǎn)印象不至于手忙腳亂。

3.find()方法

find()方法和children()方法相似，都是用來(lái)查找所選元素的后代元素，但是find()方法能夠查找所有后代元素，而children()方法僅能夠查找子元素。

find()方法和children()方法使用頻率差不多，同等重要。大家要認(rèn)真掌握，并且認(rèn)真區(qū)分。

語(yǔ)法：find(expression)

舉例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".wrapper").hover(function () {
                $(this).find(".test").css("color", "red");
            }, function () {
                $(this).find(".test").css("color", "black");
            })
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="test">子元素</div>
        <ul>
            <li>孫元素</li>
            <li class="test">孫元素</li>
            <li>孫元素</li>
        </ul>
        <div class="test">子元素</div>
    </div>
    <hr />
    <div class="wrapper">
        <div class="test">子元素</div>
        <ul>
            <li>孫元素</li>
            <li class="test">孫元素</li>
            <li>孫元素</li>
        </ul>
        <div class="test">子元素</div>
    </div>
</body>
</html>

默認(rèn)情況下，在瀏覽器預(yù)覽效果如下：

jquery查找后代元素的方法

當(dāng)我們鼠標(biāo)移到第1個(gè)class為wrapper的div元素上時(shí)，在瀏覽器預(yù)覽效果如下：

jquery查找后代元素的方法

分析：$(this).find(".test")表示選擇當(dāng)前元素下的class為test的所有“后代元素”，既包括子元素，也包括孫元素等所有后代元素。大家將find()方法這個(gè)例子跟children()方法那個(gè)例子對(duì)比一下，就能很直觀發(fā)現(xiàn)兩者之間的不同。

關(guān)于jquery查找后代元素的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

jquery查找后代元素的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽