Jquery基础之选择器

浏览数：18 / 时间：2015年06月09日

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

　　一、基本选择器

　　1、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 ~ slibing")

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

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

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

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

　　三、过滤选择器

　　过滤选择器根据特定的选择规则选择Dom元素，根据选择不同的过滤规则可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

　　1.)基本过滤

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

　　　　　　选择指定元素中的第一个元素，方法如下：$("selector:first");例：$("div:first")这个方法查找所有div中的第一个元素是单一元素，返回结果是单个元素。

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

　　　　　　选择指定元素中的最后一个元素，方法如下：$("selector:last");例：$("div:last")这个方法查找所有div中的最后一个单一元素，返回结果是单个元素。

　　　　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")

　　　　　　取索引是奇数的所有元素，索引丛0开始计数，返回结果是所有奇数索引的元素，方法如下：$("selector:odd");例：$("input:odd")这个方法结果是取input中奇数的所有input元素，返回结果是元素集合。

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

　　　　　　取索引值所在位置排序的元素用于获得选择器中某个位置的元素，索引值index丛0开始计数，返回索引等于index的元素，方法如下：$("selector:eq(index)");例：$("div:eq(1)")这个方法返回结果是div中结果是索引值为1的元素，返回结果是单个元素。

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

　　　　　　选择索引值大于index的元素，index丛0开始计数，返回索引大于index的元素集合，方法如下：$("selector:gt(index)");例：$("div:gt(2)")这个方法返回索引值大于2的元素的集合，返回结果是元素集合。

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

　　　　　　选择索引值小于index的元素，index丛0开始计数，返回索引小于index的元素集合，方法如下：$("selector:lt(index)");例：$("div:lt(2)")这个方法返回索引值小于2的元素的集合，返回结果是元素集合。

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

　　　　　　标题元素选择器选择所有标题元素，方法如下：$(":header");例：$(":header")这个方法选择页面中所有的标题元素，返回结果是元素集合。

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

　　　　　　选取当前正在执行动画的元素，方法如下：$("selectro:animated");例：$("div:animated")这个方法选择div中正在执行动画的元素，返回结果是元素集合。

　　2.)内容过滤

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

　　　　　　选取selector中含有文本内容为text的元素.方法如下：$("selector:contains(text)");例:$("div:contains(di)")这个方法选取包含内容为di的div元素，返回结果是元素集合。

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

　　　　　　选取selector中不包含子元素或者内容为空的元素，方法如下：$("selector:empty");例：$("div:empty")这个方法选取内容为空或者不任何子元素的div元素，返回结果是元素集合。

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

　　　　　　选取selector中包含有selector2的元素，方法如下：$("selector:has(selector2)");例：$("div:has(p)")这个方法选取内容中包含元素<p>节点的元素，返回结果是元素集合。

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

　　　　　　选取selector中含有子元素或者文本的元素，方法如下：$("selector:parent");例：$("div:parent")这个方法选取拥有子元素的div元素,返回结果是元素集合。

　　3.)可见性过滤

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

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

　　　　　　可见性选择是选择selector中可见的元素，方法如下：$("selector:visible");例:$("div:visible")这个方法选取可见的div元素的集合，返回结果是元素集合。

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

　　　　　　不可见性选择是选择selector中不可见的元素，方法如下：$("selector:hidden");例:$("div:hidden")这个方法选取不可见的div元素的集合，返回结果是元素集合。

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

　　4.)属性过滤

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

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

　　　　　　属性名选择器选择属性中包含有某个属性名称的元素，方法如下：$("selector[attribute]");例:$("div[id]")这个方法选择有属性id的div元素，返回结果是元素集合。

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

　　　　　　属性值选择器选择属性中包含属性名和值的元素，方法如下:$("selector[attribute=value]");例:$("div[title=test]")这个方法选择属性名为title且属性对应的属性值为test的div元素，返回结果是元素集合。

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

　　　　　　属性值不为待查值的属性，方法如下：$("selector[attribute!=value]");例：$("div[title!=test]")这个方法选择属性名为title且属性对应的属性值不为test的div元素，返回结果是元素集合。

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

　　　　　　属性值以待查值开始选择器用于选取属性值以待查值开头的元素，方法如下：$("selector[attribut^=value]");例：$("div[id^=te]")这个方法选择属性名称为id且属性值以te开头的元素，返回结果是元素集合。　　

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

　　　　　　属性值以待查值结束选择器用于选取属性值以待查值结尾的元素，方法如下：$("selector[attribut$=value]");例：$("div[id$=st]")这个方法选择属性名称为id且属性值以st结尾的元素，返回结果是元素集合。

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

　　　　　　属性值含有待查值选择器用于选取属性值含有待查值的元素，方法如下：$("selector[attribut*=value]");例：$("div[id*=st]")这个方法选择属性名称为id且属性值含有st的元素，返回结果是元素集合。

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

　　　　　　多属性选择器根据多个属性选择元素，每次根据属性缩小选择选择范围，最后选取符合全部属性的元素集合，方法如下：$("selector[attribute][attribut1=value1]");例：$("div[id][title*=es]")这个方法选择属性名中含有id且属性title值中含有es的div元素集合，返回结果是元素集合。

　　5.)子元素过滤

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

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

　　　　　　第一个子元素选择器用于选择父元素中第一个子元素，方法如下：$("selector:first-child");例:$("ul li:first-child")这个方法返回ul元素集中第一个li子元素，返回结果是元素集合。

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

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

　　　　　　　最后一个子元素选择器用于选择父元素中最后一个子元素，方法如下：$("selector:last-child");例:$("ul li:last-child")这个方法返回ul元素集中最后一个li子元素，返回结果是元素集合。

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

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

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