Jquery简介之选择器

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

前言

Jquery是一种js框架（程序代码的一种有机结合）是程序开发过程中的一种半成品；类似的框架有EXTJS。

依赖库：jquery-XXX.js

语法：$()

正文

5种基本的选择器

id选择器

$("#id值")

例子：$(#span1).css("color","red");

标签选择器

$("标签名称")

Class选择器

$(".class的值")

群组选择器

$("标签名称1，标签名称2")

包含选择器

$("标签名称1 标签名称2")

表单选择器

$(":input")所有的Input标签

$(":text")选出的Input标签中type为text的所有标签；类似的有：password，：button；：radio；：Reset；：checkbox；：hidden；：submit；：image；：File

示例：

$(":input").css("cursor","wait");

条件限定选择器

基本条件限定

:first :last :lt :gt :odd（奇数） :even(偶数) ：not

例子：

$("span:first").css("background-color","red");

$("span:lt(3)").css("background-color","red");

$("span:odd").css("background-color","red");

$("span:not(span:eq(2))").css("background-color","red");

内容限定

1.:contains(字符) 选中含有某个字符的标签

查找所有包含 "John" 的 div 元素

HTML 代码

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

jQuery 代码:

$("div:contains(‘John‘)")

结果:

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

2.:empty

匹配所有不包含子元素或者文本的空元素

HTML 代码:
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
jQuery 代码:
$("td:empty")
结果:
[ <td></td>, <td></td> ]

3.:parent 返回值:Array<Element(s)>

匹配含有子元素或者文本的元素

描述:

查找所有含有子元素或者文本的 td 元素

HTML 代码:
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
jQuery 代码:
$("td:parent")

结果:
[ <td>Value 1</td>, <td>Value 2</td> ]4.:has(selector)返回值:Array<Element(s)>匹配含有选择器所匹配的元素的元素一个用于筛选的选择器示例描述:给所有包含 p 元素的 div 元素添加一个 text 类HTML 代码:<div><p>Hello</p></div>
<div>Hello again!</div>jQuery 代码:$("div:has(p)").addClass("test");结果:[ <div class="test"><p>Hello</p></div> ]

属性限定

1.[attribute]

匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。

参数

attribute String

属性名

示例

描述:

查找所有含有 id 属性的 div 元素

HTML 代码:
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
jQuery 代码:
$("div[id]")
结果:
[ <div id="test2"></div> ]

2.[attribute=value] 返回值:Array<Element(s)>

概述

匹配给定的属性是某个特定值的元素

参数

attribute String

属性名

value String

属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。

示例

描述:

查找所有 name 属性是 newsletter 的 input 元素

HTML 代码:
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代码:
$("input[name=‘newsletter‘]").attr("checked", true);
结果:
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

可见性限定

1. ：hidden 匹配所有不可见元素，或者type为hidden的元素

示例

描述:查找隐藏的 tr

HTML 代码:
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:hidden")
结果:
[ <tr style="display:none"><td>Value 1</td></tr> ]
描述:匹配type为hidden的元素

HTML 代码:
<form>
<input type="text" name="email" />
<input type="hidden" name="id" />
</form>
jQuery 代码:
$("input:hidden")
结果:
[ <input type="hidden" name="id" /> ]

2.：visible 匹配所有的可见元素

示例描述:查找所有可见的 tr 元素

HTML 代码:
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:visible")
结果:
[ <tr><td>Value 2</td></tr> ]

选中限定

表单对象属性

?:enabled 返回值:Array<Element(s)> 匹配所有可用元素

示例描述:查找所有可用的input元素

HTML 代码:
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
jQuery 代码:
$("input:enabled")
结果:
[ <input name="id" /> ]
?:disabled 返回值:Array<Element(s)> 匹配所有不可用元素

示例描述:查找所有不可用的input元素

HTML 代码:
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
jQuery 代码:
$("input:disabled")
结果:
[ <input name="email" disabled="disabled" /> ]
?:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option；varc = ops[e.selectedIndex].value;通过获取当前访问的option对象在数组中的位置，来获取option的值)

示例描述:查找所有选中的复选框元素

HTML 代码:
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>
jQuery 代码:
$("input:checked")
结果:
[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

?:selected匹配所有选中的option元素

示例:查找所有选中的选项元素

HTML 代码:
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3">Trees</option>
</select>
jQuery 代码:
$("select option:selected")
结果:
[ <option value="2" selected="selected">Gardens</option> ]

子标签的限定

:nth-child 返回值:Array<Element(s)> 匹配其父元素下的第N个子或奇偶元素

‘:eq(index)‘ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)

参数
index Number 要匹配元素的序号，从1开始
示例:在每个 ul 查找第 2 个li

HTML 代码:
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery 代码:
$("ul li:nth-child(2)")
结果:
[ <li>Karl</li>, <li>Tane</li> ]

:first-child

匹配第一个子元素

‘:first‘ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

示例描述:在每个 ul 中查找第一个 li

HTML 代码:
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery 代码:
$("ul li:first-child")
结果:
[ <li>John</li>, <li>Glen</li> ]

:last-child 返回值:Array<Element(s)>: 匹配最后一个子元素

‘:last‘只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

示例描述:在每个 ul 中查找最后一个 li

HTML 代码:
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery 代码:
$("ul li:last-child")
结果:
[ <li>Brandon</li>, <li>Ralph</li> ]