站易CMS - 让每个人都可以轻松建站!
您现在的位置:首页?>?yabo.net?>?Javascript/Ajax?>?JQuery选择器整理

JQuery选择器整理

来源:互联网 作者:杨斌 发布时间: 2013-06-06 23:56:11 342人浏览 条评论

1.通过标签类型选择?
$("p") //选择所有的P标签
$("a") //选择所有的a标签
$("div") //选择所有的div标签

2.通过class选择元素
$(".red") //选择类名为red的类

3.通过ID选择元素
$("#red") //选择ID名为red的类

4.使用联合选择器更加准确的选择
$("p.red") //选择具有类名为red的p标签

5.使用组合选择器
$("p,.red,#red") //选择所有p标签 具有red类名的类 ID名为red的类

6.层次选择器
$("body span") //选择出body里面的所有span标签,包括被p包含的span标签
$("body>span") //只选择body下直接含有的span标签,不包括那些被p包含的span标签

7.选择不匹配某个选择器的元素 :not()
$("p:not(.foo)"); //选择所有类名不是foot的P标签元素

8.第一个元素和最后一个元素 :first和:last
选择第一个元素:$("p:first"); //选择第一个P标签
选择最后一个元素:$("p:last"); //选择第二个P标签

9.选择奇数偶数的元素 :even和:odd
选择奇数:$("p:even");
选择偶数:$("p:odd");

10.选择特定索引的元素
$("p:eq(5)") //选择第6个P标签
注意:索引是从0开始,0代表第一个元素,1代表第二个,2代表第三个......

11.内容过滤器 :contains() 区分大小写的,内容的大小写影响匹配
$("p:contains(哇塞,有头猪)"); //P标签里面含有“哇塞,有头猪”文本,才会被选中

12.匹配包含特定元素的元素 :has()
$("p:has(span)"); //选择里面含有span标签的p元素

13.选择空元素
$(":empty"); //不包含任何文本也不包含任何其他元素的空元素

14.选择父元素 :parent 只匹配那些拥有子元素的元素,不管它包含的是其他元素,还是文本内容
$("p:parent"); //所有拥有子元素的P标签

15.可见性过滤器 :hidden和:visible 分别用来选择被隐藏的元素和可看到的元素
选择所有可见的段落:$("p:visible");
选择所有不可见的段落:$("p:hidden");

16.属性过滤器 属性是位于标签内部用来对标签做进一步描述的东西(如class、href、ID、title等
①根据属性及属性的值选择元素
要匹配拥有特定属性及属性值的元素,用下面的格式将属性和值放到方括号当中([]):
[属性名=属性值]
要选择拥有class foo的所有元素,在控制台执行以下代码:
$("[class=foo]");
②选择没有某个属性的元素或属性值不匹配的元素
反之,要选择不匹配特定属性及其值的元素,在属性名和属性值之间的等号前插入一个感叹号(!):
[属性名!=属性值]
运行下面的代码,选出没有foo class的全部段落:
$("p[class!=foo]");

17.子元素过滤器
子元素过滤器是:even、:odd和:eq()的一种代用品。主要的区别在于这一套选择器起始索引为1而不是0
匹配奇数索引值/偶数索引值/特定索引值的元素 :nth-child()
4个参数选项:even、odd、index和equation
这个过滤器的索引也是从1而不是0开始,这样第一个元素的索引就是1而不是0,第2个元素是2,以此类推
选择第一个或最后一个子元素
:first-child和:last-child返回的元素集合可能含有不止一个匹配元素
$("p span:last"); //找回段落内的最后一个span

18.表单过滤器
按表单元素配匹类型
yabo.netbutton、:checkbox、:file、:image、:input、:password、:radio、:submit和:text
$("input:radio"); //选择全部单选按钮
按匹配可禁用的表单元素 enabled和:disabled
$(":disabled"); //选择所有被禁用表单元素
匹配选中和未选中的表单元素 checked和:selected
$(":checked"); //当前选中的单选按钮

原文出处:http://www.w3cfuns.com/thread-5594695-1-1.html
?

5人觉得很赞
0人觉得很烂
正在加载评论,请稍等...
验证码:
?