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">
			/**
			 * 1、返回的包装集
			 * （1）add:返回原包装集
			 * （2）not:返回原包装集
			 * （3）filter:返回原包装集
			 * （4）slice:返回新包装集
			 * （5）find:返回新包装集
			 * （6）clone:返回新包装集
			 * （7）siblings:返回新包装集
			 * （8）children:返回新包装集
			 * （9）next|nextAll:返回新包装集
			 * （10）prev|prevAll:返回新包装集
			 * （11）parent|parents:返回新包装集
			 * （12）end:返回前一个包装集
			 * （13）andSelf:返回合并后的包装集
			 *  
			 * 2、包装集的注意点
			 * （1）add()会添加新的元素到原包装集中。
			 * （2）not()、filter()、slice()和is()是在当前包装集的基础上进行过滤和取消。
			 * 	【特别注意】：不是在包装集中，例如：<div><span></span></div>，使用$("div").filter("span")
			 *             是没有办法筛选出<span>的，因为<div>仅仅只是一个单独的包装集。
			 * （3）find()、parent()和parents()等是在当前包装集的元素中去查找或过滤值，而不是在包装集中过滤。	
			 *  
			 */
			$(function() {
				//1.将"tr#abc"的兄弟节点的背景色设置为蓝色，并将其本身设置为红色
				//使用end可以返回上一个包装集
				//$("tr#abc").siblings("tr").css("background","#00f").css("color","#fff")
				//	.end().css("background","#f00").css("color","#fff");
				
				//2.克隆行到新的table中，并给新旧table设置行的背景色
				//$("#users tbody").clone().appendTo("#tus").find("tr:even").css("color","#f00")
				//	.end().end().end().find("tr:odd").css("color","#00f");
				
				//3.andSelf表示把所有的包装集合并在一起
				$("#users tbody").clone().appendTo("#tus").andSelf().find("td:contains('3')").css("color","#f00");
				
			});
		</script>
	</head>
	<body>
		<table width="700" border="1" align="center" id="tus"></table>
		<table width="700" border="1" align="center" id="users">
			<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、案例1
3、案例2
4、案例3
猜你喜欢
