jQuery自学教程（二）——选择器

选择器引擎

jQuery的核心就是选择器引擎了。它集成了css的语法，可以对DOM元素的标签名、属性名、状态等进行准确快速的选择，且不必担心兼容性。

首先先补充一点css选择器的基础，简单介绍。

开发者的规定是一个页面不允许重复id，而如果你这样做了，用css的id选择器并不会报错，依旧会将所有符合要求的id选择出来，这一点就不够优化了。使用jQuery选择，则只会选择第一个id符合要求的元素，可以避免这个问题。

jQuery选择器和css选择器很类似，css找到元素之后是添加的单一的样式，而jQuery则是添加的动作行为。css可能带来的不兼容的问题jQuery往往可以解决。

而且jQuery有容错的功能，使用jQuery选择器  $('#id').css......如果id对应的元素不存在，不会报错，而如果用css选择器则会报错。

一、基本选择器

包括id选择器，class选择器，标签名选择器，通配符选择器（*），群组选择器。

前面三种就不再介绍了。

通配符选择器（*），选择全部的节点。但是非常不建议在全局下使用“*”，因为会极大的消耗资源，往往建议在和其他选择器的搭配下在局部使用，比如：$('ul li *').css.......简化内容。

注意还有一种选择器，如下$('p#id'),$(div.class)等，表示具有某id或者某class的元素标签，前面有特定的元素标签选定符。

另多class选择器，如果某个标签具有多个class，则可以利用$('.class1.class2')来选择具有两个class的元素标签。

ps：选择器标签越短越准确越好，不必追求长度。长度越长，解析耗时越长。

二、层次选择器

 

包括的几个选择器如上图。

后代选择器：选择所有符合条件的后代，不仅限于子代；

子选择器：仅仅在子代中寻找符合条件的。jQuery中提供了children方法（eg：$('#id').children('p').css..... 在children内提供一个简单选择器）。

next选择器：筛选出特定节点的后一个符合条件的同级节点。jQuery中提供了next方法（eg：$('#id').next('p').css..... 在next内提供一个简单选择器）

nextAll选择器：选择器筛选出特定节点的后所有符合条件的同级节点。jQuery中提供了nextAll方法（eg：$('#id').nextAll('p').css..... 在nextAll内提供一个简单选择器。注意，jQuery也提供了sibling方法，用法相同，只是获得了所有符合条件的同辈节点，不论先后）。

Ps：如果在children，next，nextAll，nextUntil（向下同级元素遇到指定标签则停止），prev，prevAll，prevUn

til（向上同级元素遇到指定标签则停止）等方法中如果不传参数的话，则默认的是“*”，存在浪费的情况，影响运行

效率，因此不建议这样做。

Ps：使用上面说的各种方法，速度比高级过滤器要快，因为不需要解析字符串来处理，提高了处理速度。

三、属性选择器

需要注意的就是”!=“的css选择器在各种浏览器都不兼容，jQuery的这种方式可以兼容。

四、过滤选择器

1、基本过滤选择器

Ps：eq，gt，lt其中的index值可以使负数，表示从最后往前倒叙。最后一个是-1，依次倒退。

Pps：对应着上述过滤选择器，有first()，last()，not()，eq()方法，使用方法同过滤选择器。

2、内容过滤器

Ps：jQuery提供了如下几个方法 has()，parent()，parents()，parentUntil()方法。has的用法和效果和上述相同，但是后面几个不一样，类似于节点操

作：parent()方法选择当前元素的父元素，parents()方法选择当前元素的父元素及其全部的祖先元素(如果不加限制会直到html)，parentUntil(‘div’)方法

需要提供一个参数，选择当前元素的父元素直到给定标签为止。

3、可见性过滤器

Ps：:hidden过滤器一般包含的内容为：css样式style为display:none，input表单类型为type="hidden"和 visibility:hidden的元素。

4、子元素过滤器

对比：first只返回单个元素，first-child是返回每个父元素的子元素；last只返回单个元素，last-child是返回每个父元素的子元素。nth-child中的参数可

以是索引值（从1开始），也可以是even，odd，3n，3n+1等。

5、其他方法

jQuery还提供了一些其他常用的方法，便于开发。

Ps: find(‘’)是对元素的子元素的筛查，而filter()是对元素自身进行筛查。

五、表单选择器

虽然可以使用常规选择器来对表单元素进行定位，但有时还是不能满足开发者灵活多变的需求，所以jQuery为表单提供了专门的选择器。

注意，这些选择器返回的都是集合元素，如果想获得某一个指定的元素，最好结合一下属性选择器。

六、表单过滤器

Ps：有时候空格会影响选择器的选择效果。！！！很重要！！！比如$('li:first-child')表示选择第一个li标签，如果

空一格的话$('ul li:first-child')则还包含了一个层次选择器。