[JQuery] 與 jQuery 的第一次相遇

[JQuery] 與 jQuery 的第一次相遇

房東：小強

發表時間：2011-04-05

[檢舉]

剛開始接觸人氣指數很高的 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元素

[注意] 使用指定屬性方式時，記得中括號與前方的指定類別不可留空白

其他關於 Selectors 的用法，可以參考

http://webdesign.enjoyitsimply.com/jquery/jquery_selectors [中文]

http://docs.jquery.com/Selectors [英文]

[補充] ：具有AND 與 OR 的效果。

AND : $(" table tr td span "); // 這就會去找在 table下且在 tr 下且在 td 下的 span

OR: $("div , span"); // 這就會去找 div 或 span

[補充]：如果您取得的結果是個多項目的集合，若要取得這集合裡的項目數，可以使用 .size() 來取得。

範例：alert($("input[name=pet]:checked").size());

第三個問題：什麼是 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

贊助網站

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

　共 0 人回應

姓名：
佈告內容：