2009年4月2日 星期四

與 jQuery 的第一次相遇




剛開始接觸人氣指數很高的 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 (串接)?
參閱jQuery的屬性[http://docs.jquery.com/Attributes],發現大部分屬性的回傳值都是 jQuery物件。舉例來說:

$("#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

沒有留言:

張貼留言