jQuery选择器

利用jQuery选择器，我们能够对HTML元素组或单个元素进行操作。

jQuery选择器是基于元素的id、类、类型等查找(或选择HTML元素),它基于已经存在的CSS选择器。jQuery还有一些自定义的选择器。

我们会发现jQuery中的选择器都是以美元符号开头:$()。

 

下面是一些常见的jQuery选择器。

1、元素选择器。

如：$("p")

在页面中选取所有<p>元素

 

2、#id选择器

$("#myid")

在页面中选取id="myid"的元素

 

3、.class选择器

$(".myclass")

在页面中选取class="myclass"的元素

 

 

$("*")      选取所有元素

$(this)     选取当前 HTML 元素          

$("p.intro")     选取 class 为 intro 的 <p> 元素     

$("p:first")      选取第一个 <p> 元素         

$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素      

$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素  

$("[href]")       选取带有 href 属性的元素

$("a[target='_blank']")   选取所有 target 属性值等于 "_blank" 的 <a> 元素    

$("a[target!='_blank']")          选取所有 target 属性值不等于 "_blank" 的 <a> 元素         

$(":button")    选取所有 type="button" 的 <input> 元素 和 <button> 元素   

   这里我们需要注意一下，当使用$(":button")时，我们可以选取type="button"的<input>和<button>元素，但是当我们使用$("button")时，我们只能选取type="button"的<button>元素。

$("tr:even")    选取偶数位置的 <tr> 元素

$("tr:odd")      选取奇数位置的 <tr> 元素

 

$("div p") 选取div元素中的所有p元素

$("div.my_class") 只选择my_class类的div元素。

$(this) 选取"当前"元素，在整个代码中，$(this）的含义会改变，取决于它在哪里的引用。

 

$("#id", ".class")  复合选择器

$(div p span)       层级选择器 //div下的p元素中的span元素

$(div>p)            父子选择器 //div下的所有p元素

$(div+p)            相邻元素选择器 //div后面的p元素(仅一个p)

$(div~p)            兄弟选择器  //div后面的所有p元素(同级别)

$(.p:last)          类选择器 加 过滤选择器  第一个和最后一个（first 或者 last）

$("#mytable td:odd")      层级选择 加 过滤选择器 奇偶（odd 或者 even）

$("div p:eq(2)")    索引选择器 div下的第三个p元素（索引是从0开始）

$("a[href='www.baidu.com']")  属性选择器

$("p:contains(test)")        // 内容过滤选择器，包含text内容的p元素

$(":emtyp")        //内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent 相反

$(":hidden")       //所有隐藏元素 visible

$("input:enabled") //选取所有启用的表单元素

$(":disabled")     //所有不可用的元素

$("input:checked") //获取所有选中的复选框单选按钮等

$("select option:selected") //获取选中的选项元素

 

 

 

 

jQuery属性选择器

可以简单理解为加上了[]的就为属性选择器。

如:

$("[href]")选择所有带有href属性的元素

$("[href='#']"）选择所有href值等于"#"的元素

$("[href='.jpg']")选择所有href值以".jpg"结尾的元素

 

jQuery CSS 选择器

jQuery CSS选择器可用于改变HTML 元素的CSS属性

如:$("p").css("background-color","blue");

将所有的p元素背景颜色改为蓝色。

表单选择器

:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素
:hidden	$(“:hidden”)	选取所有不可见的元素

 表单对象属性过滤器

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

子元素过滤选择器

:nth-child(index/even/odd/equation	选取每个父元素下的第index个 子元素或者奇偶元素(index从1算起)
：first-child	选取每个父元素的第1个子元素
:last-child	选取每个父元素的最后一个子元素
:only-child	如果父元素是它父元素中唯一的子元素，那么将被匹配。如果父元素中含有其他元素，则不会被匹配

 

 

该文结合jQuery菜鸟教程类选择器和w3c jQuery选择器 对jQuery选择器做了一个简单的总结，欢迎大家补充，批评指正。