子元素筛选为什么是筛选ｌｉ而不是ｌｉ的子元素

$('li:first-child')

小土儿 2017-04-28

收起

1回答

小于飞飞 2017-04-28 11:33:11

你好，jQuery的:first-child选择器用于匹配作为父元素的第一个子元素的元素。:first-child选择器则需要判断匹配到的元素是否是其父元素的第一个子元素，如果是就保留，否则将被舍弃。举个例子：

<div id="y1">
    html
    <div id="y2">
        <ul id="y3">
            <li id="y4">item1</li>
            <li id="y5">item2</li>
            <li id="y6">item3</li>
        </ul>
    </div>
    <div id="y7">
        <ul id="y8">
            <li id="y9">item1</li>
            <li id="y10">item2</li>
        </ul>
    </div>
</div>

我们查找作为父元素的"长子"的div标签，则可以编写如下jQuery代码：

// 选择了id分别为y1、y2的两个元素
// y1是父元素body标签的"长子"，y2是父元素y1的"长子"
$("div:first-child");

同理：

$('li:first-child') 
// 查找作为父元素长子是li 的标签。
// 结果是 y4 和 y9 ，y4是y3的长子，y9是y8的长子.

希望对你有帮助，祝学习愉快。

收起回答

提问者小土儿 #1

是$('li:first-child')

2017-04-29 16:16:21
小于飞飞回复提问者小土儿 #2

做了详细举例，在看看。祝学习愉快。

2017-04-29 20:47:16
ZoeHom #3

那么请问$('li: first-child')和$('li: first-of-type') 怎么区分?课程里面的例子看不出来差别？

2017-05-10 14:02:55