jQuery过滤子()案例详解(图解)

jQuery有两种选择，一种是选择器，另一种是过滤器。过滤器是为了进一步选择选择器选择的jQuery对象。Children()是一个过滤器，顾名思义就是筛选孩子和符合要求的人。完整的格式如下：复制代码如下：children(expr)，其中children是过滤器的名称，expr是表达式，这里可以使用所有选择器中的表达式，比如通过标记名‘div’，通过类名’。类'，通过序列号' :first '等。如果表达式为空，则返回所有子代，返回的结果仍然相同。例如， 文案代码如下： body div ID=' main ' div ID=' like ' class=' right bar ' H2猜猜你喜欢吗/h2ul Li head & hires洗发水/li李柳身花露水/li lishufujia香皂/li Li Li heart to heart纸巾/li li Li Wahaha矿泉水/li Li Li Wang Lao Ji/Li/Ul/div ID=' hot ' class=' right bar ' H2大众推荐/h2ul李荣橄榄油/Li Li Li帮宝适纸尿裤/Li有机大米/Li Li苗杰垃圾袋/Li 正文复制代码如下：脚本类型=' text/JavaScript '语言=' JavaScript'/这里是jQuery代码/脚本要求1:将所有div子代的字体颜色改为红色。 复制代码如下： $ ('div ')。儿童()。CSS('颜色'，'红色')；//所有的字都变成了红色。

要求2:将所有div子代中h2标签的字体颜色改为红色。复制代码如下： $(“div”)。儿童(' h2 ')。CSS('颜色'，'红色')；//H2 title的字都红了。

要求3:将所有div子级中li标签的字体颜色改为红色。复制代码如下： $(“div”)。儿童(' li ')。CSS('颜色'，'红色')；//失败！

为什么没有成功？孩子只能找孩子，找不到孙子，而div的孩子是h2和ul，所以找不到李。如果你想通过孩子找到li，你必须首先选择li的父亲ul来复制代码如下： $ ('div UL ')。儿童('李')。CSS('颜色'，'红色')；//Li的所有字符都变成红色$('div ul ')，这是一个级联选择器，意思是在div下选择ul，这里不做详细说明。

要求：将ul二胎的字体颜色改为红色。复制代码如下： $(“UL分区”)。儿童(' : eq (1)')。CSS('颜色'，'红色')；//猜猜你喜欢的第二行“六神花露水”，会不会变红。

为什么第二个孩子变红需要公式(1)？因为序列号从0开始，所以第一个孩子的序列号是0，所以第二个孩子的序列号是1。乍一看，发现只有“猜你喜欢什么”模块的第二行有变化，而“热门推荐”的第二行没有变化。为什么呢？因为儿童过滤器筛选出来的孩子是一起排序的，“热门推荐”第二行变成了老7。如果想变红，可以这样写：复制代码如下： $ ('div ul ')。孩子(‘:情商(1)，情商(7)’)。CSS('颜色'，' div ul ')。//猜你喜欢的第二行，热门推荐第二行变红】。

总结一下：孩子是一个过滤器。查找当前jQuery对象的子对象。expr in children(expr)是一个表达式。添加expr后，符合expr的孩子会留下，不符合的会被杀。孩子只能找孩子。如果他们想找到孙子和曾孙，他们必须使用“查找”过滤器。