jQuery心得1--jQuery入門知識串講1

1. JavaScript 庫作用及對比

為了簡化 JavaScript 的開發, 一些 JavsScript 庫誕生了.JavaScript 庫封裝了很多預定義的物件和實用函式。能幫助使用者建立有高難度互動的 Web2.0 特性的富客戶端頁面, 並且相容各大瀏覽器；當前流行的 JavaScript 庫有:

2. jQuery 簡介

jQuery 是繼 Prototype 之後又一個優秀的 JavaScript 庫

jQuery 理念: 寫得少, 做得多. 優勢如下:

輕量級

強大的選擇器

出色的 DOM 操作的封裝

可靠的事件處理機制

完善的 Ajax

出色的瀏覽器相容性

鏈式操作方式

……

3. jQuery 物件

jQuery 物件就是通過 jQuery ($()) 包裝 DOM 物件後產生的物件。jQuery 物件是 jQuery 獨有的. 如果一個物件是jQuery 物件, 那麼它就可以使用 jQuery 裡的方法: $(“#persontab”).html();

jQuery 物件無法使用 DOM 物件的任何方法, 同樣 DOM 物件也不能使用jQuery 裡的任何方法

約定：如果獲取的是 jQuery 物件, 那麼要在變數前面加上 $.  

var $variable = jQuery 物件

var variable = DOM 物件

4. DOM 物件與jQuery 物件的互相轉換

   DOM 物件轉成 jQuery 物件

對於一個 DOM 物件, 只需要用 $() 把 DOM 物件包裝起來(jQuery 物件就是通過 jQuery 包裝 DOM物件後產生的物件), 就可以獲得一個jQuery 物件.

   轉換後就可以使用jQuery 中的方法了

jQuery 物件轉成 DOM 物件

jQuery 物件不能使用 DOM 中的方法, 但如果 jQuery 沒有封裝想要的方法, 不得不使用 DOM 物件的時候, 有如下兩種處理方法:

                  

5. jQuery 選擇器

選擇器是 jQuery 的根基, 在 jQuery 中, 對事件處理, 遍歷 DOM 和 Ajax 操作都依賴於選擇器

jQuery選擇器的優點:

6．基本選擇器

基本選擇器是 jQuery 中最常用的選擇器, 也是最簡單的選擇器, 它通過元素 id, class 和標籤名來查詢 DOM 元素(在網頁中 id 只能使用一次, class 允許重複使用).

7.層次選擇器

如果想通過 DOM 元素之間的層次關係來獲取特定元素, 例如後代元素, 子元素, 相鄰元素, 兄弟元素等, 則需要使用層次選擇器.

注意: 

(“prev ~ div”) 選擇器只能選擇 “#prev ” 元素後面的同輩元素; 而jQuery 中的方法 siblings() 與前後位置無關, 只要是同輩節點就可以選取

$("#one + div") 選擇 id 為 one 的下一個 div 元素, 必須是近鄰的! $(“#two ~ div”) 選擇 id 為 two 的元素 後面 的所有 div 兄弟元素

8. 過濾選擇器

過濾選擇器主要是通過特定的過濾規則來篩選出所需的 DOM 元素, 該選擇器大多數都以 “:” 開頭，除了那幾個特殊的屬性外

按照不同的過濾規則, 過濾選擇器可以分為基本過濾, 內容過濾, 可見性過濾, 屬性過濾, 子元素過濾和表單物件屬性過濾選擇器.

需要注意: $(“div:first”) 和 $(“div :first”) 的區別!

9. 內容過濾選擇器

 內容過濾選擇器的過濾規則主要體現在它所包含的子元素和文字內容上

10.可見性過濾選擇器

可見性過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素

可見選擇器 :hidden 不僅包含樣式屬性 display 為 none 的元素,也包含文字隱藏域 (<input type=“hidden”>)和 visible:hidden之類的元素

11.屬性過濾選擇器

屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素

12.子元素過濾選擇器

nth-child() 選擇器詳解如下：

•       (1) :nth-child(even/odd): 能選取每個父元素下的索引值為偶(奇)數的元素

•       (2):nth-child(2): 能選取每個父元素下的索引值為 2 的元素

•       (3):nth-child(3n): 能選取每個父元素下的索引值是 3 的倍數的元素

•       (3):nth-child(3n + 1): 能選取每個父元素下的索引值是 3n + 1的元素