jquery事件都有哪些(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事件都有哪些的詳細內容，更多請關注風君子博客其它相關文章！
總結
以上是生活随笔為你收集整理的jquery事件都有哪些(jQuery)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 总结一些写毕业论文背景研究可以参考的资源
- 下一篇： 摄影人像三要素是指什么？(新手如何系统性