|
|
樣式：<style>.red{color:#FF0000}</style>
Html代碼： <div id="a">sdf</div>
jQuery代碼及效果 $(function(){
$("#a").hover(function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})最終效果是當(dāng)鼠標(biāo)移到id為a的層上時圖層增加一個red樣式，離開層時移出red樣式
toggle(Function, Function) 當(dāng)匹配元素第一次被點擊時觸發(fā)第一個函數(shù)，當(dāng)?shù)诙伪稽c擊時觸發(fā)第二個函數(shù)
樣式：<style>.red{color:#FF0000}</style>
Html代碼： <div id="a">sdf</div>
jQuery代碼及效果 $(function(){
$("#a"). toggle (function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})最終效果是當(dāng)鼠標(biāo)點擊id為a的層上時圖層增加一個red樣式，離開層時移出red樣式
bind(type, fn) 用戶將一個事件和觸發(fā)事件的方式綁定到匹配對象上。
trigger(type) 用戶觸發(fā)type形式的事件。$("p").trigger("click")
還有：unbind() unbind(type) unbind(type, fn)
Dynamic event(Function) 綁定和取消綁定提供函數(shù)的簡捷方式
例： $("#a").bind("click",function() {
$(this).addClass("red");
})也可以這樣寫： $("#a").click(function() {
$(this).addClass("red");
});
最終效果是當(dāng)鼠標(biāo)點擊id為a的層上時圖層增加一個red樣式，
jQuery提供的函數(shù)
用于browers事件
error(fn) load(fn) unload(fn) resize(fn) scroll(fn)
用于form事件
change(fn) select(fn) submit(fn)
用于keyboard事件
keydown(fn) keypress(fn) keyup(fn)
用于mouse事件
click(fn) dblclick(fn) mousedown(fn) mousemove(fn)
mouseout(fn) mouseover(fn) mouseup(fn)
用于UI事件
blur(fn) focus(fn)
以上事件的擴展再擴展為5類
舉例，click(fn) 擴展 click() unclick() oneclick(fn) unclick(fn)
click(fn)：增加一個點擊時觸發(fā)某函數(shù)的事件
click()：可以在其他事件中執(zhí)行匹配對象的click事件。
unclick ()：不執(zhí)行匹配對象的click事件。
oneclick(fn)：只增加可以執(zhí)行一次的click事件。
unclick (fn)：增加一個點擊時不觸發(fā)某函數(shù)的事件。
上面列舉的用于browers、form、keyboard、mouse、UI的事件都可以按以上方法擴展。
七：Ajax支持
通用方式：
$.ajax(prop) 通過一個ajax請求，回去遠(yuǎn)程數(shù)據(jù)，prop是一個hash表，它可以傳遞的key/value有以下幾種。
(String)type：數(shù)據(jù)傳遞方式(get或post)。
((String)url：數(shù)據(jù)請求頁面的url
((String)data：傳遞數(shù)據(jù)的參數(shù)字符串，只適合post方式
((String)dataType：期待數(shù)據(jù)返回的數(shù)據(jù)格式(例如 "xml", "html", "script",或 "json")
((Boolean)ifModified： 當(dāng)最后一次請求的相應(yīng)有變化是才成功返回，默認(rèn)值是false
((Number)timeout:設(shè)置時間延遲請求的時間。可以參考$.ajaxTimeout
((Boolean)global：是否為當(dāng)前請求觸發(fā)ajax全局事件，默認(rèn)為true
((Function)error：當(dāng)請求失敗時觸發(fā)的函數(shù)。
((Function)success：當(dāng)請求成功時觸發(fā)函數(shù)
((Function)complete：當(dāng)請求完成后出發(fā)函數(shù)
jQuery代碼及說明
success:function(msg){
$(div"#a").html(msg);
}
});將ajax.htm返回的內(nèi)容作為id為a的div內(nèi)容 $.ajax({ url: "ajax.ASPx",
type:"get",
dataType:"html",
data: "name=John&location=Boston",
success:function(msg){
$("#a").html(msg);
}
});
用get方式向ajax.ASPx頁面?zhèn)鲄?shù)，并將返回內(nèi)容負(fù)給id為a的對象。
$.ajaxTimeout(time) 設(shè)置請求結(jié)束時間
$.ajaxTimeout( 5000 )
其它簡化方式：
$.get(url, params, callback) 用get方式向遠(yuǎn)程頁面?zhèn)鬟f參數(shù)，請求完成后處理函數(shù)，除了url外，其它參數(shù)任意選擇！
$.get( "ajax.htm" , function(data){ $("#a").html(data) })$.get( "ajax.ASP",{ name: "young", age: "25" },
function(data){ alert("Data Loaded: " + data); }
) $.getIfModified(url, params, callback) 用get方式向遠(yuǎn)程頁面?zhèn)鬟f參數(shù)，從最后一次請求后如果數(shù)據(jù)有變化才作出響應(yīng)，執(zhí)行函數(shù)callback
$.getJSON(url, params, callback) 用get方式向遠(yuǎn)程json對象傳遞參數(shù)，請求完成后處理函數(shù)callback。
$.getScript(url, callback) 用get方式載入并運行一個遠(yuǎn)程Javascript文件。請求完成后處理函數(shù)callback。
$.post(url, params, callback) 用post方式向遠(yuǎn)程頁面?zhèn)鬟f參數(shù)，請求完成后處理函數(shù)callback
load(url, params, callback) 載入一個遠(yuǎn)程文件并載入頁面DOM中，并執(zhí)行函數(shù)callback $("#a").load("ajax.htm", function() { alert("load is done"); } );向ajax.htm頁面發(fā)出請求，將返回結(jié)果裝入id為a的內(nèi)容中，然后再執(zhí)行函數(shù)callback。
loadIfModified(url, params, callback) 用get方式向遠(yuǎn)程頁面?zhèn)鬟f參數(shù)，從最后一次請求后如果數(shù)據(jù)有變化才作出響應(yīng)，將返回結(jié)果載入頁面DOM中，并執(zhí)行函數(shù)callback
ajaxStart(callback) 當(dāng)ajax請求發(fā)生錯誤是時執(zhí)行函數(shù)callback
ajaxComplete(callback) 當(dāng)ajax請求完成時執(zhí)行函數(shù)callback
ajaxError(callback) 當(dāng)ajax請求發(fā)生錯誤時執(zhí)行函數(shù)callback
ajaxStop(callback) 當(dāng)ajax請求停止時執(zhí)行函數(shù)callback
ajaxSuccess(callback) 當(dāng)ajax請求成功時執(zhí)行函數(shù)callback
八：jQuery插件
隨著jQuery的廣泛使用，已經(jīng)出現(xiàn)了大量jQuery插件，如thickbox，iFX，jQuery-googleMap等，簡單的引用這些源文件就可以方便的使用這些插件。這里我簡單的介紹一些網(wǎng)址供大家參考，這些網(wǎng)站頭提供了大量的demo，并且使用及其簡單，及時E文不好，也能快速掌握！
http://jquery.com/plugins 官方推薦
http://interface.eyecon.ro/demos 效果超級棒，使用更簡單，一定有你喜歡的！
http://www.dyve.NET/jquery/
http://bassistance.de/jquery-plugins
還有其它很多插件，大家可以google以下，如果大家發(fā)現(xiàn)好的了，可以留言共享以下！
――――――――――――――――――――――――――――――――――――――――――――――
至此jQuery已經(jīng)介紹完畢，并合并整理提供給大家 下載 ，更多詳細(xì)的使用請大家參考官方網(wǎng)站，下面我再推薦一些jQuery的學(xué)習(xí)網(wǎng)站方便大家更好的掌握這項工具！
http://keel.sike.googlepages.com/jQuery_getting_started.html 中文入門介紹，Keel翻譯
http://jquery.com/api jquery提供全部基本方法的介紹及demo，方便大家查詢！
JavaScript技術(shù)：jQuery使用手冊之 事件處理，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
