XML Technology Research Lab: 安裝 jQuery

安裝 jQuery

The following examples had been tested on Mozilla's Firefox and Microsoft's IE. The document is provided as is. You are welcomed to use it for non-commercial purpose.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

安裝 jQuery 的簡單程度可能超過你的想像；由於 jQuery 是由一堆的 Javascript 所組成，所以安裝的方式就是把 jQuery 的 js 檔下載下來並置放於適當的目錄下即可：

請到 jQuery 下載區的 "Current Release" 下載，其中 "Minified" 和 "Uncompressed" 連結的內容都完全相同，只是 "Minified" 的版本是經過壓縮的檔案，它的好處在於壓縮過後的檔案比較小，可以降低網路傳輸時間。雖然 "Minified" 版本降低了網路傳輸時間，但是瀏覽器卻需要多餘的 CPU 時間對該檔案進行解壓縮；由於網路的傳輸時間往往是整體執行時間的瓶頸，因此個人建議使用 "Minified"。

以版本 1.7.2 為例，下載的檔案名稱是 jquery-1.7.2.min.js，個人建議將檔案重新命名為 jquery.min.js；這樣做的好處是未來要升級到其他版本時，只需要把檔案再次下載，並重新命名為 jquery.min.js 即完成升級，你所寫的程式完成不必修改。

請在放置 jquery.min.js 的目錄新增一個網頁，並在該網頁的 <head> 標籤內加入如下的語法：
```
<script type="text/javascript" src="jquery.min.js"></script>
```

請在網頁的適當位置定義如下的按鈕（button）以及 <div> 標籤，其 ID 分別為 but 和 block1。按鈕在預設的情形下是不會顯示的（因為 style="display:none"），而且如果使用者點選它的時候，display() 會被執行。
```
<button id="but" type="button" onClick="display()" style="display:none">請點我</button>
<div id="block1">
</div>
```
為了顯示這個效果，我們特別在這一行敘述之下定義如上的標籤，你應該也可以看到一個名為"請點我"的按鈕；點選該按鈕之後，按鈕下方會出現 jQuery running 的訊息：（一個簡化版的 Demo 版）

請在前項的的 <script> 標籤下，再加上下列 <script> 標籤：
```
<script type="text/javascript">
  // 如果檔案載入完成，將按鈕顯示出來
  $(document).ready(function() {
    $("#but").css("display", "block");
  });

  // 使用者點選按鈕之後，顯示訊息
  function display() {
    $("#block1").html("jQuery running");
  }
</script>
```
第一段程式碼定義的是當整份文件（jQuery 以 $(document) 代表）完全載入完畢的時候（jQuery 以 $(document).ready() 代表），它會自動呼叫定義在 ready() 內的函數，該函數一般稱之為 callback。我們在這一段程式碼中定義一個沒有名稱的 callback 函數（以 function() { } 代表），該函數只有一行敘述；在該行敘述中，$("#but") 代表 document.getElementById("but") 節點物件，該物件包含一個方法 css()，其功能在於設定該節點的 CSS style，在本例中我們將 display 設為 block。這一段的程式碼確保只有在整份網頁完整載入之後，按鈕才會出現。第二段程式碼定義了 display() 方法，該方法是按鈕被點選的時候開始執行；其執行內容是先找到 ID 為 block1 的節點（即 document.getElementById("block1")）上，將 "jQuery running" 加入；也就是說 $("#block1").html("jQuery running") 相當於 document.getElementById("block1").innerHTML = "jQuery running"。

另一種常見的方式是完全不下載 jQuery，而是經由 URL 的方式直接使用。這個方式的優點在於不是占用任何空間，缺點就是每次載入網頁都必須從 jQuery 網頁即時下載，而且如果未來升級的時候，所有的程式碼都必須做相對應的修正。如果你決定使用這個方式，之前的程式碼只需要把

<script type="text/javascript" src="jquery.min.js"></script>

改成如下的程式碼（以 1.7.2 版本為例），其他不必做任何修改。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

XML Technology Research Lab

2012年10月1日星期一

安裝 jQuery

安裝 jQuery

沒有留言:

張貼留言

2012年10月1日 星期一

安裝 jQuery

安裝 jQuery

沒有留言:

張貼留言

2012年10月1日星期一