提供各行各業搜尋、查價比價服務
讓你輕鬆找到各式各行各業價格
搜尋引擎系統家具櫥櫃設計製作專家,舉凡客廳
書房、臥室等皆可適用,歡迎洽詢

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

[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 人回應

    姓名:
    佈告內容: