jQuery选择器这一块,我大致用下面这张图片进行了归纳,分为两个块,一块是jQuery选择器的优势,另外一块,重点就是,jQuery选择器的分类。
- 首先在讲到优势中的第三点时,为什么说jQuery选择器有完善的处理机制呢?因为,在原生的js中,会遇到一下问题,
<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
}
基本选择器又分以下几种:
层次选择器又分以下几种:
- 需要注意的第一点是,$("ancestor descendant")与$("parent>child")的区别:一个是获得所有后代元素,一个是获得子元素;
- 第1个和第2个选择器比较常用,而后两个因为在jQuery中可以用更加简单的方法代替,所以很少用,可以使用next()方法代替$("prev+next")选择器,可以用nextAll()代替$("prev~siblings")选择器;
- 最后一点是,siblings()方法与$("prev~siblings")选择器的区别是,siblings()方法与前后位置无关,只要是同辈节点就能匹配。
过滤选择器又分以下几种:
其中基本过滤选择器又分以下几种:
内容过滤选择器又分以下几种:
属性过滤选择器分以下几种:
子元素过滤选择器
表单对象属性过滤选择器