jQuery选择器

（3）一、简单过滤选择器

　　（1）$("selector:first")　　//:first选择器 用于在匹配的集合中选择第一个元素

　　例：$("li:first") 在所有li元素中选择第一个li元素

　　（2）$("selector:last")　　//:last选择器 用于在匹配元素集合中选择最后一个元素

　　（3）$("selector:odd")　　//:odd选择器 用于在匹配元素集合中选择索引为奇数的所有元素

　　（4）$("selector:even")　　//:env选择器 用于在匹配元素集合中选择索引为偶数的所有元素

　　（5）$("selector:eq(N)")　　//:eq(N)选择器 用于在匹配元素中选择索引为N的的元素

　　（6）$("selector:gt(N)")　　//:gt(N)选择器 用于在匹配元素中选择索引大于N的所有元素

　　（7）$("selector:lt(N)")　　//:lt(N)选择器 用于在匹配元素中选择索引小于N的所有元素

　　例：$("selector:gt(N),selector:lt(M)")  在匹配元素中选择索引大于N且小于M的所有元素

　　（8）$("selector1:not(selector2)")　　//:not(selector)选择器 用于在匹配元素集合中移除符合selector2的元素集合

　　（9）$(":header")　　//:header选择器 用于选择标题标签 如：h1 h2 h3 之类的标签元素

　　（10）$("selector:animated")　　//:animated选择器 用于在匹配元素集合中选择所有正在执行动画效果的元素

　　二、内容过滤选择器

　　（1）$("selector:contains(text)")　　//:contanins(text)选择起 用于在匹配元素集合中选择所有内容包含text的元素集合。

　　（2）$("selector1:has(selector2)")　　//:has(selector)选择器 用于在匹配元素集合中选择包含selector2的元素。

　　（3）$("selector:empty")　　//:empty选择器 用于选择不包含子元素或文本的所有空元素

　　（4）$("selector:parent")　　//:parent选择器 用于选择包含子元素或文本的所有元素 与empty作用相反

　　三、属性过滤选择器

　　（1）$("selector[attribute]")　　//包含属性选择器 在匹配元素集合中筛选出具有 attribute属性的元素集合

　　（2）$("selector[attribute=value]")　　//属性等于选择器 在匹配元素集合中筛选出 属性attribute值等于value的元素集合

　　（3）$("selector[attribute*=value]")　　//属性包含选择器 在匹配元素集合中筛选出 属性attribute值中包含value的所有元素集合

　　（4）$("selector[attribute~=value]")　　//属性包含单词选择器 在匹配元素集合中筛选出 属性attribute值中 包含value单词（由空格分隔）的元素集合

　　（5）$("selector[attribute!=value]")　　//属性不等于选择器 在匹配元素集合中筛选出 属性attribute值不等于value的元素集合

　　（6）$("selector[attribute^=value]")　　//属性开始选择器 在匹配元素集合中筛选出 属性attribute值以value开头的元素集合

　　（7）$("selector[attribute$=value]")　　//属性结尾选择器 在匹配元素集合中筛选出  属性attribute值以value结尾的元素集合

　　（8）$("selector[selector1][selector2][selectorN]")　　//复合属性选择器 在匹配元素集合中按照条件多次进行筛选得到最后符合条件的集合

　　四、子元素过滤选择器

　　（1）$("selector:first-child")　　//:first-child选择器 用于获取其父级的第一个子元素的所有元素

　　（2）$("selector:last-child")　　//:last-child选择器 用于获取其父级的最后一个子元素的所有元素

　　（3）$("selector:nth-child(index/even/odd/equation)")　　//:nth-child选择器 用于获取其父级下的第N个子元素或奇偶元素

　　（4）$("selector:only-child")　　//:only-child选择器 用于获取其父级下的所有子元素中的唯一子元素（没有重复的元素）

　　五、表单域属性过滤选择器

　　（1）$("input:checked")　　//:checked选择器 用于在匹配集合中选择被选中的表单域

　　（2）$("input:disabled")　　//:disabled选择器 用于选择所有被禁用的表单域

　　（3）$("input:enabled")　　//:enabled选择器 用于选择所有可用的表单域

　　（4）$("select option:selected")　　//用于从列表框选择所有选中的option元素

　　六、可见性过滤选择器

　　（1）$("selector:hidden")　　//:hidden选择器 用于选择所有的不可见元素

　　（2）$("selector:visible")　　//:visible选择器 用于选择所有可见的元素

（2）一、CSS选择器

　　（1）$("#id")　　//id选择器

　　（2）$(".className")　　//类选择器  用于选择引用了该样式类的元素

　　例:$(".myClass") 选择所有应用了myClass样式的元素

　　（3）$("tagName")　　//HTML标签选择器 用于选择某些标签元素

　　例:$("p") 选择所有的p标签元素

　　（4）$("selector1,selector2,...,selectorN")　//群组选择器

　　例:$("div,span,p.myClass") //选择所有的div、span以及应用了myclass样式的p元素

　　（5）$("*")　　//通用选择器 该写法则获取文档中所有元素

　　例:$("*",$("#div1")) 　　获取id为div1中的所有子元素；

　　二、层级选择器

　　（1）$("parent>child")　　//子元素选择器 其中parent是任何有效的选择器,child也是一个选择器,用于筛选子元素

　　例:$("ul.myClass>li") 选择应用了myclass样式类下面的所有li元素

　　（2）$("ancestor descendant")　//后代选择器 其中ancestor是任何有效的选择器 descendant也是一个选择器用于筛选后代元素,其中以空格分隔。

　　例：$("ul.myClass li") 选择应用了myclass样式类下面的所有li元素

　　注：该选择器与子元素选择器不同之处在于，子元素选择器只负责筛选当前父级下的第一层子集。而后代选择器则筛选当前父级下面的所有子集。

　　（3）$("prev+next")　　//紧邻同辈元素选择器 其中prev和next都是有效的选择器 两者之间用"+"相连

　　例：$("#id+li") //表示选择紧跟在#id标签后面的并且为同级的li标签

　　（4）$("prev~siblings")　　//相邻同辈元素选择器 其中prev和siblings都是有效的选择器 两者之间用“~”相连

　　例：$("#prev~div")  //表示选择在#prev元素后面 同辈的div元素

　　三、表单域选择器

　　（1）$(":input")　　//input选择器 用于选择所有的input标签

　　（2）$(":text")　　//text选择器 用于选择所有的单行文本框 如：（<input type="text"/>）

　　（3）$(":password") 　　//password选择器 用于选择所有的密码框  如：(<input type="password"/>)

　　（4）$(":radio")　　//radio选择器 用于选择所有单选按钮

　　（5）$(":checkbox")　　//checkbox选择器 用于选择所有的复选框

　　（6）$(":file")　　//file选择器 用于选择所有的文本域 如:(<input type="file"/>)

　　（7）$(":image")　　//image选择器 用于选择所有的图像域 如：(<input type="image"/>)

　　（8）$(":hidden")　　//hidden选择器 用于选择所有不可见元素 如：display:none 以及 <input type="hidden" />

　　（9）$(":button")　　//button选择器 用于选择所有按钮

　　（10）$(":submit")　　//submit选择器 用于选择所有提交按钮

　　（11）$(":reset")　　//reset选择器 用于选择所有重置按钮

（1）一.jQuery工厂函数的语法

　　我们一般会使用通配符“$”来调用jQuery工厂函数如：

　　jQuery("#xx")<==>$("#xx")<==>$(document.getElementById("xx"));

　　二.jQuery对象访问

　　使用工厂函数可将DOM元素包装成jQuery对象，从而可使用jQuery属性和方法对其进行操作。但是有时候可能需要从jQuery对象中获取或搜索所需要的DOM元素，以便直接使用JavaScript脚本来操作这些DOM元素。所以在jQuery中提供了丰富的对象访问方法。

　　（1）.get()、.get([index])　　//用于获取所有陪陪的DOM元素集合，其中index参数可选，用于指定元素在集合中的位置索引从0开始，若指定的索引为负数则从匹配集合的末尾开始计数。

　　例:$("li").get(1) //获取所有li标签中的第二个li标签。

　　（2）.index()、index(selector)、index(element) //用于在匹配的元素中搜索指定元素并范围其索引值。

　　selector是一个选择器，表示在其中查找元素的jQuery集合；

　　element表示在DOM元素或在jQuery对象中查找的第一个元素。

　　若没有参数则返回的值指的是第一个元素在jQuery对象中相对于其同辈元素的位置。

　　例:$("li").index(document.getElementById("xx")); //查找XX在 所有li中的索引

　　　$("li").index($("#xx")); //查找xx在所有li中的索引

　　　$("#xx").index("li");//查找xx在所有li中的索引

　　   $("#xx").index();//查找xx在同辈中的索引

　　（3）.each(function(){}) //遍历一个jQuery对象，以每个匹配元素做为上下文来执行一个行数。

　　例:$("li").each(function(){

　　　　alert($(this).text());

　　});

　　(4).selector 和context

　　selector 该属性值为一个字符串，表示使用什么选择器来找到这个元素的。

　　context 返回一个HTML对象,表示传给$()的原始的DOM 节点内容.

　　例子:$("<ul></ul>").appendTo(document.body);

　　　　$("ul").context   将得到:[object HTMLDocument]

　　　　$("ul",document.body).context.nodeName.toLowerCase() 将得到body

　　　　$("ul").selector 将得到ul

　　三、jQuery与其他库共存

　　在Web开发中可能会同事使用多个JavaScript库。除了jQuery之外，其他Javascript库也会使用$别名来创建对象。那么如何解决这一冲突就是一个必须考虑并加以解决的问题。由此jQuery便提供了noConflict方法用于专门解决这一问题。

　　jQuery.noConflict()//将变量$的控制权让渡给第一个实现它的那个JavaScript库。

　　介绍如何在局部使用$

　　例:jQuery.noConflict();

　　    (function($){

　　　　　　　$(function(){

　　　　　　alert($("#XX").text());//使用$作为jQuery的别名代码

　　　　});　　

　　})(jQuery);