021_遍历后代

最新推荐文章于 2022-01-18 10:00:43 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-01-18 10:00:43 发布

阅读量140

点赞数

分类专栏： jQuery学习文章标签： jquery javascript html

本文链接：https://blog.csdn.net/aihiao/article/details/112346770

版权

jQuery学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1. children()方法

1.1. children()方法返回被选元素的所有直接子元素, 该方法只会向下一级对DOM树进行遍历。

1.2. children()方法接受一个选择器表达式作为可选参数, 与我们传递到$()的参数的类型是相同的。如果应用该选择器, 将测试元素是否匹配该表达式, 以此筛选这些元素。

1.3. 请注意, 与大多数jQuery方法一样, children()不返回文本节点; 如果需要获得包含文本和注释节点在内的所有子节点, 请使用contents()。

1.4. 语法

$(selector).children()
$(selector).children(selector)

1.5. 参数

2. contents()方法

2.1. contents()方法获得匹配元素集合中每个元素的子节点, 包括文本和注释节点。

2.2. 语法

$(selector).contents()

2.3. 例子

2.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>children()方法</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("div").children().css({"color":"red","border":"2px solid red"});
				});
				$('#btn2').click(function(){
					$("div").children('.myUl').css({"color":"red","border":"2px solid red"});
				});
				$('#btn3').click(function(){
					var c = $("div").contents();
					var ch = $("div").children();
					c = c.filter(function() {
  						return this.nodeType == 3 && (this.nodeValue.trim().length > 0);
					});
					c.wrap('<span style="color:red;"></span>')
				});
			});
		</script>
		<style type="text/css">
			.ancestors div
			{
				width: 500px; 
				float: left;
			}
			.ancestors div, .ancestors div ul, .ancestors div li, .ancestors div b
			{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body class="ancestors"> 
		<span style="display: block;">body(曾曾祖父)</span>
  		<div>div(曾祖父)
		    <ul class="myUl">ul(祖父)  
		    	<li>li(直接父)
		        	<b>b元素</b>
		      	</li>
		    </ul>   
  		</div>
  		<div>div(曾祖父)
		    <ul>ul(祖父)  
		    	<li>li(直接父)
		        	<b>b元素</b>
		      	</li>
		    </ul>   
  		</div>
  		<span style="display: block; clear: left;">
  			<button id="btn1">直接子元素</button> <button id="btn2">过滤的直接子元素</button>
  			<button id="btn3">获得匹配元素集合中每个元素的子节点,包括文本和注释节点</button>
  		</span>
	</body>
</html>

2.3.2. 效果图

3. find()方法

3.1. find()方法获得当前元素集合中每个元素的后代, 不包含自身, 通过选择器、DOM节点或jQuery对象来筛选。

3.2. find()方法第一个明显特征是, 其接受的选择器表达式、DOM节点或jQuery对象参数, 将通过测试这些元素是否匹配该参数来对元素进行过滤。而且这个参数是必需的, 如果我们需要实现对所有后代元素的取回, 可以传递通配选择器'*'。

3.3. 语法 1

$(selector).find(selector)

3.4. 参数

3.5. 语法 2

$(selector).find(element)

3.6. 参数

3.7. 例子

3.7.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>find()方法</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("div").find('li').css({"color":"red","border":"2px solid red"});
				});
				$('#btn2').click(function(){
					$("div").find('.myUl').css({"color":"red","border":"2px solid red"});
				});
				$('#btn3').click(function(){
					$("div").find($('li')).css({"color":"red","border":"2px solid red"});
				});
				$('#btn4').click(function(){
					$("div").find('*').css({"color":"red","border":"2px solid red"});
				});
				$('#btn5').click(function(){
					$("div").find(document.getElementsByTagName('li')).css({"color":"red","border":"2px solid red"});
				});
				$('#btn6').click(function(){
					$("div").find(document.getElementsByClassName('myUl')).css({"color":"red","border":"2px solid red"});
				});
			});
		</script>
		<style type="text/css">
			.ancestors div
			{
				width: 500px; 
				float: left;
			}
			.ancestors div, .ancestors div *
			{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body class="ancestors"> 
		<span style="display: block;">body(曾曾祖父)</span>
  		<div>div(曾祖父)
		    <ul class="myUl">ul(祖父)  
		    	<li>li(直接父)
		        	<b>b元素</b>
		      	</li>
		    </ul>   
  		</div>
  		<div>div(曾祖父)
		    <ul>ul(祖父)  
		    	<li>li(直接父)
		        	<b>b元素</b>
		      	</li>
		    </ul>   
  		</div>
  		<span style="display: block; clear: left;">
  			<button id="btn1">后代元素(选择器表达式-标签名)</button> <button id="btn2">后代元素(选择器表达式-类名)</button>
  			<button id="btn3">后代元素(jQuery对象)</button> <button id="btn4">后代元素(通配符)</button>
  			<button id="btn5">后代元素(DOM对象-标签名)</button> <button id="btn6">后代元素(DOM对象-类名)</button>
  		</span>
	</body>
</html>

3.7.2. 效果图