示例页面：3层div

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box1{width: 300px;height: 300px;background-color: red;margin: 100px auto;}#box2{width: 200px;height: 200px;background-color: green;border: 2px solid #000; /*快捷输入:bd+*/}#box3{width: 100px;height: 100px;background-color: yellow;border: 2px solid blue;}</style>
</head>
<body><div id="box1"><div id="box2"><div id="box3"></div></div></div>
</body>
</html>

运行效果：

css()：指定元素修改属性

不会涉及到其他元素，只会修改指定的元素。

$('#box3').css('background-color','purple')

运行效果：

parrent()：返回父节点(被包装成jQuery对象)

只返回父节点，不会涉及到爷爷。

$('#box3').parent().css('background-color','purple')

运行效果：

addBack()：额外添加调用链上一级

会额外调用链的上一级(同时调用本级)，调用 parent() 再调用 addBack() 会将父节点和自身一起返回。

$('#box3').parent().addBack().css('background-color','purple')

运行效果：

end()：选择调用链上一级

只返回链上一级，调用 parent() 再调用 end() 相当于返回了本身。

$('#box3').parent().end().css('background-color','purple')

运行效果：

children()：返回儿子节点(被包装成jQuery对象)

只返回儿子节点，不会继续往下，不会涉及到孙子。

$('#box1').children().css('background-color','purple');

运行效果：

$('#box1').children('#box3').css('background-color','purple');

运行效果：box1 的子节点为box2，不存在box3，所以没有任何效果。

find()：从后代节点进行查找(被包装成jQuery对象)

children() 只会返回儿子，而 find() 会从所有后代中进行查找，不仅仅包括儿子。

$('#box1').find('#box3').css('background-color','purple');

运行效果：

【jQuery笔记Part2】03-jQuery-addBack()与end()的区别-children()与find()的区别相关推荐

【jQuery笔记Part2】05-jQuery自定义动画
jQuery自定义动画简介 animate() 使用操作多个属性使用相对值使用预定义的值通过连缀或者顺序来实现列队动画顺序写法连缀写法停止动画延时动画 jQuery笔记目录简介 j ...
【jQuery笔记Part2】04-jQuery淡入淡出动画右下角广告案例
jQuery淡入淡出动画-右下角广告 CSS display 属性淡入淡出动画案例 jQuery笔记目录 CSS display 属性 display 属性规定元素应该生成的框的类型. 值描述 n ...
【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
展开&收起动画&案例 HTML DOM overflow 属性展开 slideDown(毫秒, 完成回调函数) 收起 slideUp(毫秒, 完成回调函数) 切换 slideTogg ...
【jQuery笔记Part2】01-jQuery显示隐藏切换动画侧边广告案例
jQuery动画 jQuery动画动画分类 HTML DOM position 属性显示 show(毫秒, 完成回调函数) 隐藏 hide(毫秒, 完成回调函数) 切换 toggle(毫秒, 完成 ...
jQuery笔记——工具函数——jQuery标志
jQuery定义了很多工具函数,这些函数的命名空间为$,但不操作包装集,用户可以把它看作是顶层函数,不同之处是他们定义在$实例上,而不是定义在window实例上,类似于静态类型函数. 通常来说,工具函 ...
jQuery 笔记目录
jQuery笔记目录 part1 part2 part3 part4 Zepto.js 这是早期的笔记,当时写笔记还没有那么有规划,所以写的比较随意,每篇文章内容相对比较少,现在复习一下jQuery, ...
【jQuery笔记Part1】06-jQuery对象与js对象转换
jQuery对象与js对象转换概念为什么要转换转化方法 JS对象 -> jQuery对象 jQuery对象 -> JS对象原理图 jQuery笔记目录概念 jQuery对象是通 ...
jQuery笔记综合
jQuery笔记一. jQuery入门目标: 能够说出什么是jQuery 能够说出jquery的优点能够简单使用jquery 能够说出dom对象和jquery对象的区别 1.jQuery概述仓 ...
jQuery学习笔记整理---03部分
目录 jQuery特殊属性操作 val方法 html方法与text方法 width方法与height方法 scrollTop与scrollLeft offset方法与position方法 jQuery ...

【jQuery笔记Part2】03-jQuery-addBack()与end()的区别-children()与find()的区别

前几章的方法对比与总结

示例页面：3层div

css()：指定元素修改属性

parrent()：返回父节点(被包装成jQuery对象)

addBack()：额外添加调用链上一级

end()：选择调用链上一级

children()：返回儿子节点(被包装成jQuery对象)

find()：从后代节点进行查找(被包装成jQuery对象)

【jQuery笔记Part2】03-jQuery-addBack()与end()的区别-children()与find()的区别相关推荐

最新文章

热门文章