jQuery事件
一,页面加载完成执行事件
语法1:$(document).ready(function(){ ..... });
语法2:$(function(){ ... });
与window.onload的区别:
(1)window.onload在页面中只能出现一个
(2)window.onload在页面全部加载完成时执行的,jQuery的加载完成事件是在dom数加载完毕时,就开始执行了
同时引用两个库的时候:
用以下办法声明是jQuery在执行$的工厂函数
jQuery(document).ready(function($){//表示的是jQuery的工厂函数})
二,事件绑定
语法:
$(" ").bind(" 事件名称 ",function(){ ... });
简写:
$(" ").事件名称(function(){ ... });
例如:
三,事件解绑
语法:
$(" ").unbind(" 事件名称 "); 解绑事件对应的所有函数
$(" ").unbind(" 事件名称 ",fn1); 解绑事件对应的fn1函数,其他函数还是可以执行
四,事件对象
事件的参数对象,可以用来获取鼠标点击的位置、键盘按下的键、事件源等
语法:
$(" ").bind(" 事件名称 ",function(event){ ... });
例如:
event.target 获取事件源,this也是事件源
event.pageX
event.pageY
注意:获取的事件源是DOM对象
事件冒泡的阻止 event.stopPropagation()
五,动画
基本显示
hide(speed,fn) 隐藏函数,speed事件完成的事件毫秒,fn事件完成后的回调函数
show(speed,fn)显示函数,speed事件完成的事件毫秒,fn事件完成后的回调函数
slideUp()
slideDown()
fadeOut()
fadeIn()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div{
width:200px;
height:500px;
background:red;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
$("#ipt2").hide();
$("#ipt1").bind("click",function () {
$("#div").hide(3000,function () {
$("#ipt1").hide();
$("#ipt2").show();
});
});
$("#ipt2").bind("click",function () {
$("#div").show(3000,function () {
$("#ipt2").hide();
$("#ipt1").show();
});
});
});
</script>
</head>
<body>
<div id="div"></div>
<input id="ipt1" value="hide" type="button">
<input id="ipt2" value="show" type="button">
</body>
自定义动画
$(" ").animate({},speed,fn) {}需要的动作集合。speed完成时间。fn动画完成的回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div{width: 100px;height: 200px;background: red;position:absolute;left: 0;top: 80px;}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
$("input").bind("click",function () {
$("#div").animate({width:"400px",height:"600px",left:"200px",top:"200px"},3000,function () {
alert("change big")
}).animate({width:"200px",height:"300px",left:"160px",top:"50px"},3000,function () {
alert("change small")
});
});
});
</script>
</head>
<body>
<div id="div"></div>
<input type="button" value="click Me">
</body>
</html>