JQuery选择器细节-遁地龙卷风

1.层次选择器-子元素选择器

     

lol

     

          

     

alert($("div>p").length);//2

//逐层遍历符合的元素
alert($("body>div>p").length)//1

//会定位到body的子div，然后定位子p

2.内容过滤器-has

　　

123

　　

123

　　

123

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

4.应用了class为lol的div元素

$("div.lol")

5.子元素选择器，这里已:nth-child()为例

元素的选择是根据元素在父元素中的位置或唯一性决定的

(1)

　　

　　　　
• 1

　　　　
• 2

　　　　
• 3

　　　　
• 4

　　

$("ul li:nth-child(2n)").css("background","red");
$("li:nth-child(2n)").css("background","red");
两个语句的效果相同，因为所有li元素的父元素都是ul

(2)

　　

　　　　
• 1

　　　　
• 2

　　　　
• 3

　　　　
• 4
　　
　　

　　

6

　　

7

　　

8

　　

9

$("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背景色也为红色

未完待续!

欢迎补充指正!