上街免费网站建设,百度教育智能小程序,会议显示网站开发公司,网站建设岗位的简介一篇不错的详细教程#xff0c;解读jQuery筛选器children() jQuery的选择包含两种#xff0c;一种是选择器#xff0c;一种是筛选器。筛选器是对选择器选定的jQuery对象做进一步选择。 children()是一个筛选器#xff0c;顾名思义就是筛选孩子#xff0c;筛选那些符合条件…一篇不错的详细教程解读jQuery筛选器children() jQuery的选择包含两种一种是选择器一种是筛选器。筛选器是对选择器选定的jQuery对象做进一步选择。 children()是一个筛选器顾名思义就是筛选孩子筛选那些符合条件的孩子。 完整的格式如下 .children(expr) 其中children是筛选器的名称expr是表达式所有选择器中的表达式都可以用在这比如按标签名div,按类名.class,按序号:first等等如果表达式为空那么返回的是所有的孩子返回的结果仍为jQuery对象。例如 body div idmain div idlike classrightbar h2猜你喜欢/h2 ul li海飞丝洗头膏/li li六神花露水/li li舒肤佳香皂/li li心相印纸巾/li li哇哈哈矿泉水/li li王老吉/li /ul /div div idhot classrightbar h2热门推荐/h2 ul li融氏橄榄油/li li帮宝适纸尿裤/li li有机大米/li li妙洁垃圾袋/li li优乐美奶茶/li li亲亲果冻/li /ul /div div idinner/div /div /body script typetext/javascript languagejavascript //此处为jQuery代码 /script 需求1把所有div的孩子的字体颜色变为红色 $(div).children().css(color,red);//所有的文字都变成了红色 需求2把所有的div的孩子中是h2标签的字体颜色变为红色 $(div).children(h2).css(color,red);//所有h2标题的文字都变成了红色 需求3把所有div的孩子中是li标签的字体颜色变为红色 $(div).children(li).css(color,red);//失败 为什么不成功呢因为children只能找孩子找不到孙子辈的而div的孩子是h2和ul所以找不到li 那么要想通过children找到li只有先选定li的父亲ul $(div ul).children(li).css(color,red);//所有li的文字都变成了红色 $(div ul)是一个联级选择器意思是选择div下面的ul这里不详细解释。 需求4把ul的第二个孩子的字体颜色变为红色 $(div ul).children(:eq(1)).css(color,red);//猜你喜欢的第二行六神花露水会变红 要第二个孩子变红为什么是eq(1)呢因为顺序号是从0开始的第一个孩子的序号是0所以第二个孩子的序号就是1咯。 细一看发现只有猜你喜欢模块的第二行变了热门推荐的第二行没变为什么呢因为children筛选器筛选出来的孩子是在一块排序的所以热门推荐的第二行就变成了老7要想变红可以这么写 $(div ul).children(:eq(1),:eq(7)).css(color,red);//猜你喜欢的第二行热门推荐的第二行都变红 总结一下children是一个筛选器找到当前jQuery对象的孩子children(expr)中的expr是表达式加了expr之后符合expr的孩子才会留下来不符合的就干掉了。children只能找孩子要想找孙子辈的、重孙子辈的那就得用 find 筛选器。
