jQuery基礎學習筆記（1）

標籤：style   io   os   使用   strong   sp   on   html   bs   

--------2.0以上版本體積更小。

--------CDN  內容分髮網絡（Content delivery network或Content distribution network，常簡寫成CDN）可以減少頻寬，但需要保證網路正常串連。

jQuery函數：jQuery()  或者寫成 $()  ，使用方法：1.選取器；2.對象，如document；3.常值內容，注意這個常值內容裡一定要包含至少一個 html 標籤 … 不然 jQuery 會把沒有 html 標籤的常值內容當成是選取器來處理 …

 size--------針對標籤對象元素，比如數html頁面有多少個段落元素<p></p>，那麼此時的$("p").size() == $("p").length

length------計算一個字串的長度或者計算一個數組元素的個數，那麼此時只能用length而不能用size()

 

選取器：

1.支援css3選取器

2.選取器過濾，例如$(‘img:even‘)  注意:第一個是0,0 是偶數；$( ‘img:eq( 1 )’ )     $( ‘img:lt( 3 )‘ )

3.選取器裡使用元素屬性

例如：$( ‘li[data-album!="single"] > img‘ )

=包含的具體的值，也就是所選擇的元素裡面的這個屬性的值裡不能包含其它的東西

~ =號等於只會包含用空格分隔開的值

 

 

* 號等於不在乎有沒有空格，只要屬性的值裡包含設定的字元就可以 

 

 

選擇表單元素：

選擇不同的類型的表單元素，一般就是使用冒號加上元素的名稱 ，或者元素類型的名稱

$( ‘:input’ )

$( ‘:password’ )

$( ‘:checked’ )

跟表單相關的選取器，都有一個冒號 … :input 表示找到所有 input 類型的元素。

注意這裡使用 button 標籤的按鈕也被看成是 input 類型的元素 。如果想單獨選中按鈕元素 ，可以使用 $( ‘:button’ )

另外我們還有一些根據表單元素的狀態來選擇的選取器，比如 :focus 會選擇處在焦點狀態的 input 元素 ，

:disabled 選擇的是被禁用的表單元素，:enabled 選擇是啟用的表單元素。

 

 

子項目選取器

:nth-child 允許我們指定選擇第幾個子項目 

$( ‘ul li:nth-child(1)‘ )

注意這個：nth-child 是從 1 開始的 … 也就是第一個子項目的索引號是1，eq() 是從 0 開始的 。

:nth-child 裡可以指定子項目所在位置的關鍵詞 … 比如可以使用 odd 或者 even … 選擇奇數位置的子項目 … 或者偶數位置的子項目 …

$( ‘ul li:nth-child(odd)‘ )

:nth-child 還支援選擇自己定義的成倍數位置上的子項目 …

比如我們要選擇第 4 ，還有第 8 個 li 元素 …

$( ‘ul li:nth-child(4n)‘ )

選擇的子項目就是，從1數到 4 ，第4個子項目 … 然後在從第4個子項目往後再數4個數 …

如果你想反過來做的話，可以把 :nth-child … 換成 :nth-last-child …

$( ‘ul li:nth-last-child(4n)‘ )

 

內容過濾

:contains 這個選取器可以找到包含指定文字內容的元素 … 比如我們想要選擇帶 Viva 這個詞的 li 元素 …

$( ‘li:contains("Viva")‘ )

注意文字的大小寫 … 還有文字是字串形式 … 所以我們需要在文字周圍添加一組引號，這裡也要注意引號的類型 ，如果外面我們用了單引號 ，那這裡就需要使用雙引號。

 

 

過濾的方法

jQuery 裡面提供了一些方法，可以對選擇的結果進一步去過濾。

$( ‘li img‘ ).eq(1)

這個位置號，或者叫索引號，也可以是負數 。

我們可以試一下 -1 … 這樣，會過濾出倒數第一個結果 …

$( ‘li img‘ ).eq(-1)

.first() 和 .last()

.first() 和 .last() 可以找到結果裡的第一個，和最後一個結果 …

先看一下 .first() … 這兩個方法都不支援參數，所以，直接在它們的後面輸入一個括弧就行了。

$( ‘li img‘ ).first()

選擇結果裡的某個範圍，可以使用 .slice() 方法，比如我們想要的是頁面上第7個映像到第12個映像 ，

$( ‘li img‘ ).slice(6, 12)

.slice() 這個方法裡有兩個參數，第一個參數是開始的值 ，第二個參數是結束的值。

 

使用文檔樹形裡的關係過濾

例如：

$( ‘#christmas‘ ).nextAll()

jQuery基礎學習筆記（1）