前端选择器

本文详细介绍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;}偶数行

待完善。。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

huang_ftpjh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值