虽然"<p>快购利众网4</p>"是在id为"myDivInner的"div"内部定义的.但因为id 为"myDivInner的"div" 也是id为"myDiv的下层,所以"<p>快购利众网5</p>"也属于id为"myDiv的下层. 有些绕口,记住一点就行. A,B操作器中如果是用空格连接,那么表示B属于A的下层(可以为任意层)之中
最后为这3个<p>元素对象增加名为"p3"的样式
知识点: 对于这类有层次的选择表达式$("A B"),A选择器和B选择器可以是"标签名","#id",".css"三种中的任意一种,中间用空格分开,空格表示任意次.
右边的B选择器是在左边A选择器选择的结果上进行内部任意层中选择, 记住是在左边选择出的元素对象(可能是多个)的内部进行再次选择(可能是多个). <- 这个知识点一定要理解透!
$("#myDiv>p").addClass("p3");
功能:在给定的父元素下匹配所有的子元素
>代表#myDiv下的子元素对象(多个并只是下一层),最后选择出2个<p>元素对象,""<p>快购利众网5</p><p>快购利众网6</p>",并为该<p>对象增加名为"p3"的样式
$("div+p").addClass("p3");
功能:匹配所有紧接在 div 元素后的 第一个同辈p 元素
+代表紧接着div同层的第一个子元素对象.
id为"myDivInner"同层后面第一个因为是"<div>",所以后没有紧接着的"<p>"
id为"myDiv"同层后面正好是一个"<p>"
最后选择出1个<p>元素对象,""<p>快购利众网7</p>",并为该<p>对象增加名为"p3"的样式
知识点: 是紧接着,如果A与B之间有其它元素都无法匹配.
$("div~p").addClass("p3");
功能:匹配 #myDiv 元素之后的所有同辈p 元素
该功能与 + 类似,不同的有两处.
一, +为同辈并且紧跟, ~为同辈不需要一定紧跟
二, +为同辈并且第一个, ~为同辈多个.
var aP = document.getElementById("myP");
$(aP).addClass("p2");
$(aP).addClass("p2") 其实就是$("#myP").addClass("p2") 的另一种形式.
$()中处了可以用字符串的表达式选择器,还可以使用DOM对象
当你能看到这句话,我想对你说"辛苦了."
学习的过程本来就是艰辛难耐的,唯为坚持才能战胜一切.
到现在我们应该明白之前的"$(document)"代表什么意思了吧.
好了, 今天先讲到这儿. 要快速熟悉选择器的用法只有多加练习.更多的高级应用我相信大家都能自己学会,掌握.
作者信息:万思杰