jQuery选择器

       jQuery的视频以实例为主,然后在对实例中用到的新的知识点进行归纳总结,这种讲课的方式我挺喜欢的,尤其是在敲完实例之后后边的总结对我的学习很有帮助,能跟着老师的讲解回想例子中是怎样应用的,为什么应用等,到现在为止做了四个实例,发现每个例子的实现都离不开对DOM元素的操作,我们知道在操作DOM元素之前我们必须对其进行标识和选择,而选择元素的方法貌似很多,这四个实例中就用到了好几个.本文将介绍如何选择将被操作的元素

1.基本选择器

        基本选择器是JQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class 和标签名来查找DOM元素。这个非常重要，下面的内容都是以此为基础，逐级提高的。

(1)“$(“#id”)”，获取id指定的元素，id是全局唯一的，所以它只有一个成员。

(2)“$(“a”)”，获取所有链接（<a>）元素

(3)“$(“.class”)”，获取class指定的元素，不同的元素可以具有相同的class属性，所以它可能具有多个成员。

(4)“$(“element”)”，获取element（元素名，比如div、table等）指定的元素，它可能具有多个成员。

(5)“$(“*”)”，获取所有元素，相当于document。

2.层次选择器

        通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素

(1)“$(“ancestordescendant”)”，获取给定的祖先元素下匹配的所有后代元素，注：这里可能有好几集的关系.

      如: $('div span').css('display', 'block'); //显示div中所有的<span>标记

(2)“$(“parent> child”)”，获取给定的父类元素下匹配的直接子类元素，注：这里只有一级的关系.

      如: $('div>span').css('display', 'block'); //显示<div>中子<span>标记

(3)“$(“pre+ next”)”，获取紧随pre元素的后一个兄弟元素,可以使用.next()代替.

      如: $('#userName +div').css('display', 'block');$('#userName).next().css('display','block'); //都是显示ID为userName元素后的下一个<div>

(4)“$(“pre ~ siblings”)”，获取pre元素后边的所有兄弟元素，可以使用.nextAll()代替

     如: $('# userName ~ div').css('display', 'block');$('#userName).nextAll().css('display', 'block');  //都是显示ID为userName元素后的所有<div>

 

3.过滤选择器

        通俗的讲, Selector选择器就是"一个表示特殊语意的字符串". 只要把选择器字符串传入上面的方法中就能够选择不同的Dom对象并且以jQuery包装集的形式返回.  按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器。

 

(1). 基本过滤选择器

 

1)“:first”，选取第一个元素。

    如:“$("li:first")”返回所有li元素的第一个li元素，它仍然被保存在集合中。

2) “:last”，选取最后一个元素。

     如:“$("li:last")”返回所有li元素的最后一个li元素，它仍然被保存在集合中。

3) “:not(selector)”，去除所有与给定选择器匹配的元素。

    如:“$("input:not(:checked)")”返回所有input元素，但去除被选中的元素（单选框、多选框）。

4)“:even”，选取所有元素中偶数的元素，索引从0开始。

     如: $("tbody tr:even")返回表格内容区域中所有数组下标为偶数的行

5)“:odd”，选取所有元素中奇数的元素，索引从0开始。

     如: $("tbody tr:odd")返回表格内容区域中所有数组下标为奇数的行

6)“:eq(index)”，根据索引值得到jQuery对象中包含的多个元素中的某一个元素，索引从0开始。

7) “:gt(index)”，选取索引大于指定index的元素，索引从0开始。

8) “:lt(index)”，选取索引小于指定index的元素，索引从0开始。

9) “:header”，选取所有的标题元素，如h1、h2等。

10)“:animated”，选取当前正在执行的所有动画元素。

 

(2). 内容过滤选择器

 

1) “:contains(text)”，选取包含text文本内容的元素。

2) “:empty”，选取不包含子元素或者文本节点的空元素。

3) “:has(selector)”，选取含有选择器所匹配的元素的元素。

4) “:parent”，选取含有子元素或文本节点的元素。（它是一个父节点）

 

(3). 可见性过滤选择器

 

1)“:hidden”，选取所有不可见元素。

2) “:visible”，选择所有可见元素。

 

(4).属性过滤选择器

 

1) “[attribute]”，选取拥有此属性的元素。

2) “[attribute=value]”，选取指定属性值为value的所有元素

3) “[attribute!=value]”，选取属性值不为value的所有元素。

4) “[attribute^= value]”，选取属性值以value开始的所有元素。

5) “[attribute$= value]”，选取属性值以value结束的所有元素。

6) “[attribute*= value]”，选取属性值包含value的所有元素。

7) “[selector1][selector2]…[selectorN]”，复合性选择器，首先经[selector1]选择返回集合A，集合A再经过[selector2]选择返回集合B，集合B再经过[selectorN]选择返回结果集合。

 

(5). 子元素过滤选择器

 

1):nth-child(even/odd)：能选取每个父元素下的索引值为偶(奇)数的元素。

     如:$("li:nth-child(even)").addClass("GetFocus");//增加每个父元素下索引值为偶数的子元素类别

2):nth-child(2)：能选取每个父元素下的索引值为 2 的元素。

     如: $("li:nth-child(2)").addClass("GetFocus");//增加每个父元素下的第2个子元素类别

3):nth-child(3n)：能选取每个父元素下的索引值是 3 的倍数的元素。

     如: $("li:nth-child(3n)").addClass("GetFocus");//增加每个父元素下索引值为3的倍数的元素类别

4):first-child，选取第一个子元素。

    如:$(""li:first-child"").addClass("GetFocus");//增加每个父元素下的第一个子元素类别

5):last-child，选取最后一个子元素。

     如:$(" li:last-child ").addClass("GetFocus");//增加每个父元素下的最后一个子元素类别

6):only-child，选取唯一子元素，它的父元素只有它这一个子元素。

     如: $(" li:only-child ").addClass("GetFocus"); //增加每个父元素下只有一个子元素类别

 

(6). 表单过滤选择器

        

1)“:input”，选取所有<input>、<textarea>、<select>和<button>元素。

2)“:text”，选取所有的文本框元素。

3)“:password”，选取所有的密码框元素。

4)“:radio”，选取所有的单选框元素。

5)“:checkbox”，选取所有的多选框元素。

6)“:submit”，选取所有的提交按钮元素。

7)“:image”，选取所有的图像按钮元素。

8)“:reset”，选取所有重置按钮元素。

9)“:button”，选取所有按钮元素。

10)“:file”，选取所有文件上传域元素。

11)“:hidden”，选取所有不可见元素。

 

(7).表单对象属性过滤选择器

       

1)“:enabled”，选取所有可用元素。

2)“:disabled”，选取所有不可用元素。

3)“:checked”，选取所有被选中的元素，如单选框、复选框。

4)“:selected”，选取所有被选中项元素，如下拉列表框、列表框。

 

        实例中基本上这几种选择器都用上了,但是针对每一类选择器所涉及到的获取元素的这么多的方法中使用到的还是很少,通过上面的总结不难发现语法基本一致,所以这个不是问题,对于大量的获取各种元素的方法我们采取的方法是记着经常用的,然后知道有这么一种方法能获取那个地方的元素,然后用的时候再去查也来得及.我在这里进行的总结只是给自己屡屡思路,让自己有一个全局观,大概了解一下通过选择器能获取到什么样的元素.肯定还有其他获取元素的方法,欢迎大家的补充......