簡單看看要怎麼使用 jQuery 來寫 JavaScript
使用 jQuery
要在 HTML 中使用 jQuery 這個 JavaScript framework 很簡單,只要在 間加入一行: 及
UPDATE 091130: 其實只要在用到 jQuery 程式碼之前把它 include 進來就好,不一定得放在
裡。
引用來 js 檔可以到jQuery 專案網頁
UPDATE 091130: jQuery 專案網站已經移至 http://github.com/jquery/jquery,而下載 jQuery 程式碼可以到它的官網(jquery.com)下載
上來下載,該網站上有三個版本的 jQuery 檔案可以下載,分別是:
- jquery-1.2.1.js – 這是 jQuery 程式碼最好讀的版本,如果你打算研究 jQuery 的原始程式碼,那下載這個版本是最清楚的。
- jquery-1.2.1.min.js – 這個版本與 1. 是一模一樣的程式碼,只不過把多餘的空白或是換行給拿掉,以便讓整個 js 檔案大小可以下降,在上線的網站上使用這個版本可以讓使用者下載量變少一點,以提升整個頁面的載入速度。
- 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 存成一個 .html 檔案之後,就可以看到一個白白的頁面,上面只有一個按鈕,當然,現在按下按鈕不會有任何事情發生(因為還沒寫相關的 JavaScript 啊),而
這部份是我們打算顯示 “Hello” 字樣的區域。
所以先在 裡寫一個 function 讓顯示區域出現 "Hello" 字樣:
function showMsg() {
// 取得 id 為 msg 的物件, 然後再物件裡放入 Hello
$('#msg').html('
Hello
');
}
就這樣,一行就結束了,這裡用到了 jQuery 取得物件的工具(selector) -- $('#msg')
,$
這個符號在 jQuery 裡被定義為 jQuery 物件,而 $()
則是用來取得頁面上元件(DOM element)的函式,傳入的 '#msg' 代表的即是 id 為 msg (跟 CSS 的用法一模一樣),所以 $('#msg')
整個的意義是:
取得頁面上 id 為 msg 的元件,然後把它變成一個 jQuery 物件。
這樣才能用 jQuery 的 html 函式把要塞入的訊息放進指定的物件下。但為了讓按鈕按下時呼叫這個 JavaScript 函式,所以要把按鈕的部份作這樣的修改:
加入了 onclick
屬性,相當於定義了:當這按鈕被按下時,去呼叫 showMsg()
這個函式。以上都修改完畢後,重新載入網頁,你就會發現按下按鈕後,就會出現 Hello 的字樣了。
不過光是這樣還不夠,我們要讓這 Hello 字樣在3秒中後消失,所以 showMsg()
得再動點手腳:
function showMsg() {
$('#msg').html('
Hello
');
setTimeout(function(){
$('#msg').hide();
}, 3000);
}
這裡加入了 setTimeout
這個函式,使得字樣出現的 3000 毫秒(也就是 3 秒)後,用了 jQuery 的 hide
方法把字隱藏起來。不過這樣的寫法,你會發現按鈕按一次出現字之後,再怎麼按按鈕都看不到字的出現,這都是因為使用 hide
之後,div#msg
這個物件就一直在隱藏的狀態(也就是在 CSS 中的 display
被設為 none
了),所以得再修改讓字會出現:
function showMsg() {
$('#msg').html('
Hello
').show();
setTimeout(function(){
$('#msg').hide();
}, 3000);
}
相對於 hide
函式,show
的函式會將隱藏的物件給顯示出來,為了保持一致性,原本 div#msg
的部份也可以改寫成這樣:
當然這樣的 code 還不夠聰明,明明我除了第一次呼叫這個函式以外,div#msg
裡面就已經被塞入
Hello
了,為什麼以後還要笨笨地一直塞呢?所以我們來讓它聰明一點,檢查如果 div#msg
裡已經有東西的話就不塞 HTML 字串進去了:
function showMsg() {
if ($('#msg').html().length == 0) {
$('#msg').html('
Hello
');
}
$('#msg').show();
setTimeout(function(){
$('#msg').hide();
}, 3000);
}
注意加入的 if 判斷式,這裡用了一個沒傳參數的 html
函式,jQuery 裡 html
函式若是沒有傳參數進去的話,它就會回傳該 DOM 元件下的 HTML 字串,所以若回傳的字串長度等於 0 的時候才塞 HTML 進去。這是 jQuery 裡很典型的 getter/setter paradigm ,學愈多 jQuery 的函式愈會發現幾乎都有這樣的設計概念。
接下來就是要在按下按鈕時,讓這個按鈕暫時失效,等待字串消失後再恢復,為了能夠操作按鈕這個物件,先幫它加上 id:
然後就是修改 showMsg()
函式:
function showMsg() {
$('#btn').attr('disabled', true);
if ($('#msg').html().length == 0) {
$('#msg').html('
Hello
');
}
$('#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('
Hello
');
}
$('#msg').fadeIn();
setTimeout(function(){
$('#msg').fadeOut();
$('#btn').attr('disabled', false);
}, 3000);
}
如此一來,Hello 的字樣也就會用淡入淡出的方式來呈現了,這一整個練習也就完成了。
我要大力推薦 http://visualjquery.com/ 這個站,雖然是 1.1.2 版的 API 但是網站的設計很棒 XD
[quote comment=””]我要大力推薦 http://visualjquery.com/ 這個站,雖然是 1.1.2 版的 API 但是網站的設計很棒 XD[/quote]
推推推~不過我對他一直不更新到 1.2+ 感到相當地絕望啊!!
[quote comment=””][quote comment=””]我要大力推薦 http://visualjquery.com/ 這個站,雖然是 1.1.2 版的 API 但是網站的設計很棒 XD[/quote]
推推推~不過我對他一直不更新到 1.2+ 感到相當地絕望啊!![/quote]
目前也在學習jQuery,您的教學真的簡單又明瞭~讓我受益量多謝謝.
想請問jQuery的 selector 是否可以使用模糊的方式搜尋id ?
ex:
是否可以使用 “dc” 這個關鍵字搜尋到上面兩個input 呢??
@Cadmus
無法模糊搜尋喔,除了單一一個 ‘*’ 可以 match all elements 以外
The tutorial is quite easy to understand, Thanks.
可以請教一下
var x=變數
var pcs=’slavedim_pcs_’+ x;
pcs=document.getElementById(pcs).value;
上面我可以用 pcs 來取代 slavedim_pcs_1 這個id
請問 jquery 也可以
用 pcs=’slavedim_pcs_’+ x;
pcs2=$(#pcs).val();
來取input 值嗎
因為我的input 數量是不定值
寫得很棒 好詳細喔
謝謝你的分享 我會好好學的
推你 是一定要的
請問有辦法 有辦法淡入後 時間到在將”hello”慢慢淡出回復成按鈕嗎?
是要在加入這一行指令嗎
$(‘#msg’).fadeOut();
setTimeout(function(){
$(‘#msg’).hide();
$(‘#btn’).attr(‘disabled’, false);
}, 3000);
關於模糊搜尋某id,我已經找到囉
轉貼至
http://www.cnblogs.com/zwl12549/archive/2008/08/09/1264163.html
[attribute]:匹配擁有某一屬性的所有對象
[attribute=value]:匹配擁有某一屬性和值的對象
[attribute!=value]:匹配擁有某一屬性,且不是某一值的對象
[attribute^=value]:匹配擁有某一屬性,且以某一值開頭的對象
[attribute$=value]:匹配擁有某一屬性,且以某一值結尾的對象
[attribute*=value]:匹配擁有某一屬性,且包含某一值的對象
alert($(‘div[class]’).html());
//顯示I am second
alert($(‘div[class=red]’).html());
//顯示I am second
alert($(‘div[id!=father]’).length);
//顯示3
alert($(‘div[id^=f]’).length);
//顯示2
alert($(‘div[id$=d]’).length);
//顯示2
alert($(‘div[id*=ir]’).length);
您的教學很適合JQuery的觀念入門,謝謝:)
[quote comment=””][quote comment=””]我要大力推薦 http://visualjquery.com/ 這個站,雖然是 1.1.2 版的 API 但是網站的設計很棒 XD[/quote]
推推推~不過我對他一直不更新到 1.2+ 感到相當地絕望啊!![/quote]
已經更新囉…jQuery 1.2.6
您的教學很棒,我是一個新手,正努力學習中
简单明了哦,哈哈,一看就动。
這篇的教學真的很棒,
整個概念也很清楚,
看完之後,都不相信自己就這樣寫好了!!
真的很感謝作者!
写的很棒.步步探入,由浅入深。很清楚,明白。感谢努力。
写的很好,跟着学习了!
感謝~簡單又非常仔細的教學
謝謝你!我是在 jQuery 官網找到你的教程的。
目前工作中需要用到 jQuery 技術,以前沒接觸過。剛剛照著你的描述實踐了一遍,很受用!
謝謝分享,獲益良多,學習中^^
so cool
謝謝您的
謝謝您的這系列教學!! 非常詳細又清楚!!