剛開始接觸人氣指數很高的 jQuery 時,難免會跟這陌生的人氣王有著大家都會想問的問題。就如同去參加聯誼時,大家老是脫離不了問對方姓名、興趣、假日都在做些什麼...?
第一個問題:為何要將程式放在 $(document).ready( ) 裡?
當網頁被開啟時,頁面上可能同時放置了許多同片、Banner...等等,這時如果使用 javascript去執行,可能會發生頁面上的物件都還沒完全下載就被存取的問題發生。所以,以往在 javascript 都會用以下方式避免:
window.onload = function(){ alert("welcome"); }
在jQuery,則是使用:
$(document).ready( function()
{
// ... your code
});
可參考:
http://docs.jquery.com/How_jQuery_Works
第二個問題:以 $( ) 包起來的標記代表什麼意思?
在jQuery,以 $( ) 標記表示所謂的選取元素( Selectors) 。舉例來說,在 JavaScript 要抓取一個 ID 為 tbx_Account 的物件,會用 document.getElementsById("tbx_Account"),但在 jQuery 只需要使用 $("#tbx_Account") 就可以了。
列舉常用的例子:
$("a"); // 取得頁面中所有的<a>標籤元素
$("#tbx_account"); // 取得id為tbx_account的元素
$(".UsrDefine"); // 取得class name為UsrDefine的所有元素
$('#container a'); // 取得id為container之元素其內部的所有連結
$("div > p"); // 取得div父元素其下所有的p子元素
$("tr:first"); // 取得第一個找到的tr標籤元素
$("tr:even"); //取得所有 tr 標籤元素的偶數集合
$("tr:odd"); //取得所有 tr 標籤元素的奇數集合
$("input[name='account']"); // 取得其name屬性值為account的input元素
[注意] 使用 指定屬性方式時,記得中括號與前方的指定類別不可留空白
[補充] :具有AND 與 OR 的效果。
AND : $(" table tr td span "); // 這就會去找 在 table下 且 在 tr 下 且在 td 下 的 span
OR: $("div , span"); // 這就會去找 div 或 span
[
補充]:如果您取得的結果是個多項目的集合,若要取得這集合裡的項目數,可以使用 .size() 來取得。
範例:alert($("input[name=pet]:checked").size());
[
補充]:如果畫面上有好多 TextBox,你想要統計 TextBox 目前有值的數目,可以使用下面的語法:
alert($("input[id$=tbx_psd_carstyleno1][value!='']").length );
這裡連續使用了兩次指定屬性的方式,表示這屬性的條件可以讓我們用 And 的方式一直增加。而 value 其實也是 input 的屬性的一部分,而 !='' 是用來找出不是空白的項目。
第三個問題:什麼是 chaining (串接)?
$("#container").css("color", "blue") --> 回傳 jQuery
$("#container").css("background-color", "red") --> 回傳 jQuery
當設定完第一個屬性後,回傳了一個 jQuery 物件,如果我們把這個回傳物件繼續加以使用,就不須要像第二行指令這樣從頭再指定 $("#container") 了,而是接在第一行屬性設定的後面。這種作法可以大大減少程式設計師重複撰寫相同的程式。
第四個問題:怎麼加入事件( event ) ?
網頁上的控制項,免不了要去撰寫 blur( ) 、 click( )、change( ) ... 相關事件。查閱 jQuery 的
Event , click ( ) 與 click ( fn ) 都是成對出現的,同樣的情況也出現在 blur( ) , change( ) ...。這其中的差異,就是 click ( ) 是去觸發 「點選」動作的事件,click ( fn) 則是去撰寫 「點選」動作後要做的事情。
舉例來說:今天需要判斷一個ID為 tbx_Account 的文字輸入對話盒物件是否為空,則可以用以下語法來完成:
$(document).ready(function() {
$("#tbx_Account").blur(function()
{
if(!this.value)
{
alert("Please enter some text!");
}
else
{
alert(this.value);
}
})
});
在tbx_Account,去實作 blur 事件觸發時要執行的動作。同時使用了 this.value 去抓目前這個物件的值,來判斷 user 是否有輸入資料。
第五個問題:如何使用 Ajax ?
提到 Ajax 時,以前針對不同的瀏覽器,宣告 XMLHTTP 的方式會不同。但 jQuery 把這些繁瑣的工作自動幫我們處理好了。只需要使用 jQuery 提供的方法即可完成。
以一個簡單例子來說明:
<html>
<body>
<form id="form1" runat="server">
<div>
Get Now Date:<span id="spTime"></span>
</div>
</form>
</body>
</html>
我們希望 <span>: spTime 標籤會去呼叫一支自動回傳現在時間的 AjaxGetTime.aspx 。則在jQuery 可以用下面寫法:
<script>
$(document).ready( function(){
$("#spTime").load("AjaxGetTime.aspx");
});
</script>
的確,只需一行 .load( ) 就可以完成 Ajax 的使用。
完整的 .load( url, data, callback) 語法裡,
url: 是指所叫用的遠端程式網址,是必填的參數。
data: 則是當你在呼叫遠端程式時,有需要進一步傳其它參數時使用。它可以是 key / value 成對出現或是字串( jQuery Ver:1.3 開始支援)。
callback: 則是當遠端程式完成後,接著要執行的程式。這裡的 callback 名稱取的好,「呼叫(遠端程式)回來後(要做的事情)」。不管成功或失敗都會執行。
擷取 jQuery 官網上的一段 code 來參考 .load(url, data, callback ):
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
如果簡單的 .load( ) 不能滿足您的需求,可以進一步去參考 .get( ) 、.post( ) 語法。
延伸閱讀:
http://webdesign.enjoyitsimply.com/jquery/jquery_ajax [中文]
第六個問題:為什麼一定非 $ 不可?
在使用 jQuery 時,常常會以 $ 符號當作開始,而這 $ 符號,其實是 jQuery 的縮寫。如果你不想使用縮寫,直接打 jQuery 也是可以的。
舉例來說:
$("#tbx01").val('aa');
jQuery("#tbx01").val('aa');
這兩行的指令是功能是一樣的。
另外,如果你的程式除了 jQuery 之外,還有使用其他如:Prototype, MooTools, YUI 程式,可能別的程式已經用 $ 當作他們程式的縮寫,這情況就很容易造成混淆。所以,你可以使用 jQuery.noConflict(); 來宣告以下程式要使用 jQuery ,而不是其他的。
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
或許能夠用比較簡短的縮寫,是比較吸引人的。於是可以用以下方法,讓 $j 來代替原先的 $。
var $j = jQuery.noConflict();
所以程式就可以寫成:
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
$j("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
參考來源:
1.
http://blog.wu-boy.com/2008/09/22/412/
2.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
3.
http://jsgears.com/thread-63-1-1.html