[前言]



jQuery 是一套 javascript 的 Library，因此，你必須稍具 javascript 的基礎，至少寫過一些 javascript 才比較容易上手，並且看得懂後續的教學。jQuery 的核心程式並非包山包海、什麼都可以幫你做，相反地，jQuery 主要是用在 DOM 文件的操作，包含「快速選取元素(Element)」並且「做一些事情」，快速選取元素可以讓你一次選取單一或多個的元素，然後你可以將這些被選取的元素做一些改變，例如隱藏、顯示等等。此外 jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能，讓你更容易操作遠端文件及事件。



以上看得出來 jQuery 是針對 javascript 內在不足的地方加以增進，你仍然需要自己寫一些程式來完成你需要的各種功能，不同的是，正確地使用了 jQuery 可以讓你的程式碼更精簡、更優雅的表達出來，這在後續的範例中可以看到，更重要的是，應該也會讓你更快速的開發出你要的功能。



或許你會想說，在這個 Web 2.0 的時代，我需要多點漂亮、絢麗的 Widgets 來裝飾我的網站，就像 Yahoo UI 或 ExtJS 提供的那些功能一樣，jQuery 有嗎？其實 jQuery 的設計上有考慮到這類擴展性的問題，目前 jQuery 的 plugin 已經有上百個了，你也不一定要完全自己動手寫，上 jQuery 官方網站找找看，或許你需要的功能別人已經幫你做好了。以 UI 來講， jQuery 跟 UI 相關的 plugins 已經做過了一些整合，目前獨立發佈為 jQuery UI (http://ui.jquery.com/)，如果你之前沒聽過 jQuery UI，建議你上去網站上看一下展示的範例，嗯，雖然可能還有一些 bug 存在，但是整體來說已經有相當的水準了，或許你會對 jQuery 更有興趣了。



以下的教學內容，主要是擷取了 jQuery 作者 John Resig 的一篇簡報 "Building Interactive

Prototypes with jQuery" 的內容加以調整並註解，希望能以比較忠實的方式來呈現 jQuery 的設計含意。





[初探]



jQuery 怎麼用來「快速選取元素」並且「做一些事情」呢？請看看程式碼：

 


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




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



請注意喔，剛剛的例子可以針對已選取的多個元素做批次的操作，也就是說如果文件上有三個
，那就會一次找出三個
並且全部套用後續的動作。這和你原本自己使用 javascript 來寫程式有很大的差異，原本自己寫可能會需要用到迴圈之類的語法，而 jQuery 的函數大多具有批次處理的功能，光是這點就可以讓你的程式更簡潔了。



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

 


  1. jQuery("div").addClass("special");  






[選取元素]



前面的例子使用 $("div") 來選取元素，帶入的參數 div 是表示你要找的元素，這是 CSS 選擇器(CSS Selector) 的語法，就如同 CSS 在做排版和外觀所使用的選擇器語法一樣。jQuery 所支援的 CSS Selector 包含了 CSS 1、CSS2 以及仍未正式發佈的 CSS3，此外透過 plugin 還可支援常用的 XPath 語法，善用這些 CSS、XPath 語法就可以很容易地找到你要處理的網頁元素，底下來看看更多的範例。



這是一段原始的 HTML：

 


  1. <div id="body">  

  2.   <h2>Some Headerh2>  

  3.   <div class="contents">  

  4.     <p>...p>  

  5.     <p>...p>  

  6.   div>  

  7. div>  




以下用一連串的範例，以藍色字體展示一些基本的語法並且以深色字顯示文件中會被選取的元素。



$("div")



  

Some Header



  


   

...



   

...



  




解釋：選取所有






$("#body")



  

Some Header



  


   

...



   

...



  




解釋：選取 id 為 body 的元素





$("div#body")



  

Some Header



  


   

...



   

...



  




解釋：選取 id 為 body 的






$("div.contents p")



  

Some Header



  


   

...



   

...



  




解釋：選取 class 為 contents 的
所包住的所有下層的







$("div > div")



  

Some Header



  


   

...



   

...



  




解釋：選取被
包住的下一層






$("div:has(div)")



  

Some Header



  


   

...



   

...



  




解釋：和前一個範例相反，這邊是選取至少有包住一個
的






[做一些事情]



前一段的教學中介紹了如何使用 jQuery 來選取元素，其中大部份的語法都是可以讓你快速地一次選取多個元素，接下來當然就是要來對這些選取到的元素做些改變囉。透過 jQuery 內建的函數，你可以：


  • 對 DOM 進行操作，例如對文件節點的新增或修改

  • 添加事件處理

  • 做一些基本的視覺效果，例如隱藏、顯示、下拉顯示、淡出淡入等等

  • 使用 AJAX 傳送表單內容或取得遠端文件






[範例1] 選取所有有 target 屬性的 ，並且在其節點下加入一段文字。

 


  1. $("a[target]").append(" (Opens in New Window)");  




這是一段原始的 HTML :

 


  1. <a href="http://jsgears.com">jsGearsa>  

  2. <a href="http://google.com" target="_blank">Googlea>  

  3. <a href="http://amazon.com" target="_blank">Amazona>  




選取有 target 屬性並加入文字後的結果：

 


  1. <a href="http://jsgears.com">jsGearsa>  

  2. <a href="http://google.com" target="_blank">Google (Opens in New Window)a>  

  3. <a href="http://amazon.com" target="_blank">Amazon (Opens in New Window)a>  




[範例2] 選取 id 為 body 的元素，並且修改兩個 css 屬性。

 


  1. $("#body").css({   

  2.   border: "1px solid green",   

  3.   height: "40px"  

  4. });  




這是一段原始的 HTML :

 


  1. <div id="body">  

  2.   ...   

  3. div>  




選取 id 為 body 的元素並修改 css 後的結果(示意)：

 


  1. <div id="body" style="border: 1px solid green; height: 40px">  

  2.   ...   

  3. div>  




[範例3] 在網頁上的表單送出時加入一個判斷，如果 username 這個欄位是空值的話，就顯示 help 這個區塊內的文字。

 


  1. $("form").submit(function() {   

  2.   if ($("input#username").val() == "")   

  3.   $("span.help").show();   

  4. });  




可作用在類似以下的 HTML，一開始 span.help 是隱藏的，如果沒有輸入 username，才會顯示：

 


  1. <style type="text/css">  

  2.   .help {display: none}   

  3. style>  

  4. <form>  

  5.   <label for="username">請輸入大名label>  

  6.   <input type="text" id="username" name="username" />  

  7.   <span class="help">這個欄位必填喔span>  

  8. form>  



arrow
arrow
    全站熱搜

    狼翔月影 發表在 痞客邦 留言(0) 人氣()


    歷史上的今天
    ▲top

    留言列表 留言列表

    發表留言