jQuery学习总结之选择器篇

2017-02-16 本文已影响0人 McRay

jQuery选择器这一块，我大致用下面这张图片进行了归纳，分为两个块，一块是jQuery选择器的优势，另外一块，重点就是，jQuery选择器的分类。

jQuery选择器.png

<div>test</div>
<script type="type/javascript">
   document.getElementById("tt").style.color = "red";
</script>

运行上面的代码，浏览器会报错，因为网页中没有id为“tt”的元素。
但是，我们使用jQuery获取网页中不存在的元素也不会报错，这个时候，就需要注意另外一个问题：当要用jQuery检查某个元素在网页上是否存在时，就不能使用以下代码：

if($("#tt")) {
//do something
}

而应该根据获取到元素的长度来判断，代码如下：

if($("#tt").length > 0) {
//do something
}

或者转化成DOM对象来判断，代码如下：

if($("#tt")[0]) {
//do something
}

基本选择器.png

层次选择器.png

需要注意的第一点是，$("ancestor descendant")与$("parent>child")的区别：一个是获得所有后代元素，一个是获得子元素；
第1个和第2个选择器比较常用，而后两个因为在jQuery中可以用更加简单的方法代替，所以很少用，可以使用next()方法代替$("prev+next")选择器，可以用nextAll()代替$("prev~siblings")选择器；
最后一点是，siblings()方法与$("prev~siblings")选择器的区别是，siblings()方法与前后位置无关，只要是同辈节点就能匹配。