Jquery选择器

最新推荐文章于 2022-09-21 19:39:13 发布

toahin

最新推荐文章于 2022-09-21 19:39:13 发布

阅读量145

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/qq_43636471/article/details/120157158

版权

css选择器：

:first-child	所在父元素下的第一个子元素
:last-child	所在父元素下的最后一子元素
:nth-child(i)	所在父元素下的i个子元素（i从1开始）
:only-child	该元素下只有唯一一个子元素的元素

jquery增加选择器：先将所有符合条件的元素集中在一个大的集合中，统一编号，下标从0开始，然后再选择元素。

:first	所有符合要求元素的第一个元素
:last	所有符合要求元素的最后一个元素
:even	所有符合要求元素下标为偶数的元素
:odd	所有符合要求元素下标为奇数的元素
:eq(i)	所有符合要求元素的第i个元素（i从0开始）
:gt(i)	所有符合要求元素中下标大于i的元素（i从0开始）
:lt(i)	所有符合要求元素中下标小于i的元素（i从0开始）

注意：因为下标是从0开始，即:even偶数选择器实际选择的是奇数位置的元素，:odd选择器也如此。

代码演示：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <ul>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
<script>
    $(function(){
        //选择每个ul元素下的第一个li元素--文字变成绿色
        $("ul>li:first-child").css("color","#0f0");
        //将所有ul元素下的li元素放进一个集合，选择次集合下的第一个li元素 --背景变成红色
        $("ul>li:first").css("background-color","#f00");  
    })
</script>