jquery如何获取第一个子元素

JavaScript015

jquery如何获取第一个子元素,第1张

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

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。

2、在index.html中的<script>标签，输入jquery代码：

$('body').append($('div:first').text())

$('body').append($('div:last').text())

3、浏览器运行index.html页面，此时通过jquery获取了第一个div和最后一个div并打印了其内容。

使用jquery获取某DIV的子元素，通常有以下两种方法：

子元素选择器（>），例如 $("div>img") 获取div下的img子元素；

遍历函数children()，例如 $("div").children("img") 同样是获取div下的img子元素。

如果想要获取DIV下的不仅是子元素，而且还包括其他后代元素（孙辈、曾孙辈元素...），那么，相应的两种方法是：

后代元素选择器（空格），例如 $("div img")  获取div下的所有级别的img后代元素；

遍历函数find()，例如 $("div").find("img")  获取div下的所有级别的ing后代子元素。