作者:继续不插电的名单 | 来源:互联网 | 2022-10-13 16:10
.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素 (仅儿子辈 )。参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选。
.find(selector)方法是返回匹配元素集合中每个元素的后代 。参数是必选的 ,可以为选择器、jquery对象可元素来对元素进行筛选。
.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。这里的children,我理解为儿子,只在儿子这一级遍历。 看下例子: 代码如下:
.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选。
.find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的,可以为选择器、jquery对象可元素来对元素进行筛选。
.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。这里的children,我理解为儿子,只在儿子这一级遍历。看下例子:
代码如下:
$('ul.level-2').children().css('background-color', 'red');
这行代码的结果是,项目 A, B, C 得到红色背景。由于我们没有应用选择器表达式,返回的 jQuery 对象包含了所有子元素。如果应用一个选择器的话,那么只会包括匹配的项目。
在看个例子:
代码如下:
Hello Hello Again
<--换成
And Again
aaAnd Again <--换成
And One Last Time
得到的结果如下:
这个是预期的结果,但是如果将上面的
换成
,见上面代码注释,得到的结果却是:
.find()方法要注意的知识点:
1、find是遍历当前元素集合中每个元素的后代。只要符合,不管是儿子辈,孙子辈都可以。
2、与其他的树遍历方法不同,选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回,可以传递通配选择器 '*'。
3、find只在后代中遍历,不包括自己。
4、选择器 context 是由 .find() 方法实现的;因此,$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')。
选择器的语法是:jQuery(selector, [context])
一般情况对jquery的选择器的用法,都是做为第一个参数的用法。其实jquery()函数的这种用法还可以传递第二个参数。传递这个参数的目的是将前面选择器限定在context这个环境中。在默认情况下,即不传第二个参数,选择器从文档根部对 DOM 进行搜索($()将在当前的HTML document中查找DOM元素);如果指定了第二个参数,如一个DOM元素集或jquery对象,那就会在这个context中查找。 下面看个例子
代码如下:
$("div.foo").click(function() { $("span", this).addClass("bar"); });
由于我们已经将 span 选择器限定到 this 这个环境中,只有被点击元素中的 span 会得到附加的class。
在内部,
选择器 context 是通过 .find() 方法实现的,因此 $("span", this) 等价于 $(this).find("span"),
$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')
find()更多内容请访问:http://www.w3school.com.cn/jquery/traversing_find.asp
children()更多内容请访问:http://www.w3school.com.cn/jquery/traversing_children.asp
推荐阅读
前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ...
[详细]
蜡笔小新 2024-11-12 14:58:57
Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ...
[详细]
蜡笔小新 2024-11-12 14:47:56
在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ...
[详细]
蜡笔小新 2024-11-12 13:59:27
在本文中,我们将深入探讨 jQuery 中的 DOM 操作与事件处理技术,通过实现类似 Yahoo 邮箱登录框的提示效果来展示其强大功能。我们将详细介绍如何利用简洁的 jQuery 代码提升用户体验,并分享一些实用的示例。同时,我们还会解析这些示例中涉及的具体操作和事件处理方法。 ...
[详细]
蜡笔小新 2024-11-11 14:11:48
importpymysql#一、直接连接mysql数据库'''coonpymysql.connect(host'192.168.*.*',u ...
[详细]
蜡笔小新 2024-11-12 16:51:59
两个条件,组合控制#if($query_string~*modviewthread&t(&extra(.*)))?$)#{#set$itid$1;#rewrite^ ...
[详细]
蜡笔小新 2024-11-12 13:55:01
本文详细介绍了DMA控制器如何通过映射表处理来自外设的请求,包括映射表的设计和实现方法。 ...
[详细]
蜡笔小新 2024-11-12 13:51:55
本文介绍如何在Windows 10环境下解决Navicat 2003无法连接到本地MySQL服务器的问题,包括启动MySQL服务和检查配置文件的方法。 ...
[详细]
蜡笔小新 2024-11-12 13:10:39
本文详细介绍了如何利用Duilib界面库开发窗体动画效果,包括基本思路和技术细节。这些方法不仅适用于Duilib,还可以扩展到其他类似的界面开发工具。 ...
[详细]
蜡笔小新 2024-11-12 09:41:11
本文探讨了在使用Spark的map或flatMap算子将一个数据集转换为另一个数据集时,遇到的Schema变为Binary的问题,并提供了详细的解决方案。 ...
[详细]
蜡笔小新 2024-11-12 08:06:20
1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ...
[详细]
蜡笔小新 2024-11-12 06:43:20
本文详细介绍了在使用Parallels Desktop时遇到错误15265的多种解决方案,包括检查网络连接、关闭代理服务器和修改主机文件等步骤。 ...
[详细]
蜡笔小新 2024-11-12 05:14:12
本文详细介绍了如何解决 Windows Server 2016 在使用无线网络 (WLAN) 和有线网络 (以太网) 时遇到的连接问题。包括添加必要的功能和安装正确的驱动程序。 ...
[详细]
蜡笔小新 2024-11-12 00:01:44
使用Jsoup解析并遍历HTML文档时,该库能够高效地生成一个清晰、规范的解析树,即使源HTML文档存在格式问题。Jsoup具备强大的容错能力,能够处理多种异常情况,如未闭合的标签等,确保解析结果的准确性和完整性。 ...
[详细]
蜡笔小新 2024-11-11 21:30:03
Bootstrap 支持用户自定义样式调整。即使长时间未使用 Bootstrap,也可以通过添加新的 CSS 类或覆盖现有类来轻松修改默认样式,以满足特定的设计需求。 ...
[详细]
蜡笔小新 2024-11-11 20:11:31