1. 程式人生 > >jQuery的簡單介紹、jQuery基礎選擇器、jQuery的簡單過濾器的介紹

jQuery的簡單介紹、jQuery基礎選擇器、jQuery的簡單過濾器的介紹

jQuery的簡單介紹、jQuery基礎選擇器、jQuery的簡單過濾器的介紹

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

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

輕量級

強大的選擇器

出色的 DOM 操作的封裝

可靠的事件處理機制

完善的 Ajax

出色的瀏覽器相容性

鏈式操作方式

jQuery 物件

jQuery 物件就是通過 jQuery ($()) 包裝 DOM 物件後產生的物件

jQuery 物件是 jQuery 獨有的如果一個物件是 jQuery 物件那麼它就可以使用 jQuery 裡的方法: $(“#persontab”).html();

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

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

var $variable = jQuery 物件

var variable = DOM 物件

DOM 物件轉成 jQuery 物件

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

Var cr document.getElementById(“cr”);

Var $cr =$(“cr”);

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

jQuery 物件轉成 DOM 物件

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

(1) jQuery 物件是一個數組物件可以通過 [index] 的方法得到對應的 DOM物件.  

Var $cr $(“#cr”);

Var cr =$cr[0];

(2) 使用 jQuery 中的 get(index) 方法得到相應的 DOM 物件  

Var $cr $(“#cr”);

Var cr =$cr.get(0);

jQuery 選擇器

選擇器是 jQuery 

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

jQuery 選擇器的優點:

簡潔的寫法      

$(“#id”) //document.getElementById(“id”);

$(“tagName”)  //document.getElementsByTagName(“tagName”);

完善的事件處理機制

//若在網頁中沒有 id 為 “id”的元素,瀏覽器會報錯

//document.getElementById(“id”).style.color=”red”;

//需要先判斷document.getElementById(“id”) 是否存在

If(document.getElementById(“id”)){

document.getElementById(“id”).style.color=”red”;

}       

//使用jQuery獲取網頁中的元素即使不存在也不會報錯

$(“#id”).css(“color”,”red”);

基本選擇器

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

層次選擇器

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

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

1. $("#one + div") 選擇 id 為 one 的下一個 div 元素必須是近鄰的!

2. $(#two ~ div選擇 id 為 two 的元素 後面 的所有 div 兄弟元素

過濾選擇器

過濾選擇器主要是通過特定的過濾規則來篩選出所需的 DOM 元素該選擇器都以 “:” 開頭

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

基本過濾選擇器

內容過濾選擇器

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

可見性過濾選擇器

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

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

屬性過濾選擇器

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

子元素過濾選擇器

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

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

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

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

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

表單物件屬性過濾選擇器

此選擇器主要對所選擇的表單元素進行過濾

表單選擇器