jQuery選擇器大全(48個代碼片斷+21幅圖演示)
選擇器是jQuery最基礎的東西，本文中列舉的選擇器基本上囊括了全部的jQuery選擇器，也許各位經過這篇文章可以加深對jQuery選擇器 的理解，它們自己用法就很是簡單，我更但願的是它可以提高我的編寫jQuery代碼的效率。本文配合截圖、代碼和簡單的歸納對全部jQuery選擇器進行 了介紹，也列舉出了一些須要注意和區分的地方。javascript
1、基本選擇器
1. id選擇器（指定id元素）
將id="one"的元素背景色設置爲黑色。（id選擇器返單個元素）css
$(document).ready(function () { $('#one').css('background', '#000'); });
2. class選擇器（遍歷css類元素）
將class="cube"的元素背景色設爲黑色html
$(document).ready(function () { $('.cube').css('background', '#000'); });
3. element選擇器（遍歷html元素）
將p元素的文字大小設置爲12pxjava
$(document).ready(function () { $('p').css('font-size', '12px'); });
4. * 選擇器（遍歷全部元素）
$(document).ready(function () { // 遍歷form下的全部元素，將字體顏色設置爲紅色 $('form *').css('color', '#FF0000'); });
5. 並列選擇器
$(document).ready(function () { // 將p元素和div元素的margin設爲0 $('p, div').css('margin', '0'); });
2、 層次選擇器
1. parent > child（直系子元素）
$(document).ready(function () { // 選取div下的第一代span元素，將字體顏色設爲紅色 $('div > span').css('color', '#FF0000'); });
下面的代碼，只有第一個span會變色，第二個span不屬於div的一代子元素，顏色保持不變。jquery
<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會變色sql
<div class="inside">G1</div> <div>G2</div> <span>G3</span> <div>G4</div>
3、 過濾選擇器
1. 基本過濾選擇器
——1.1 :first和:last（取第一個元素或最後一個元素）chrome
$(document).ready(function () { $('span:first').css('color', '#FF0000'); $('span:last').css('color', '#FF0000'); });
下面的代碼，G1（first元素）和G3（last元素）會變色api
<span>G1</span> <span>G2</span> <span>G3</span>
——1.2 :not（取非元素）ide
$(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>
當G1所在div和G2所在div是父子關係時，G1和G2都會變色。
——1.3 :even和:odd（取偶數索引或奇數索引元素，索引從0開始，even表示偶數，odd表示奇數）
$(document).ready(function () { $('tr:even').css('background', '#EEE'); // 偶數行顏色 $('tr:odd').css('background', '#DADADA'); // 奇數行顏色 });
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會是藍色，L3是默認顏色
<ul> <li>L1</li> <li>L2</li> <li>L3</li> <li>L4</li> <li>L5</li> </ul>
——1.6 :header（取H1~H6標題元素）
$(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. 內容過濾選擇器
——2.1 :contains(text)（取包含text文本的元素）
$(document).ready(function () { // dd元素中包含"jQuery"文本的會變色 $('dd:contains("jQuery")').css('color', '#FF0000'); });
下面的代碼，第一個dd會變色
<dl> <dt>技術</dt> <dd>jQuery, .NET, CLR</dd> <dt>SEO</dt> <dd>關鍵字排名</dd> <dt>其餘</dt> <dd></dd> </dl>
——2.2 :empty（取不包含子元素或文本爲空的元素）
$(document).ready(function () { $('dd:empty').html('沒有內容'); });
上面第三個dd會顯示"沒有內容"文本
——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的元素佔據了空間，會被排除在外。
參照：http://www.jquerysdk.com/api/hidden-selector
下面的代碼，先彈出"hello"對話框，而後hid-1會顯示，hid-2仍然是不可見的。
<html xmlns="http://www.w3.org/1999/xhtml" > <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標籤沒有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的插件開發" class="item">基於jQuery的插件開發</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標籤指定文字顏色
<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結束，或包含value值）
在屬性選擇器中，^$符號和正則表達式的開始結束符號表示的含義是一致的，*模糊匹配，相似於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]（複合型屬性過濾器，同時知足多個條件）
將title以"jQuery"開始，而且class="item"的a標籤隱藏，那麼<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="http://www.w3.org/1999/xhtml" > <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="http://www.w3.org/1999/xhtml" > <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>
結果倒是彈出三個alert，只不過最後一個alert裏面是空白的。
——5.2 :only-child
當某個元素有且僅有一個子元素時，:only-child纔會生效。
<html xmlns="http://www.w3.org/1999/xhtml" > <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開始，獲取第偶數個元素或第奇數個元素
3) :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0時就是3n，表示取第3n個元素（n>=0）。實際上xn+y是上面兩種的通項式。（當x=0,y>=0時，等同於:hth- child(x)；當x=2,y=0時，等同於nth-child(even)；當x=2,y=1時，等同於:nth-child(odd)）
下面的兩個例子是針對2)和3)的，1)的例子我就不列舉了。
例2：
<html xmlns="http://www.w3.org/1999/xhtml" > <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() { // 偶數行背景紅色 $('tr:nth-child(even)').css('background', '#FF0000'); // 奇數行背景藍色 $('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（取選中的單選框或複選框元素）
下面的代碼，更改邊框或背景色僅在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>你如今工做的企業屬於： <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>
4、表單選擇器
1. :input（取input,textarea,select,button元素）
:input元素這裏就再也不多說了，前面的一些例子中也已經囊括了。
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>你如今工做的企業屬於： <input type="radio" name="radio" checked="checked" value="外企"/>外企 <input type="radio" name="radio" value="國企"/>國企 <input type="radio" name="radio" value="民企"/>民企
4. :checkbox（取複選框元素）
: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]')等同
- 1. jQuery選擇器大全| jQuery選擇器大全
- 2. jQuery選擇器大全
- 3. jQuery的選擇器大全
- 4. 轉：jquery選擇器大全
- 5. Jquery 選擇器大全
- 6. JQuery選擇器大全
- 7. JQuery選擇器（大全）
- 8. jQuery 選擇器大全
- 9. jquery 選擇器大全
- 10. 選擇圖片代碼
- 更多相關文章...
- • C# 不安全代碼 - C#教程
- • Docker 命令大全 - Docker教程
- • IntelliJ IDEA代碼格式化設置
- • IntelliJ IDEA安裝代碼格式化插件
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. jQuery選擇器大全| jQuery選擇器大全
- 2. jQuery選擇器大全
- 3. jQuery的選擇器大全
- 4. 轉：jquery選擇器大全
- 5. Jquery 選擇器大全
- 6. JQuery選擇器大全
- 7. JQuery選擇器（大全）
- 8. jQuery 選擇器大全
- 9. jquery 選擇器大全
- 10. 選擇圖片代碼