3.1.3 AJAX (jQuery)

JQuery

簡述

  • jQuery 是一套 JavaScript 的 Library,因此,具有JavaScript基礎較容易上手。
  • jQuery 主要是用在 DOM 文件的操作,包含「快速選取元素(Element)」並且「做一些事情」,快速選取元素可以讓你一次選取單一或多個的元素,然後你可以將這些被選取的元素做一些改變,例如隱藏、顯示等等。
  • jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能,讓你更容易操作遠端文件及事件。
  • 以上看得出來 jQuery 是針對 JavaScript 內在不足的地方加以增進

jQuery是一個新形態的 JavaScript程式庫

jQuery 是一個快速又 簡潔的JavaScript程式庫, 簡化了讓你在HTML文件裡面尋找DOM物件, 處理事件, 製作動畫, 和處理Ajax互動的過程 jQuery 是來改變你撰寫 JavaScript 的方式 


再談談 jQuery 的好

1. 官方文件詳細。(重要)
2. 簡潔不笨重,壓縮後大約15KB (v1.2.6)。
3. 只要你有 JavaScript 的基礎,不用再多去學習一大堆新語法。
4. 不用去煩惱跨瀏覽器的問題,jQuery 已經幫你作好了。(IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+)
5. 支援CSS3選擇器。
6. 社群活躍,你可以有很多人家寫好免費的 plugin 用。
7. 跟其它 library 一起使用也不衝突。(jQuery.noConflict())
8. jQuery UI 幫你漂亮搞定 (Web 2.0?) 網站使用者介面。

jQuery免費且開放原始碼,使用GPLMIT許可證雙協定[2]。jQuery的語法設計使得許多操作變容易,如操作檔案(document)、選擇DOM元素、動畫效果、事件處理、發展Ajax以及其他功能。除此之外,jQuery提供API讓開發者將自己所寫的功能融入jQuery內。

jQuery 1.3版以後,引入全新的CSS選擇器引擎Sizzle。[5] 同時不再提供Packed版本,因為解壓縮的消耗的時間,遠大於所節省的下載時間,且不利於Debug,且已有Google AJAX Libraries API等公開站台提供jQuery的js的參照服務,故Packed版本原本的優點已蕩然無存。

jQuery 有下列特色:

  • 跨瀏覽器的DOM元素選擇
  • DOM 巡訪與更改(jQuery 1.2版以後預設取消XPath支援,改為外掛程式支援)
  • 事件(Events)
  • CSS操  (jQuery 所支援的 CSS Selector 包含了 CSS 1、CSS2 以及仍未正式發佈的 CSS3,此外透過 plugin 還可支援常用的 XPath 語法,善用這些 CSS、XPath 語法就可以很容易地找到你要處理的網頁元素)
  • 特效和動畫
  • Ajax
  • 延伸性(Extensibility)
  • 工具 - 例如瀏覽器版本和each函式。
  • JavaScript外掛程式
  • 可以連續地使用函數(Chaining) (當你選取了一個或一組的元素後,可以連續對這些元素進行多個處理)

DHTML DOM選擇器與鏈式語法

  • 經由jQuery的DHTML DOM選擇器,可以更容易的操作在複雜的樹狀HTML中的任何DHTML DOM物件,並可用鏈式語法對同一物件的不同屬性進行操作。
例如:
$("p.surprise").addClass("ohmy").show("slow");
相當於
  1. 尋找HTML的<p>標籤,且其class為"surprise"的DHTML DOM物件
  2. 將其Class屬性多加上一個"ohmy"(通常是配CSS的定義做顯示時的配色修改)
  3. 開啟顯示

整理:

       這裡是從網路上挑選一些不錯用的插件

 1.Interface elements for jQuery

 2.jCarousel

 3.jQuery UI Tabs

 4.SuckerFish Style

 5.jQuery Cycle Plugin

 6.jQuery Plugin and Demo

 7.Block UI

 8.JQuery Curvy Corners

 9.jQuery UI

 10.ThinkBox 3.1

 11.hoverIntent

 12.tablesorter

jQuery的使用:

                    1.使用jQuery:
                                        methodA.

                                                $(function(){
                                                   將jQuery 程式碼寫在這
                                                   });

                                                  //此為用methodA方法開始用jQuery

                    2.利用jQuery抓取ID或NAME的物件

                            2-1.

                                  $(『a』)

                                   //這是抓取所有的<a></a>物件,a可以代換為別的名稱

                             2-2.

                                       $(『input[@name:abc]『)

                                    //這是抓取取名為abc的input物件,物件可以為checked等等之類的

  jQuery 很重要的一個特性是可以連續地使用函數(Chaining),當你選取了一個或一組的元素後,可以連續對這些元素進行多個處理。以下範例會將所有的 <div> 隱藏,修改文字顏色為藍色,再將 <div> 以下拉布幕的效果顯示出來:

  1. $("div").hide();   
  2. $("div").css("color""blue");   
  3. $("div").slideDown();  

這樣的三行程式碼可以用以下一行的程式碼取代,結果會是完全相同的:

          $("div").hide().css("color""blue").slideDown();  

 

$("div").addClass("special");  

錢記號 $ 是 jQuery 的物件,使用 $("div") 就是用 jQuery 來選取元素,帶入的參數 div 是表示你要找的元素,這個範例可以選取文件內所有的 <div> 元素。後面接著的 .addClass("special") 就是用來做一些事情,這個範例是將先前所選取到的所有元素都加上一個名為 "special" 的 class。也就是透過 $("div").addClass("special") 的語法,可以讓你一次幫文件上有的 <div> 元素都加入 special 的 class。

 關於錢記號 $ 將會是你學習及使用 jQuery 的過程中最重要的物件(或者你要把 $ 當成一個函數也可以,事實上也是這樣),使用方式就像剛剛你看到的,用來找元素用的,把參數帶入即可。或許你不習慣錢記號也可以當成函數名稱,那麼你也可以用 jQuery 這個名字,錢記號其實是被當成 jQuery 的縮寫,讓你的函數看起來更簡潔一些,如果你要自己設定另外一個縮寫,例如 $j,也是可以的,這部份後續再解釋,先看看已下的範例,結果將會和上面的範例是一模一樣的:

某些情況可能你無法使用 $(),例如你進行中的專案已經使用了其他的 JavaScript Library,而 $ 這個名稱已經被使用了

參考jQuery教學:http://jsgears.com/thread-63-1-1.html

                             http://jquery.funp.tw/

參考資料:  http://zh.wikipedia.org/zh-tw/JQuery

參考資料:  http://www.jquery.com.tw/