Home  >  Article  >  Web Front-end  >  jQuery筛选器children()案例详解(图文)_jquery

jQuery筛选器children()案例详解(图文)_jquery

WBOY
WBOYOriginal
2016-05-16 17:41:551050browse

jQuery的选择包含两种,一种是选择器,一种是筛选器。筛选器是对选择器选定的jQuery对象做进一步选择。

children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子。

完整的格式如下:

复制代码 代码如下:

.children(expr)

其中children是筛选器的名称,expr是表达式,所有选择器中的表达式都可以用在这,比如按标签名"div",按类名".class",按序号":first"等等,如果表达式为空,那么返回的是所有的孩子,返回的结果仍为jQuery对象。例如:
复制代码 代码如下:




猜你喜欢



  • 海飞丝洗头膏

  • 六神花露水

  • 舒肤佳香皂

  • 心相印纸巾

  • 哇哈哈矿泉水

  • 王老吉




热门推荐



  • 融氏橄榄油

  • 帮宝适纸尿裤

  • 有机大米

  • 妙洁垃圾袋

  • 优乐美奶茶

  • 亲亲果冻







复制代码 代码如下:



需求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 筛选器。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn