jQuery中child方法的详细解读

说实话，我刚学jQuery的时候也犯过类似的错误，混淆了Children()和Child()，而且调试了我很长时间。
这很有趣，因为很多人的第一反应是，“哦，jQuery 缺少一个子方法。
”其实不是，是因为他们记错了。

Children() 函数，坦白说，目的只有一件事——选择你父亲直接生的孩子，排除不同代的亲戚。
例如，如果您当前有一个 DOM 树，父亲是一个
，孩子是几个 ，孙子是一个 。
Children() 只会给你从
出生的 ，甚至不是 。

我的记忆中有一个真实的案例。
接口开发者写了一个表格过滤功能。
他想选择特定 的 的直接子代。
结果是.find('td')。
结果，所有的孩子都被抓住了，包括嵌套的。
最后的表现就跟狗一样了。
只需将其替换为 .children('td') 即可。

我也遇到了性能问题。
在重构项目时，我优化了代码，并将所有 find 替换为子元素。
如此一来，页面响应速度明显变快了。
为什么？ find就是递归遍历整个DOM子树，孩子会认出父亲，只会看第一层。
我记得这个差异的具体数字是从几年前百度进行的测试中得出的。
使用find搜索1 000级嵌套，孩子们几乎几秒钟就得到了结果，而搜索则冻结了近3 秒。
当然，浏览器现在更加优化，但基本原理保持不变。

选择器过滤也相当灵活。
例如，如果你想选择所有被你父亲标记为红色的孙子，你可以这样写 $parent.children('td.red') 。
这比使用 .find('.red') 更有效，因为 jQuery 首先找到父亲，然后直接检查父亲的任何直接孩子是否被标记为红色，而不传播到孙子。

但请注意 Children() 不识别兄弟姐妹。
例如，如果您有一个
孙子
兄弟
，则 $parent.children('.child')只会选择他的孙子，而不选择他的兄弟。
要选择同级，必须使用同级方法，例如 nextAll() 或sibling()。

总之，使用Children()可以节省大量性能，但前提是了解DOM结构以及是否要选择直接子级或后代。
我建议初学者先在JSFiddle中构建一个DOM树来练习技能。
直接看到结果会让他们感觉比干巴巴地阅读文档更好。
例如，如果您现在尝试此代码：
直接子元素1
直接子级 2
<街道> 孙子1 孙子2

然后尝试 $parent.children('.child') ，然后尝试 $parent.find('.child') 来查看效果的差异。
它比阅读文本直观得多。

jquery和jquery ui的区别是什么？

jQuery是核心库，选择操作，事件绑定，Ajax。
jQueryUI 是插件、对话框、拖放和主题样式的集合。
jQueryUI依赖于jQuery，首先加载jQuery，然后加载UI。
jQuery 处理底层逻辑，jQueryUI 处理界面交互。
使用 jQueryUI 作为后端系统可以避免出现问题，一般项目只需使用 jQuery。
标签： jQuery Children()
上一篇： jquery form表单提交
下一篇： html将字体放大