jquery获取第一个和最后一个元素

在操作HTML的DOM树的时候，我们可以通过使用jquery中的选择器来获取或者操作某个元素下的第一个元素或是最后一个元素。

JQ中的获取第一个元素和最后一个元素的的操作方法是非常的简单的，不过我们要借用JQ中的children()遍历方法。

jq children()遍历方法

children() 方法返回返回被选元素的所有直接子元素。

语法：

.children(selector)

JQ遍历所有的LI标签并添加类属性

HTML代码

<ul id="Mochu">    
    <li>飞鸟</li>
    <li>慕鱼</li>
    <li>博客</li>
</ul>

JQ代码

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

结果：

通过了解JQ中的children()遍历方法，我们可以轻松获取某个元素下的所有的直接子元素，如果我们再加入一个选择条件，是不是可以获取指定的子元素了？

JQ获取第一个子元素

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选择元素的方法大全

在测试或使用以上方法之前，必须引入 jquery文件

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