前端學習JQuery篇01——基本語法（選擇器）
基本選擇器
#id javascript
.classcss
elementhtml
*java
selector1,selector2,selectorNjquery
層級
| selector1 selector2 | 選擇selector1的後代元素中的selector2 | $("div #d1") | 選擇div元素的後代元素中全部id爲d1的元素 |
| selector1>selector2 | 選擇selector1的子元素中的selector2 | $("div .divC") | 選擇div元素的子元素中全部class爲divC的元素 |
| selector1+selector2 | 匹配全部緊接在 prev 元素後的 next 元素(PS:必須是緊接在後的同輩元素) | ||
| selector1~selector2 | 匹配 prev 元素以後的全部 siblings 元素(PS:必須爲同輩元素) |
基本篩選器
| :first | 獲取匹配的第一個元素 | ||
| :not(selector) | 去除全部與selector匹配的元素在jQuery 1.3中，已經支持複雜選擇器了（例如:not(div a) 和 :not(div,a)） | $("div:not(#div1,#div4)") | 選擇全部的div元素除了id爲div1和div4的 |
| :even | 匹配全部索引值爲偶數的元素，從 0 開始計數，查找表格的一、三、5...行（即索引值0、二、4...） | ||
| :odd | 匹配全部索引值爲奇數的元素，從 0 開始計數，查找表格的二、四、6行（即索引值一、三、5...） | ||
| :eq(index) | 匹配一個給定索引值的元素，從 0 開始計數 | $(".divC:eq(0)") | 選擇class爲divC的第一個元素 |
| :gt(index) | 匹配全部大於給定索引值的元素，從 0 開始計數 | ||
| :lang 1.9+ | :lang選擇器,匹配有一個語言值等於所提供的語言代碼，或以提供的語言代碼開始，後面立刻跟一個「 - 」的元素。 | $("div:lang(en)") | 匹配<div lang="en"> and <div lang="en-us">（和他們的後代<div>），但不包括<div lang="fr"> |
| :last | 獲取最後個元素 | ||
| :lt(index） | 匹配全部小於給定索引值的元素，從 0 開始計數 | ||
| :header | 匹配如 h1, h2, h3之類的標題元素（ps：沒法在header前面加選擇器如div：header） | ||
| :animated | 匹配全部正在執行動畫效果的元素 | ||
| :focus | 匹配當前獲取焦點的元素。如同其餘僞類選擇器（那些以":"開始），建議:focus前面用標記名稱或其餘選擇; | 換句話說，$(':focus')等同爲$('*:focus') | |
| :root 1.9+ | 選擇該文檔的根元素。在HTML中，文檔的根元素，和$(":root")選擇的元素同樣， 永遠是<html>元素。 | ||
| :target 1.9+ | 選擇由文檔URI的格式化識別碼表示的目標元素。（PS：這個不尋常的用法，可進一步討論中找到 W3C CSS specification） |
內容
| :contains(text) | 匹配包含給定文本的元素 | $("p:contains('John')") | 查找全部包含 "John" 的 p 元素 |
| :empty | 匹配全部不包含子元素或者文本的空元素 | ||
| :has(selector) | 匹配含有選擇器所匹配的元素的元素 | ||
| :parent | 匹配含有子元素或者文本的元素 |
可見性
| :hidden | 匹配全部不可見元素，或者type爲hidden的元素 | ||
| :visible | 匹配全部的可見元素 |
屬性
| [attribute] | 匹配包含給定屬性的元素。注意，在jQuery 1.3中，前導的@符號已經被廢除！若是想要兼容最新版本，只須要簡單去掉@符號便可。 | $("div[id]") | 查找全部含有 id 屬性的 div 元素 |
| [attribute=value] | 匹配給定的屬性是某個特定值的元素 | $("input[name='newsletter']") | 查找全部 name 屬性是 newsletter 的 input 元素 |
| [attribute!=value] | 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素。（ps：注意！和=不要留空格，會報錯） | 此選擇器等價於 :not([attr=value]) | |
| [attribute^=value] | 匹配給定的屬性是以某些值開始的元素 | ||
| [attribute$=value] | 匹配給定的屬性是以某些值結尾的元素 | ||
| [attribute*=value] | 匹配給定的屬性是以包含某些值的元素 | ||
| [attrSel1][attrSel2][attrSelN] | 複合屬性選擇器，須要同時知足多個條件時使用。 | $("input[id][name$='man']") | 找到全部含有 id 屬性，而且它的 name 屬性是以 man 結尾的 |
子元素
| selector:first-child | 匹配selector所選元素中在其父元素裏的第一個子元素。（若所選元素不是第一個子元素則不選擇） |
||
| :first-of-type 1.9+ | 結構化僞類，匹配E的父元素的第一個E類型的孩子。等價於:nth-of-type(1) 選擇器。 | $("span:first-of-type"); | 查找span元素的父元素的子元素的第一個span元素 |
| :last-child | 匹配selector所選元素中在其父元素裏的最後一個子元素 | $("ul li:last-child") | 在每一個 ul 中查找最後一個 li |
| :last-of-type 1.9+ | 結構化僞類，匹配E的父元素的最後一個E類型的孩子 | ||
| :nth-child() | 匹配其父元素下的第N個子或奇偶元素，要匹配元素的序號，從1開始(參考first-child，示例在此表格以後) | ||
| :nth-last-child() 1.9+ | 選擇全部他們父元素的第n個子元素。計數從最後一個元素開始到第一個。（與:nth-child()x類似，從後開始計數） | ||
| :nth-last-of-type() 1.9+ | 選擇的全部他們的父級元素的第n個子元素，計數從最後一個元素到第一個。 | ||
| :nth-of-type(n|even|odd|formula)1.9+ | 選擇同屬於一個父元素之下，而且標籤名相同的子元素中的第n個。odd奇數，even偶數 | ||
| :only-child | 若是某個元素是父元素中惟一的子元素，那將會被匹配 | ||
| :only-of-type 1.9+ | 選擇全部沒有兄弟元素，且具備相同的元素名稱的元素 |
:first-child ,:last-child ,:first-of-type, :last-of-type的區別
<div >
<span>1</span>
<p>2</p>
<p>3</p>
</div>
<div >
<p>4</p>
<p>5</p>
</div>
示例瀏覽器
$("p:first-child").css("color","red");
結果：只有4變紅動畫
$("p:first-of-type").css("color","red");
結果：2和4變紅ui
$("p:nth-child(2)").css("color","red");
結果：2和5變紅spa
按上例通俗的說：有of的不會在乎span的存在，沒of的會在span的存在
表單
| :input | 匹配全部 input, textarea, select 和 button 元素 | ||
| :text | 匹配全部的單行文本框 | ||
| :password | 匹配全部密碼框 | ||
| :radio | 匹配全部單選按鈕 | ||
| :checkbox | 匹配全部複選框 | ||
| :submit | 匹配全部提交按鈕，理論上只匹配 type="submit" 的input或者button，可是如今的不少瀏覽器，button元素默認的type即爲submit，orm 因此不少狀況下，不設置type的button也會成爲篩選結果。爲了防止歧義或者誤操做，建議全部的button在使用時都添加type屬性。 |
||
| :image | 匹配全部圖像域 | ||
| :reset | 匹配全部重置按鈕 | ||
| :button | 匹配全部按鈕 | ||
| :file | 匹配全部文件域 |
表單對象屬性
| :enabled | 匹配全部可用元素 ，沒被禁用的（PS：disabled="disabled"禁用按鈕） | ||
| :disabled | 匹配全部不可用元素 | ||
| :checked | 匹配全部選中的被選中元素(複選框、單選框等，select中的option)，對於select元素來講，獲取選中推薦使用 selected |
||
| :selected | 匹配全部選中的option元素 |
混淆選擇器
$.escapeSelector(selector) 3.0+
這個方法一般被用在類選擇器或者ID選擇器中包含一些CSS特殊字符的時候，這個方法基本上與CSS中CSS.escape()方法相似，惟一的區別是jquery中的這個方法支持全部瀏覽器。
$( "div" ).find( "." + $.escapeSelector( ".box" ) );
選擇出類中包含.box的div
相關文章
- 1. 前端開發之jQuery篇--選擇器
- 2. jQuery學習-基本選擇器
- 3. 前端學習JQuery篇02——基本語法（事件）
- 4. 【前端】jquery選擇器
- 5. 前端基礎 -JQuery之 基本選擇器
- 6. jQuery---基本的選擇器
- 7. jQuery基本選擇器
- 8. jquery 經常使用選擇器基礎語法學習
- 9. JQuery學習筆記——基礎選擇器
- 10. 前端學習 -- Css -- 屬性選擇器
- 更多相關文章...
- • Lua 基本語法 - Lua 教程
- • C# 基本語法 - C#教程
- • Kotlin學習（一）基本語法
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章