1.层次选择器-子元素选择器
<body>
<div>
<p>lol</p>
<div>
<p></p>
</div>
</div>
</body>
alert($("div>p").length);//2
//逐层遍历符合的元素 alert($("body>div>p").length)//1
//会定位到body的子div，然后定位子p
2.内容过滤器-has
<html>
<body>
<div id="dnf"> <p class="lol">123</p> <p>123</p> <p>123</p></div>
</body>
</html>
var a = $("#dnf p:has(.lol)").length //这样是获取不到的 var b = $("#dnf:has(p):has(.lol)").length
var c= $("has(.lol)").length alert(a);//0 alert(b);//1
alert(c);//3
has过滤器过滤的是后代元素
"#dnf p:has(.lol)"的意思是是否有这样的p元素，它是应用id为dnf的后代元素，且改p元素的后代元素中有应用class为lol的元素
"#dnf:has(p):has(.lol)"的意思是是否有这样的元素，它的id是dnf，且后代元素中有p元素，且有class为lol的元素” html body div
":has(.lol)" 的意思是是否有这样的元素，它的后代元素中有class为lol的元素，从html标签开始逐层遍历
3.内容过滤选择器-empty
<div></div><!--可以被找到-->
<div><!--不可以被找到，有文本元素-->
</div>
4.应用了class为lol的div元素
$("div.lol")
5.子元素选择器，这里已:nth-child()为例
元素的选择是根据元素在父元素中的位置或唯一性决定的
(1)
<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body>$("ul li:nth-child(2n)").css("background","red");$("li:nth-child(2n)").css("background","red");两个语句的效果相同，因为所有li元素的父元素都是ul
(2)<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </body>$("ul li:nth-child(2n)").css("background","red");
//ul下的li，innerText为2,4为红色$("li:nth-child(2n)").css("background","red");
//ul下的li，innerText为2,4为红色//innerText为6,7,8，9的li的父元素是body，6在body中是第2个元素，所以innerText为6的li背景色为红色///当然innerText为8的li背景色也为红色
未完待续!
欢迎补充指正!
