jQuery選擇器全集詳解
選擇器是jQuery最基礎(chǔ)的東西，本文中列舉的選擇器基本上囊括了所有的jQuery選擇器，也許各位通過這篇文章能夠加深對jQuery選擇器 的理解，它們本身用法就非常簡單，我更希望的是它能夠提升個人編寫jQuery代碼的效率。本文配合截圖、代碼和簡單的概括對所有jQuery選擇器進(jìn)行 了介紹，也列舉出了一些需要注意和區(qū)分的地方。
一、基本選擇器
1. id選擇器（指定id元素）
將id="one"的元素背景色設(shè)置為黑色。（id選擇器返單個元素）
$(document).ready(function () {
$('#one').css('background', '#000');
});
2. class選擇器（遍歷css類元素）
將class="cube"的元素背景色設(shè)為黑色
$(document).ready(function () {
$('.cube').css('background', '#000');
});
3. element選擇器（遍歷html元素）
將p元素的文字大小設(shè)置為12px
$(document).ready(function () {
$('p').css('font-size', '12px');
});
4. * 選擇器（遍歷所有元素）
$(document).ready(function () {
// 遍歷form下的所有元素，將字體顏色設(shè)置為紅色
$('form *').css('color', '#FF0000');
});
5. 并列選擇器
$(document).ready(function () {
// 將p元素和div元素的margin設(shè)為0
$('p, div').css('margin', '0');
});
二、 層次選擇器
1. parent > child（直系子元素）
$(document).ready(function () {
// 選取div下的第一代span元素，將字體顏色設(shè)為紅色
$('div > span').css('color', '#FF0000');
});
下面的代碼，只有第一個span會變色，第二個span不屬于div的一代子元素，顏色保持不變。
<div>
<span>123</span>
<p>
<span>456</span>
</p>
</div>
2. prev + next（下一個兄弟元素，等同于next()方法）
$(document).ready(function () {
// 選取class為item的下一個div兄弟元素
$('.item + div').css('color', '#FF0000');
// 等價代碼
//$('.item').next('div').css('color', '#FF0000');});
下面的代碼，只有123和789會變色
<p class="item"></p>
<div>123</div>
<div>456</div>
<span class="item"></span>
<div>789</div>
3. prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）
$(document).ready(function () {
// 選取class為inside之后的所有div兄弟元素
$('.inside ~ div').css('color', '#FF0000');
// 等價代碼
//$('.inside').nextAll('div').css('color', '#FF0000');});
下面的代碼，G2和G4會變色
<div class="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</div>
三、 過濾選擇器
1. 基本過濾選擇器
——1.1 :first和:last（取第一個元素或最后一個元素）
$(document).ready(function () {
$('span:first').css('color', '#FF0000');
$('span:last').css('color', '#FF0000');
});
下面的代碼，G1（first元素）和G3（last元素）會變色
<span>G1</span>
<span>G2</span>
<span>G3</span>
——1.2 :not（取非元素）
$(document).ready(function () {
$('div:not(.wrap)').css('color', '#FF0000');
});
下面的代碼，G1會變色
<div>G1</div>
<div class="wrap">G2</div>
但是，請注意下面的代碼：
<div>
G1 <div class="wrap">G2</div>
</div>
當(dāng)G1所在div和G2所在div是父子關(guān)系時，G1和G2都會變色。
——1.3 :even和:odd（取偶數(shù)索引或奇數(shù)索引元素，索引從0開始，even表示偶數(shù)，odd表示奇數(shù)）
$(document).ready(function () {
$('tr:even').css('background', '#EEE'); // 偶數(shù)行顏色
$('tr:odd').css('background', '#DADADA'); // 奇數(shù)行顏色
});
A、C行顏色#EEE（第一行的索引為0），B、D行顏色#DADADA
<table width="200" cellpadding="0" cellspacing="0">
<tbody>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
</tbody>
</table>
——1.4 :eq(x) （取指定索引的元素）
$(document).ready(function () {
$('tr:eq(2)').css('background', '#FF0000');
});
更改第三行的背景色，在上面的代碼中C的背景會變色。
——1.5 :gt(x)和:lt(x)（取大于x索引或小于x索引的元素）
$(document).ready(function () {
$('ul li:gt(2)').css('color', '#FF0000');
$('ul li:lt(2)').css('color', '#0000FF');
});
L4和L5會是紅色，L1和L2會是藍(lán)色，L3是默認(rèn)顏色
<ul>
<li>L1</li>
<li>L2</li>
<li>L3</li>
<li>L4</li>
<li>L5</li>
</ul>
——1.6 :header（取H1~H6標(biāo)題元素）
$(document).ready(function () {
$(':header').css('background', '#EFEFEF');
});
下面的代碼，H1~H6的背景色都會變
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
2. 內(nèi)容過濾選擇器
——2.1 :contains(text)（取包含text文本的元素）
$(document).ready(function () { // dd元素中包含"jQuery"文本的會變色 $('dd:contains("jQuery")').css('color', '#FF0000'); });
下面的代碼，第一個dd會變色
<dl>
<dt>技術(shù)</dt>
<dd>jQuery, .NET, CLR</dd>
<dt>SEO</dt>
<dd>關(guān)鍵字排名</dd>
<dt>其他</dt>
<dd></dd>
</dl>
——2.2 :empty（取不包含子元素或文本為空的元素）
$(document).ready(function () {
$('dd:empty').html('沒有內(nèi)容');
});
上面第三個dd會顯示"沒有內(nèi)容"文本
——2.3 :has(selector)（取選擇器匹配的元素）
$(document).ready(function () {
// 為包含span元素的div添加邊框
$('div:has(span)').css('border', '1px solid #000');
});
即使span不是div的直系子元素，也會生效
<div>
<h2>
A <span>B</span>
</h2>
</div>
——2.4 :parent（取包含子元素或文本的元素）
$(document).ready(function () {
$('ol li:parent').css('border', '1px solid #000');
});
下面的代碼，A和D所在的li會有邊框
<ol>
<li></li>
<li>A</li>
<li></li>
<li>D</li>
</ol>
3. 可見性過濾選擇器
——3.1 :hidden（取不可見的元素）
jQuery至1.3.2之后的:hidden選擇器僅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。這也意味著hidden只匹配那些“隱藏的”并且不占空間的元素，像visibility:hidden或 opactity:0的元素占據(jù)了空間，會被排除在外。
參照：http://www.jquerysdk.com/api/hidden-selector
下面的代碼，先彈出"hello"對話框，然后hid-1會顯示，hid-2仍然是不可見的。
<html xmlns="<head runat="server">
<title></title>
<style type="text/css">
div
{
margin: 10px;
width: 200px;
height: 40px;
border: 1px solid #FF0000;
display:block;
}
.hid-1
{
display: none;
}
.hid-2
{
visibility: hidden;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div:hidden').show(500);
alert($('input:hidden').val());
});
</script>
</head>
<body>
<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>
</body>
</html>
——3.2 :visible（取可見的元素）
下面的代碼，最后一個div會有背景色
<script type="text/javascript">
$(document).ready(function() { $('div:visible').css('background', '#EEADBB'); });</script>
<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>
<div>
jQuery選擇器大全</div>
4. 屬性過濾選擇器
——4.1 [attribute]（取擁有attribute屬性的元素）
下面的代碼，最后一個a標(biāo)簽沒有title屬性，所以它仍然會帶下劃線
<script type="text/javascript">
$(document).ready(function() { $('a[title]').css('text-decoration', 'none'); }); </script>
<ul>
<li><a href="#" title="DOM對象和jQuery對象" class="item">DOM對象和jQuery對象</a></li>
<li><a href="#" title="jQuery選擇器大全" class="item-selected">jQuery選擇器大全</a></li>
<li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
<li><a href="#" title="基于jQuery的插件開發(fā)" class="item">基于jQuery的插件開發(fā)</a></li>
<li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
<li><a href="#" class="item">其他</a></li>
</ul>
——4.2 [attribute = value]和[attribute != value]（取attribute屬性值等于value或不等于value的元素）
分別為class="item"和class!=item的a標(biāo)簽指定文字顏色
<script type="text/javascript">
$(document).ready(function() {
$('a[class=item]').css('color', '#FF99CC');
$('a[class!=item]').css('color', '#FF6600');
});</script>
——4.3 [attribute ^= value], [attribute $= value]和[attribute *= value]（attribute屬性值以value開始，以value結(jié)束，或包含value值）
在屬性選擇器中，^$符號和正則表達(dá)式的開始結(jié)束符號表示的含義是一致的，*模糊匹配，類似于sql中的like '%str%'。
<script type="text/javascript">
// 識別大小寫，輸入字符串時可以輸入引號，[title^=jQuery]和[title^="jQuery"]是一樣的
$('a[title^=jQuery]').css('font-weight', 'bold');
$('a[title$=jQuery]').css('font-size', '24px');
$('a[title*=jQuery]').css('text-decoration', 'line-through');</script>
——4.4 [selector1][selector2]（復(fù)合型屬性過濾器，同時滿足多個條件）
將title以"jQuery"開始，并且class="item"的a標(biāo)簽隱藏，那么<a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a>會被隱藏
<script type="text/javascript">
$(document).ready(function() {
$('a[title^=jQuery][class=item]').hide();
});
</script>
5. 子元素過濾選擇器
——5.1 :first-child和:last-child
:first-child表示第一個子元素，:last-child表示最后一個子元素。
需要大家注意的是，:fisrst和:last返回的都是單個元素，而:first-child和:last-child返回的都是集合元素。舉個 例子：div:first返回的是整個DOM文檔中第一個div元素，而div:first-child是返回所有div元素下的第一個元素合并后的集 合。
這里有個問題：如果一個元素沒有子元素，:first-child和:last-child會返回null嗎？請看下面的代碼：
<html xmlns="<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var len1 = $('div:first-child').length;
var len2 = $('div:last-child').length;
});
</script>
</head>
<body>
<div>
<div>
<div></div>
</div>
</div>
</body>
</html>
也許你覺得這個答案，是不是太簡單了？len1 = 2, len2 = 2。但實際確并不是，它們倆都等于3。
把上面的代碼稍微修改一下：
<html xmlns="<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var len1 = $('div:first-child').length;
var len2 = $('div:last-child').length;
$('div:first-child').each(function() {
alert($(this).html());
});
});
</script>
</head>
<body>
<div>123
<div>456
<div></div>
</div>
</div>
</body>
</html>
結(jié)果卻是彈出三個alert，只不過最后一個alert里面是空白的。
——5.2 :only-child
當(dāng)某個元素有且僅有一個子元素時，:only-child才會生效。
<html xmlns="<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div:only-child').css('border', '1px solid #FF0000').css('width','200px');
});
</script>
</head>
<body>
<div>123
<div>456
<div></div>
</div>
</div>
</body>
</html>
這里:only-child也是三個元素，從最后一個很粗的紅色邊框（實際是兩個元素的邊框重疊了）也可以看出來。
——5.3 :nth-child
看到這個就想起英文單詞里的，fourth, fifth, sixth……，nth表示第n個，:nth-child就表示第n個child元素。要注意的是，這兒的n不像eq(x)、gt(x)或lt(x)是從 0開始的，它是從1開始的，英文里好像也沒有zeroth這樣的序號詞吧。
:nth-child有三種用法：
1) :nth-child(x)，獲取第x個子元素
2) :nth-child(even)和:nth-child(odd)，從1開始，獲取第偶數(shù)個元素或第奇數(shù)個元素
3) :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0時就是3n，表示取第3n個元素（n>=0）。實際上xn+y是上面兩種的通項式。（當(dāng)x=0,y>=0時，等同于:hth- child(x)；當(dāng)x=2,y=0時，等同于nth-child(even)；當(dāng)x=2,y=1時，等同于:nth-child(odd)）
下面的兩個例子是針對2)和3)的，1)的例子我就不列舉了。
例2：
<html xmlns="<head runat="server">
<title></title>
<style type="text/css">
td {
width: 200px;
height: 32px;
line-height: 32px;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 偶數(shù)行背景紅色
$('tr:nth-child(even)').css('background', '#FF0000');
// 奇數(shù)行背景藍(lán)色
$('tr:nth-child(odd)').css('background', '#0000FF');
});
</script>
</head>
<body>
<table>
<tr><td>1. NBA 2012季后賽</td></tr>
<tr><td>2. NBA 2011季后賽</td></tr>
<tr><td>3. NBA 2010季后賽</td></tr>
<tr><td>4. NBA 2009季后賽</td></tr>
<tr><td>5. NBA 2008季后賽</td></tr>
<tr><td>6. NBA 2007季后賽</td></tr>
</table>
</body>
</html>
例3（html代碼和例2是一樣的）：
<script type="text/javascript">
$(document).ready(function() {
$('tr:nth-child(3n)').css('background', '#0000FF');
});</script>
6. 表單對象屬性過濾選擇器
——6.1 :enabled和:disabled（取可用或不可用元素）
:enabled和:diabled的匹配范圍包括input, select, textarea。
<script type="text/javascript">
$(document).ready(function() {
$(':enabled').css('border', '1px solid #FF0000');
$(':disabled').css('border', '1px solid #0000FF');
});
</script>
<div>
<input type="text" value="可用的文本框" />
</div>
<div>
<input type="text" disabled="disabled" value="不可用的文本框" />
</div>
<div>
<textarea disabled="disabled">不可用的文本域</textarea>
</div>
<div>
<select disabled="disabled">
<option>English</option>
<option>簡體中文</option>
</select>
</div>
——6.2 :checked（取選中的單選框或復(fù)選框元素）
下面的代碼，更改邊框或背景色僅在IE下有效果，chrome和firefox不會改變，但是alert都會彈出來。
<script type="text/javascript">
$(document).ready(function() {
$(':checked').css('background', '#FF0000').each(function() {
alert($(this).val());
});
});</script>
<div>
<input type="checkbox" checked="checked" value="must"/>必須勾選</div>
<div>你現(xiàn)在工作的企業(yè)屬于：
<input type="radio" name="radio" checked="checked" value="外企"/>外企
<input type="radio" name="radio" value="國企"/>國企
<input type="radio" name="radio" value="民企"/>民企</div>
——6.3 :selected（取下拉列表被選中的元素）
<script type="text/javascript">
$(document).ready(function() {
alert($(':selected').val());
});</script>
<select>
<option value="外企">外企</option>
<option value="國企">國企</option>
<option value="私企">私企</option>
</select>
四、表單選擇器
1. :input（取input,textarea,select,button元素）
:input元素這里就不再多說了，前面的一些例子中也已經(jīng)囊括了。
2. :text（取單行文本框元素）和:password（取密碼框元素）
這兩個選擇器分別和屬性選擇器$('input[type=text]')、$('input[type=password]')等同。
<script type="text/javascript">
$(document).ready(function() {
$(':text').css('border', '1px solid #FF0000');
$(':password').css('border', '1px solid #0000FF');
// 等效代碼
//$('input[type=text]').css('border', '1px solid #FF0000');
//$('input[type=password]').css('border', '1px solid #0000FF');
});</script>
<fieldset style="width: 300px;">
<legend>賬戶登錄</legend>
<div>
<label>用戶名：</label><input type="text"/>
</div>
<div>
<label>密 碼：</label><input type="password"/>
</div>
</fieldset>
3. :radio（取單選框元素）
:radio選擇器和屬性選擇器$('input[type=radio]')等同
<script type="text/javascript">
$(document).ready(function() {
$(':radio').each(function() {
alert($(this).val());
});
// 等效代碼
/*
$('input[type=radio]').each(function() {
alert($(this).val());
});
*/
});</script>你現(xiàn)在工作的企業(yè)屬于：
<input type="radio" name="radio" checked="checked" value="外企"/>外企
<input type="radio" name="radio" value="國企"/>國企
<input type="radio" name="radio" value="民企"/>民企
4. :checkbox（取復(fù)選框元素）
:checkbox選擇器和屬性選擇器$('input[type=checkbox]')等同
<script type="text/javascript">
$(document).ready(function() {
$(':checkbox').each(function() {
alert($(this).val());
});
// 等效代碼
/*
$('input[type=checkbox]').each(function() {
alert($(this).val());
});
*/
});</script>
您的興趣愛好：
<input type="checkbox" />游泳
<input type="checkbox" />看書
<input type="checkbox" checked="checked" value="打籃球"/>打籃球
<input type="checkbox" checked="checked" value="電腦游戲"/>電腦游戲
上面的代碼，會將所有額checkbox的value輸出出來。若你想選擇選中項，有三種寫法：
$(':checkbox:checked').each(function() {
alert($(this).val());
});
$('input[type=checkbox][checked]').each(function() {
alert($(this).val());
});
$(':checked').each(function() {
alert($(this).val());
});
5. :submit（取提交按鈕元素）
:submit選擇器和屬性選擇器$('input[type=submit]')等同
6. :reset（取重置按鈕元素）
:reset選擇器和屬性選擇器$('input[type=reset]')等同
7. :button（取按鈕元素）
:button選擇器和屬性選擇器$('input[type=button]')等同
8. :file（取上傳域元素）
:file選擇器和屬性選擇器$('input[type=file]')等同
9. :hidden（取不可見元素）
:hidden選擇器和屬性選擇器$('input[type=hidden]')等同
以上就是jQuery選擇器的全部內(nèi)容了，是不是很全面？如有遺漏的，請告之一下，本文持續(xù)更新。
- jQuery prev ~ siblings選擇器使用介紹
- jquery 層次選擇器siblings與nextAll的區(qū)別介紹
- 使用jquery選擇器如何獲取父級元素、同級元素、子元素
- jquery選擇器之屬性過濾選擇器詳解
- JQuery 選擇器、過濾器介紹
- jquery選擇器排除某個DOM元素的方法（實例演示）
- jQuery Selector選擇器小結(jié)
- JQuery中$之選擇器用法介紹
- jquery選擇器-根據(jù)多個屬性選擇示例代碼
- jQuery中的類名選擇器（.class）用法簡單示例
- jquery選擇器大全 全面詳解jquery選擇器
- jQuery 選擇器用法實例分析【prev + next】
相關(guān)文章
jQuery制作input提示內(nèi)容（兼容IE8以上）
這篇文章主要為大家詳細(xì)介紹了jQuery制作input提示內(nèi)容，兼容IE8以上，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
下面小編就為大家?guī)硪黄狫query on綁定的事件 觸發(fā)多次實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
這篇文章主要介紹了jQuery實現(xiàn)圖片局部放大鏡效果的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了jquery定時查詢待處理任務(wù)數(shù)量插件示例2014-05-05
這篇文章主要介紹了jquery如何獲取當(dāng)前點擊對象的value,需要的朋友可以參考下2014-02-02
這篇文章主要探討了關(guān)于jQuery判斷元素是否存在的問題,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了基于jQuery實現(xiàn)的雙11天貓拆紅包抽獎效果，在即將到來的雙十二活動中大家也可以使用拆紅包抽獎吸引消費者，需要的朋友可以參考下2015-12-12
今天要介紹的是實現(xiàn)類跑馬燈效果的的廣告插件。類似偶公司web-dev的同事在網(wǎng)站首頁上做的目錄廣告播放器。其實很簡單，LEVIN實際應(yīng)用中也用到,所以稍作整理如下.2010-04-04
本篇文章主要是對jquery cookie的用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
通過添加 CSS 類改變元素的外觀和感覺，非常干凈的方法，而不是添加內(nèi)聯(lián)樣式。2011-08-08