JQuery选择器使用说明-附表

JQuery选择器 使用说明

菠菜我研究jQuery后,发现jQuery的选择器的用法很灵活,但是我没有找到合适的中文资料,所以我决定自己写一篇,以供广大爱好者参考。如需转载，请注明出处，谢谢配合。

所谓的选择器，类似与DOM里面的 document.getElementById(). 。因为我们在使用 jQuery时，不可避免的要选择HTML文档里面元素。  大家也可以想象，如果你都找不到你要操作的元素，何谈进一步的操作。 罗嗦这么多，就是让大家认识到选择器的重要性。

参考文档,  jQuery1.3 中文参考手册

 

作用：jQuery选择器可以选择一个或者多个HTML元素。主要可以使用：标签名称，属性名称或者元素内容。

jQuery 元素选择

jQuery uses CSS style selectors to select HTML elements.

jQuery使用 CSS样式选择器选择 HTML元素

$("p") 选择所有 <p>  元素

$("p.intro") 选择所有 <p> 元素，元素的class="intro".

$("p#demo")选择所有 <p> 元素，元素的 id="demo".

jQuery 属性选择

jQuery uses XPath style selectors to select elements with given attributes.

jQuery 使用 XPath，结合属性选择HTML元素

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

$("[href='#']")  所有所有具有属性 href，而且值为 # 的元素

$("[href!='#']") 所有所有具有属性 href，而且值不等于 # 的元素.

$("[href$='.jpg']") 所有所有具有属性 href，而且值包含“ . jpg” 的元素.

jQuery CSS  选择

jQuery CSS selectors can be used to change CSS properties for HTML elements.

jQuery CSS选择器可以使用在需要改变HTML元素CSS属性值的地方

$("p.intro").css("background-color","yellow");

:

语法	解释说明
$(this)	当前HTML元素
$("p")	所有的 <p>元素
$("p.intro")	所有的 <p>元素，class="intro"
$(".intro")	所有的元素，class="intro"
$("#intro")	元素，id="intro"
$("ul li:first")	每一个 ul 元素标签内的第一个<li> 元素
$("[href$='.jpg']")	所有的元素，每一个元素的href 必须包含  .jpg
$("div#intro .head")	所有的 class="head" 的元素，元素  <div>  里面  id="intro"

 

 

 

 

 

 

 

 

 

 

 

 

 

 

附一个选择器表

选择器	例子-用法	说明
*	$("*")	选择所有的元素
#id	$("#lastname")	选择元素ID=lastname的元素
.class	$(".intro")	选择元素 class="intro"
element	$("p")	所有的  <p>  元素
.class.class	$(".intro.demo")	所有的元素,   class=intro  和  class=demo
:first	$("p:first")	The first <p> element   第一个 <p> 元素
:last	$("p:last")	The last <p> element   最后一个 <p> 元素
:even	$("tr:even")	所有的索引值为偶数  <tr>  元素(索引从0开始计数)
:odd	$("tr:odd")	所有的索引值为奇数  <t r> 元素(索引从0开始计数)
:eq(index)	$("ul li:eq(3)")	在一个 ul 列表中取第四个元素  ( 索引从 0 开始计数 )
:gt(no)	$("ul li:gt(3)")	在一个 ul 列表中取索引值大于3的所有元素集合  ( 索引从 0 开始计数 )
:lt(no)	$("ul li:lt(3)")	在一个 ul 列表中取索引值小于3的所有元素   集合 ( 索引从 0 开始计数 )
:not(selector)	$("input:not(:empty)")	取所有的未被选中的元素
:header	$(":header")	选择如  h1, h2, h3 之类的标题元素
:animated		选择动画效果的元素
:contains(text)	$(":contains('wellhope')")	选择包含字符串[wellhope]的元素
:empty	$(":empty")	选择所有没有子节点的元素集合
:hidden	$("p:hidden")	选择所有隐藏的 <p> 元素
:visible	$("table:visible")	选择所有课件的 table 元素
s1,s2,s3	$("th,td,.intro")	所有匹配选择器的元素
[attribute]	$("[href]")	选择具有属性 href 的元素
[attribute=value]	$("[href='#']")	选择具有属性 href="#" 的元素
[attribute!=value]	$("[href!='#']")	选择具有属性 href!="#" 的元素
[attribute$=value]	$("[href$='.jpg']")	选择具有属性 href 的元素,而且 href 的值必须包含  .jpg
:input	$(":input")	选择所有  <input> 元素
:text	$(":text")	选择所有的文本框  type="text"
:password	$(":password")	选择所有的密码框  type="password"
:radio	$(":radio")	选择所有的单选框  type="radio"
:checkbox	$(":checkbox")	选择所有的复选框  type="checkbox"
:submit	$(":submit")	选择所有的提交按钮  type="submit"
:reset	$(":reset")	选择所有的复位按钮   type="reset"
:button	$(":button")	选择所有的按钮   type="button"
:image	$(":image")	选择所有的input按钮  type="image"
:file	$(":file")	选择所有的input元素  type="file"
:enabled	$(":enabled")	获取所有激活的元素
:disabled	$(":disabled")	选择所有的非激活的元素
:selected	$(":selected")	匹配所有选中的元素
:checked	$(":checked")	选择选中的复选框元素
备注: 此表菠菜翻译而来	不承担任何事故责任