jQuery 选择器

浏览数：21 / 时间：2015年06月09日

工厂函数${}

所有能在样式表中使用的选择符，都可以放在圆括号的引用当中。随后我们就可以对匹配的元素应用JQuery方法。

3种基本的选择符。标签名，类和ID

选择符	CSS	JQuery	说明
标签名	P	$(‘ p ’ )	取得文档所在的段落
类	.some-class	$(‘ .some-class‘ )	取得文档中类为some-class的所有的元素
ID	#some-id	$(‘ #some-id’ )	取得文档中id为some-id的一个元素

W3c（World wide web consortium）万维网联盟

jQuery 选择器

在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。

关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

选择器允许您对 HTML 元素组或单个元素进行操作。

在 HTML DOM 术语中：

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取<p> 元素。

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

$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

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

$("[href=‘#‘]") 选取所有带有 href 值等于"#" 的元素。

$("[href!=‘#‘]") 选取所有带有 href 值不等于"#" 的元素。

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

jQuery CSS 选择器

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

下面的例子把所有 p 元素的背景颜色更改为红色：

实例

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

更多的选择器实例

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的第一个元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$=‘.jpg‘]")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

选择器参考手册
选择器

实例	选取
$("*")	所有元素
$("#lastname")	id="lastname" 的元素
$(".intro")	所有 class="intro" 的元素
$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

$("p:first")	第一个 <p> 元素
$("p:last")	最后一个 <p> 元素
$("tr:even")	所有偶数 <tr> 元素
$("tr:odd")	所有奇数 <tr> 元素

$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
$("ul li:gt(3)")	列出 index 大于 3 的元素
$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素

$(":header")	所有标题元素 <h1> - <h6>
	所有动画元素

$(":contains(‘W3School‘)")	包含指定字符串的所有元素
$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

$("[href]")	所有带有 href 属性的元素
$("[href=‘#‘]")	所有 href 属性的值等于 "#" 的元素
$("[href!=‘#‘]")	所有 href 属性的值不等于 "#" 的元素
$("[href$=‘.jpg‘]")	所有 href 属性的值包含以 ".jpg" 结尾的元素

$(":input")	所有 <input> 元素
$(":text")	所有 type="text" 的 <input> 元素
$(":password")	所有 type="password" 的 <input> 元素
$(":radio")	所有 type="radio" 的 <input> 元素
$(":checkbox")	所有 type="checkbox" 的 <input> 元素
$(":submit")	所有 type="submit" 的 <input> 元素
$(":reset")	所有 type="reset" 的 <input> 元素
$(":button")	所有 type="button" 的 <input> 元素
$(":image")	所有 type="image" 的 <input> 元素
$(":file")	所有 type="file" 的 <input> 元素

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