国产视频app 在操作HTML的DOM樹的時候,我們可以通過使用jquery中的選擇器來獲取或者操作某個元素下的第一個元素或是最后一個元素。

JQ中的獲取第一個元素和最后一個元素的的操作方法是非常的簡單的,不過我們要借用JQ中的children()遍歷方法。

jq children()遍歷方法

国产视频app children() 方法返回返回被選元素的所有直接子元素。

語法:

.children(selector)

JQ遍歷所有的LI標簽并添加類屬性

HTML代碼

<ul id="Mochu">    
    <li>飛鳥</li>
    <li>慕魚</li>
    <li>博客</li>
</ul>

JQ代碼

$('#Mochu').children().addClass('a');

結果:

jq獲取第一個元素,JQ獲取最后一個元,JQ遍歷所有子元素

通過了解JQ中的children()遍歷方法,我們可以輕松獲取某個元素下的所有的直接子元素,如果我們再加入一個選擇條件,是不是可以獲取指定的子元素了?

JQ獲取第一個子元素

国产视频app jQuery的':first-child'選擇器用于匹配作為父元素的第一個子元素的元素,將其封裝為jQuery對象并返回。

注意:':first-child'選擇器等價于':nth-child(1)'選擇器。

jq獲取第一個元素的內容

HTML代碼

<ul id="Mochu">    
    <li>飛鳥</li>
    <li>慕魚</li>
    <li>博客</li>
</ul>

jq代碼

var t = $('#Mochu').children(':first-child').text();
console.log(t);
//飛鳥

JQ獲取最后一個子元素的內容

jQuery的':first-child'選擇器可以匹配到第一個元素,與之對應的':last-child'選擇器,則可以匹配到最后一個元素。

HTML代碼

<ul id="Mochu">    
    <li>飛鳥</li>
    <li>慕魚</li>
    <li>博客</li>
</ul>

jq代碼

var t = $('#Mochu').children(':last-child').text();
console.log(t);
//博客

補充

其它參考文章:jQuery選擇元素的方法大全

国产视频app 在測試或使用以上方法之前,必須引入 jquery文件

<script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>