jquery总结(三)

本文介绍了jQuery中的简单选择器及过滤器的应用方法,包括:first、:last、:even、:odd等,并通过实例展示了如何使用这些选择器来操作DOM元素。

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

简单选择器

     1、:first 匹配的第一个

     2、:last 匹配的最后一个

     3、:lt(index) 小于某个的

     4、:gt(index) 大于某个的;

     5、:eq(index) 等于某个  相当于过滤器中的.eq(index)

     6、:even 奇数行 

     7、:odd  偶数行

     8、:header 匹配h1,h2 h3 等标题

     9、:not 除去匹配的(剩下的)

  过滤器:

      .eq(index)匹配某个

  属性中html代码

      .html()返回整个html文本

  属性的文本

      .text();返回这个html代码中的文本内容 如果是多个就组合文本内容并返回

案例:

 

 <script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script>
$(function(){
        //获取class类别选择器JQuery对像集合中的第一个对象
        var $tr1 = $(".rdc:first"); 
        //属性:.html();取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
        alert($tr1.html());
        //获取class选择器对象集合中的最后一个对象
        var $ltr = $(".rdc:last");
        //属性:.text();结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
        alert($ltr.text());
        /** even匹配的是索引是:0 2 4 但行数是1,3 5......
          :even 选择奇数行并且为其添加背景颜色为红色*/
        $("tr:even").css("background-color","red");
        /** :odd 选择偶数行并且为其添加背景颜色为蓝色*/
        $("tr:odd").css("background-color","blue");
        /**$("tr")取得所有的行的JQuery对象的集合
           .eq(index)匹配一个给定索引值的元素的Jquery对象
           .css("","")为Jquery对象添加一个样式属性和属性值
           对象链式操作*/
        $("tr:eq(2)").css("background-color","yellow");
        //等效于
        $("tr").eq(2).css("background-color","yellow");
        /**集合 List   --->get(index)--->具体的对象--->具体对象的方法*/
        /**取得所有行的Jquery对象集合索引值小于1的所有的tr对象样式设置为green*/
        $("tr:lt(1)").css("background-color","green");
        /**取得索引大于1 并且把背景颜色设置为black*/
         $("tr:gt(1)").css("background-color","black");
         //匹配不是最后一行的样式背景颜色统一设置为红色
         $("tr:not(:last)").css("background-color","red");
         //匹配标题
         alert($(":header").html());
    });
</script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值