(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);