选择器是JQuery的根基,在JQuery中对事件处理、选择遍历Dom、ajax操作都依赖选择器。JQuery选择器分为基本选择器、层次选择器、过滤选择器、表单选择器。

  一、基本选择器

ID选择器$("#ID")

    页面中每个ID是唯一的,ID选择器选择每个ID元素,如下方法如下:$("#ID");例:$("#tbxName")这个方法选择id=tbxName的页面元素。选择结果为单个元素。

  2、类选择器$(".class")

    据给定的类匹配查找元素,类选择器选择页面中样式类定义为要查找类的元素,方法如下:$(".class");例:$(".mini")这个方法选择类定义为mini的页面元素集合。

选择结果为元素集合。

  3、元素选择器$("element")

    根据元素类型选择对应的元素集合。元素选择器选择页面中给定元素名匹配的所有元素,方法如下:$("div");例:$("div")这个方法选择页面中所有div元素的集合。

选择结果为元素集合。

  4、多个元素选择器$("selector1,selector2,...,selectorN")

    将每一个选择器匹配到的元素合并后一起返回。可以指定任意多个选择器,并将匹配到的元素合并到一个结果内,方法如下:$("selector1,selector2,...,selectorN");

例:$("div,#two,.one")这个方法查找页面中所有div元素,id=two的页面元素和class=one的元素,并将结果以集合的形式返回。选择结果为元素集合。

  5、所有元素选择$("*)

元素集合。

  二、层次选择器

   1、后代元素选择器$("ancestor descandent ")    

子节点,孙节点、重孙节点等】,方法如下:$("ancestor descandent ");

例:$("body div")这个方法查找body的所有的div元素,返回结果是元素集合。

  2、子元素选择器$("parent > child")

    在给定的交节点中查找子节点元素,只查找匹配的子节点元素【只能是子节点】,方法如下:$("parent > child");例:$("body > div")这个方法查找body中的子div元素,

返回结果是元素集合。

  3、紧邻下个元素选择器$("prev + next")

    在给定的节点后的兄弟元素中查找指定的元素,查找指定节点的兄弟元素中与节点紧邻且匹配的一个元素,方法如下:$("prev + next");例:$(".one + div")这个方法查找

类为one的元素后的兄弟元素中紧邻的div元素,返回结果是元素集合。

PS:可以使用next()方法替代该方法,替代形式如下:$("prev").next("next");改写上面的例子为$(".one").next("div");返回结果为元素集合。

  4、紧邻兄弟元素选择器$("prev ~ sibling")

    指定节点后的所有兄弟元素,查找指定的节点后的兄弟元素中所有匹配的兄弟元素,方法如下:$("prev ~ sibling");例:$("#two ~div")这个方法查找id=two元素的所有兄

弟节点中的div元素,返回结果是元素集合。

PS:可以使用NextAll()方法替代该方法,替代形式如下:$("prev").ntextAll("next");改写上面的例子为$("#two").nextAll("div");返回结果为元素集合。使用siblings()方法

可以查找元素的同辈元素,方法如下:$("prev").siblings("siblings");例:$("#two").siblings("div")这个方法查找id=two元素的所有同辈div元素,返回结果是元素集合。

  三、过滤选择器

子元素过滤和表单对象属性过滤选择器。

  1.)基本过滤

    1、取第一个元素$("selector:first")

单个元素。

    2、取最后一个元素$("selector:last")

单个元素。

    3、not选择器$("selector:not(selector2)")

      not选择器去除所有和selector2匹配的元素,最终结果是取所有不和selector2匹配的元素集合,方法如下:$("selector:not(selector2)");例:$("div:not(.mini)")

这个方法结果是取div中所有样式类不是mini的元素,返回结果是元素集合。

    4、取偶数元素$("selector:even")

      取索引是偶数的所有元素,索引丛0开始计数,返回结果是所有偶数索引的元素,方法如下:$("selector:even");例:$("input:even")这个方法结果是取input中偶数的

所有input元素,返回结果是元素集合。

      5、取奇数元素$("selector:odd")

元素集合。

    6、取索引值所在位置的元素$("selector:eq(index)")

单个元素。

    7、选择索引值大于索引的元素$("selector:gt(index)")

元素集合。

    8、选择索引值小于索引的元素$("selector:lt(index)")

元素集合。

    9、标题元素选择器$(":header")

元素集合。

    10、正在执行动画选择器$("selector:animated")

元素集合。

  2.)内容过滤

    1、含有内容选择器$("selector:contains(text)")

元素集合。

    2、空元素选择器$("selector:empty")

元素集合。

    3、含有选择器匹配元素选择器$("selector:has(selector2)")

元素集合。

    4、选择拥有子元素或者文本的选择器$("selector:parent")

元素集合。

  3.)可见性过滤

      可见性过滤根据元素的可见或者不可见性来选择对应的元素。

    1、可见性选择$("selector:visible")

元素集合。

    2、不可见性选择$("selector:hidden")

元素集合。

PS:此处hidden不仅仅包括样式dispaly:none,也包括文本隐藏域<input type=hidden />和visible=false这样的元素。

  4.)属性过滤

      属性过滤选择器是通过元素的属性来选取相应的元素。

    1、属性名选择器$("[attribute]")

元素集合。

    2、属性值选择器$("[attribute=value]")

元素集合。

    3、属性值不为待查值选择器$("[attribute!=value")

元素集合。

    4、属性值以待查值开始选择器$("[attribute^=value]")

元素集合。  

    5、属性值以待查值结束选择器$("[attribute$=value]")

元素集合。

    6、属性值含有待查值选择器$("[attribute*=value]")

元素集合。

    7、多属性选择器$("selector[attribute][attribute=value],...,[attribute^=value])

元素集合。

  5.)子元素过滤

    子元素过滤选择器用于选择父元素中的符合查找条件的子元素。

    1、第一个子元素选择器$("selector:first-child")

元素集合。

PS:基本内容选择器first选取是的第一个元素,返回结果是单个元素,first-child返回的是每个父元素中第一个子元素,返回结果是元素集合。

    2、最后一个元素选择器$("selector:last-child")

元素集合。

PS:基本内容选择器last选取是的最后一个元素,返回结果是单个元素,last-child返回的是每个父元素中最后一个子元素,返回结果是元素集合。

    3、index根据位置选择元素选择器$("selector:nth-child(index)")

index从1开始计数,方法如下:$("selector:nth-child(index)");例:$("ul li:nth-child(even)"此方法选择ul中li为偶数的元素,例:$("ul li:nth-child(3n+1)")此方法选择ul元素中被3整除余数为1的元素。返回结果是元素集合。

    4、只有一个子元素的元素选择器$("selector:only-child")

元素集合。

  6.)表单对象属性过滤

   1、可用元素选择器$(":enabled")

元素集合。

   2、不可用元素选择器$(":disabled")

元素集合。

   3、被选中的元素选择器$(":checked")

元素集合。

   4、补选择的选项选择器$(":selected")

元素集合。

  四、表单选择器

   1、input选择器$(":input")

元素集合。

   2、text选择器$(":text")

元素集合。

   3、password选择器$(":password")

元素集合。

   4、radio选择器$(":radio")

元素集合。

   5、checkbox选择器$(":checkbox")

元素集合。

   6、submit选择器$(":submit")

元素集合。

   7、image选择器$(":image")

元素集合。

   8、reset选择器$(":reset")

元素集合。

   9、button选择器$(":button")

元素集合。

   10、file选择器$(":file")

元素集合。

   11、hidden选择器$(":hidden")

元素集合。

    选择器中注意事项:

    1、选择器中含有特殊字符[.,#,*,(,],]时候需要使用车转义符转义如id="id#2"。选择时候操作如下:$("#id\\#2");

    2、选择器中含有空格会对结果产生不同影响。