JQuery find()方法和children()方法的区别
程序员文章站
2022-07-12 23:43:15
...
find() 方法定义:它是获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。find()方法要注意的地方:find()方法是在当前元素集合内部查找,不包括自己。
实例:
<!DOCTYPE html> <html> <head> <script language="JavaScript" type="text/JavaScript" src="lib/jquery/jquery-1.9.1.js"></script> <style> body { font-size: 16px; font-weight: bolder; } p { margin: 5px 0; } </style> </head> <body> <div> <span>Hello</span> <span> <p class="selected">test</p> </span> <p>And One Last Time</p> <p class="selected">again</p> </div> <p class="selected">Hello Again</p> <script>$("div").find(".selected").css("color", "blue");</script> </body> </html>
运行结果:
children()方法,表面意思就是:孩子,儿童,子女的意思,一般理解为子女或儿子。为什么这样理解?下面先看一下children的定义吧。
children()方法定义:它是获得匹配元素集合中每个元素的所有子元素(不包括自己,只能在儿子辈(第一层)查找)。
我理解是children是匹配集合中每个元素的“儿子辈”的子元素。find()除了儿子辈,还包括孙子辈,即只要是它的后代就行。
<!DOCTYPE html> <html> <head> <script language="JavaScript" type="text/JavaScript" src="lib/jquery/jquery-1.9.1.js"></script> <style> body { font-size: 16px; font-weight: bolder; } p { margin: 5px 0; } </style> </head> <body> <div> <span>Hello</span> <span> <p class="selected">test</p> </span> <p>And One Last Time</p> <p class="selected">again</p> </div> <p class="selected">Hello Again</p> <script>$("div").children(".selected").css("color", "blue");</script> </body> </html>
运行结果:
上一篇: 杂
下一篇: jquery的each()详细介绍
推荐阅读
-
jQuery删除节点的三个方法即remove()detach()和empty()
-
jquery1.9 下检测浏览器类型和版本的方法
-
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
-
JavaScript中的toString()和toLocaleString()方法的区别
-
jQuery实现table隔行换色和鼠标经过变色的两种方法
-
setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法
-
jquery中的查找parents与closest方法之间的区别
-
iOS----------componentsJoinedByString 和 componentsSeparatedByString 的方法的区别
-
php 中self,this的区别和操作方法实例分析
-
js数组切割方法(splice和slice的区别)