jQuery物件---獲取標簽總結

一. 通過css選擇器來獲取

在jQuery中獲取HTML標簽，可以是通過我們之前學過的css選擇器，像元素選擇器，類選擇器，ID選擇器，后代選擇器，子代選擇器，偽類選擇器……（好像把css選擇器也復習了一下^_^）

    <ul>
        <li class="one">文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字123</li>
    </ul>//這是前面標簽放置

console.log($('li'));      //結果為：li的一個偽陣列（見下圖一）        元素選擇器

console.log($('.one'));    //結果為：只有一個元素li，長度為1的偽陣列    類選擇器                              
                                                                    
console.log($('ul li'));   //結果為：依然是一個偽陣列（與下圖二相同）   后代選擇器

console.log($('ul > li')); //結果為：與上同                           子代選擇器（親兒子）

console.log($('ul li:nth-child(2)'));  //結果為：獲取到第二個li        結構偽類選擇器

console.log($('ul li:last-child'));    //結果為：獲取到最后一個選擇器   結構偽類選擇器

在這里要考考大家，如果我前面放置的HTML標簽是這樣的：

    <div>
        <span>span標簽</span>
        <a href="#">鏈接標簽</a>
        <a href="#">鏈接標簽</a>
        <p>段落標簽</p>
        <h1>標題標簽</h1>
    </div>

那么使用jQuery應該如何獲取第二個標簽呢？

怎么樣？有結果了嗎？是這樣？

 console.log($('a'));

還是這樣？

 console.log($('div a'));

這兩種結果都是輸出兩個a鏈接標簽

對，你有沒有想起什么？

console.log($('div a:nth-child(2)'));

這樣是對的，得到的正是第二個a標簽，這是我們應用結構偽類選擇器來獲取標簽，

二. 通過jQuery css偽類選擇器來獲取

還是應用前面第一次放置的標簽，如果用jQuery物件提供的css偽類選擇器來獲取：

        // jQ中提供的偽類選擇器獲取頁面中的元素
        // 語法: $('css選擇器:jQ中偽類選擇器')
        // :first     代表獲取第一個元素,類似于 first-child   nth-child(1)
        // :last      代表獲取最后一個元素,類似于 last-child 
        // :eq(索引)  代表獲取對應索引位置的標簽, 類似nth-child(值)
        // :odd       代表獲取索引是奇數的標簽,   類似于nth-child(odd)
        // :even      代表獲取索引是偶數的標簽, 類似于nth-child(even)

// 代碼演示:
console.log($('li:first'));//獲取存有第一個li的偽陣列

console.log($('li:last'));//獲取存有最后一個li的偽陣列

console.log($('li:eq(1)')); //獲取存有第二個li的偽陣列（因為索引是從0開始的，這個大家都知道吧）

console.log($('li:odd'));//獲取存有索引為1和3的li的偽陣列

console.log($('li:even'));//獲取存有索引為0和2的li的偽陣列

三. 通過關系元素來獲取

通過關系元素來獲取標簽，也就是根據父元素來獲取子元素，根據子元素來獲取父元素，或者根據兄弟元素來獲取，

照例，前面放置好HTML標簽

    <div>
        <p>段落</p>
        <h1>標題</h1>
        <ul>
            <li>串列</li>
            <li>
                <a href="#">串列中的a標簽</a>
            </li>
        </ul>
        <a href="#">鏈接</a>
    </div>

首先是根據子元素來獲取父元素

        // ?根據子元素獲取父元素
        // 語法1: 子元素jQ物件.parent();   獲取當前元素的直接父元素
        // 語法2: 子元素jQ物件.parents();  獲取當前元素所有的父輩元素
        // 語法3: 子元素jQ物件.parents('css選擇器');  獲取當前元素指定的父元素

        // 代碼演示:
         console.log($('li').parent()); //li的親爹自然是ul了
         console.log($('li').parents()); //獲取了li的所有父元素（見下圖一）
         console.log($('li').parents('body')); //獲取到指定的父元素

其次是根據父元素來獲取子元素

        // ? 父元素JQ物件.children(); 獲取當前標簽中所有的直接子元素(親兒子)
        // ? 父元素JQ物件.children('選擇器'); 獲取當前父元素中指定的子元素
        // 代碼演示:
        console.log($('div').children()); //獲取元素見下圖三
        console.log($('div').children('a')); //獲取到存有a標簽的偽陣列

相比children()，我們還有個也很常用的關鍵字：jQuery物件.find()

        // ? 父元素jQ物件.find();          無法獲取對應的元素
        // ? 父元素jQ物件.find('選擇器');  獲取父元素中所有滿足選擇器的后代元素
        // 代碼演示:
         console.log($('div').find());    //獲取到的偽陣列長度為0，因為沒有獲取到任何元素
         console.log($('div').find('a')); //精確地獲取到a標簽

最后是根據元素獲取兄弟元素，

        // ? jQ物件.siblings(); 獲取當前標簽的所有兄弟元素
        // ? jQ物件.siblings(選擇器);  獲取當前標簽指定的兄弟元素

        // 代碼演示:
         console.log($('h1').siblings('ul')); //與ul為兄弟元素的有p標簽和a標簽，ul標簽，但因為指定了ul，所以輸出結果為ul

        // ? jQ物件.nextAll() 獲取當前標簽結構中后面所有的兄弟元素
        // ? jQ物件.nextAll(選擇器) 獲取當前標簽結構中后面指定的兄弟元素
        
         console.log($('h1').nextAll())    //輸出h1標簽后所有標簽
         console.log($('h1').nextAll('a'));//輸出a標簽

        // ? jQ物件.prevAll() 獲取當前標簽結構中前面所有的兄弟元素
        // ? jQ物件.prevAll(選擇器) 獲取當前標簽結構中前面指定的兄弟元素

        console.log($('h1').prevAll()); 
        console.log($('h1').prevAll());

四. 通過索引號來獲取

前面放置標簽如下：

    <div>
        <a href="#">鏈接</a>
        <a href="#">鏈接</a>
        <a href="#">鏈接</a>
        <a href="#">鏈接</a>
    </div>

        // 語法: $('css選擇器:eq(索引)')
         console.log($('a:eq(1)'));