jQuery使用手冊(cè)之 事件處理
樣式:<style>.red{color:#FF0000}</style>
Html代碼: <div id="a">sdf</div>
jQuery代碼及效果
$("#a").hover(function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})
toggle(Function, Function) 當(dāng)匹配元素第一次被點(diǎn)擊時(shí)觸發(fā)第一個(gè)函數(shù),當(dāng)?shù)诙伪稽c(diǎn)擊時(shí)觸發(fā)第二個(gè)函數(shù)
樣式:<style>.red{color:#FF0000}</style>
Html代碼: <div id="a">sdf</div>
jQuery代碼及效果
$("#a"). toggle (function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})
bind(type, fn) 用戶將一個(gè)事件和觸發(fā)事件的方式綁定到匹配對(duì)象上。
trigger(type) 用戶觸發(fā)type形式的事件。$("p").trigger("click")
還有:unbind() unbind(type) unbind(type, fn)
Dynamic event(Function) 綁定和取消綁定提供函數(shù)的簡(jiǎn)捷方式
例:
$(this).addClass("red");
})
$(this).addClass("red");
});
最終效果是當(dāng)鼠標(biāo)點(diǎn)擊id為a的層上時(shí)圖層增加一個(gè)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)
以上事件的擴(kuò)展再擴(kuò)展為5類
舉例,click(fn) 擴(kuò)展 click() unclick() oneclick(fn) unclick(fn)
click(fn):增加一個(gè)點(diǎn)擊時(shí)觸發(fā)某函數(shù)的事件
click():可以在其他事件中執(zhí)行匹配對(duì)象的click事件。
unclick ():不執(zhí)行匹配對(duì)象的click事件。
oneclick(fn):只增加可以執(zhí)行一次的click事件。
unclick (fn):增加一個(gè)點(diǎn)擊時(shí)不觸發(fā)某函數(shù)的事件。
上面列舉的用于browers、form、keyboard、mouse、UI的事件都可以按以上方法擴(kuò)展。
七:Ajax支持
通用方式:
$.ajax(prop) 通過(guò)一個(gè)ajax請(qǐng)求,回去遠(yuǎn)程數(shù)據(jù),prop是一個(gè)hash表,它可以傳遞的key/value有以下幾種。
(String)type:數(shù)據(jù)傳遞方式(get或post)。
((String)url:數(shù)據(jù)請(qǐng)求頁(yè)面的url
((String)data:傳遞數(shù)據(jù)的參數(shù)字符串,只適合post方式
((String)dataType:期待數(shù)據(jù)返回的數(shù)據(jù)格式(例如 "xml", "html", "script",或 "json")
((Boolean)ifModified: 當(dāng)最后一次請(qǐng)求的相應(yīng)有變化是才成功返回,默認(rèn)值是false
((Number)timeout:設(shè)置時(shí)間延遲請(qǐng)求的時(shí)間??梢詤⒖?.ajaxTimeout
((Boolean)global:是否為當(dāng)前請(qǐng)求觸發(fā)ajax全局事件,默認(rèn)為true
((Function)error:當(dāng)請(qǐng)求失敗時(shí)觸發(fā)的函數(shù)。
((Function)success:當(dāng)請(qǐng)求成功時(shí)觸發(fā)函數(shù)
((Function)complete:當(dāng)請(qǐng)求完成后出發(fā)函數(shù)
jQuery代碼及說(shuō)明
success:function(msg){
$(div"#a").html(msg);
}
});
type:"get",
dataType:"html",
data: "name=John&location=Boston",
success:function(msg){
$("#a").html(msg);
}
});
用get方式向ajax.aspx頁(yè)面?zhèn)鲄?shù),并將返回內(nèi)容負(fù)給id為a的對(duì)象。
$.ajaxTimeout(time) 設(shè)置請(qǐng)求結(jié)束時(shí)間
$.ajaxTimeout( 5000 )
其它簡(jiǎn)化方式:
$.get(url, params, callback) 用get方式向遠(yuǎn)程頁(yè)面?zhèn)鬟f參數(shù),請(qǐng)求完成后處理函數(shù),除了url外,其它參數(shù)任意選擇!
{ name: "young", age: "25" },
function(data){ alert("Data Loaded: " + data); }
)
$.getJSON(url, params, callback) 用get方式向遠(yuǎn)程json對(duì)象傳遞參數(shù),請(qǐng)求完成后處理函數(shù)callback。
$.getScript(url, callback) 用get方式載入并運(yùn)行一個(gè)遠(yuǎn)程javascript文件。請(qǐng)求完成后處理函數(shù)callback。
$.post(url, params, callback) 用post方式向遠(yuǎn)程頁(yè)面?zhèn)鬟f參數(shù),請(qǐng)求完成后處理函數(shù)callback
load(url, params, callback) 載入一個(gè)遠(yuǎn)程文件并載入頁(yè)面DOM中,并執(zhí)行函數(shù)callback
loadIfModified(url, params, callback) 用get方式向遠(yuǎn)程頁(yè)面?zhèn)鬟f參數(shù),從最后一次請(qǐng)求后如果數(shù)據(jù)有變化才作出響應(yīng),將返回結(jié)果載入頁(yè)面DOM中,并執(zhí)行函數(shù)callback
ajaxStart(callback) 當(dāng)ajax請(qǐng)求發(fā)生錯(cuò)誤是時(shí)執(zhí)行函數(shù)callback
ajaxComplete(callback) 當(dāng)ajax請(qǐng)求完成時(shí)執(zhí)行函數(shù)callback
ajaxError(callback) 當(dāng)ajax請(qǐng)求發(fā)生錯(cuò)誤時(shí)執(zhí)行函數(shù)callback
ajaxStop(callback) 當(dāng)ajax請(qǐng)求停止時(shí)執(zhí)行函數(shù)callback
ajaxSuccess(callback) 當(dāng)ajax請(qǐng)求成功時(shí)執(zhí)行函數(shù)callback
八:jQuery插件
隨著jQuery的廣泛使用,已經(jīng)出現(xiàn)了大量jQuery插件,如thickbox,iFX,jQuery-googleMap等,簡(jiǎn)單的引用這些源文件就可以方便的使用這些插件。這里我簡(jiǎn)單的介紹一些網(wǎng)址供大家參考,這些網(wǎng)站頭提供了大量的demo,并且使用及其簡(jiǎn)單,及時(shí)E文不好,也能快速掌握!
http://jquery.com/plugins 官方推薦
http://interface.eyecon.ro/demos 效果超級(jí)棒,使用更簡(jiǎn)單,一定有你喜歡的!
http://www.dyve.net/jquery/
http://bassistance.de/jquery-plugins
還有其它很多插件,大家可以google以下,如果大家發(fā)現(xiàn)好的了,可以留言共享以下!
——————————————————————————————————————————————
至此jQuery已經(jīng)介紹完畢,并合并整理提供給大家 下載 ,更多詳細(xì)的使用請(qǐng)大家參考官方網(wǎng)站,下面我再推薦一些jQuery的學(xué)習(xí)網(wǎng)站方便大家更好的掌握這項(xiàng)工具!
http://keel.sike.googlepages.com/jQuery_getting_started.html 中文入門(mén)介紹,Keel翻譯
http://jquery.com/api jquery提供全部基本方法的介紹及demo,方便大家查詢!
相關(guān)文章
jQuery中Nicescroll滾動(dòng)條插件的用法
本篇文章主要介紹了jQuery中Nicescroll滾動(dòng)條插件的用法,Nicescroll滾動(dòng)條插件是一個(gè)非常強(qiáng)大的基于jQuery的滾動(dòng)條插件,有需要的可以了解下。2016-11-11
jQuery實(shí)現(xiàn)滑動(dòng)頁(yè)面固定頂部顯示(可根據(jù)顯示位置消失與替換)
這篇文章主要介紹了jQuery實(shí)現(xiàn)滑動(dòng)頁(yè)面固定頂部顯示,還可根據(jù)顯示位置消失與替換對(duì)應(yīng)的當(dāng)前顯示項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
基于Datatables跳轉(zhuǎn)到指定頁(yè)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇基于Datatables跳轉(zhuǎn)到指定頁(yè)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
如何使用jQuery Draggable和Droppable實(shí)現(xiàn)拖拽功能
本篇文章是對(duì)使用jQuery Draggable和Droppable實(shí)現(xiàn)拖拽功能的方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-07-07
JQuery解析HTML、JSON和XML實(shí)例詳解
JQuery具有強(qiáng)大的解析數(shù)據(jù)的能力,本文詳細(xì)介紹HTML、JSON和XML格式的文件的數(shù)據(jù)如何解析2014-03-03

