jQuery 事件

文献种类：专题技术总结文献；
开发工具与关键技术：DW与 JavaScript
作者： 熊江宇 ；年级： 熊江宇 ；撰写时间： 2020 年 5 月 4 日

JavaScript对象总结

开发工具与关键技术：Adobe Dreamweaver JavaScript作者：熊江宇撰写时间：2020年4月20日

页面载入 ：ready(fn)
/*当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用
你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
注意： 可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
参数说明：fn 要在DOM就绪时执行的函数
在DOM加载完成时运行的代码，可以这样写：
jQuery 代码:
$(document).ready(function(){
// 在这里写你的代码…
});

使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。jQuery 代码:$(function($) {// 你可以在这里继续使用$作为别名...});

例如：
$(document).ready(function () {

});$(function () {});window.onload = function () {//window.onload 只能一个$(\"body\").append(\"<h2>hello everyone!1111</h2>\");}$(document).ready(function () {//$(document).ready()可以使用多次$(\"body\").append(\"<h2>hello everyone!</h2>\");});$(function ($) {//$(document).ready()的简写$(\"<p>这是一个段落标签</p>\").appendTo($(\"body\"));});

jQuery鼠标事件
/*
jQuery鼠标事件列表：
click 单击事件 dbclick 双击事件
mousedown 鼠标按下事件 mouseup鼠标弹起事件
mouseenter 鼠标进入事件 mouseleave 鼠标离开事件
/
//jQuery鼠标事件之click与dbclick事件
/
click([[data], fn])
参数说明：fn 在每一个匹配元素的click事件中绑定的处理函数。
data:click([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的click事件中绑定的处理函数。
dblclick([[data],fn]) 参数说明同上
*/
//第一个按钮的点击事件
例如： $(“button:eq(0)”).click(function () {
alert(“jQuery鼠标事件之click单击事件”);

例如：$(\"button\").eq(0).click(function(){})$(\"button:first\").click(function () { alert(\"12\") });$(\"button\").first().click(function () { });});

jQuery鼠标事件之hover事件
/*hover([over,]out)
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。参数说明：over,out：over:鼠标移到元素上要触发的函数out:鼠标移出元素要触发的函数out当鼠标移到元素上或移出元素时触发执行的事件函数

例如： $(\”.divContent\”).hover(
function () {//hover的第一个函数：鼠标移入的时候触发事件
$(this).addClass(“changeColor”);//添加一个类
},
function () {//hover的第二个函数：鼠标移出的时候触发事件
$(this).removeClass(“changeColor”);//移除类
});