jQuery 事件
jQuery 事件
什么是事件?
事件是相关操作产生的结果或响应。在Web应用程序中,事件可以是用户的交互,例如击键、单击、鼠标移动等,也可以是网络通信或用户位置变化等。jQuery 是一个开源的JavaScript 库,它提供了一系列事件处理方法,以方便开发人员管理和响应这些事件。
jQuery 事件处理程序
事件处理程序即指你想要网页某个元素响应某个事件后调用的方法。jQuery 已经简化了事件处理程序的定义和操作。事件处理程序是在 jQuery 中仅仅是JavaScript 函数。在 $() 或 jQuery() 中传递事件处理程序即可。
$(document).ready(function() {
$("button").click(function() {
console.log('button clicked');
});
});
jQuery 事件绑定
如果网页元素需要响应多个事件,你可以把这些事件都绑定到同一个元素上,使用 jQuery 的 on() 方法。
$(document).ready(function() {
$("button").on({
mouseenter: function() {
$(this).css("background-color", "lightgray");
},
mouseout: function() {
$(this).css("background-color", "white");
},
click: function() {
console.log("Button clicked.");
}
});
});
jQuery click() 方法
jQuery 提供了一个 click() 方法,可以为网页元素的单击事件绑定处理程序。
$(document).ready(function() {
$("button").click(function() {
console.log("Button clicked.");
});
});
jQuery ready() 方法
ready() 方法是为了确保 DOM(文档对象模型)已经加载完后再执行 JavaScript 脚本。
$(document).ready(function() {
console.log("DOM is loaded.");
});
jQuery hover() 方法
hover() 方法用于设置当鼠标指向该元素,将要执行的两个事件处理程序。
$(document).ready(function() {
$("p").hover(function() {
$(this).css("background-color", "yellow");
}, function() {
$(this).css("background-color", "white");
});
});
jQuery focus() 方法
focus() 方法用于设置当元素获得焦点时,将要执行的事件处理程序。
$(document).ready(function() {
$("input").focus(function() {
$(this).css("background-color", "#ddd");
});
});
jQuery blur() 方法
blur() 方法用于设置当元素失去焦点时,将要执行的事件处理程序。
$(document).ready(function() {
$("input").blur(function() {
$(this).css("background-color", "#white");
});
});
jQuery load() 方法
当网络请求响应完成后,load() 方法会在指定的元素内插入新内容。
$(document).ready(function() {
$("#div1").load("https://www.baidu.com");
});
jQuery resize() 方法
resize() 方法每当浏览器窗口大小改变时,就会触发事件处理程序。
$(window).resize(function() {
console.log("Window resized.");
});
jQuery scroll() 方法
scroll() 方法在滚动元素时触发事件处理程序。
$(window).scroll(function() {
console.log("Window scrolled.");
});
jQuery ready() 方法和 window.onload 方法的区别
window.onload 事件处理程序必须要在页面所有元素都加载完之后,才会被执行。如果页面中有大量元素,这可能需要很长时间。但是 ready() 方法会在 DOM 加载完成后立即执行。
window.onload = function() {
console.log("Window loaded.");
};
$(document).ready(function() {
console.log("DOM is loaded.");
});
总结
jQuery 提供了一系列强大的事件处理方法,用于管理和响应各种事件。根据不同的情况,我们可以使用 click()、on()、hover()、focus() 等方法来绑定事件处理程序。同时,ready() 方法可以确保 JavaScript 脚本在 DOM 加载完后立即执行,而不需要等待全部元素加载完才执行。