首頁 > web前端 > 前端問答 > jquery事件都有哪些

jquery事件都有哪些

WBOY
發布: 2022-06-13 16:53:19
原創
5434 人瀏覽過

jquery事件:1、滑鼠事件,包括click點擊事件、mouseover事件等;2、鍵盤事件,包括keydown按下按鍵、keyup釋放按鍵等;3、表單事件,包括focus獲得焦點、 blur失去焦點等;4、綁定事件,bind綁定事件;5、複合事件,包括hover方法觸發事件、toggle()方法觸發事件等等。

jquery事件都有哪些

本教學操作環境:windows10系統、jquery3.4.1版本、Dell G3電腦。

jquery事件有哪些

jQuery事件是JavaScript事件的封裝,常用事件如:滑鼠事件,鍵盤事件,表單事件,綁定事件,複合事件等等

1.滑鼠事件

方法如下

click() :點選事件、觸發或將函數綁定到指定元素的click事件

mouseover(): 觸發或將函數綁定到指定元素的mouseover事件

mouseout() :觸發或將函數綁定到指定元素的mouseout的事件

#程式碼範例:

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

2.鍵盤事件:

方法如下:

keydown(): 按下按鍵時、觸發或將函數綁定到指定元素的keydown事件

keyup(): 釋放按鍵時、觸發或將函數綁定到指定元素的keyup事件

keypress(): 產生可列印的字元時、觸發或將函數綁定到指定元素的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("确认要提交么?");
            }
        });
    });
登入後複製

#3.表單事件:

方法如下:

focus() : 取得焦點、觸發或將函數綁定到指定元素的focus事件

blur() : 失去焦點、觸發或將函數綁定到指定元素的blur事件

#程式碼範例:

// 查询输入框
  $("input[name='search']").focus(function(){
   $(this).val(""); 
  });
  $("input[name='search']").blur(function(){
   $(this).val("请输入要查询的问题"); 
  });
登入後複製

2、

 $(function () {
 //给文本框添加边框样式
     $("input").focus(function() {
          $(this).addClass("myclass");
        }).blur(function() {
          $(this).removeClass("myclass");
    });
  });
登入後複製

4、綁定事件:

語法解析:

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

type:事件類型、主要包括blur、focus、click、mouseout等基礎事件,此外也還可以是自訂事件

fn : 用來綁定的處理函數

程式碼範例:

綁定一個、

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

綁定多個、

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

移除方法:

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

unbind如果要移除多個只要在兩兩之間新增一個空格即可

程式碼範例:

 $(function () {
            $("li").unbind("click");
            $("li").unbind("mouseover mouseout");
    });
登入後複製

注意:當unbind()不帶參數時,表示移除所綁定的全部事件

5、複合事件

hover()方法

語法:hover(enter,leave);

此方法相當於mouseover與mouseout事件的組合

程式碼範例:

$("li").hover(function() {
               $("li").css("background", "gray");
           }, function() {
               $("li").css("background", "green");
           });
登入後複製

toggle()方法

toggle()方法用於模擬滑鼠連續click事件

程式碼範例:

$("body").toggle(
function () { }, //第一次点击触发
function () { }, //第二次点击触发
function () { } //第三次点击触发
...     //...
);
登入後複製

同時toggle()方法還有一個作用:切換元素可見狀態

$('input').toggle( 
  function () {
  $('ul').toggle(); //是显示的则隐藏,是隐藏的则显示
  },
  function () {
   $('ul').toggle(); //是显示的则隐藏,是隐藏的则显示
  }
 );
登入後複製

影片教學推薦:jQuery視頻教程

以上是jquery事件都有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板