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 加载完后立即执行，而不需要等待全部元素加载完才执行。