jquery的包装集一 -

lipiaoshui2015

浏览: 107775 次

最近访客更多访客>>

damin

让蛋蛋飞_007

wang_eye

xiaoweishu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery的包装集一

博客分类：

jquery

jquery的包装集一

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