標簽下面id為msg的元素。第四行代碼得到context為上下文的table里面所有的連接元素。
如果你熟悉CSS,Xpath,你會覺得這些寫法很眼熟!對了。正是??闯鰥W妙了吧。jquery就是通過這樣的方式來找到Dom對象里面的元素。跟CSS的選擇器相類似。
二,Jquery對象?
jquery提供了很多便利的函數,如each(fn),但是使用這些函數的前提是:你使用的對象是Jquer對象。使一個Dom對象成為一個Jquery對象很簡單,通過下面一些方式(只是一部分):
代碼
- var a = $("#cid");(1)
- var b = $("<p>hellop>");(2)
- var c = document.createElement("table"); var tb = $(c);
三,代替body標簽的onload
這個慣例,也許是除了$()之外,用得最多的地方了。下面一段代碼:
代碼
- $(document).ready(function(){
- alert("hello");
- });(1)
-
- "alert('hello');">(2)
-
上面兩段代碼是等價的。但代碼1的好處是做到表現和邏輯分離。并且可以在不同的js文件中做相同的操作,即$(document).ready(fn)可以在一個頁面中重復出現,而不會沖突?;旧螶qeury的很多plugin都是利用這個特性,正因為這個特性,多個plugin共同使用起來,在初始化時不會發(fā)生沖突。
不管怎么說,這個慣例可以分離javascript與HTML。推薦使用。
四,事件機制
我大量使用的事件可能就是button的onclick了。以前習慣在input 元素上寫onclick = "fn()",使用jquery可以使javascript代碼與html代碼分離,保持HTML的清潔,還可以很輕松地綁定事件,甚至你可以不知道“事件”這個名詞。
代碼
- $(document).ready(function(){
- $("#clear").click(function(){
- alert("i am about to clear the table");
- });
- $("form[0]").submit(validate);
- });
- function validate(){
-
- }
五,同一函數實現set&get
代碼
- $("#msg").html();
- $("#msg").html("hello");
上面兩行代碼,調用了同樣的函數。但結果卻差別很大。
第一行是返回指定元素的HTML值,第二行則是將hello這串字符設置到指定元素中。jquery的函數大部分有這樣的特性。
六,ajax
這是一個ajax橫行的時代。多少人,了不了解ajax的都跟著用上一把。呵。使用jquery實現ajax同樣簡單異常
代碼
- $.get("search.do",{id:1},rend);
- function rend(xml){
- alert(xml);
- } (1)
- $.post("search.do",{id:1},rend);
- function rend(xml){
- alert(xml);
- } (2)
-
- $("#msg").ajaxStart(function(){
- this.html("正在加載。。。。");
- });(3)
- $("#msg").ajaxSuccess(function(){
- this.html("加載完成!");
- });(4)
這些都是較常用的方法,get和post用法一樣。第一個參數是異步請求的url,第二個為參數,第三個回調方法。
3,4的方法會在指定的Dom對象上綁定響應ajax執(zhí)行的事件。當然,jquery的AJAX相關的函數不僅是這些,有興趣可以去研究再多。
七,漸入淡出
代碼
- $("#msg").fadeIn("fast");
- $("#msg").fadeOut("slow");
沒錯,上面兩行代碼已經分別實現了一個id為Msg的jquery對象的漸入和淡出。做一個像Gmail一樣的動態(tài)加載通知條,用jquery就那么簡單。兩個函數接受的參數除了快慢等,還可以接收整型,作為漸入或淡出的完成時間,單位為MS。
八,plugin
這也是一個插件的時代。
jquery插件給我的感覺清一色的清潔,簡單。如Jtip,要使用它的功能,只需要在你的元素的class上加上Jtip,并引入jtip.js及其樣式即可以了。其他事情插件全包。我喜歡jquery的一個重要原因是發(fā)現她已經有了很多很好,很精彩的插件。
寫得很爛??赡艽蠹铱床怀鰆query的好處。嗯,光聽是沒用的,試用一下吧。你會發(fā)覺很有趣。
暫時告一段落吧。待有新的發(fā)現再來分享。
[@more@]