6.2 jQuery

  • jQuery 簡介

        一套跨瀏覽器的JavaScript函式庫,強化HTML與JavaScript之間的操作。一個強大而有用的 javascript lib , 可以幫你處理70%以上得跨瀏覽器平台問題 , 跟只要會css 就會用的css selector , 可以讓你再也不用拼命打document.getElementById了, 而且還有非常多人針對他寫plug-in , 連網頁中頗難搞得 dnd (drag-and-drop) 效果都有現成的道具可以套 , 只要呼叫它的一個方法 , 就有如魔術一般地出現了~

        傳統我們在煩惱底層如何實做 , 現在我們可以回歸到組合各式事件的層次專注於做出我們想要的效果 , 很多事情也不再是不可能,當然對於讓不少人望之卻步的 ajax技術 , 也得到很好的簡化.

        http://jquery.com/

        只要把下載回來的 jquery的js檔載入
        (<script type="text/javasciprt" src="xxxx.js"></script> )

        就有一個比傳統dom object更強大的jQuery Context幫你處理 , 而且如果你不習慣 , jquery 也沒有直接複寫掉dom , 仍然提供讓你存取dom的窗口.

 


        另外他也提供一些方式讓你更自由的把onclick onmousemove 之類的事件綁定到dom物件上 , 而不用受限於一次只能放一個事件 , 另外更可以讓網頁中往往讓人容易忽略的onclick 等屬性與頁面結構分離.

 

 以上轉錄自ptt

  -

  目前最新版本為 1.7.2 (2012.03.21 Release)


  關於jQuery還有一個優點就是,目前網路上有不少CDN可供使用

  像是Google Microsoft 都有提供.

  jQuery核心概念就是 " write less, do more. "

  對於jQuery的行為可分成幾個部分:

  1. 選取一些Element,然後對Element做一些事情.
  2. 使用jQuery的chaining pattern.
  3. 使用包裝器和隱性的迴圈.

  

  1. jQuery是一款免費且開放原始碼的JavaScript代碼函式庫,由John Resig創建,授權協定為GPL和MIT許可證雙協定。建立於Plug-in的架構上誕生的,他簡化了讓你在HTML文件裡面尋找DOM物件, 處理事件, 製作動畫, 和處理Ajax互動的過程,簡單來說載入這個 jQuery.js 這程式後,可以比較簡單的去寫javascript,其強大之處是在他的selecter 就是直接選擇你div 或element 的id 做修改,但是由於第一句所述「jQuery 就是javascript的 libary」,因此在學習jQurey前,必須稍具 JavaScript 的基礎,因此即便覺得javascript寫起來很煩很長想改學jQuery,仍須先具備一定的程度。

  • jQuery
  1. jQuery 有下列特色:

    • DOM element selections
    • DOM 巡訪與更改, (支援 CSS 1-3 與 基本的XPath,jQuery 1.2版以後預設取消XPath支援,改為外掛程式支援)
    • 事件(Events)
    • CSS 處理
    • 動畫
    • Ajax
    • 延伸性(Extensibility)
    • Utilities - such as browser version and the each function.
    • JavaScript Plugins

  2. 是「以網頁物件為中心」的思考方式來運行的,因此雖然他不是包山包海的萬用程式,但是在於 DOM 文件的操作有不錯的效果,包含「快速選取元素(Element)」,然後可以將這些被選取的元素做一些改變,例如隱藏、顯示等等。此外 jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能,讓你更容易操作遠端文件及事件。
  3. 如何快速選取元素?例:$("div").addClass("special");  錢記號 $ 是 jQuery 的物件,使用 $("div") 就是用 jQuery 來選取元素,這個範例可以選取文件內所有的 <div> 元素。後面接著的 .addClass("special") 就是用來做一些事情,這個範例是將先前所選取到的所有元素都加上一個名為 "special" 的 class。也就是透過 $("div").addClass("special") 的語法,可以讓你一次幫文件上有的 <div> 元素都加入 special 的 class。
    jQuery 最基本的中心思想就是以「選取 DOM 元素為開始」。

    jQuery 在選取元素方面採用 CSS 選擇器的語法 (CSS1、CSS2、CSS3),此外透過 plugin 你也可以使用 XPath 語法

  4. 連續使用函數:jQuery 很重要的一個特性是可以連續地使用函數(Chaining),
    當你選取了一個或一組的元素後,可以連續對這些元素進行多個處理。
    以下範例會將所有的 <div> 隱藏,修改文字顏色為藍色,再將 <div> 以下拉布幕的效果顯示出來。
    例:
    $("div").hide();  
    $("div").css("color", "blue");  
    $("div").slideDown(); 
    以上這三行可以縮寫成
    $("div").hide().css("color", "blue").slideDown(); 
    jQuery 的架構設計上,大部分的函數都會在處理完該做的事情後,再將原本傳入的元素給回傳回去,
    因此函數都可以連續這樣一個接著一個的使用。
    這裡還分為兩個函數做介紹:
    第一個是end(),這個函數執行後,會回傳「前一組找到的元素」。另一個是 find(),這個函數的用法如
    同使用$() 找文件內的元素一樣是帶入 CSS 選擇器,執行後回傳找到的元素,不同的是 $() 是找整個文件,
    而 find() 是根據先前找到的元素再找其底下的元素,像是一個再過濾的功能。
    例:
    $("ul.open")              
      .children("li")         
      .addClass("open")       
      .end()                 
      .find("a")              
      .click(function(){  
        $(this).next().toggle();  
        return false;  
      })                      
      .end();
    步驟:                
    1.找出文件內所有 class 為 open 的 <ul>
    2.過濾出下一層的所有 <li>
    3.對這些 <li> 新增一個 class
    4.回前一次搜尋的結果,也就是所有的 <ul>
    5.再找出底下所有的 <a>
    6.對 <a> 新增事件處理
    7.回前一次搜尋的結果
                 
  5.  Jquery
  • jQuery Plug-in
  • jQuery UI

         基於jQuery的使用者介面函式庫,包括拖放、縮放、對話方塊、標籤頁等多個零件。

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

 

   這裡介紹的是 animate( ) 這個方法 , 他可以讓你提供多個參數,
        包括 param
             duration (經過時間,也可填'fast','slow','normal')
             easing(緩和方式,目前預設是'inear' 線性法 ,另有 'swing'可選)
             還有callback 指的是在animate動作結束後要呼叫的方法.

        他的概念其實很簡單 , 你結果想要達到什麼 , 就寫在 param 裡面 ,
        過程想要什麼效果 , 就交給 easing決定


        比方說我現在想從現在的 , 寬度變400px ,高度變200px.
        並且希望他在 1.5秒內完成

        $("#helloButton").click(
           function(){
             $("#anNode").animate(
               {
                  width: "400px",
                  height: "200px"
               }
               ,
               1500
            );
         }
       );

 

 

參考資料

jQuery - 維基百科簡介

官網 - 英文

網路上達人的筆記 - 國三還是菜鳥一枚 : 裡面資料寫的很詳細,想要了解jquery的人可以在這裡學習到很多東西

Ptt -  Ajax板 和 Web_Design板 : 搜尋也可以找到很多資料

也介紹寫jquery的書 網路上也有電子書流傳著 

jQuery 實戰手冊

Learning jQuery中文版》建議先看learning jquery

http://jsgears.com/thread-63-1-1.html

http://webdesign.piipo.com/jquery/jquery_basics

 

jQuery的簡介與初體驗

http://www.dotblogs.com.tw/topcat/archive/2009/12/04/12279.aspx

jQuery POST 練習 – 簡單範例

 

http://www.samtseng.liho.tw/~samtz/blog/2009/05/07/jquery-post-%E7%B7%B4%E7%BF%92/

jQuery 用法收集 - 軟件開發、測試、管理、設計

http://www.guan8.net/Java/444240.html

看完以上的練習 附上 JQUERY+PHP 做出來的練習 留言板

點選下載