jquery如何获取第一个子元素

如题所述

下面写个例子来获取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选择器”来查看。

温馨提示:答案为网友推荐,仅供参考
第1个回答  2018-08-03

  方法如下:

    获取第一个元素

    $("#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浏览器。

第2个回答  2018-07-26
使用.first()方法就可以获取第一个子元素了,获取值后面加上.text()。
第3个回答  2015-05-29
使用.first()方法就可以获取第一个子元素了
第4个回答  推荐于2017-10-03
<ul id="nav">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script type="text/javascript">
alert($('li:first').text());
</script>

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