您的位置是:网站首页>Javascript编程Javascript编程

jquery中find()与children()的区别是什么?

少儿编程网2021-02-18 16:06:02Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介区别:children(selector)方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈),参数是可选的;find(selector)方法是返回匹配元素集合中每个元素的后代(只要符合,不管是儿子辈,孙子辈都可以),参数是必选的。相关推荐:《jQuery视频教程》.children(selec

版权所有:https://wWw.pxcodeS.com

区别:children(selector)方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈),参数是可选的;find(selector)方法是返回匹配元素集合中每个元素的后代(只要符合,不管是儿子辈,孙子辈都可以),参数是必选的。OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

相关推荐:《jQuery视频教程》OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选。OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

.find(selector)方法是返回匹配元素集合中每个元素的后代参数是必选的,可以为选择器、jquery对象可元素来对元素进行筛选。OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。这里的children,我理解为儿子,只在儿子这一级遍历。看下例子:OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<ul class="level-1">
	<li class="item-i">I</li>
	<li class="item-ii">II
		<ul class="level-2">不包括自己
			<li class="item-a">A</li>
			<li class="item-b">B
				<ul class="level-3">
					<li class="item-1">1</li>
					<li class="item-2">2</li>
					<li class="item-3">3</li>
				</ul>
			</li>
			<li class="item-c">C</li>
		</ul>
	</li>
	<li class="item-iii">III</li>
</ul>
$('ul.level-2').children().css('background-color', 'red');

这行代码的结果是,项目 A, B, C 得到红色背景。由于我们没有应用选择器表达式,返回的 jQuery 对象包含了所有子元素。如果应用一个选择器的话,那么只会包括匹配的项目。OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

在看个例子:OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<script>
$(document).ready(function(){
    $("#abc").children(".selected").css("color", "blue");
});
</script>
<p id="abc">
	<span>Hello</span>
	<p class="selected">Hello Again</p>
	<p><--换成<p>
		<p class="selected">And Again</p>
		<span class="selected">aaAnd Again</span>
	</p><--换成</p>
	<p>And One Last Time</p>
</p>

得到的结果如下:OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

这个是预期的结果,但是如果将上面的<p>换成<p>,见上面代码注释,得到的结果却是:OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

.find()方法要注意的知识点:OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

1、find是遍历当前元素集合中每个元素的后代。只要符合,不管是儿子辈,孙子辈都可以。OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

2、与其他的树遍历方法不同,选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回,可以传递通配选择器 '*'。OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

3、find只在后代中遍历,不包括自己。OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

4、选择器 context 是由 .find() 方法实现的;因此,$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')。OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

选择器的语法是:jQuery(selector, [context])OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

一般情况对jquery的选择器的用法,都是做为第一个参数的用法。其实jquery()函数的这种用法还可以传递第二个参数。传递这个参数的目的是将前面选择器限定在context这个环境中。在默认情况下,即不传第二个参数,选择器从文档根部对 DOM 进行搜索($()将在当前的HTML document中查找DOM元素);如果指定了第二个参数,如一个DOM元素集或jquery对象,那就会在这个context中查找。

下面看个例子OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

$("p.foo").click(function() {
    $("span", this).addClass("bar");
});

由于我们已经将 span 选择器限定到 this 这个环境中,只有被点击元素中的 span 会得到附加的class。
OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

在内部,选择器 context是通过 .find() 方法实现的,因此 $("span", this) 等价于 $(this).find("span"), $('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

find()更多内容请访问:https://www.php.cn/dic/jquery/find.htmlOOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

children()更多内容请访问:https://www.php.cn/dic/jquery/children.htmlOOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

更多编程相关知识,请访问:编程视频课程!!

以上就是jquery中find()与children()的区别是什么?的详细内容,更多请关注少儿编程网其它相关文章!OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

来源:php中文网OOx少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

版权所有:https://wWw.pxcodeS.com

相关文章:

支持一下 ( )

jquery中find()与children()的区别是什么?

      匿名评论
    • 评论
    人参与,条评论
    jquery中find()与children()的区别是什么?

微信公众号

免费视频教程

先知道