JQuery事件学习
目录:
1、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>
运行结果:
图1.1 截图1
(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>
运行结果:
图1.2 截图2
(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>
运行结果:
图1.3 截图3
(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>
运行结果:
图1.4 截图4