Fork me on GitHub

jquery选择器

基本选择器

1
2
3
4
$("#test")
$(".test")
$("p")
$("span,div,p.myclass")//选择所有div,<span>,和拥有class为myclass的p标签

层次选择器

通过dom元素之间的层次关系来获取特定元素

1
2
3
4
5
6
7
$("div span")//选择div中的所有<span>元素+
$("div>span")//选取div下元素名是<span>的子元素
$(".one+div")//选取class为one的下一个<div>同辈元素
$("#two~div")//选取id为two的元素后面的所有<div>同辈元素
//后面两个方法可以用其他方法代替如下
$(".one").next("div");
$("#pre").nextAll("div");

过滤选择器

基本过滤选择器

1
2
3
4
5
6
7
8
9
10
11
$("div:first")
$("div:last")
$("input:not(.myClass)")//选取input元素中不包含myClass类的元素
$("input:even")//选取索引是偶数的input元素
$("input:odd")
$("input:eq(1)")//选取索引是1的input元素
$("input:gt(1)")
$("input:lt(1)")
$(":header")//选取网页中所有的<h1>,<h2>,<h3>...
$("div:animated")//选取正在执行动画的<div>元素
$(":focus")//选取当前获得焦点的元素

内容过滤选择器

1
2
3
4
$("div:contains('我')")
$("div:empty")//选取不包含子元素的<div>空元素
$("div:has(p)")//选取含有<p>元素的div元素
$("div:parent")//选取拥有子元素的div元素

可见性过滤选择器

1
2
3
$(":hidden")//选取所有不可见的元素。
type="hidden" display:none visibility:hidden等
$("div:visible")//选择所有可见的div元素

属性过滤选择器

1
2
3
4
5
6
7
8
9
$("div[id]")
$("div[title=test]")
$("div[title!=test]")
$("div[title^=test]")
$("div[title$=test]")
$("div[title*=test]")
$('div[title|="en"]')//选取title等于en或者以en为前缀(该字符后面紧跟一个连字符‘-’的元素)
$('div[title~="uk"]')//选取属性title用空格分隔的值中包含uk的元素
$("div[id][title$=test]")//选择拥有属性id,并属性title以“test”结束的div元素

子元素选择器

1
2
3
4
:nth-child(index/even/odd/equation)
:first-child
:last-child
:only-child

表单选择器

1
2
3
4
5
6
7
8
9
10
11
$(":input")//所有的input、textarea、select、button元素
$(":text")
$(":password")
$(":radio")//单选框
$(":checkbox")//选取所有的复选框
$(":submit")//选择所有的提交按钮
$(":image")//选择所有的图像按钮
$(":reset")
$(":button")
$(":file")
$(":hidden")
-------------本文结束感谢您的阅读-------------