让网页华丽丽的动起来——jQuery事件之旅（码神学习第二十五天）

来源：互联网发布：阿里云 lnmp 无法访问编辑：程序博客网时间：2024/05/29 07:12

让网页华丽丽的动起来——jQuery事件之旅

码神学习第二十五天

jQuery是一个快速，小，和功能丰富的JavaScript库。

它使得诸如HTML文档遍历和操作、事件处理、动画和Ajax的一个易于使用的API，可以在众多的浏览器更简单。

1、jQuery事件：

页面对不同访问者的响应叫做事件。事件处理程序指的是当HTML中发生某些事件时所调用的方法。

在jQuery中，大多数DOM（Document Object Model，文档对象模型，定义访问和处理HTML文档的标准语法。）

常用的jQuery事件方法：

（1）文档就绪事件：

防止文档在完全加载之前运行jQuery代码。

①标准形式：

$(document).ready(function(){<span style="white-space:pre"></span>//开始写jquery代码});

②简单形式：

$((function(){<span style="white-space:pre"></span>//开始写jquery代码});

以上两种方式实现文档就绪后执行jQuery方法。

（2）鼠标事件：

①click：点击元素时

②dbclick：双击元素时

③mouseenter：鼠标指针穿过元素

④mouseleave：鼠标指针离开元素

代码示例：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-3.1.0.js"></script><script type="text/javascript">$(document).ready(function(){$("#button1").click(function(){$("#paragraph1").slideToggle();});$("h3").dblclick(function(){$(this).hide();});$("#button2").click(function(){$("#paragraph2").mouseenter();});$("#button3").click(function(){$("#paragraph2").mouseleave();});$("#paragraph2").mouseleave(function(){$("#paragraph2").css("background-color","#D5D5D5");});$("#paragraph2").mouseenter(function(){$("#paragraph2").css("background-color","red");});});</script></head><body><button id="button1">切换</button><p id="paragraph1">click方法测试</p><hr /><h3>当前标题双击隐藏</h3><hr /><p id="paragraph2" style="background-color:#D5D5D5">把指针移到这背景会变红</p><button id="button2">点击此处触发mouseenter事件</button></br><button id="button3">点击此处出发mouseleave事件</button></body></html>

运行结果：

（3）键盘事件：

完整的key press过程包括两部分，按键被按下，然后按键被松开并复位。

①keypress：每插入一个字符。就会发生keypress事件。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。

②keydown：按钮被按下

③keyup：按钮被松开

代码示例：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>1</title><script type="text/javascript" src="js/jquery-3.1.0.js" ></script><script type="text/javascript">var i = 0;$(document).ready(function(){$("input").keypress(function(){$("span").text(i+=1);});$("input").keydown(function(){$("input").css("background-color","yellow");});$("input").keyup(function(){$("input").css("background-color","cyan");});$("#button1").click(function(){$("input").keydown();});$("#button2").click(function(){$("input").keyup();});});</script> </head><body><label>Enter your name:</label><input type="text" name="name" /><p>Keypresses:<span>0</span></p><p>当发生keydown和keyup时，输入框会变色</p><button id="button1">keydown按钮</button><button id="button2">keyup按钮</button></body></html>

运行结果：

（4）表单事件：

①blur：当元素失去焦点时

②change：仅适用于文本域（text field），textarea和select元素，当元素的值发生改变时，会发生change事件。

③focus：当通过鼠标点击选中元素或通过tab键定位到元素时，该元素就会获得焦点。

④submit：当提交表单时

代码示例：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表单事件学习</title><script type="text/javascript" src="js/jquery-3.1.0.js" ></script><script type="text/javascript">$(document).ready(function(){$("form").submit(function(e){alert("提交成功");});$("#myinput").focus(function(){$("#myinput").css("background-color","cyan");});$("#myinput").blur(function(){$("#myinput").css("background-color","red");});});</script></head><body><form>账号：<input type="text" id="myinput"/><br />密码：<input type="password" /><br><input type="submit" value="提交"/></form></body></html>

运行结果：

（5）文档、窗口事件：

①load：当指定的元素已加载时，会发生load（）事件。适用于任何带有URL的元素。

②resize：调整浏览器窗口的大小时

③scroll：当用户滚动指定的元素时

④unload：当用户离开页面时，包括：点击某个离开页面的链接，在地址栏键入了新的URL，使用前进或后退按钮，关闭浏览器，重新加载页面。

代码示例：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文档、窗口事件学习</title><script type="text/javascript" src="js/jquery-3.1.0.js" ></script><script type="text/javascript">var i=0; var j=0;$(document).ready(function(){//  $("img").load(function(){//    $("#loaddiv").text("图像已加载");//  });  $("#scroll").scroll(function(){  $("#span1").text(i+=1);   });  $(window).resize(function(){  $("#span2").text(j+=1);  })});</script></head><body><img src="img/case1.jpg" /><div id="loaddiv">图像正在加载中 ...</div><p><b>注释：</b>根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。</p> <p>请试着滚动 DIV 中的文本：</p><div id="scroll" style="width:200px;height:100px; overflow:scroll;">text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. <br /><br />text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.</div><p>滚动了 <span id="span1">0</span> 次。</p><hr /><p>调整浏览器大小</p><p>调整了<span id="span2">0</span>次</p></body></html>

运行结果：

6 0