jQuery基礎(三)- 事件篇 1、jQuery滑鼠事件之click與dbclick事件 click方法用於監聽用戶單擊操作,dbclick方法用於監聽用戶雙擊操作,這兩個方法用法及其類似,所以這隻介紹click事件,只有單擊釋放後才生效,而且同一元素不能同時綁定click和dbclick事件 方 ...
jQuery基礎(三)- 事件篇 1、jQuery滑鼠事件之click與dbclick事件 click方法用於監聽用戶單擊操作,dbclick方法用於監聽用戶雙擊操作,這兩個方法用法及其類似,所以這隻介紹click事件,只有單擊釋放後才生效,而且同一元素不能同時綁定click和dbclick事件 方法一:$ele.click() click無參,只是綁定一個事件,在函數里可以實現其他的綁定事件 方法二:$ele.click(handler(eventObject)) click的參數是函數(回調函數),單擊會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 方法三:$ele.click([eventData], handler(eventObject)) click增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData //不同函數傳遞數據 function data(e) { $(this).find('p:last').html('數據:' + e.data) } function a() { $(".right").click(1111, data) } a(); 註:只有滑鼠按鈕鍵which值為1(即滑鼠左鍵)才會實現所綁定的事件 2、jQuery滑鼠事件之mousedown與mouseup事件 mousedown方法用於監聽用戶滑鼠按下操作,只有滑鼠按下後才生效,mouseup方法用於監聽用戶滑鼠鬆開操作,只有滑鼠鬆開後才生效,這兩個方法用法及其類似,所以這隻介紹mousedown事件。 方法一:$ele.mousedown() mousedown 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件 方法二:$ele.mousedown(handler(eventObject)) mousedown 的參數是函數(回調函數),滑鼠按下後會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 方法三:$ele.mousedown([eventData], handler(eventObject)) mousedown增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData 註:mousedown強調按下,mouseup強調鬆開;如果點擊按住不放並離開元素,還是會實現所綁定的事件;任何滑鼠按鈕都會實現所綁定的事件; 用event 對象的which區別按鍵,敲擊滑鼠左鍵which的值是1,敲擊滑鼠中鍵which的值是2,敲擊滑鼠右鍵which的值是3 3、jQuery滑鼠事件之mousemove事件 mousemove方法用於監聽用戶滑鼠指針移動的操作,只有滑鼠指針移動就生效,只在綁定事件的元素的區域里。 方法一:$ele.mousemove() mousemove 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件 方法二:$ele.mousemove(handler(eventObject)) mousemove 的參數是函數(回調函數),滑鼠指針移動會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 //綁定一個mousemove事件 //觸發後修改內容 $(".aaron1").mousemove(function(e) { $(this).find('p:last').html('移動的X位置:' + e.pageX) }) 方法三:$ele.mousemove ([eventData], handler(eventObject)) mousemove 增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData 註:mousemove 強調滑鼠指針移動;如果處理器做任何重大的處理,或者如果該事件存在多個處理函數,這可能造成瀏覽器的嚴重的性能問題 4、jQuery滑鼠事件之mouseover與mouseout事件 mouseover方法用於監聽用戶滑鼠移入操作,只有滑鼠移入區域內後才生效,mouseout方法用於監聽用戶滑鼠移出操作,只有滑鼠移除區域後才生效,處理事件的過程中會有事件冒泡,這兩個方法用法及其類似,所以這隻介紹mouseover事件。 方法一:$ele.mouseover () mouseover 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件 方法二:$ele.mouseover (handler(eventObject)) mouseover 的參數是函數(回調函數),滑鼠移入後會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 方法三:$ele.mouseover ([eventData], handler(eventObject)) mouseover 增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData 註:mouseover 強調滑鼠移入區域內,mouseover 強調滑鼠移除區域; 5、jQuery滑鼠事件之mouseenter與mouseleave事件 這和第四點的基本功能,理論知識點是一模一樣的,不加贅述。但是他們最主要的區別是第四點可能會處理冒泡事件,這第五點是不會處理冒泡事件 6、jQuery滑鼠事件之hover事件 這個事件是第五點的總結方法,所以他也不會處理冒泡事件,即懸停事件,在元素區域內懸停(移入),在元素外(移出) 方法:$ele.hover(handlerIn(eventObject) , handlerOut(eventObject)) handlerIn(eventObject):當滑鼠指針進入元素時觸發執行的事件函數 handlerOut(eventObject):當滑鼠指針離開元素時觸發執行的事件函數 7、jQuery滑鼠事件之focusin與focusout事件 focusin 方法用於監聽用戶元素聚焦操作(如input元素),只有元素聚焦後才生效。focusout 方法用於監聽用戶元素失焦操作(如input元素),只有元素失焦後才生效。兩者是很相似的,所以這隻介紹focusin事件 方法一:$ele.focusin () focusin 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件 方法二:$ele.focusin (handler(eventObject)) focusin 的參數是函數(回調函數),滑鼠移入後會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 方法三:$ele.focusin ([eventData], handler(eventObject)) focusin 增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData //不同函數傳遞數據 function fn(e) { $(this).val(e.data) //給input元素賦值有val()方法,不是value() } function a() { $("input:last").focusin('呱唧_T_呱唧', fn) } a(); 註:focusin 強調元素聚焦;focusout強調元素失焦,無論是不是自身調用聚焦/失焦方法,都會執行函數裡面有部分操作, 8、jQuery表單事件之focus與blur事件 focus 方法用於監聽用戶元素聚焦操作(如input元素),只有元素聚焦後才生效。blur 方法用於監聽用戶元素失焦操作(如input元素),只有元素失焦後才生效。兩者是很相似的,所以這隻介紹focus事件 方法一:$ele.focus () focusin 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件 方法二:$ele.focus (handler(eventObject)) focusin 的參數是函數(回調函數),滑鼠移入後會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 方法三:$ele.focus ([eventData], handler(eventObject)) focus 增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData 註:focus 強調元素聚焦;blur強調元素失焦,只有自身調用聚焦/失焦方法,並且聚焦成功,才會執行函數裡面有部分操作, 9、jQuery表單事件之change事件 只有當表單元素(input元素、textarea元素、select元素)值發生改變之後並且失焦(針對輸入文本的元素,其他立即觸發),會觸發表單綁定的change事件 方法:$ele.change(handler(eventObject)) change的參數是函數(回調函數),表單元素值發生改變再失焦,就會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 10、jQuery表單事件之select事件 select事件只能用於<input>元素與<textarea>元素。當這兩元素的文本被選中時會觸發select事件 方法一:$ele.select () focusin 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件 方法二:$ele.select (handler(eventObject)) select 的參數是函數(回調函數),文本被選中後會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 方法三:$ele.select ([eventData], handler(eventObject)) select 增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData 11、jQuery表單事件之submit事件 submit事件可以過濾一些數據做一些必要的操作阻止一些瀏覽器的預設行為。 有四種方式能觸發submit事件: <input type="submit">、 <input type="image">、 <button type="submit">、 當某些表單元素獲取焦點時,敲擊enter鍵 方法一:$ele.submit() submit 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件 方法二:$ele.submit (handler(eventObject)) submit 的參數是函數(回調函數),文本被選中後會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 //回車鍵或者點擊提交表單,禁止瀏覽器預設跳轉: $('#target2').submit(function() { alert('捕獲提交表達動作,阻止頁面跳轉') return false; //阻止瀏覽器的預設跳轉行為 }); 方法三:$ele.submit ([eventData], handler(eventObject)) submit 增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData 註:如果要阻止瀏覽器的某些預設行為,可以傳統的調用事件對象e.preventDefault()來處理;也可以在函數上返回false 12、jQuery鍵盤事件之keydown與keyup事件 keydown方法用於監聽用戶鍵盤按下操作,只有鍵盤按下後才生效,keyup方法用於監聽用戶鍵盤鬆開操作,只有鍵盤鬆開後才生效,這兩個方法用法及其類似,所以這隻介紹keydown事件。 方法一:$ele.keydown () keydown 無參,只是綁定一個事件,在函數里可以實現其他的綁定事件 方法二:$ele.keydown (handler(eventObject)) keydown 的參數是函數(回調函數),鍵盤按下後會執行函數里的操作,如果裡面含有this,this指向觸發事件元素的對象 方法三:$ele.keydown ([eventData], handler(eventObject)) keydown 增加了一個參數,和上面的功能是一樣的,只不過傳遞了一個數據,即eventObject.data = eventData;e.key或者e.which是鍵盤輸入的值(整型值) 註:keydown強調按下,keyup強調鬆開;如果點擊按住不放並離開元素,還是會實現所綁定的事件;理論上可以綁定所有元素,一般用於表單元素。keydown事件:每次獲取的內容都是之前輸入的,當前輸入的獲取不到,這就由下一知識點解決。 13、jQuery鍵盤事件之keypress()事件 keydown事件觸發在文字還沒敲進文本框,這時如果在keydown事件中輸出文本框中的文本得到的是觸發鍵盤事件前的文本,而keyup事件觸發時整個鍵盤事件的操作已經完成,獲得的是鍵盤觸發事件後的文本。他和keydown是一樣的。 keypress與keydown、keyup的主要區別: 只能獲取單個字元,不能捕獲組合鍵 無法響應系統功能鍵如(delete,backspace) 不區分小鍵盤和主鍵盤的數字字元 14、on()的多事件綁定 上述提及的所有時間他們的底層的處理都是通過一個”on“方法來實現的。(on和bind是一樣的, 推薦使用on) 基本用法:.on(event, [selector] , [data]) 如:$ele.on("click", function(){}) 和上述提到的事件最大的不同點是 可以自定義事件名 多個事件綁定同一個函數:$ele.on("mouseover mouseout", function(){}) //多個事件用空格隔開 多個事件綁定不同函數:$ele.on({ mouseover: function(){}, mouseout:function(){} }) 將數據傳遞到處理程式 function greet( event ) { alert( "Hello " + event.data.name ); //Hello 慕課網 } $( "button" ).on( "click", { name: "慕課網" }, greet ); 15、on()的高級用法 委托機制:.on( event, [selector], [data], handler(eventObject)) 在on的第二參數中提供了一個selector選擇器,簡單的來描述下 參考下麵3層結構 <div class="left"> <p class="aaron"> <a>目標節點</a> //點擊在這個元素上 </p> </div> 給出如下代碼: $("div").on("click","p",fn) 註:事件綁定在最上層div元素上,當用戶觸發在a元素上,事件將往上冒泡,一直會冒泡在div元素上。如果提供了第二參數,那麼事件在往上冒泡的過程中遇到了選擇器匹配的元素,將會觸發事件回調函數 就是說向上冒泡匹配到的元素,由該元素執行回調函數的範圍 16、卸載事件off()方法 通過on()綁定的事件處理程式 通過off()方法移除綁定(off和unbind也是一樣的, 推薦使用off) 綁定兩個事件 $ele.on("mouseover mouseout", function(){}) 解除其中一個事件 $ele.off("mouseover") 解除所有事件 $ele.off() 17、jQuery事件對象的作用 可以借用對象的target屬性與冒泡機制實現事件委托-------多個事件綁定同一個函數 我們經常見到的this就是對象的currentTarget屬性,event.target是觸發事件的對象 18、jQuery自定義事件之trigger事件 例子: 在jQuery通過on方法綁定一個原生事件 $ele.on('click', function(){ alert("觸發系統事件") }); 必須用戶點擊這個元素才能觸發這個事件 $ele.trigger("click"); 只要寫出這行代碼,就相當於執行了上面的點擊事件 trigger除了能夠觸發瀏覽器事件,同時還支持自定義事件,並且自定義時間還支持傳遞參數 $('#elem').on('Aaron', function(event,arg1,arg2) { alert("自觸自定義時間") }); $('#elem').trigger('Aaron',['參數1','參數2']) trigger觸發瀏覽器事件與自定義事件區別?
-
- 自定義事件對象,是jQuery模擬原生實現的
- 自定義事件可以傳遞參數
jQuery基礎(四)---動畫篇 1、jQuery中元素的隱藏和顯示之hide和show方法 (改變樣式display:none/block) 元素隱藏方法hide() 元素顯示方法show()兩者用法很相似,這裡以hide為例 $ele.hide() 直接隱藏 $ele.hide(options) 動畫隱藏會慢慢改變寬高,致使頁面佈局發生改變 options可以傳遞多個參數,可以字典的形式傳遞,具體屬性及屬性值可查閱官方文檔。快捷參數:fast預設200ms,slow預設600ms,duration時間,complete:function(){}等 註:.hide()方法是會保存元素的原始屬性和屬性值即再次顯示的時候還是原來的屬性。 show和hide方法是修改display屬性,通過visibility屬性佈局需要通過css方法單獨設置 如果使用!important在你的樣式中,你就需要通過css方法修改屬性,併在屬性之後添加!important重寫樣式 2、jQuery中顯示與隱藏切換toggle方法(改變樣式display:none/block) toggle方法是上述兩個方法的切換 $ele.toggle() 無參數 若元素隱藏,則會顯示;若顯示,則隱藏 $ele.toggle(options) 動畫隱藏或顯示會慢慢改變寬高,致使頁面佈局發生改變 options可以傳遞多個參數,可以字典的形式傳遞,具體屬性及屬性值可查閱官方文檔。快捷參數:fast預設200ms,slow預設600ms,duration時間,complete:function(){}等 $ele.toggle(display) 直接定位 直接提供一個參數,指定要改變原色最終效果 如果為true則是顯示,如果為false則是隱藏 3、jQuery中下拉/上捲動畫之slideDown和slideUp方法(改變元素的高度) 元素下拉顯示方法slideDown()和上述的show()很相似;元素下拉顯示方法slideUp()和上述的hide()很相似,slideDown和slideUp方法使用很相似,以slideDown為例 $ele.slideDown() 直接用滑動動畫顯示一個匹配元素 $ele.slideDown(options) 只會改變元素的高度,即頁面佈局會向上移動 options可以傳遞多個參數,可以字典的形式傳遞,具體屬性及屬性值可查閱官方文檔。快捷參數:fast預設200ms,slow預設600ms,duration時間,complete:function(){}等 註:.slideDown()方法是從無到有的一開始元素的就是隱藏的 .slideUp()方法是從有到無的,一開始元素的就是顯示的 。因為動畫是非同步的,所以要在動畫之後執行某些操作就必須要寫到回調函數裡面 4、jQuery中上捲下拉切換slideToggle方法(改變元素的高度) slideToggle 方法是上述兩個方法的切換 $ele.slideToggle () 無參數 若元素隱藏,則會下拉;若顯示,則上捲 $ele.slideToggle (options) 動畫上捲或下拉會慢慢改變高度,致使頁面佈局發生改變 options可以傳遞多個參數,可以字典的形式傳遞,具體屬性及屬性值可查閱官方文檔。 快捷參數:fast預設200ms,slow預設600ms,duration時間,complete:function(){}等 5、jQuery中淡出/淡入動畫之fadeOut和fadeIn方法(改變元素的透明度) 元素淡出隱藏方法fadeOut ()和上述的.hide()很相似;元素淡入顯示方法fadeIn()和上述的show()很相似,fadeOut 和fadeIn方法使用很相似,以slideDown為例 $ele.fadeOut () 直接用淡出隱藏所有匹配元素 $ele.fadeOut (options) 只會改變元素的透明度opacity,即頁面佈局剛開始不會變化,在透明度為0時,頁面佈局才發生改變;如果時fadeIn(options)時一開始佈局變化,然後逐漸改變透明度 options可以傳遞多個參數,可以字典的形式傳遞,具體屬性及屬性值可查閱官方文檔。快捷參數:fast預設200ms,slow預設600ms,duration時間,complete:function(){}等 註:.slideDown()方法是從無到有的一開始元素的就是隱藏的 .slideUp()方法是從有到無的,一開始元素的就是顯示的 。因為動畫是非同步的,所以要在動畫之後執行某些操作就必須要寫到回調函數裡面 6、jQuery中淡出淡入切換fadeToggle方法(改變元素的透明度) fadeToggle 方法是上述兩個方法的切換 $ele.fadeToggle () 無參數 若元素隱藏,則會下拉;若顯示,則上捲 $ele.fadeToggle (options) 動畫淡入淡出會慢慢改變元素透明度opacity在01之間,致使頁面佈局發生改變 options可以傳遞多個參數,可以字典的形式傳遞,具體屬性及屬性值可查閱官方文檔。快捷參數:fast預設200ms,slow預設600ms,duration時間,complete:function(){}等 7、jQuery中淡入效果之fadeTo方法(改變元素的透明度) fadeTo 方法是上述fadeIn方法的擴展,即可以指定元素的透明度 $ele.fadeTo (options) 動畫淡入淡出會慢慢改變並指定元素透明度opacity在01之間的某個值,致使頁面佈局發生改變 options可以傳遞多個參數,可以字典的形式傳遞,具體屬性及屬性值可查閱官方文檔。 快捷參數:fast預設200ms,slow預設600ms,必需參數(duration時間、opacity透明度值),complete:function(){}等 8、jQuery中toggle與slideToggle以及fadeToggle的比較 操作元素的顯示與隱藏可以有 改變樣式display:none/block/inline/inline-block ======>toggle 橫向動作 (顯示從左到右,隱藏從右到左) 設置位置高度 ======>slideToggle 縱向動作(顯示從上往下,隱藏從下往上) 設置透明度 ======>fadeToggle