4.1.1加载DOM
当页面加载完成之后，浏览器会通过JavaScript为DOM元素添加事件。在常规的JavaScript代码中使用window.onload()方法，在JQuery中使用的是$(document).ready()方法。
1、执行时机
window.onload()方法是在网页中所有的元素（包括所有的关联文件）完全加载到浏览器之后才执行。
$(document).ready()方法在DOM完全就绪的时候就可以加载。
$(document).ready()也可以简写成$();，默认的参数就是document.
4.1.2事件绑定
在文档加载完成以后如果需要对一个元素绑定事件可以使用bind()方法实现。bind()方法的调用格式为：bind(type[,data],fn);
bind()方法有三个参数，解释说明如下：
第一个参数是事件类型,参数类型包括：blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup和error.
第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象。
第三个参数是用来绑定处理的函数。
1、基本效果
程序实例：
HTML代码：
<div id="panel">CSS代码：
<h5 class="head">什么是JQuery?</h5>
<div class="content">
JQuery是继prototype之后又一个优秀的JavaScript库。
</div>
</div>
#panel{
width: 300px;
height: 100px;
background-color: greenyellow;
}
.content{
width: 300px;
height: 70px;
background-color: orange;
display: none;
}
JavaScript代码：
$(document).ready(function () {
$(function () {
$("#panel h5.head").bind("click", function () {
$(this).next().show();
});
});
});
2、加强效果
4、简写绑定事件
程序实例：
$(function () {
$("#panel h5.head").mouseover(function () {
$(this).next().show();
}).mouseout(function () {
$(this).next().hide();
});
});
4.1.3合成事件
JQuery有两个合成事件——hover()方法和toggle()方法。这两个方法都是JQuery的自定义方法。
1、hover()方法
hover()方法的语法结构为：
hover(enter,leave);
hover()方法用来模拟鼠标悬停事件，当鼠标移动到元素上面的时候就会触发enter函数，当鼠标从元素上离开的时候就会触发leave函数。
hover()方法程序实例：
$(function () {
$("#panel h5.head").hover(function () {
$(this).next().show();
}, function () {
$(this).next().hide();
});
});
注意：hover()方法准确的来说是替代了JQueryz中的bind("mouseenter")和bind("mouseleave")而不是代替bind("mouseover")和bind("mouseout").
2、toggle()方法
toggle()方法的语法结构：
toggle(function1,function2.......functionN);//当鼠标点击元素的时候每点击一次就会触发一个函数，依次进行。
4.1.4事件冒泡
1、停止事件冒泡
stopPropagation()方法
程序实例：
//为span元素绑定click事件
$("span").bind("click", function () {
var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
$("#msg").html(txt);
event.stopPropagation();//阻止冒泡事件
});
2、阻止默认行为
在JQuery中使用preventDefault()方法来阻止默认元素的行为。
$(function () {
$("#sub").bind("click", function () {
var username=$("#username").val();
if(username=""){
$("#msg").html("<p>用户名为空。</p>");
event.preventDefault();
}
});
});
3、事件捕获
事件捕获和事件冒泡刚好是相反的两个过程，事件捕获是从最顶端向下触发。JQuery不支持事件捕获，并不是所有的浏览器都行支持事件捕获，所以需要事件捕获的时候可以编写原生JavaScript程序来实现。
4.1.5事件对象的属性
（1）event.type
该方法是获取事件的类型。程序实例：
$("a").click(function (event) {
alert(event.type);
return false;
});
（2）event.preventDefault方法
JavaScript中符合W3C规范的preventDefault()方法在IE浏览器中无效，JQuery对其进行了封装保证了兼容性。
（3）event.stopPropagation方法
JavaScript中符合W3C规范的event.stopPropagation()方法在IE浏览器中无效，JQuery对其进行了封装保证了兼容性。
（4）event.target方法
event.target方法是获取触发事件的元素。
$("a[href='http://www.baidu.com']").click(function (event) {
vat tg=event.target;
alert(tg.href);
return false;
});
（5）event.relatedTarget
event.relatedTarget是用来获取发生mouseover和mouseout事件的相关属元素。
（6）event.pageX和event.pageY
该方法是用来获取光标相对于页面的x和y坐标。
（7）event.which
该方法是鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘按键。
（8）event.metaKey
改方法是用于获取键盘的<Ctrl>键。
4.1.6移除事件
（1）unbind()方法可以用来移除已经绑定的事件。
unbind()的语法结构：
unbind([type],[data]);//第一个参数是事件类型，第二个是将要移除的函数。
（1）如果没有参数就删除所有的绑定事件。
（2）如果只提供了事件类型，只删除该类型的事件。
（2）移除<button>元素中的一个事件。
程序实例：
$(function () {
$("#btn").bind("click", myfun1=function () {
$("#test").append("<p>我的绑定函数1</p>");
}).bind("click", myfun2=function () {
$("#test").append("<p>我的绑定函数2</p>");
}).bind("click", myfun3=function () {
$("#test").append("<p>我的绑定函数3</p>");
});
$("#delAll").click(function () {
$("#btn").unbind("click",myfun2);
});
})
对于只需要单击一次随后就解除绑定的情况，JQuery提供了one()方法，one()方法可以为元素绑定事件，触发一次以后就自动解除绑定，以后的单击是无效的。
4.1.7模拟操作
1、常用模拟
JQuery中可以使用trigger()方法来完成模拟操作。程序实例如下：
$("#btn").trigger("click");//对按钮元素模拟点击事件，当页面加载完成以后就触发点击事件。
2、触发自定义事件
程序实例如下：
1、先为元素绑定一个事件
$("#btn").bind("myClick",function(){
alert("按钮被点击了。");
});
2、触发自定义事件
$("#btn").trigger("myClick");
3、传递数据
tigger(type,[data])方法有两个参数，第一个参数是要触发的事件类型，第二个是传递给函数的附加数据，以数组的形式传递。
4.2JQuery中的动画
4.2.1show()方法和hide()方法
1、show()方法和
hide()方法可以用来控制元素的显示和隐藏。
2、show()方法和hide()方法让元素动起来。
程序实例：$("div").show(时间);//其中的时间指的是元素显示或者消失所用的时间，是一个动态效果。
3、hide()方法是将dispaly属性设置为“none”,在此之前会记住原来的display属性值（“block”，“inline”或者其他除了“none”之外的属性值）。当调用show()方法的时候根据记住的属性值显示元素。
4.2.2fadeIn()和fadeOut()方法
fadeIn()和fadeOut()方法改变的是元素的透明度。也就是淡入淡出。
4.2.3slideDown()和slideUp()方法
slideUp()和slideDown()方法只是改变元素的高度。
注意：JQuery中的任何动画效果，都可以指定3种速度参数，即“slow”,"normal","fast"(时间长度分别是0.6秒，0.4秒，0.2秒)。当使用速度关键字的时候需要加引号，如果数字作为时间参数可以不用加引号。
4.2.4自定义动画法animate()
show()方法和hide()方法会同时修改元素的多个属性，即高度，宽度，不透明度；fadeOut()和fadeIn()方法只是修改了元素的透明度。slideUp()和slideDown()方法只是修改了元素的高度。
如果需要动画有更多的控制，可以使用animate()方法来自定义动画解决问题。
animate()的语法结构：
animate(params,speed,callback);
参数说明：
(1)params:一个包含样式属性以及值得映射，比如：{property1:"value1",property2:"value2",.....}
(2)speed:速度参数，可选
(3)callback:在动画完成之后调用的函数，是可选参数
1、自定义简单动画
为了能使用animate()属性改变元素的“top”，“left”，“bottom”，“right”样式属性，必须将元素的position属性值设置成“relative”或者“absolute”。
程序实例：
$(function () {
$("div").click(function () {
$(this).animate({left:"500px"},3000);
});
})
2、累加、累减动画
程序实例：
$(function () {
$("div").click(function () {
$(this).animate({left:"-=500px"},3000);
});
})
3、多重动画
（1）同时执行多个动画
程序实例：
$(function () {
$("div").click(function () {
$(this).animate({top:"500px",height:"400px"},1000);
});
})
（2）按顺序执行多个动画
程序实例：
$(function () {
$("div").click(function () {
$(this).animate({left:"300px"},2000)
.animate({width:"600px"},2000);
});
})
4、综合动画
$(function () {
$("div").css("opacity","0.5");
$("div").click(function () {
$(this).animate({left:"400px",height:"200px",opacity:"1"},2000)
.animate({top:"200px",width:"200px"},1000).fadeOut("fast");
});
});
4.2.5动画回调函数
程序实例：
$(function () {
$("div").css("opacity","0.5");
$("div").click(function () {
$(this).animate({left:"400px",height:"200px",opacity:"1"},2000)
.animate({top:"200px",width:"200px"},1000, function () {
$(this).css("border","10px solid green");
});
});
});
4.2.6停止动画和判断是否处于动画状态
1、停止元素的动画
当需要停止匹配元素正在发生的动画的时候，可以使用stop()方法实现。stop()方法的语法结构如下：
stop([clearQueue],[gotoEnd]);
参数clearQueue和gotoEnd都是可选参数，都是Boolean值。clearQueue代表是是否清空未执行完的动画队列，gotoEnd代表是否将正在执行的动画直接跳转到末尾状态。
程序实例：
$(function () {
$("div").hover(function () {
$(this).stop().animate({height:"500",width:"300"},200);
}, function () {
$(this).stop().animate({height:"220",width:"500"},300);
});
})
2、判断元素是否处于动画状态
判断元素是否处于动画状态的方法：
程序实例：
alert($("div").is(":animated"));
3、延迟动画
实现动画的延迟效果使用delay()方法就可以实现。
程序实例：
$(function () {
$("div").click(function () {
$(this).animate({left:"400px",height:"200px",opacity:"1"},1000)
.delay(3000)//延迟3秒执行下一个动画
.animate({top:"200px",width:"200px"},1500)
.delay(1500)//延迟1.5秒执行下一个动画
.fadeOut("slow");
});
})
4.2.7其他动画方法
1、toggle()方法
toggle()方法可以切换元素的可见状态，就像一个开关一样。
2、slideToggle()方法
3、fadeTo()方法
fadeTo()方法可以将元素从不透明渐变到指定的透明度。
4、fadeToggle()方法
4.2.8动画方法概括
| 方法名称 |
说明
|
|
hide()和show()
| 同时修改样式属性包括高度、宽度、不透明度 |
|
fadeIn()和fadeOut()
| 只改变不透明度 |
|
slideUp()和slideDown
|
只改变高度
|
|
fadeTo()
| 只改变透明度 |
|
toggle()
| 用来代替hide()和show()，同时修改样式属性包括高度、宽度、不透明度 |
|
slideToggle()
|
用来代替slideDown()和slideUp()两种方法，只改变高度
|
| fadeToggle() | 代替fadeIn()和fadeOut()，只是改变透明度 |
|
animate()
| 自定义动画 |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
