1、代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>jquery的包装集</title>
<!--引入jquery依赖包-->
<script type="text/javascript" src="../jquery-1.11.3.js"></script>
<script type="text/javascript">
/**
* 包装集的定义:
* 通过$("exp")筛选出页面的一组满足表达式的元素,这一组元素就属于jquery包装集中的元素
* 包装集的常用方法:
* 1.获取包装集中的元素个数:$("exp").length
* 2.通过下标值获取包装集中的某个元素[js元素]:$("exp").get(index)
* 3.获取某个元素在包装集中的位置:$("exp").index(element)
*/
$(function() {
/**
* size()|length|get()|index
*/
//1.获取<tr>元素的个数
//alert($("tr").length); //6
//alert($("tr").size()); //6
//2.获取第2个<tr>元素
//$($("tr").get(1)).css("color","#f00");
//3.判断id为abc的<tr>元素在包装集中的位置
//alert($("tr").index($("tr#abc"))); //2
/**
* add()|not()|filter()|slice()
*/
//4.在表达式中通过逗号,可以分割多个包装集
//$("tbody tr:eq(2),tr#abc").css("color","#f00");
//5.通过包装集的add方法,可以将新加入的元素添加到包装集中
//$("tbody tr:eq(2)").add("tr td:contains('2')").css("color","#f00");
//6.通过not方法取消包装集中的元素
//$("tr").not("tr#abc").css("color","#f00");
//7.获取<tr>中位置小于3的元素
//$("tr").filter("tr:lt(3)").css("color","#f00");
//8.获取<tr>中位置是1,3[不包括3]形成的新包装集,返回值就是新的包装集
//$("tr").slice(1,3).css("color","#f00");
/**
* find()|is()
*/
//9.从包装集的内部获取相应的元素,返回值也是新包装集
//$("table").find("tr#abc").css("color","#f00");
//10.is表示判断当前包装集中是否有某个元素
//$("table")的包装集中只有一个元素table,所有没有<td>
//alert($("td").is("td:contains('用户')")); //true
/**
* children()|next()|nextAll()|parent()|parents()|siblings()
*/
//11.获取<tbody>中的所有元素位置大于2的<tr>子元素,返回的是新包装集
//$("tbody").children("tr:gt(2)").css("color","#f00");
//12.找到下一个兄弟元素,只是一个元素,返回新包装集
//$("tr#abc").next().css("color","#f00");
//13.找到下一组兄弟元素,返回新包装集
//$("tr#abc").nextAll().css("color","#f00");
//14.parent("div")仅仅只是返回上一级的div,返回新包装集
//$("#s1").parent("div").css("color","#f00");
//15.parents("div")返回满足条件的所有父节点,返回新包装集
//$("#s1").parents("div").css("color","#f00");
//16.返回第3个<tr>的所有兄弟节点,返回新包装集
//$("tr:eq(2)").siblings().css("color","#f00");
});
</script>
</head>
<body>
<div id="d1">
abc
<div>
<span id="s1">def</span>
</div>
</div>
<table width="700" border="1" align="center">
<thead>
<tr align="center">
<td>用户编号</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr id="abc">
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>43</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>53</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>孙七</td>
<td>63</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
2、案例2
3、案例4
4、案例5
5、案例6
6、案例7
7、案例8
8、案例9
9、案例11
10、案例12
11、案例13
12、案例14
13、案例15
14、案例16