jQuery学习总结之选择器篇

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

jQuery选择器.png

---

• 首先在讲到优势中的第三点时，为什么说jQuery选择器有完善的处理机制呢？因为，在原生的js中，会遇到一下问题，

test

运行上面的代码，浏览器会报错，因为网页中没有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()方法与前后位置无关，只要是同辈节点就能匹配。

---

过滤选择器又分以下几种:

过滤选择器.png

其中基本过滤选择器又分以下几种:

基本过滤选择器.png

内容过滤选择器又分以下几种:

内容过滤选择器.png

属性过滤选择器分以下几种:

属性过滤选择器.png

子元素过滤选择器

子元素过滤选择器.png

表单对象属性过滤选择器

表单对象属性过滤选择器.png

表单选择器

表单选择器.png