<body> <div id="main"> <div id="like" class="rightbar"> <h2>猜你喜欢</h2> <ul> <li>海飞丝洗头膏</li> <li>六神花露水</li> <li>舒肤佳香皂</li> <li>心相印纸巾</li> <li>哇哈哈矿泉水</li> <li>王老吉</li> </ul> </div> <div id="hot" class="rightbar"> <h2>热门推荐</h2> <ul> <li>融氏橄榄油</li> <li>帮宝适纸尿裤</li> <li>有机大米</li> <li>妙洁垃圾袋</li> <li>优乐美奶茶</li> <li>亲亲果冻</li> </ul> </div> <div id="inner"></div> </div> </body>
1 <script type="text/javascript" language="javascript"> 2 //此处为jQuery代码 3 </script>
需求1:把所有div的孩子的字体颜色变为红色
$("div").children().css("color","red");//所有的文字都变成了红色
$("div").children("h2").css("color","red");//所有h2标题的文字都变成了红色
$("div").children("li").css("color","red");//失败!
$("div ul").children("li").css("color","red");//所有li的文字都变成了红色
$("div ul")是一个联级选择器,意思是选择div下面的ul,这里不详细解释。
$("div ul").children(":eq(1)").css("color","red");//猜你喜欢的第二行“六神花露水”会变红
$("div ul").children(":eq(1),:eq(7)").css("color","red");//猜你喜欢的第二行,热门推荐的第二行都变红
jQuery笔记-jQuery筛选器children()详解
原文:https://www.cnblogs.com/jpfss/p/9512315.html