六、包装集

JQuery包装集指的是：通过$("exp")会筛选出页面的一组满足表达式的元素，这一组元素就属于JQuery包装集中的元素
比较常用的一些方法有：获取包装集中的元素个数(size())，通过某个下标获取包装集中的某个元素(get(index))，某个某个元素在包装集中的位置(index(ele))

 

size|get|index

//获取tr的元素个数
//alert($("tr").length);

//当执行了get之后得到的结果是一个js的元素
//$($("tr").get(1)).css("color","#f00");

//判断id为abc的tr在包装集的位置
// alert($("tr").index($("tr#abc")));

 

add|not|filter

//在表达式中通过,可以通过逗号分割多个包装集，
//但是如果包装集太多，而且有时候可以变动的时候，使用这种方式就不好操作
//$("tbody tr:eq(2),tr#abc").css("color","#f00");

/*
 * 可以为包装集使用add方法，可以将新加入的元素添加到包装集中，后面选择元素可以不用$符号
 */
// $("tbody tr:eq(2)").add("thead tr td:eq(2)")
    // .add("tr td:contains('3')").css("color","#f00");

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

//获取tr中位置小于3的元素（过滤后只剩下位置小于3的元素）
//$("tr").filter("tr:lt(3)").css("color","#f00");

 

slice

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

 

find|is

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

//is表示的是当前的包装集中是否有某个元素,$(table)的包装集中只有一个元素table,所以没有td
//alert($("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);
 

链式编程end|andSelf

 //使用end可以返回上一个包装集
// $("tr:eq(2)").siblings("tr")
    // .css("background","#00f").css("color","#fff")
    // .end().css("background","#f00").css("color","#00f");

 

//连续返回2次
// $("#users tbody").clone().appendTo("#tus").find("tr:even").css("color","#f00")
    // .end().end().find("tr:odd").css("color","#00f");

//andSelf表示把所有的包装集合并在一起
//$("#users tbody").clone().appendTo("#tus").andSelf().find("td:contains('3')").css("color","#f00");

 

包装集关键

add:返回原包装集
not:返回原包装集
filter:返回原包装集
slice:返回新包装集
find:返回新包装集
clone:返回新包装集
next|nextAll|siblings|prev|prevAll|children|parent|parents都是返回新包装集
end:返回前一个包装集
andSelf:返回合并后的包装集

add会添加新的元素到包装集,not和filter是在当前包装集的基础上来进行过滤和取消

（特别注意:不是在包装集中,如果某个包装集中<div><span></span></div>,使用div.filter(span)

   是没有办法筛选span,因为div仅仅只是一个单独的包装集）

slice,is都和not这些类似

find,parent,children等就是在当前包装集的元素中去查找或者过滤值，而不是在包装集中过滤