jQuery入門介紹之基礎知識_jquery

JavaScript 庫作用及對比

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

目前流行的JavaScript 函式庫有:

 

jQuery 簡介

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

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

輕量級

強大的選擇器

出色的 DOM 操作的封裝

可靠的事件處理機制

完善的 Ajax

優秀的瀏覽器相容性

鍊式操作方式

……

jQuery: HelloWorld

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 物件.

 

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

jQuery 物件轉成 DOM 物件

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

(1) jQuery 物件是一個陣列物件, 可以透過 [index] 的方法得到對應的 DOM物件. 

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

jQuery 選擇器

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

jQuery 選擇器的優點:

簡單的寫法                                                         

完善的事件處理機制

基本選擇器

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

基本選擇器範例

改變 id 為 one 的元素的背景色為 # bbffaa

改變 class 為 mini 的所有元素的背景色為 # bbffaa

改變元素名稱為

的所有元素的背景色為 #bbffaa

改變所有元素的背景色為 #bbffaa

改變所有的元素和 id 為 two 的元素的背景色為 # bbffaa

層次選擇器

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

 

 

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

層次選擇器範例

改變

內所有

的背景色為 # bbffaa

改變

內子

的背景色為 # bbffaa

改變 id 為 one 的下一個

的背景色為 # bbffaa

改變 id 為 two 的元素後面的所有兄弟

的元素的背景色為 # bbffaa

改變 id 為 two 的元素所有

兄弟元素的背景色為 # bbffaa