剛開始接觸人氣指數很高的 jQuery 時，難免會跟這陌生的人氣王有著大家都會想問的問題。就如同去參加聯誼時，大家老是脫離不了問對方姓名、興趣、假日都在做些什麼...？
當網頁被開啟時，頁面上可能同時放置了許多同片、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 [英文]
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());
[補充]：如果畫面上有好多 TextBox，你想要統計 TextBox 目前有值的數目，可以使用下面的語法：
範例：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 開始支援)。
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");
});
延伸閱讀：http://webdesign.enjoyitsimply.com/jquery/jquery_ajax [中文]
第六個問題：為什麼一定非 $ 不可？
在使用 jQuery 時，常常會以 $ 符號當作開始，而這 $ 符號，其實是 jQuery 的縮寫。如果你不想使用縮寫，直接打 jQuery 也是可以的。
舉例來說：
$("#tbx01").val('aa');
jQuery("#tbx01").val('aa');
這兩行的指令是功能是一樣的。
另外，如果你的程式除了 jQuery 之外，還有使用其他如：Prototype, MooTools, YUI 程式，可能別的程式已經用 $ 當作他們程式的縮寫，這情況就很容易造成混淆。所以，你可以使用 jQuery.noConflict(); 來宣告以下程式要使用 jQuery ，而不是其他的。
或許能夠用比較簡短的縮寫，是比較吸引人的。於是可以用以下方法，讓 $j 來代替原先的 $。
var $j = jQuery.noConflict();
所以程式就可以寫成：
參考來源：
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
第六個問題：為什麼一定非 $ 不可？
在使用 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
沒有留言:
張貼留言