本篇文章帶給大家的內容是關於jQuery的事件是什麼? jquery事件的介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
在DOM中提供了load事件用於頁面載入完畢之後執行機制,jQuery提供了ready()方法實作相似的功能,但是存在以下的差異。
1.DOM中的load事件沒有任何的簡寫形式,但在jQuery的ready()方法中提供了簡寫形式。
2.在HTML頁面載入完成以後,load事件才會被觸發;而在DOM節點樹載入完畢以後,ready()方法就會被呼叫。
3.一個HTML頁面中只能存在一個load事件,但可以存在多個ready()方法。
ready()方法的語法結構:
1.$(document).ready(function(){}); 2.$().ready(function(){});//简写 3.$(function(){});//简写
jQuery中提供了bind()方法完成綁定事件,語法如下
$element.bind(type,data,callback);
type:表示綁定事件的名稱,是字串類型,沒有'on'。
data:作為element.data屬性值傳遞給事件物件的額外資料物件(可選項)。
callback:表示綁定事件的處理函數。
範例程式碼如下:
6c04bd5ca3fcae76e30b72ad730ca86d 80833ebf7280790f56f131c64a835e4a按钮65281c5ac262bf6d81768915a4a77ac0 3f1c4e4b6b16bbbd69b2ee476dc4f83a function click1(){ console .log('this is button,'); } $('#btn').bind('click',click1);
jQuery中提供了unbind()方法來解綁事件。具體方法如下:
$element.unbind(type[,data,callback]);
$('#btn').unbind('click');//只传递事件名称,解绑定该事件的所有处理函数。 $('#btn').undind('click'click1);//传递时间名称和指定的处理函数,解绑定该事件的指定处理函数。
c9ccee2e6ea535a969eb3f532ad9fe89 #title { width: 100px; height: 20px; border: 1px solid black; } ul { list-style: none; padding: 0; display: none; } li { width: 100px; height: 20px; border: 1px solid black; } 531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 0840c441062c67185332150c03ca7be0菜单94b3e26ee717c64999d7867364b1b4a3 ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6北京bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6南京bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6天津bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 3f1c4e4b6b16bbbd69b2ee476dc4f83a // mouseover表示鼠标悬停在指定元素之上 mouseout表示鼠标从指定元素上移开 //jQuery支持链式操作,多事件绑定时,事件名称之间使用空格分离。 $('#title').bind('mouseover mouseout', function(){ if ($('ul').is(':hidden')) { $('ul').css('display','block'); } else { $('ul').css('display','none'); } }); /* unbind()方法 1.没有指定任何事件时 - 将指定元素的所有事件全部解绑定 2.指定一个事件名称时 - 将指定元素的指定当个事件解绑定 3.指定多个事件名称时 - 将指定元素的指定多个事件解绑定 */ $('#title').unbind('mouseover mouseout');
jQuery中提供多組事件綁定與解綁定的方法
1.bind()與unbind() - jQuery 3.0版本後刪除方法
2.on()與off()方法- jQuery 1.7版本後新增方法
其實bind()與unbind()的底層方法就是on()和off()
3.live()與die() - jQuery 1.7版本後刪除方法
作用- 實現事件委託
4.delegate()與undelegate() - jQuery 1.6版本後新增方法,jQuery
3.0版本後刪除方法
作用- 實作事件委託
5. one() - 為事件綁定一次性的函數
jQuery中提供了hover()方法模擬滑鼠懸停事件效果。
$element.hover(over,out);
範例程式碼如下:
c9ccee2e6ea535a969eb3f532ad9fe89 #title { width: 100px; height: 20px; border: 1px solid black; } ul { list-style: none; padding: 0; display: none; } li { width: 100px; height: 20px; border: 1px solid black; } 531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 0840c441062c67185332150c03ca7be0菜单94b3e26ee717c64999d7867364b1b4a3 ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6北京bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6南京bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6天津bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 3f1c4e4b6b16bbbd69b2ee476dc4f83a $('#title').hover(function(){ $('ul').css('display','block'); },function(){ $('ul').css('display','none'); }); 2cacc6d41bbb37262a98f745aa00fbf0 36cc49f0c466276486e50c850b7e4956
jQuery中提供了trigger()方法用於模擬除法匹配元素綁定的事件
$element.trigger(type[,dat]);
6c04bd5ca3fcae76e30b72ad730ca86d ddbd97e11a826e220b707861b3166e92按钮65281c5ac262bf6d81768915a4a77ac0 3f1c4e4b6b16bbbd69b2ee476dc4f83a // 绑定事件 - 由用户行为进行触发,调用处理函数 $('#btn').bind('click',function(){ console.log('this is button.'); }); // 模拟用户触发事件 $('#btn').trigger('click'); 2cacc6d41bbb37262a98f745aa00fbf0 36cc49f0c466276486e50c850b7e4956
相關推薦:
#以上是jQuery的事件是什麼? jquery事件的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!