1.jQuery 选择器 first-child和first-of-type 的区别
测试代码:
<a>aaaa</a> <p id="firstP">1</p> <p>2</p> <p>3</p> <div> <!--可以把第一个a标签注释掉在试试 或者把这个a和下面的p换一下位置 看看first-child和first-of-type的效果 --> <a>Hello1</a> <p>Hello2</p> <p>Hello3</p> <p>Hello33</p> <a>Hello1</a> </div> <div> <p>Hello4</p> <p>Hello5</p> <p>Hello6</p> </div> <div id="testDiv">bbbb</div>
js:
$("p:first-child").css("background-color","red"); //$("p:first-of-type").css("background-color","yellow"); // //$("p:last-child").css("background-color","red"); // //$("p:last-of-type").css("background-color","red");
总结:first-child API手册解释的有些绕口,费解,通俗来讲就是先找到p标签的父元素,然后取这个父元素的第一个子节点,如果子节点和冒号前选择器代表的标签一致的话(ps:我的例子中是找到p元素的父标签,在找到这个父元素中第一个子元素是p标签,够明白了吧),就改变背景颜色;
first-of-type 注意这个和上面的对比,这个是先找到这个选择器对应的父元素,然后在父元素中找到第一个符合这个选择器的标签(ps:虽然都是第一个,
但是不一样,一个是直接获取父元素的第一个子节点,后面的是获取符合条件(和冒号前面选择器一样的标签)的第一个子节点)
last-child和last-of-type同理类推就可以,有不正确的地方,欢迎大家批评指正
参考链接:http://blog.csdn.net/pa_java/article/details/46379457