绑定事件
语法：jQuery对象.bind(“事件名”，可选参数，事件处理函数);
tip:1.第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象。
2.事件名不要加on，如单击事件是click,不是onclick
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示事件</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#panel {
width: 300px;
border: 1px solid #0050D0;
}
.head {
padding: 5px;
background: #96E555;
cursor: pointer;
}
.content {
padding: 10px;
text-indent: 2em;
border-top: 1px solid #0050D0;
display: none;
}
</style>
<script src="../../jsjava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//需求: 点击标题后 显示 标题下面的div
$("#panel h5.head").bind("click",function(){
//让标题下面的div显示
$(this).next().show(5000);
//show("fast") 0.2s;show("normal") 0.4s; show("slow") 0.6s;没有参数没有动画效果，直接显示
});
//取消事件
$("#panel h5.head").unbind("click");
});
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>取消绑定
语法：jQuery对象.unbind(“click”); 或 jQuery对象.unbind(“click”,函数名) jQuery对象可以绑定多个事件，第二个可以指定函数名字取消绑定。
js代码：
$(function () {
//可以绑定多个事件
$("#btn1").bind("click",f1 = function () {
alert('111');
}).bind("click",function () {
alert(222);
});
//只执行一次
$("a").one("mouseover",function () {
alert("第一次移入有此效果，之后不再有");
});
//打开网页执行，不加#，每次都加载当前网页，只执行一次的事件执行了多次，
//加#后，虽然网页内内容不改变，但相当于跳转到了另一个网页，上面事件只执行一次
// $("a").trigger("click");
$("#btn2").bind("click",function () {
//取消绑定可以指定函数名
$("#btn1").unbind("click",f1);
});
$("#btn3").bind("click",function () {
// alert($(this).next());
// $(this).next().show(3000);
if($("#div1").is(":visible")){
$(this).next().hide(3000);
}else{
$("#div1").show(3000);
}
});
});
css代码：
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color: yellow;
display:none;
/*visibility: hidden;*/
}
</style>
html代码：
<input type="button" name="btn1" id="btn1" value="点我" />
<input type="button" name="btn2" id="btn2" value="移除事件，取消绑定" />
<a href="#">超链接</a>
<input type="button" name="btn3" id="btn3" value="显示" /><div id="div1" >我是div1</div>只执行一次事件
语法：如上例， 对象.one(“事件名”，事件处理函数);
触发某一事件
语法：对象.trigger(“click”); 相当于自动执行对象.click();
div的显示和隐藏
显示：div.show(“slow”) //0.6s ;”normal”是0.4s,“fast”是 0.2s。也可以传入毫秒数作为参数。显示的方式是从左到右，从上到下依次增大（展开）。
隐藏：div.hide()，可以传入动画完成的时间：毫秒数
改变绑定事件的类型
可以级联绑定mouseover 和 mouseout 事件。
示例：
<script type="text/javascript">
$(function() {
$("#panel").bind("mouseover",function () {
$(this).find("div.content").show();
}).bind("mouseout",function () {
$(this).find("div.content").hide();
});
});
</script>两个合成事件
一、hover( )方法
hover(enter,leave)；相当于两个函数，第一个是移入，第二个是移出。
示例：
<script type="text/javascript">
$(function() {
$("#panel").hover(function () {
$(this).find("div.content").show();
},function () {
$(this).find("div.content").hide();
});
});
</script>二、toggle( )方法
toggle(开,关)类似于开关，对单击事件合成，1.9以后废弃，对div的toggle()，目前版本也支持，例：$div.toggle();//点一下显示或隐藏
$(function() {
//加强效果，高亮显示
//需求: 点击标题后 显示 标题下面的div
$("#panel").click(function() {
$(this).find("div.content").toggle();
$(this).find("h5").toggleClass("highlight");
});
//1.9以后废弃
// $("#panel h5.head").toggle(function(){
// //让层显示
// $(this).next().show();
// },function(){
// //让层隐藏
// $(this).next().hide();
// });
});动画
（1）内置动画
1）show() 和 hide()
<script type="text/javascript">
$(function() {
$("#panel").hover(function () {
$(this).find("div.content").show();
},function () {
$(this).find("div.content").hide();
});
});
</script>2）fadeIn() 和 fadeOut() 淡入淡出效果
<script type="text/javascript">
$(function() {
$("#panel").hover(function () {
$(this).find("div.content").fadeIn(2000);
},function () {
$(this).find("div.content").fadeOut(2000);
});
});
</script>3）slideUp() 和 slideDown()收缩、展开效果
<script type="text/javascript">
$(function() {
//动画积累,动画中的效果叠加
var $div = $("div.content");
if(!$div.is(":animated")){//div不处于动画状态
$("#panel").hover(function () {
$(this).find("div.content").slideDown(3000);
},function () {
$(this).find("div.content").slideUp(3000);
});
}
});动画积累：当前动画过程中触发事件，进行其他动画，效果叠加，可以加条件：if(!$div.is(“:animated”)) ,判断div是否处于动画效果，不处于动画效果，可以显示和隐藏。
（2）自定义动画
1.自定义简单动画
animate({left:"500px"},3000,function(){alert(3);});
参数1：让div向右移动500px
参数2：移动所需的时间(可以省略)
参数3: 移动完成调用回调函数(可以省略)
完整演示代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示事件</title>
<style type="text/css">
#panel {
width:100px;
height:100px;
background-color:yellowgreen;
position:relative;
cursor:pointer;
}
</style>
<script src="../../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#panel").click(function(){
$(this).animate({left:"500px"},3000,function(){
$(this).fadeOut(2000);
});
});
});
</script>
</head>
<body>
<div id="panel">
保存成功
</div>
</body>
</html>
2.多重动画
(1)同时执行多个动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示事件</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#img1 {
position:relative;
}
</style>
<script src="../../../js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#img1").click(function(){
$(this).animate({left:"500px",height:"200px"},3000);
});
});
</script>
</head>
<body>
<img id="img1" src="../../../image/smile.png"/>
</body>
</html>
(2)按顺序执行多个动画
上例中是移动和调整宽度同时进行,如果想按顺序执行动画,例如先向右滑动,然后再放大它的高度,只需把代码拆开
$(function() {
$("#img1").click(function(){
$(this).animate({left:"500px"},3000);
$(this).animate({width:"200px"},3000);
});
});
因为animate都是对同一个jQuery对象操作的,也可以改为链式操作
$(function() {
$("#img1").click(function(){
$(this).animate({left:"500px"},3000).
animate({width:"200px"},3000);
});
});
像这样动画效果的执行具有先后顺序,称为”动画队列”.
3.综合动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示事件</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#panel {
width:100px;
height:100px;
background-color: burlywood;
position:relative;
}
</style>
<script src="../../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#panel").css("opacity","0.5");//设置不透明度
$("#panel").click(function(){
$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000)
.fadeOut("slow");
});
});
</script>
</head>
<body>
<div id="panel">
</div>
</body>
</html>
4.动画回调函数
如果想在最后一步切换元素的CSS样式,而不是隐藏元素.
需要把最后fadeOut(“slow”) 改为 .css("border","5px solid blue");
但是这样并不能得到预期效果,预期效果是在动画的最后一步改变元素的样式,而实际效果是刚开始执行的时候,css()方法就执行了.出现这个问题的原因是css()方法并不会加入到动画队列中,而是立即执行.可以使用回调函数(callback)对非动画方法实现排队.只要把css()方法写在最后一个动画的回调函数里即可.代码如下:
$(function() {
$("#panel").css("opacity","0.5");//设置不透明度
$("#panel").click(function(){
$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000,function(){
$("#panel").css("border","5px solid blue");
});
});
});
5.停止动画
$("#btn1").click(function(){
$("#panel").stop();//只能停止一个动画
});
6.延迟动画
$(function() {
$("#panel").css("opacity","0.5");//设置不透明度
$("#panel").click(function(){
$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
.delay(3000)
.animate({top:"200px",width:"200px"},3000,function(){
$("#panel").css("border","5px solid blue");
});
});
//停止动画
$("#btn1").click(function(){
$("#panel").stop();
});
});（3）其它动画方法
toggle()、slideToggle()、fadeTo()和fadeToToggle();
fadeTo() 把元素的不透明度调整到指定的值
$(function() {
//需求: 点击标题后 显示 标题下面的div
$("#panel h5.head").click(function(){
$(this).next().fadeTo(600,0.2);//600毫秒 不透明度调整到0.2
});
})
在css中调整不透明度
.content {
padding: 10px;
text-indent: 2em;
border-top: 1px solid #0050D0;
background-color: rgba(255,0,0,0.5);//alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
}
fadeToToggle(); 对应fadeIn()和fadeOut()
1332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
