jquer01-包装集

为什么80%的码农都做不了架构师？>>>   

jquery包装集
<script type="text/javascript">
$(function(){
    //alert($("table").size());    
    //获取tr元素的个数 
    //alert($("tr").length);
    //当执行了get()之后得到的结果是一个js元素 
    //$($("tr").get(1)).css("color","#f00");
    //判断id为abc的tr在包装集的位置 
    //alert($("tr").index($("tr#abc")));
    /*在表达式中通过逗号可以分割多个包装集,但是如果包装集太多
    而且有时候可以变动的时候,使用这种方式就不好操作 */
    //$("tbody tr:eq(2),tr#abc").css("color","#f00");
    /*可以为包装集使用add方法添加新的包装集元素 */
    //$("tbody tr:eq(2)").add("thead td:eq(2)")
    //.add($("tr td:contains('3')")).css("color","#f00");
    //not方法可以将包装集中的元素取消掉
    //$("tr").not("tr#abc").css("color","#f00");
    //filter获取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 
    //alert($("td").is("td:contains('用户')"));
    //获取tbody中的所有元素位置等于3的子元素,返回新包装集 
    //$("tbody").children("tr:eq(3)").css("color","#f00");
    //找到下一个子元素,只是一个元素!返回新包装集
    //$("tr#abc").next().css("color","#ff0");
    //找到下一组子元素,所有元素!返回新包装集
    //$("tr#abc").nextAll().css("color","#0f0");
    //仅仅只是返回上一级的div,返回新包装集
    //$("#s1").parent("div").css("color","#0f0");
    //返回所有满足条件的父类节点,返回新包装集
    //$("#s1").parents("div").css("color","#f00");
    //返回第4个tr的所有兄弟节点,返回新包装集
    var a=$("tr:eq(3)").siblings("tr").css("color","#f00").is("tr#abc");
    alert(a);
});
</script>
2包装集操作
<script type="text/javascript">
$(function(){
    //使用end()可以返回上一个包装集
    /* $("tr:eq(2)").siblings("tr")
        .css("background","#00f").css("color","$fff")
        .end().css("background","#f00").css("color","#00f"); */
    /* $("#users tbody").clone().appendTo("#tus")
        .find("tr:even").css("color","#f00")
        .end().end().end().find("tr:odd").css("color","#00f"); */
        //andSelf表示把所有的包装集合并在一起 
        //$("#users tbody").clone().appendTo("#tus").end().andSelf()
        //.css("background","#0f0")
        //.find("td:contains('3')").css("color","#f00");
        /*查询出两个包装集,一个为tus的table,一个为users的table,此时可以过滤,
        无法filter("tr")*/
        $("table").filter("table#users").css("color","#f00");
});
</script>
3.jquery属性操作
<script type="text/javascript">
$(function(){
    $("tbody tr").each(function(n){
        //使用attr只加入一个参数可以获取属性值
        //alert($(this).attr("id"));
        //通过attr()两个参数,可以完成对某个节点的属性的设置
        //$(this).attr("title",$(this).children("td:eq(1)").html());
        /*可以基于json的格式来设置属性,甚至可以设置一些非html属性,
        通过这些属性来做一些特殊的处理,但是设置特殊属性这种方式在jquery1.4之后不支持
        因为jquery1.4之后提供了data方法 */
        $(this).attr({
            "title":$(this).children("td:eq(1)").html(),
            "id":$(this).children("td:eq(0)").html(),
            "personid":n
        });
        //可以移除属性
        $("tr#2").removeAttr("personid");
    });
});
</script>
<script type="text/javascript">
$(function(){
    //设置所有以http开头的超链接的target属性为_blank
    //$("a[href^='http://']").attr("target","_blank");
    //设置tbody中的tr的title属性,让属性的值为第几个tr
    $("tbody tr").attr("title",function(n){
        return "这是第"+(n+1)+"个tr";
    });
});
</script>

转载于:https://my.oschina.net/686991/blog/363644