jquery-包装集

            //获取tr的元素个数
            $("tr").length;
            //当执行了get之后得到的结果是一个js的元素
            $($("tr").get(1)).css("color","#f00");
            //判断id为abc的tr在包装集的位置
            $("tr").index($("tr#abc"));
            //在表达式中通过,可以分割多个包装集,
            //但是如果包装集太多,而且有时候可以变动的时候,使用这种方式就不好操作
            $("tbody tr:eq(2),tr#abc").css("color","#f00"); //(tbody从0开始第二个,<tr id="abc">)

            /*
             * 可以为包装集使用add方法,可以将新加入的元素添加到包装集中
             */
            $("tbody tr:eq(2)").add("thead tr td:eq(2)").add("tr td:contains('3')").css("color","#f00"); //(contains 选择器选取包含指定字符串的元素)


            //not方法可以将包装集中的元素取消掉    
            $("tr").not("tr#abc").css("color","#f00");


            //获取tr中位置小于3的元素,过滤掉大于三
            $("tr").filter("tr:lt(3)").css("color","#f00");


            //获取tr中的1,3形成一个新的包装集,返回的值就是新的包装集
             $("tr").css("background","#00f").slice(1,3).css("color","#f00");

            //从包装集的内部获取相应的元素,返回的值也是新包装集
            $("table").find("tr#abc").css("color","#f00");

            //is表示的是当前的包装集中是否有某个元素,$(table)的包装集中只有一个元素table,所以没有td
            $("table").is("td:contains('用户')");

            //获取tbody中的所有元素为值等于3的tr子元素,返回的也是新包装集
            $("tbody").children("tr:eq(3)").css("color","#f00");

            //找到下一个子元素,只是一个元素,返回新包装集
            $("tr#abc").next().css("color","#ff0");

            //找到下一个组兄弟元素,所有元素,返回新包装集
            $("tr#abc").nextAll().css("color","#0f0");

            //parent仅仅只是返回上一级的div,返回新包装集
            $("#s1").parent("div").css("color","#0f0");

            //返回所有满足条件的父类节点,返回新包装集
            $("#s1").parents("div").css("color","#f00");

            //返回第3个tr的所有兄弟节点,返回新包装集
            var a = $("tr:eq(2)").siblings("tr").css("color","#f00").is("tr#abc");
            alert(a);
        });

1.add,not,fiter –>返回原包装集
2.slice find clone next nextAll siblings prev prevAll children parent parents 都是返回新包装集
3.end andself 返回合并后的包装集
4.add会添加新的元素到包装集,not和filter是在当前包装集的基础上来进行过滤和取消(特把注意:不是在包装集中,如果某个包装集中

,使用div.filter(span)是没有办法筛选span,因为div仅仅只是一个单独的包装集),slice,is都是和not这些类似
5.find,parent,children等就是在当前包装集

<table width="700" border="1" align="center">3.
    <thead>
        <tr>4.
            <td>用户标识</td>
            <td>用户姓名</td>
            <td>用户年龄</td>
            <td>用户密码</td>
        </tr>
    </thead>
    <tbody>
        <tr id="abc">
            <td>1</td>
            <td>张三</td>
            <td>23</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>33</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>13</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>4</td>
            <td>赵六</td>
            <td>45</td>
            <td>abc123</td>
        </tr>
        <tr>
            <td>5</td>
            <td>朱琪</td>
            <td>21</td>
            <td>abc123</td>
        </tr>
    </tbody>
</table>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值