<body> <div class="container"> <div class="d1"> <span class="s s1"> <p class="p3"></p> </span> <p class="p1"> </p> </div> <div class="d2"> <span class="s s2"></span> </div> <div class="d3"> <span class="s s3"></span> </div> <p class="p2"></p> </div> <div class="container2"> <ul> <li class="l1">1</li> <li class="l2">2</li> <li class="l3">3</li> <li class="l4">4</li> <li class="l5">5</li> </ul> </div> </body>
(以后是html中各个标签的布局)
选出类名为同时为s和s1的标签,注意两个类名之间没有逗号以及空格 $(".s.s1"); 选出类名为s1或s2的标签,注意两个类名键用逗号隔开 $(".s1,.s2"); 选出第一个li标签(l1) $("li:first"); 选出最后一个li标签(l5) $("li:last"); 选出奇数行的li标签(l1、l2、l3) $("li:even"); 选出偶数行的li标签 $("li:odd"); d2后面的第一个div兄弟标签(d2) $(".d2 + div"); d2后面的第一个div兄弟标签 $(".d2 ~ div"); 选出d1的所有孩子(父子)(s1和p1); $(".d1").children(); 选出d1的孩子(父子)中全部p标签(p1) $(".d1").children("p"); 选出d1的孩子(父子孙……)中全部p标签(p1和p3) $(".d1").find("p"); 选出d1的孩子(父子孙……)中全部p标签(p1和p3) $(".d1 p"); d1的所有兄弟(d2、d3、p2) $(".d1").siblings(); d1兄弟中的p标签(p2) $(".d1").siblings("p"); d1后面的第一个兄弟(d2) $(".d1").next(); d2后面的全部兄弟(d3、p2) $(".d2").nextAll(); d3前面的第一个兄弟(d2) $(".d3").prev(); d3前面的全部兄弟(d2、d1) $(".d3").prevAll(); d2的父亲(父子)(container) $(".d1").parent(); d2的祖先(container、body、html) $(".d1").parents();