jquery的包装集

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

wenzhu0_0

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

阅读量600

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/wenzhu0_0/article/details/43017025

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

我们可以在jQuery包装集上调用下面这些函数, 用来改变我们的原始jQuery包装集, 并且大部分返回的都是过滤后的jQuery包装集.

jQuery提供了一系列的函数用来管理包装集:

1.过滤 Filtering

名称	说明	举例
eq( index )	获取第N个元素	获取匹配的第二个元素: $("p").eq(1)
filter( expr )	筛选出与指定表达式匹配的元素集合。	保留带有select类的元素: $("p").filter(".selected")
filter( fn )	筛选出与指定函数返回值匹配的元素集合这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除，否则就会保留。	保留子元素中不含有ol的元素: $("div").filter(function(index) { return $("ol", this).size() == 0; });
is( expr ) 注意: 这个函数返回的不是jQuery包装集而是Boolean值	用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回'false'. 'filter' 内部实际也是在调用这个函数，所以，filter()函数原有的规则在这里也适用。	由于input元素的父元素是一个表单元素，所以返回true: $("input[type='checkbox']").parent().is("form")
map( callback )	将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立	把form中的每个input元素的值建立一个列表: $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") );
not( expr )	删除与指定表达式匹配的元素	从p元素中删除带有 select 的ID的元素: $("p").not( $("#selected")[0] )
slice( start, end )	选取一个匹配的子集	选择第一个p元素: $("p").slice(0, 1);

2.查找 Finding

名称	说明	举例
add( expr )	把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。	动态生成一个元素并添加至匹配的元素中: $("p").add("<span>Again</span>")
children( [expr] )	取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。	查找DIV中的每个子元素: $("div").children()
closest( [expr] )	取得与表达式匹配的最新的父元素	为事件源最近的父类li对象更换样式: $(document).bind("click", function (e) { $(e.target).closest("li").toggleClass("hilight"); });
contents( )	查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容	查找所有文本节点并加粗: $("p").contents().not("[nodeType=1]").wrap("<b/>");
find( expr )	搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。	从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同: $("p").find("span")
next( [expr] )	取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。	找到每个段落的后面紧邻的同辈元素: $("p").next()
nextAll( [expr] )	查找当前元素之后所有的同辈元素。可以用表达式过滤	给第一个div之后的所有元素加个类: $("div:first").nextAll().addClass("after");
offsetParent( )	返回第一个有定位的父类(比如(relative或absolute)).
parent( [expr] )	取得一个包含着所有匹配元素的唯一父元素的元素集合。你可以使用可选的表达式来筛选。	查找每个段落的父元素: $("p").parent()
parents( [expr] )	取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。	找到每个span元素的所有祖先元素: $("span").parents()
prev( [expr] )	取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。	找到每个段落紧邻的前一个同辈元素: $("p").prev()
prevAll( [expr] )	查找当前元素之前所有的同辈元素可以用表达式过滤。	给最后一个之前的所有div加上一个类: $("div:last").prevAll().addClass("before");
siblings( [expr] )	取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。	找到每个div的所有同辈元素: $("div").siblings()

3.串联 Chaining

名称

说明

举例

andSelf( )

加入先前所选的加入当前元素中

对于筛选或查找后的元素，要加入先前所选元素时将会很有用。

选取所有div以及内部的p，并加上border类:
$("div").find("p").andSelf().addClass("border");

end( )

回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。

选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素:

$("p").find("span").end()

实例1：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			
			//获取tr的元素个数
			//alert($("tr").length);
			
			//当执行了get之后得到的结果是一个js的元素
			//$($("tr").get(1)).css("color","#f00");
			
			//判断id为abc的tr在包装集的位置
			// alert($("tr").index($("tr#abc")));
			
			//在表达式中通过,可以分割多个包装集，
			//但是如果包装集太多，而且有时候可以变动的时候，使用这种方式就不好操作
			//$("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的元素
			//$("tr").filter("tr:lt(3)").css("color","#f00");
			
			//获取tr中的1,3形成一个新的包装集，返回的值就是新的包装集
			// $("tr").css("background","#00f").slice(1,3).css("color","#f00");
			
			//从包装集的内部获取相应的元素，返回的值也是新包装集
			//$("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);
		});
	</script>
</head>
<body>
<div id="d1">
	cdd
	<div>
		<span id="s1">abc</span>
	</div>
</div>
<table width="700" border="1" align="center">
	<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>33</td>
			<td>abc123</td>
		</tr>
		<tr>
			<td>3</td>
			<td>王五</td>
			<td>13</td>
			<td>abc123</td>
		</tr>
		<tr>
			<td>4</td>
			<td>赵六</td>
			<td>45</td>
			<td>abc123</td>
		</tr>
		<tr>
			<td>5</td>
			<td>朱琪</td>
			<td>21</td>
			<td>abc123</td>
		</tr>
	</tbody>
</table>
</body>
</html>

实例2：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			//使用end可以返回上一个包装集
			// $("tr:eq(2)").siblings("tr")
				// .css("background","#00f").css("color","#fff")
				// .end().css("background","#f00").css("color","#00f");
		
			// $("#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");
		
			//查询出了两个包装集，一个为tus的table一个为users的table，此时可以过滤得到users这个table
			//无法使用filter(tr)
			$("table").filter("table#users").css("color","#f00");
			//从users这个id的元素中过滤tr为2的元素
			$("#users").find("tr:eq(2)").css("background","#00f");
		});
	</script>
</head>
<body>
<table id="tus" width="700" border="1" align="center"></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>33</td>
			<td>abc123</td>
		</tr>
		<tr>
			<td>3</td>
			<td>王五</td>
			<td>13</td>
			<td>abc123</td>
		</tr>
		<tr>
			<td>4</td>
			<td>赵六</td>
			<td>45</td>
			<td>abc123</td>
		</tr>
		<tr>
			<td>5</td>
			<td>朱琪</td>
			<td>21</td>
			<td>abc123</td>
		</tr>
	</tbody>
</table>
</body>
</html>

wenzhu0_0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的包装集

我们可以在jQuery包装集上调用下面这些函数, 用来改变我们的原始jQuery包装集, 并且大部分返回的都是过滤后的jQuery包装集.jQuery提供了一系列的函数用来管理包装集:1.过滤 Filtering名称说明举例eq( index )获取第N个元素获取匹配的第二个元素: $("p").eq(1)filter( expr
复制链接

扫一扫