詳解jQuery的核心函數(shù)和事件處理
事件
頁面載入
1.ready(fn)當(dāng)DOM載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)
$(document).ready(function(){
// 在這里寫你的代碼...
});
// 下面是簡(jiǎn)寫
$(function($) {
// 你可以在這里繼續(xù)使用$作為別名...
});
2.事件處理 on(events,fn)在選擇元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù)
// 給p標(biāo)簽添加點(diǎn)擊事件監(jiān)聽
$("p").on("click", function(){
alert( $(this).text() );
});
// 第二種寫法 等效于上面
$("p").click(function(){
alert( $(this).text() );
});
3.off(events,[fn])在選擇元素上移除一個(gè)或多個(gè)事件的事件處理函數(shù)
// 移除p標(biāo)簽綁定的所有事件監(jiān)聽
$("p").off()
// 移除p標(biāo)簽綁定的click事件監(jiān)聽
$("p").off( "click")
4.bind(events,fn)為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)
// 移除p標(biāo)簽綁定的所有事件監(jiān)聽
$("p").bind("click", function(){
alert( $(this).text() );
});
// 同時(shí)綁定多個(gè)事件類型
$('#foo').bind('mouseenter mouseleave', function() {
alert();
});
5.unbind(type,fn]])bind()的反向操作,從每一個(gè)匹配的元素中刪除綁定的事件
// 把所有段落的所有事件取消綁定
$("p").unbind()
// 將段落的click事件取消綁定
$("p").unbind( "click" )
6.one(type,[data],fn)為每一個(gè)匹配元素的特定事件(像click)綁定一個(gè)一次性的事件處理函數(shù)
// 當(dāng)所有段落被第一次點(diǎn)擊的時(shí)候,顯示所有其文本
$("p").one("click", function(){
alert( $(this).text() );
});
事件委派
1.delegate(selector,[type],[data],fn)指定的元素(屬于被選元素的子元素)添加一個(gè)或多個(gè)事件處理程序,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)
<div style="background-color:red">
<p>這是一個(gè)段落。</p>
<button>請(qǐng)點(diǎn)擊這里</button>
</div>
// 當(dāng)點(diǎn)擊button時(shí),隱藏或顯示 p 元素
$("div").delegate("button", "click", function () {
$("p").slideToggle();
});

2.undelegate([selector,[type],fn])刪除由 delegate() 方法添加的一個(gè)或多個(gè)事件處理程序
// 從p元素刪除由 delegate() 方法添加的所有事件處理器
$("p").undelegate();
// 從p元素刪除由 delegate() 方法添加的所有click事件處理器
$("p").undelegate( "click" )
事件切換
1.hover([over,]out)一個(gè)模仿懸停事件(鼠標(biāo)移動(dòng)到一個(gè)對(duì)象上面及移出這個(gè)對(duì)象)的方法
over:鼠標(biāo)移到元素上要觸發(fā)的函數(shù)
out:鼠標(biāo)移出元素要觸發(fā)的函數(shù)
// 鼠標(biāo)懸停的表格加上特定的類
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
事件
1.blur([[data],fn])當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā) blur 事件
// 鼠標(biāo)懸停的表格加上特定的類
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
2.change([[data],fn])當(dāng)元素的值發(fā)生改變時(shí),會(huì)發(fā)生 change 事件
// 觸發(fā)被選元素的 change 事件 $(selector).change();
3.click([[data],fn])觸發(fā)每一個(gè)匹配元素的click事件
// 觸發(fā)頁面內(nèi)所有段落的點(diǎn)擊事件
$("p").click();
4.dblclick([[data],fn])當(dāng)雙擊元素時(shí),會(huì)發(fā)生 dblclick 事件
// 給頁面上每個(gè)段落的雙擊事件綁上 "Hello World!" 警告框
$("p").dblclick( function () { alert("Hello World!"); });
5.error([[data],fn])當(dāng)元素遇到錯(cuò)誤(沒有正確載入)時(shí),發(fā)生 error 事件
// 在服務(wù)器端記錄JavaScript錯(cuò)誤日志:
$(window).error(function(msg, url, line){
jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
});
6.focus([[data],fn])當(dāng)元素獲得焦點(diǎn)時(shí),觸發(fā) focus 事件
// 當(dāng)頁面加載后將 id 為 'login' 的元素設(shè)置焦點(diǎn):
$(document).ready(function(){
$("#login").focus();
});
7.focusin([data],fn)當(dāng)元素獲得焦點(diǎn)時(shí),觸發(fā) focusin 事件
<p><input type="text" /> <span>focusout fire</span></p> <p><input type="password" /> <span>focusout fire</span></p>
// 獲得焦點(diǎn)后會(huì)觸發(fā)動(dòng)畫
$("p").focusin(function() {
$(this).find("span").css('display','inline').fadeOut(1000);
});
8.focusout([data],fn)當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā) focusout 事件
// 獲得焦點(diǎn)后會(huì)觸發(fā)動(dòng)畫
$("p").focusout(function() {
$(this).find("span").css('display','inline').fadeOut(1000);
});
9.keydown([[data],fn])當(dāng)鍵盤或按鈕被按下時(shí),發(fā)生 keydown 事件
// 在頁面內(nèi)對(duì)鍵盤按鍵做出回應(yīng),可以使用如下代碼
$(window).keydown(function(event){
switch(event.keyCode) {
// ...
// 不同的按鍵可以做不同的事情
// 不同的瀏覽器的keycode不同
// 更多詳細(xì)信息: http://unixpapa.com/js/key.html
// ...
}
});
10.keypress([[data],fn])當(dāng)鍵盤或按鈕被按下時(shí),發(fā)生 keypress 事件
// 計(jì)算在輸入域中的按鍵次數(shù)
$("input").keydown(function(){
$("span").text(i+=1);
});
11.keyup([[data],fn])當(dāng)按鈕被松開時(shí),發(fā)生 keyup 事件。它發(fā)生在當(dāng)前獲得焦點(diǎn)的元素上
// 當(dāng)按下按鍵時(shí),改變文本域的顏色
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
12.mousedown([[data],fn])當(dāng)鼠標(biāo)指針移動(dòng)到元素上方,并按下鼠標(biāo)按鍵時(shí),會(huì)發(fā)生 mousedown 事件
// 當(dāng)按下鼠標(biāo)按鈕時(shí),隱藏或顯示元素
$("button").mousedown(function(){
$("p").slideToggle();
});
13.mouseenter([[data],fn])當(dāng)鼠標(biāo)指針穿過元素時(shí),會(huì)發(fā)生 mouseenter 事件
// 當(dāng)鼠標(biāo)指針進(jìn)入(穿過)元素時(shí),改變?cè)氐谋尘吧?
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
14.mouseleave([[data],fn])當(dāng)鼠標(biāo)指針離開元素時(shí),會(huì)發(fā)生 mouseleave 事件
// 當(dāng)鼠標(biāo)指針離開元素時(shí),改變?cè)氐谋尘吧?("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4");});// 當(dāng)鼠標(biāo)指針離開元素時(shí),改變?cè)氐谋尘吧?
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
15.mousemove([[data],fn])當(dāng)鼠標(biāo)指針在指定的元素中移動(dòng)時(shí),就會(huì)發(fā)生 mousemove 事件
事件坐標(biāo)
event.clientX, event.clientY相對(duì)于視口的左上角event.pageX,event.pageY相對(duì)于頁面的左上角event.offsetX,event.offsetY相對(duì)于事件元素的左上角
// 獲得鼠標(biāo)指針在頁面中的位置
$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});
16.mouseout([[data],fn])當(dāng)鼠標(biāo)指針從元素上移開時(shí),發(fā)生 mouseout 事件
// 當(dāng)鼠標(biāo)從元素上移開時(shí),改變?cè)氐谋尘吧?
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
17.mouseover([[data],fn])當(dāng)鼠標(biāo)指針位于元素上方時(shí),會(huì)發(fā)生 mouseover 事件
// 當(dāng)鼠標(biāo)指針位于元素上方時(shí)時(shí),改變?cè)氐谋尘吧?
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
18.mouseup([[data],fn])當(dāng)在元素上放松鼠標(biāo)按鈕時(shí),會(huì)發(fā)生 mouseup 事件
// 當(dāng)松開鼠標(biāo)按鈕時(shí),隱藏或顯示元素
$("button").mouseup(function(){
$("p").slideToggle();
});
19.resize([[data],fn])當(dāng)調(diào)整瀏覽器窗口的大小時(shí),發(fā)生 resize 事件
// 改變頁面窗口的大小時(shí)彈出警告窗
$(window).resize(function(){
alert("Stop it!");
});
20.scroll([[data],fn])當(dāng)用戶滾動(dòng)指定的元素時(shí),會(huì)發(fā)生 scroll 事件
// 當(dāng)頁面滾動(dòng)條變化時(shí),執(zhí)行的函數(shù):
$(window).scroll( function() {
alert("Stop it!");
});
21.select([[data],fn])當(dāng) textarea 或文本類型的 input 元素中的文本被選擇時(shí),會(huì)發(fā)生 select 事件
// 觸發(fā)所有input元素的select事件:
$("input").select();
22.submit([[data],fn])當(dāng)提交表單時(shí),會(huì)發(fā)生 submit 事件
// 提交本頁的第一個(gè)表單:
$("form:first").submit();
// 阻止表單提交:
$("form").submit( function () {
return false;
} );
23.unload([[data],fn])在當(dāng)用戶離開頁面時(shí),會(huì)發(fā)生 unload 事件
點(diǎn)擊某個(gè)離開頁面的鏈接
在地址欄中鍵入了新的 URL
使用前進(jìn)或后退按鈕
關(guān)閉瀏覽器
重新加載頁面
// 頁面卸載的時(shí)候彈出一個(gè)警告框:
$(window).unload( function () { alert("Bye now!"); } );
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
再分享70+免費(fèi)的jquery 圖片滑塊效果插件和教程
這些jQuery插件同樣可以實(shí)現(xiàn)圖片和內(nèi)容的滑塊效果。下面的這些jQuery插件的Demo網(wǎng)站我都測(cè)試了一些,都可以正常訪問,我相信那么多款插件中總會(huì)有你喜歡的2014-12-12
JQuery實(shí)現(xiàn)自定義滾動(dòng)條的方法
這篇文章主要給大家介紹了關(guān)于JQuery實(shí)現(xiàn)自定義滾動(dòng)條的方法,通過本文的介紹你可以換掉千篇一律的默認(rèn)滾動(dòng)條,讓你的網(wǎng)站或web項(xiàng)目更具特色,文章通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
在jquery boxy中添加百度地圖坐標(biāo)拾取注意流程
這篇文章主要介紹了在jquery boxy中添加百度地圖坐標(biāo)拾取注意流程,需要的朋友可以參考下2014-04-04
基于jQuery實(shí)現(xiàn)的向下滑動(dòng)二級(jí)菜單效果代碼
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的向下滑動(dòng)二級(jí)菜單效果代碼,通過jquery鼠標(biāo)事件控制針對(duì)頁面元素的鏈?zhǔn)讲僮鲗?shí)現(xiàn)菜單切換的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
jQuery利用鍵盤上下鍵移動(dòng)表格內(nèi)容
這篇文章主要為大家詳細(xì)介紹了jQuery利用鍵盤上下鍵移動(dòng)表格內(nèi)容,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
動(dòng)態(tài)獲取復(fù)選框checkbox選中個(gè)數(shù)的jquery代碼
這篇文章主要介紹了jquery中動(dòng)態(tài)獲取復(fù)選框checkbox選中的個(gè)數(shù)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2013-06-06

