JQuery知識快覽之一—選擇器

時間 2019-12-09

標籤 jquery 知識之一選擇器欄目 JQuery 简体版

原文原文鏈接

閱讀指導：本文參考最新的1.10.2版寫成，針對用得比較多的1.4版，全部1.5版以後的函數都會註明哪一版新增。對於熟悉1.4版想學1.10版的請直接搜索"新增"。css

JQuery是一個JavaScript庫，它提供了不少有用的API,簡化了咱們使用JavaScript的方式。html

JQuery由JQuery.com提供，你能夠在該網站上下到最新的jquery

有兩種類型的JQuery，一種是未壓縮的，便於你學習其源代碼，另外一種是壓縮的，不易閱讀可是更節約流量。ajax

如今有兩個版本的JQuery，V1.x支持ie6,7,8，V2.x開始不支持ie6,7,8了。api

如今1.x的最新版本是1.10.2函數

若是你不肯意在本身的計算機上存放JQuery庫，你能夠鏈接到如下的一些CDN.佈局

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>

使用CDN的好處，用戶已經訪問了包含這些資源的網站的話，在訪問你的網站時就不用重複下載資源了。學習

本文主要介紹JQuery選擇器，這能夠說是JQuery的亮點之一，JQuery提供了有豐富功能的選擇器，能夠方便的獲取頁面中的元素。優化

使用選擇器注意事項

1.選擇器對元素，屬性，值的大小是不敏感的動畫

2.對於!"#$%&'()*+,./:;<=>?@[\]^`{|}~等特殊符號，須要用//轉義

基礎選擇器

1.選擇全部的元素

$("*")

2.根據元素Id選擇

$("#myid")

注意一個頁面的id都是惟一的，這個只能選擇第一個match的

3.根據元素的名稱選擇

$("div")

4.根據元素的css類選擇

$(".myclass")

注意：一個元素能夠有多個css類，只要其中一個匹配就會被選擇

5.複合選擇器

作多種選擇器的和，好比$("#myid,div,.myclass)至關於$("#myid").add("div").add(".myclass")

層次選擇器

1.選擇選擇器1中所選元素的全部符合選擇器2條件的直接子節點

$("body > div")

2.選擇選擇器1中所選元素的全部符合選擇器2條件的全部子孫節點

$("body div")

3.選擇選擇器1中所選元素後面的一個符合選擇器2條件的節點，選擇器2所選元素和選擇器1所選元素要在同一節點下。

$("#myid + li")

4.選擇選擇器1中所選元素後面的全部符合選擇器2條件的節點，選擇器2所選元素和選擇器1所選元素要在同一節點下。

$("#myid ~ li")

表單選擇器

用表單選擇器要注意兩點，一點是最好和input一塊兒用，好比$("input:submit")。另外一點是大多數選擇器都不屬於css規範，沒法用其優化功能。最好是先作別的選擇，再用表單選擇器過濾。

1.匹配全部按鈕

$(":button")

匹配全部的<button>mybutton</button>和<input type="button" value="mybutton" />

2.匹配提交按鈕

$(":submit")

匹配全部的<button>mybutton</button>，<button type="submit">mybutton</button>和<input type="submit" value="提交" />

3.匹配全部文本

$(":text")

匹配全部的<input type="text" >

注意：從版本1.5.2開始，<input>也能被匹配。

4.匹配當前焦點

$(":focus")

這是1.6版新增的，能獲取當前得到焦點的元素

5.獲取被選擇狀態的元素

$(":checked")

注意:它適用於checkbox,radio button和select列表。

6.其餘的一些，很容易理解的。

$(":selected")

$(":reset")

$(":password")

$(":input")

$(":image")

$(":file")

$(":enabled")

$(":disabled")

屬性選擇器

1.有某屬性

$("[attribute]")

如$("div[id]")選擇有id屬性的div

2.屬性爲某值

$("[attribute='value']")

3.屬性爲某值或‘某值-’打頭的值

$("[attribute|='value']")

4.屬性的值中含有某值

$("[attribute*='value']")

5.屬性含有某值

$("[attribute~='value']")

注意：一個屬性能夠有多個值，每一個值之間用空格分開，這個選擇器正好能處理多個值中包含給定值就被選擇的狀況

6.屬性的值以某值打頭

$("[attribute^='value']")

7.屬性的值以某值結尾

$("[attribute$='value']")

8.不含某屬性或有該屬性可是屬性不爲某值

$("[attribute!='value']")

注意：該選擇器不屬於css規範，沒法用其優化功能。最好是先作別的選擇，再用該選擇器過濾。

9.複合屬性選擇器

$("[attributeFilter1][attributeFilter2][attributeFilterN]")

基本過濾器

1.獲取當前選擇器中給定位置的元素,從0開始計數

$("selector:first")

$("selector:last")

$("selector:even")偶數位

$("selector:odd")奇數位

$("selector:eq(index)")等於給定索引值的元素

$("selector:gt(index)")全部大於給定索引值的元素

$("selector:lt(index)")全部小於給定索引值的元素

注意:從1.8版開始，給定索引值能夠爲負數，表示從尾部開始索引。

2.去除與給定選擇器匹配的元素

$(":not(selector)")

最好用.not()函數

3.選擇h1,h2等header標籤

$(":header")

4.選擇給定語言的元素

1.9版新增

對於<div lang="en-us"></div>

用$("div:lang(en)")能夠匹配全部lang屬性爲en或en-打頭的元素

5.獲取根元素

1.9版新增

$(":root")獲取<html>元素

6.獲取文檔URI所指向的元素。

好比有個URI是http://example.com/#foo,$("p.target")會獲取<p id="foo">元素

7.獲取當前正在動畫的對象

$(":animated")

內容過濾器

1.匹配包含給定文本的元素

$(":contains(text)")

2.匹配全部不包含子元素或者文本的空元素

$(":empty")

3.匹配全部包含子元素或者文本的元素

$(":parent")

注意：全部的p都認爲非空

4.匹配含有選擇器所匹配的元素的元素.

$(":has(selector)")

注意:被匹配的元素能夠是其孫子元素

子元素過濾器

1.獲取在父元素中給定位置的元素，從1開始計數，對每一個父元素分別計數。

須要注意的是若是選擇器中的元素有n個在一個父元素中，可是這n個並不在父元素中的給定位置處，這樣這n個元素都不會被選擇。

$(":first-child")

$(":last-child")

$(":nth-child(index/even/odd/equation)")

equation的寫法如:

$(":nth-child(3n+2)")

$(":nth-last-child(index/even/odd/equation)") 1.9版新增

2.選擇在其父元素中是惟一元素的元素

$(":only-child")

3.獲取在父元素中給定位置的元素，從1開始計數，對每一個父元素分別計數。

針對原有的:nth-child等選擇器對位置的判斷是針對父元素中全部的元素的狀況，1.9版新增了一些選擇器，其對位置的判斷變爲針對父元素中全部在選擇器中的元素來計數。

$(":first-of-type")

$(":last-of-type")

$(":nth-of-type(index/even/odd/equation)")

$(":nth-last-of-type(index/even/odd/equation)")

4.選擇在選擇器中是父元素惟一元素的元素

$(":only-of-type")

這個也是1.9版新增的

可見性過濾器

只有兩個

$(":hidden")和$(":visible")

下面這些元素被認爲是hidden的：

1.CSS的display屬性爲none

2.type="hidden"

3.元素的長或寬被設置爲0

4.祖先爲hidden，則元素爲hidden

注意：不在document中的元素沒法判斷是否可見。

visibility:hidden或opacity:0被認爲是可見的，由於它們仍會消耗佈局空間。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。