jquery事件：1、鼠標(biāo)事件，包括click單擊事件、mouseover事件等；2、鍵盤(pán)事件，包括keydown按下按鍵、keyup釋放按鍵等；3、表單事件，包括focus獲得焦點(diǎn)、blur失去焦點(diǎn)等；4、綁定事件，bind綁定事件；5、復(fù)合事件，包括hover方法觸發(fā)事件、toggle()方法觸發(fā)事件等等。

本教程操作環(huán)境：windows10系統(tǒng)、jquery3.4.1版本、Dell G3電腦。

jquery事件都有哪些

jQuery事件是對(duì)JavaScript事件的封裝，常用事件如：鼠標(biāo)事件，鍵盤(pán)事件，表單事件，綁定事件，復(fù)合事件等等

1.鼠標(biāo)事件

方法如下

click() :單擊事件、觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的click事件

mouseover(): 觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mouseover事件

mouseout() ：觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的mouseout的事件

代碼示例：

 $(function () {             $("input").click(function () {                 $("li").mouseover(function () {                     $(this).css("background", "green");                 }).mouseout(function () {                     //this.style.background = "";                     this.style.cssText = "background:";                 });             });         });

2.鍵盤(pán)事件：

方法如下：

keydown(): 按下按鍵時(shí)、觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的keydown事件

keyup(): 釋放按鍵時(shí)、觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的keyup事件

keypress(): 產(chǎn)生可打印的字符時(shí)、觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的keypress事件

代碼示例：

  $(function () {         $("p input").keyup(function () {             $("#events").append("keyup");         }).keydown(function () {             $("#events").append("keydown");         }).keypress(function () {             $("#events").append("keypress");         });         $(document).keydown(function (event) {             if (event.keyCode == "13") {                 //按enter鍵                 alert("確認(rèn)要提交么?");             }         });     });

3.表單事件：

方法如下：

focus() : 獲得焦點(diǎn)、觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的focus事件

blur() : 失去焦點(diǎn)、觸發(fā)或?qū)⒑瘮?shù)綁定到指定元素的blur事件

代碼示例：

// 查詢(xún)輸入框   $("input[name='search']").focus(function(){    $(this).val("");    });   $("input[name='search']").blur(function(){    $(this).val("請(qǐng)輸入要查詢(xún)的問(wèn)題");    });

2、

 $(function () {  //給文本框添加邊框樣式      $("input").focus(function() {           $(this).addClass("myclass");         }).blur(function() {           $(this).removeClass("myclass");     });   });

4、綁定事件：

語(yǔ)法解析：

bind(type,[data],fn),其中data不是必需的

type:事件類(lèi)型、主要包括blur、focus、click、mouseout等基礎(chǔ)事件，此外也還可以是自定義事件

fn : 用來(lái)綁定的處理函數(shù)

代碼示例：

綁定一個(gè)、

$("input[name=event_1]").bind("click",function() {  $("p").css("background-color","#F30"); });

綁定多個(gè)、

$("input[name=event_1]").bind({ mouseover: function () {  $("ul").css("display", "none"); }, mouseout: function () {  $("ul").css("display", "block"); } });

移除方法：

unbind([type],[fn]) 與綁定事件剛好相反,如果方法沒(méi)有參數(shù)則表示移除全部的事件

unbind如果要移除多個(gè)只需在兩兩之間添加一個(gè)空格即可

代碼示例：

 $(function () {             $("li").unbind("click");             $("li").unbind("mouseover mouseout");     });

注意：當(dāng)unbind()不帶參數(shù)時(shí)，表示移除所綁定的全部事件

5、復(fù)合事件

hover()方法

語(yǔ)法：hover(enter,leave);

該方法相當(dāng)于mouseover與mouseout事件的組合

代碼示例：

$("li").hover(function() {                $("li").css("background", "gray");            }, function() {                $("li").css("background", "green");            });

toggle()方法

toggle()方法用于模擬鼠標(biāo)連續(xù)click事件

代碼示例：

$("body").toggle( function () { }, //第一次點(diǎn)擊觸發(fā) function () { }, //第二次點(diǎn)擊觸發(fā) function () { } //第三次點(diǎn)擊觸發(fā) ...     //... );

同時(shí)toggle()方法還有一個(gè)作用：切換元素可見(jiàn)狀態(tài)

$('input').toggle(    function () {   $('ul').toggle(); //是顯示的則隱藏，是隱藏的則顯示   },   function () {    $('ul').toggle(); //是顯示的則隱藏，是隱藏的則顯示   }  );

視頻教程推薦：jQuery視頻教程