jquery如何获取第一个子元素

Posted 2023-03-26

下面写个例子来获取id为demo的元素的第一个子元素。

<!--加载jquery-->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function()//页面加载完成时进入
    var firstChild=$("#demo>:first");//用选择器的方式获取第一个子元素
    firstChild.css('color','red');//将第一个子元素中的文字变为红色，可以看到只有“111”是红色的
);
</script>
<div id="demo"><span>111</span><span>222</span><span>333</span></div>

说明一下以上例子中用到选择器

#demo是id选择器获取id为demo的元素

>是子选择器获取所有子级

:first是首项选择器获取第一个元素

三者结合起来就是获取id为demo的元素的所有子元素中的第一个元素。

其实jquery的选择器有很多，包括：

:last获取最后一个元素

:eq(index)获取第index个选择器

更多可以直接百度搜索“jquery选择器”来查看。

参考技术A

　　方法如下：

获取第一个元素

$("#body").children(":first")

判断获取元素的标签

$("#body").children(":first").attr("tagName") == "STRONG" 

　　JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

参考技术B 使用.first()方法就可以获取第一个子元素了，获取值后面加上.text()。 参考技术C 使用.first()方法就可以获取第一个子元素了 参考技术D <ul id="nav">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script type="text/javascript">
alert($('li:first').text());
</script>

本回答被提问者和网友采纳