11.58 事件
11.581 事件綁定方法與解綁
綁定事件:
// 綁定方式一: $('.box1').click( function () { alert( '綁定方式一' ) }); ? // 綁定方式二: $('.box1').on("click", function () { alert( '綁定方式一' ) }); ? // 綁定方式三: $('.box1').bind('click',{'a':'b'} function (e) { alert( '綁定方式二' ); console.log(e.data); }); ? $( '.box1').bind('mouseover mouseout', function () { // 綁定多個事件做同一件事 console.log('綁定多個事件做同一件事' ) }); $( '.box1' ).bind({ 'mouseup': function () { console.log( 'mouseover' ); }, 'mousedown': function () { console.log( 'mouseout' ); } });
解綁事件:
// 移除事件,unbind沒有參數則代表移除所有事件 setTimeout( function () { $( '.box1').unbind('mouseover' ); }, 3000 ); ? setTimeout( function () { $( '.box1' ).unbind(); }, 10000 ) ? .off( "click", function (){ xxxxx })
11.582 綁定事件示例
點擊事件:click
// click與dblclick只應該存在一個,大多數都是單擊事件 $('.box1').click( function (event) // console.log(event.type); // event.type事件的類型為:click console.log(event.target); // event.target指的是點擊的那個元素 }) $( '.box1').dblclick( function (event) { console.log(event.target); // event.target指的是點擊的那個元素 })
鼠標:mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave
$('.box1').mousedown( function (event) { console.log( '按照鼠標左鍵不松手' ); }); $( '.box1').mouseup( function (event) { console.log( '按照鼠標左鍵松手' ); }); ? $( '.box1').mousemove( function (event) { console.log( '移動鼠標' , event.pageX, event.pageY); }); $( '.box1').mouseover( function (event) { console.log( '元素以及該元素的子元素在鼠標移入時都會觸發,當前的div是:' , event.target.innerText); }); ? $( '.box1').mouseout( function (event) { console.log( '元素以及該元素的子元素在鼠標離開時都會觸發,當前的div是:' , event.target.innerText); }); $( '.box1').mouseenter( function (event) { console.log( '元素以在鼠標移入時都會觸發(與子元素無關),當前的div是:' , event.target.innerText); }); $( '.box1').mouseleave( function (event) { console.log( '元素以在鼠標移入時都會觸發(與子元素無關),當前的div是:' , event.target.innerText); });
對于input框:focus、blur、input
input能夠實時檢測 textarea , input:text , input:password , input:search 這幾個元素的內容變化,但IE9以下版本不支持,需要使用IE特有的onpropertychange事件替代,使用jQuery庫的話直接使用on同時綁定這兩個事件即可
$('#inp').on("focus", function () { console.log( '鼠標聚焦' ); }); $( '#inp').on("blur", function () { console.log( '鼠標失去焦點' ); }); // 當input框的值發生變化時,實時觸發 $("#inp").on("input", function () { console.log($( this ).val()); }) $( "#i1").on("input propertychange", function () { alert($( this ).val()); })
按鍵:keydown、keyup
$('#inp').keydown( function (e) { console.log(e.keyCode); }); $(window).on( "keydown", function (e) { // 獲取用戶按下那個按鍵 console.log(e.keyCode); if (e.keyCode === 16 ){ flag = true ; } }); ? $( '#inp').keyup( function (event) { // 綁定一個按鍵抬起的事件 console.log('鍵盤按鍵彈起' ); }); $(window).on( "keyup", function (e) { console.log(e.keyCode); if (e.keyCode === 16 ){ flag = false ; } });
change:
// 表單事件change $('#inp').change( function () { console.log( this .value); // 失去焦點時就會得到值 }); $( 'input[name=sex]').change( function (event) { console.log( this .value); }); $( '#select').change( function () { console.log( this .value); });
選中checkbox框:select
// 表單事件select,CheckBox框被選中時觸發 $('#inp1').select( function () { console.log( this .value); }); $( '#inp2').select( function () { console.log( this .value); });
提交事件:submit
// 表單事件submit $('#form').submit( function (event) { console.log($( 'input[name=user]' ).val()); console.log($( 'input[name=pwd]' ).val()); event.preventDefault(); });
hover:不能使用on綁定hover事件
// hover事件 $(".father").hover( // 鼠標移到.father上時讓.son添加一個.show function () { $( this ).find(".son").addClass("show" ); }, function () { // 鼠標移出.father上時讓.son移除一個.show $( this ).find(".son").removeClass("show" ); })
11.583 事件冒泡應用之事件委托
添加的事件不能用于動態增加事件,例如之前我們在做表格的增刪改時,每新增一行內容都需要重新綁定事件,基于事件委托就可以解決該問題
事件委托是通過事件冒泡的原理,利用父標簽去捕獲子標簽的事件
$('ul').on('mouseover','li', function (e) { $(e.target).css( 'background-color','#ddd').siblings().css('background-color','white' ); // e.stopPropagation(); return false ; }) ? $( "table").on("click", ".delete", function () { // 刪除按鈕綁定的事件 })
11.584 頁面加載完成執行
$(document).ready( function (){ 在這里寫你的JS代碼... }) ? 簡寫: $( function (){ 你在這里寫你的代碼 })
與window.onload()函數的區別:window.onload()函數有覆蓋現象,必須等待著圖片資源加載完成之后才能調用,且只能使用一次;jQuery的這個入口函數沒有函數覆蓋現象,文檔加載完成之后就可以調用(建議使用此函數),可以使用多次
11.59 動畫效果
1 、show() 顯示隱藏的匹配元素 語法:show(speed,callback) 參數: speed:三種預定速度之一的字符串( 'slow','normal','fast')或表示動畫時長的毫秒值(如:1000毫秒== 1秒) callback:在動畫完成時執行的函數,每個元素執行一次 2 、hide hide(speed,callback)跟show使用方法類似,表示隱藏顯示的元素。可以通過show()和hide()方法,來動態控制元素的顯示隱藏 3 、toggle 如果元素是可見的,切換為隱藏的;如果元素是隱藏的,切換為可見的。 ? 1 、slideDown 通過高度變化(向下增大)來到動態地顯示所有匹配的元素,在顯示完成后觸發一個回調函數用法和參數跟上面類似 2 、slideUp 通過高度變化(向上減小)來動態地隱藏所有匹配的元素,在隱藏完成后可選地觸發一個回調函數。用法和參數跟上面類似 3 、slideToggle 通過高度變化來切換所有匹配元素的可見性,并在切換完成后可選地觸發一個回調函數跟toggle用法類似 ? 1、fadeIn/fadeOut 通過不透明度的變化來實現所有匹配元素的淡入/ 淡出效果,并在動畫完成后可選地觸發一個回調函數。這個動畫只調整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發生變化 2 、fadeTo 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度,并在動畫完成后可選地觸發一個回調函數。這個動畫只調整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發生變化。 3、fadeToggle 通過不透明度的變化來開關所有匹配元素的淡入和淡出效果,并在動畫完成后可選地觸發一個回調函數,這個動畫只調整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發生變化。實現淡入淡出的效果就是使用此方
animate、stop、delay
1 、animate 概念:用于創建自定義動畫的函數 語法:animate(params,[speed],[fn]) 參數: params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合 speed:三種預定速度之一的字符串( "slow","normal", or "fast")或表示動畫時長的毫秒數值(如:1000 ) fn:在動畫完成時執行的函數,每個元素執行一次。 ? 2 、stop 概念:停止所有在指定元素上正在運行的動畫 語法:stop([clearQueue],[jumpToEnd]) 參數: clearQueue:如果設置成true,則清空隊列。可以立即結束動畫。 gotoEnd:讓當前正在執行的動畫立即完成,并且重設show和hide的原始樣式,調用回調函數等 ? 3、delay 概念:用來做延遲的操作 語法:delay(1000),一秒之后做后面的操作
11.510 .each()
// 為每一個li標簽添加class="c1" $("li").each( function (){ $( this ).addClass("c1" ); }); ? // 使用內置$.each()進行迭代 var arry=[11,22,33,44 ]; $.each(arry, function (k,v){ console.log(k,v); });
注意: jQuery的方法返回一個jQuery對象,遍歷jQuery集合中的元素 - 被稱為隱式迭代的過程。當這種情況發生時,它通常不需要顯式地循環的 .each()方法
也就是說,上面的例子沒有必要使用each()方法,直接像下面這樣寫就可以了:
$("li").addClass("c1"); // 對所有標簽做統一操作
終止each循環
return false ;
11.511 .data()
.data(key, value): 在匹配的元素上存儲任意相關數據/保存一些狀態。
$("div").data("k",100); // 給所有div標簽都保存一個名為k,值為100
.data(key): 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值
$("div").data("k"); // 返回第一個div標簽中保存的"k"的值 100
.removeData(key): 移除存放在元素上的數據,不加key參數表示移除所有保存的數據
$("div").removeData("k"); // 移除元素上存放k對應的數據
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
