前端開發JS——jQuery常用方法

来源:https://www.cnblogs.com/aitiknowledge/archive/2019/09/23/11571838.html
-Advertisement-
Play Games

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                  
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 任何一個開發者,都是十分喜歡使用開源軟體包的。因為它使開發工作變得更快速、高效、容易。如果沒有開源軟體包,開發工作將變得疲憊不堪,不斷的重覆造輪子! 下麵整理了 Github 上 36 個實用的 Vue 開源庫,建議收藏! 1.Bootstrap Vue |star 10014 具有超過40個插件和 ...
  • 1、js如何獲取數組的key function getObjectKeys(object){ var keys = []; for (var property in object) return property; } console.log(getObjectKeys(3332:[])) // 3 ...
  • 在ie11中打開vue項目一片空白,F12打開控制台發現如下錯誤 只需要在build/webpack.base.conf.js中加一行代碼即可 ...
  • 本文主要使用坐標軸的使用來繪製多邊形,點位則都是在y軸上尋找,這種方法能夠更好的理解圖形與修改。 這張圖片是代碼執行後的結果 ...
  • 1. 概述 Proxy 用於修改某些操作的預設行為,等同於在語言層面做出修改,所以屬於一種『元編程』即對編程語言進行編程。 1.1 理解 Proxy 是在目標對象之前架設一層『攔截』,外部對對象的訪問,都需要經過該層攔截。因此在攔截中對外界的訪問進行過濾和改寫。 在Es6 中 提供了原生的 Prox ...
  • 快來點我吧 ...
  • function getCount(arr, rank,ranktype){ var obj = {}, k, arr1 = []; for (var i = 0, len = arr.length; i < len; i++) { k = arr[i]; if (obj[k]) obj[k]++;... ...
  • 博客園美化博客隨筆目錄 基於 在`2014 5 11`寫的目錄代碼基礎上進行改進 一.js代碼 二.css代碼 三.展示效果 未打開狀態 展開效果 hover效果 三.在原先的基礎上解決的bug 1.目錄由於其他js導致沒法載入(最主要修改的內容) 2.修改了樣式 3.修改了hover樣式讓他看起來 ...
一周排行
    -Advertisement-
    Play Games
  • 1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 視頻地址:【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻:搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 引言 集成測試可在包含應用支持基礎結構(如資料庫、文件系統和網路)的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比,能夠在更廣泛的級別上評估應用的組件,確認多個組件一起工作以生成預 ...
  • 在.NET Emit編程中,我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作,能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令,開發人員可以靈活地進行算術運算、邏輯運算和比較操作,從而實現各種複雜的演算法和邏輯......本篇之後,將進入第七部分:實戰項目 ...
  • 前言 多表頭表格是一個常見的業務需求,然而WPF中卻沒有預設實現這個功能,得益於WPF強大的控制項模板設計,我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格,統計1-12月的數據。 此時我們有一個需求,需要將月份按季度劃分,以便能夠直觀地看到季度統計數據,以下為該需求 ...
  • 如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流,人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面,比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰,這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎? TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • 在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 在C#編程世界中,語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中,“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用,揭示其作為C#語法奇兵的重要角色。 一、下劃線 _:神秘的棄元符號 下劃線 _ 在C#中並非 ...