前端选择器

最新推荐文章于 2022-09-22 17:49:15 发布

原创最新推荐文章于 2022-09-22 17:49:15 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍jQuery中选择特定元素的方法，包括获取第一个和最后一个元素，以及如何通过.eq(), .first(), .last()等方法进行选择。同时，文章还讲解了如何使用CSS选择器和jQuery来设置元素样式，如背景颜色，并提供了实现隔行变色效果的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQ计较简单
获取第一个元素

$("ul li:first");

$("ul li").eq(0);
$("ul li").first();
//获取最后一个：
$('ul li').last();
倒数第一个ul,第二个ul,第一个ul样式
$("div ul").eq(-1)
$("div ul").eq(-2)
$('ul li:first-child').css('backgroundColor', '#000');

`JS`

$("input[name=Fruit]:eq(0)").attr("checked",true); 名字name叫Fruit的input对象添加打钩

https://blog.youkuaiyun.com/qq_39626986/article/details/80663337

<script type="text/javascript">
    $(function(){
          $("#title ul li").each(function(index){
            $(this).click(function(){
              $("#title .titsh").removeClass("titsh");
              $("#content .consh").removeClass("consh");
              $(this).addClass("titsh");
              $("#content > div:eq("+index+")").addClass("consh");
            })
          })                
        })
  </script>

https://www.cnblogs.com/weihengblogs/p/3961616.html

https://blog.youkuaiyun.com/tangxiujiang/article/details/77934459

JS实现隔行变色https://blog.youkuaiyun.com/lanseguhui/article/details/80864758 这个太麻烦了

$("#tablelist tr:odd").css("background-color","#ececec"); 在诸如 tr li 这种后面

odd奇数 even偶数

注意是从0算起的

但我们有时候用到css

ul li:first-child

ul 下第一个 li

ul 下第2个 li

ul 下最后一个 li
ul#headuser li{float: left;height: 40px;margin-right: 1px;}
#headuser li:first-child{ border: 1px solid black; }
#headuser li:nth-child(2){ border-top: 1px solid black; border-bottom:1px solid black; }
#headuser li:last-child{ border: 1px solid black; }
ul中最后一个li不加样式

ul li:not(:last-child)

css奇数偶数

#Ulist li:nth-of-type(odd){ margin-left: 20px;}奇数行

#Ulist li:nth-of-type(even){margin-left: 10px;}偶数行