專業搬家,提供氣泡紙、紙箱完美打包
免費到府估價,搬家完全免煩惱
台北系統傢俱全方位清潔服務,精緻化清潔徹底除塵
死角灰塵全掃淨,還你潔淨居家

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] jQuery 學習心得

房東:阿凱
發表時間:2012-01-12
[檢舉]


使用 jQuery


要在 HTML 中使用 jQuery 這個 JavaScript framework 很簡單,只要在 <head></head> 間加入一行:



UPDATE 091130: 其實只要在用到 jQuery 程式碼之前把它 include 進來就好,不一定得放在 <head> 裡。





<script type="text/javascript" src="jQuery的檔案"></script>



引用來 js 檔可以到jQuery 專案網頁



UPDATE 091130: jQuery 專案網站已經移至 http://github.com/jquery/jquery,而下載 jQuery 程式碼可以到它的官網(jquery.com)下載



上來下載,該網站上有三個版本的 jQuery 檔案可以下載,分別是:



  1. jquery-1.2.1.js – 這是 jQuery 程式碼最好讀的版本,如果你打算研究 jQuery 的原始程式碼,那下載這個版本是最清楚的。

  2. jquery-1.2.1.min.js – 這個版本與 1. 是一模一樣的程式碼,只不過把多餘的空白或是換行給拿掉,以便讓整個 js 檔案大小可以下降,在上線的網站上使用這個版本可以讓使用者下載量變少一點,以提升整個頁面的載入速度。

  3. jquery-1.2.1.pack.js – 這個版本把原本 jQuery 的程式碼作了「壓縮」,也就是有一些名稱代換的方式把 code size 進行更進一步的塑身。不過因為它用了 eval() 這個函式,所以 JavaScript 的載入會稍微延遲一點時間。


我個人在使用的版本是 jquery-1.2.1.min.js,根據官方網站的資料,如果 Server 支援 HTTP compressing 的話,那 jquery-1.2.1.min.js 更可以壓縮到只有 14kb,對於使用者載入不會造成太大的負擔。



UPDATE 100331: 目前最新的版本是 1.4.2



用 jQuery 來寫程式


說了那麼多廢話,還是直接來看 jQuery 怎麼使用吧!那就先來個簡單的實驗,需求是:頁面上有一個按鈕,希望它被按下時,頁面上會出現3秒 “Hello” 的字樣然後消失,當然在這 3 秒鐘之內要讓按鈕暫時失效。


所以先來把頁面寫出來:




<html>
<
head>
<
title>jQuery Tutorial 1</title>
<
script type="text/javascript" src="jquery.min.js"></script>
<
script type="text/javascript">
// 等一下把程式碼放在這裡。
</script>
</
head>
<
body>
<
div id="msg"></div>
<
input type="button" value="Click Me"/>
</
body>
</
html>



把這樣的 HTML 存成一個 .html 檔案之後,就可以看到一個白白的頁面,上面只有一個按鈕,當然,現在按下按鈕不會有任何事情發生(因為還沒寫相關的 JavaScript 啊),而 <div id="msg"></div> 這部份是我們打算顯示 “Hello” 字樣的區域。


所以先在 <script> 裡寫一個 function 讓顯示區域出現 “Hello” 字樣:




function showMsg() {
// 取得 id 為 msg 的物件, 然後再物件裡放入 Hello
$('#msg').html('<h1>Hello</h1>');
}



就這樣,一行就結束了,這裡用到了 jQuery 取得物件的工具(selector) — $('#msg')$ 這個符號在 jQuery 裡被定義為 jQuery 物件,而 $() 則是用來取得頁面上元件(DOM element)的函式,傳入的 ‘#msg’ 代表的即是 id 為 msg (跟 CSS 的用法一模一樣),所以 $('#msg') 整個的意義是:



取得頁面上 id 為 msg 的元件,然後把它變成一個 jQuery 物件。



這樣才能用 jQuery 的 html 函式把要塞入的訊息放進指定的物件下。但為了讓按鈕按下時呼叫這個 JavaScript 函式,所以要把按鈕的部份作這樣的修改:




<input type="button" value="Click Me" onclick="showMsg()"/>



加入了 onclick 屬性,相當於定義了:當這按鈕被按下時,去呼叫 showMsg() 這個函式。以上都修改完畢後,重新載入網頁,你就會發現按下按鈕後,就會出現 Hello 的字樣了。


不過光是這樣還不夠,我們要讓這 Hello 字樣在3秒中後消失,所以 showMsg() 得再動點手腳:




function showMsg() {
$
('#msg').html('<h1>Hello</h1>');
setTimeout(function(){
$
('#msg').hide();
}, 3000);
}



這裡加入了 setTimeout 這個函式,使得字樣出現的 3000 毫秒(也就是 3 秒)後,用了 jQuery 的 hide 方法把字隱藏起來。不過這樣的寫法,你會發現按鈕按一次出現字之後,再怎麼按按鈕都看不到字的出現,這都是因為使用 hide 之後,div#msg 這個物件就一直在隱藏的狀態(也就是在 CSS 中的 display 被設為 none 了),所以得再修改讓字會出現:




function showMsg() {
$
('#msg').html('<h1>Hello</h1>').show();
setTimeout(function(){
$
('#msg').hide();
}, 3000);
}



相對於 hide 函式,show 的函式會將隱藏的物件給顯示出來,為了保持一致性,原本 div#msg 的部份也可以改寫成這樣:




<div id="msg" style="display:none"></div>



當然這樣的 code 還不夠聰明,明明我除了第一次呼叫這個函式以外,div#msg 裡面就已經被塞入 <h1>Hello</h1> 了,為什麼以後還要笨笨地一直塞呢?所以我們來讓它聰明一點,檢查如果 div#msg 裡已經有東西的話就不塞 HTML 字串進去了:




function showMsg() {
if ($('#msg').html().length == 0) {
$
('#msg').html('<h1>Hello</h1>');
}
$
('#msg').show();
setTimeout(function(){
$
('#msg').hide();
}, 3000);
}



注意加入的 if 判斷式,這裡用了一個沒傳參數的 html 函式,jQuery 裡 html 函式若是沒有傳參數進去的話,它就會回傳該 DOM 元件下的 HTML 字串,所以若回傳的字串長度等於 0 的時候才塞 HTML 進去。這是 jQuery 裡很典型的 getter/setter paradigm ,學愈多 jQuery 的函式愈會發現幾乎都有這樣的設計概念。


接下來就是要在按下按鈕時,讓這個按鈕暫時失效,等待字串消失後再恢復,為了能夠操作按鈕這個物件,先幫它加上 id:




<input type="button" value="Click Me" onclick="showMsg()" id="btn"/>



然後就是修改 showMsg() 函式:




function showMsg() {
$
('#btn').attr('disabled', true);
if ($('#msg').html().length == 0) {
$
('#msg').html('<h1>Hello</h1>');
}
$
('#msg').show();
setTimeout(function(){
$
('#msg').hide();
$
('#btn').attr('disabled', false);
}, 3000);
}



這裡用到了 jQuery 的 attr 函式,這個函式是用來 get/set DOM 元件的屬性值,如果只傳一個參數,那就是傳回該屬性的值,比方說 $('#btn').attr('type') 會回傳 “button”;若是傳入第二個參數,則表示要設定或修改讓屬性的值,這裡的例子就是透過修改 disabled 這個屬性的值來讓按鈕失效或恢復。


基本上快要大功告成了,不過可以簡單修改一下 show/hide 的方式,讓 Hello 字樣的出現或消失不要那麼突兀,可以用點淡入(fade in)淡出(fade out)的方式來作到 show/hide,所以再把 showMsg 修改一下:




function showMsg() {
$
('#btn').attr('disabled', true);
if ($('#msg').html().length == 0) {
$
('#msg').html('<h1>Hello</h1>');
}
$
('#msg').fadeIn();
setTimeout(function(){
$
('#msg').fadeOut();
$
('#btn').attr('disabled', false);
}, 3000);
}



如此一來,Hello 的字樣也就會用淡入淡出的方式來呈現了,這一整個練習也就完成了。





  • 贊助網站       

    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!
    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務



  •  共 0 人回應

    姓名:
    佈告內容: