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 = https://www.cnblogs.com/aitiknowledge/p/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 = https://www.cnblogs.com/aitiknowledge/p/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 = https://www.cnblogs.com/aitiknowledge/p/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 = https://www.cnblogs.com/aitiknowledge/p/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 = https://www.cnblogs.com/aitiknowledge/p/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 = https://www.cnblogs.com/aitiknowledge/p/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 = https://www.cnblogs.com/aitiknowledge/p/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 = https://www.cnblogs.com/aitiknowledge/p/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 = https://www.cnblogs.com/aitiknowledge/p/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 > <p > <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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/39136.html
標籤：jQuery