jquery的包装集

最新推荐文章于 2018-05-03 19:04:48 发布

scau_11jkx

最新推荐文章于 2018-05-03 19:04:48 发布

阅读量560

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/scau_11jkx/article/details/31800191

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、介绍

jQuery的包装集指的是：通过$('exp')会筛选出页面的一组满足表达式的元素，这一组元素就属于jQuery包装集中的元素

比较常用的一些方法有：获取包装集中的元素个数（size()）,通过某个下标获取包装集中的某个元素（get(index)）,获取某个元素在包装集中的位置（index(element)）

二、实现一些常用功能的例子

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript" src="JS/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//一、当执行了get之后得到的结果是一个js的元素
				/*$($("tr").get(1)).css("background","#999") ;*/
			//二、判断id为abc的tr在包装集中的位置
				/*alert($("tr").index($("tr#abc")))*/
			//三、在表达式中，通过“，”可以分割多个包装集，但是如果包装集太多，而且有时候希望可以变动的时候，使用这种方式就不好操作
				/*$("tbody tr:eq(2),tr#abc").css("background","#999") ;*/
			//四、可以为包装集使用add方法，可以将新加入的元素添加到包装集中
				/*$("tbody tr:eq(2)").add("thead tr td:eq(2)").css("background","#999") ;*/
			//五、not方法可以将包装集中的元素取消掉
				/*$("tr").not("tr#abc").css("background","#aaa") ;*/
			//六、获取tr中位置小于3的元素
				/*$("tr").filter("tr:lt(3)").css("background","#aaa") ;*/
			//七、获取tr中的1,3形成一个新的包装集，返回的值就是新的包装集
				/*$("tr").slice(1,3).css("background","#aaa") ;*/
			//八、从包装集内部中获取相应的元素，返回的值也是新包装集
				/*$("table").find("#abc").css("background","#888") ;*/
			//九、is表示的是当前的包装集中是否有某个元素
				/*alert($("td").is("td:contains('用户')")) ;*/
			//十、获取tbody中的所有元素位置等于3的tr子元素,返回的值也是新包装集
				/*$("tbody").children("tr:eq(3)").css("background","#aaa") ;*/
			//十一、找到下一个子元素，只是一个元素，返回新的包装集
				/*$("#abc").next().css("background","#999") ;*/
			//十二、找到下一个组兄弟，所有元素，返回新的包装集
				/*$("#abc").nextAll().css("background","#0f0") ;*/
			//十三、parent仅仅只是返回上一级的div，返回新的包装集
				/*$("#s1").parent("div").css("color","#0f0") ;*/
			//十四、返回所有满足条件的父类节点，返回新的包装集
				/*$("#s1").parents("div").css("color","#0f0") ;*/
			//十五、返回第3个tr的所有兄弟节点，返回新的包装集
				/*$("tr:eq(2)").siblings("tr").css("background","#aaa") ;*/
			//十六、使用end返回上一个包装集
				/*$("tr:eq(2)").siblings("tr")
					.css("background","#aaa")
					.end().css("background","#0f0") ;*/
			//
				$("#users tbody").clone().appendTo("#tus").find("tr:even").css("background","#f00")
					.end().end().end().find("tr:odd").css("background","#0f0");
			
				
		}) ;
	</script>
</head>
<body>
	<div id="d1">
		cdd
		<div>
			<span id="s1">abc</span>
		</div>
	</div>
	
	<table width="700" border="1" align="center" id="tus">
	</table>
	<table width="700" border="1" align="center" id="users">
		<thead>
			<tr>
				<td>用户标识</td>
				<td>用户姓名</td>
				<td>用户年龄</td>
				<td>用户密码</td>
			</tr>				
		</thead>
		<tbody>
			<tr id="abc">
				<td>1</td>
				<td>张三</td>
				<td>23</td>
				<td>abc123</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>24</td>
				<td>abc123</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>25</td>
				<td>abc123</td>
			</tr>
			<tr>
				<td>4</td>
				<td>赵六</td>
				<td>26</td>
				<td>abc123</td>
			</tr>
			<tr>
				<td>5</td>
				<td>朱琪</td>
				<td>27</td>
				<td>abc123</td>
			</tr>
		</tbody>
	</table>
</body>
</html></span>