一.事件(重要)
1.jquery绑定事件
jQuery对象.bind(“事件名”,可选参数,事件处理函数)
注意:
1.第二个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象.
2.事件名不要加on
jquery对象.bind("事件名",function(){
})
需求: 点击 h5标题后,显示h5下的div
点击标题后
演示代码:
<!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="../../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//需求: 点击标题后 显示 标题下面的div
$("#panel h5.head").bind("click",function(){
//让标题下面的div显示
$(this).next().show();
});
});
</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>
2.取消绑定
1.取消click事件的所有事件处理函数
jQuery对象.unbind("click")
2.取消click事件的事件处理函数f2
jQuery对象.unbind("click",f2);
fn1=function(){} 这个也可以作为函数的参数,相当于
function(){},并且这个函数叫fn1
3.只执行一次事件
对象.one("事件名",事件处理函数);//只执行一次
4.触发某一个事件
对象.trigger("click"); //相当于 对象.click();
5.div的显示和隐藏
div.show("slow");
div.show("normal");
div.show("fast");
可见就隐藏,不可见就显示
if(div对象.is(":visible")){
div对象.hide(3000);
}else{
div对象.show(3000);
}
6.改变绑定事件的类型
mouseover
mouseout
演示代码:
$(function() {
//需求: 点击标题后 显示 标题下面的div
$("#panel").bind("mouseover", function() {
$(this).find("div.content").show();
});
$("#panel").bind("mouseout", function() {
$(this).find("div.content").hide();
});
});
或者合成一句
$(function() {
//需求: 点击标题后 显示 标题下面的div
$("#panel").bind("mouseover", function() {
$(this).find("div.content").show();
}).bind("mouseout", function() {
$(this).find("div.content").hide();
});
});
或者
$(function() {
//需求: 点击标题后 显示 标题下面的div
$("#panel").mouseover(function() {
$(this).find("div.content").show();
}).mouseout(function(){
$(this).find("div.content").hide();
});
});
选项卡的制作
演示代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>网页选项卡</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 12px/19px Arial, Helvetica, sans-serif;
color: #666;
}
.tab {
width: 240px;
}
.tab_menu {
clear: both;
}
.tab_menu li {
float: left;
text-align: center;
cursor: pointer;
list-style: none;
padding: 1px 6px;
margin-right: 4px;
background: #F1F1F1;
border: 1px solid #898989;
border-bottom: none;
}
.tab_menu li:hover {
background: #DFDFDF;
}
.tab_menu li.selected {
color: #FFF;
background: #6D84B4;
}
.tab_box {
clear: both;
border: 1px solid #898989;
height: 100px;
}
.hide {
display: none
}
</style>
<script src="../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//给所有的li绑定单击事件
var $menu_li = $("div.tab_menu li");
$menu_li.click(function(){
//1.将点击的li高亮
$(this).addClass("selected");
//并去掉其他的高亮
$(this).siblings().removeClass("selected");
//2.让对应的div显示
//点击第1个li 显示第1个div 点击第2个li 显示第2个div
//首先获得点击了第几个li
var clickedLiIndex = $menu_li.index($(this));
$("div.tab_box>div").eq(clickedLiIndex).show();
$("div.tab_box>div").eq(clickedLiIndex).siblings().hide();
});
});
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
</body>
</html>
合成事件 2个
jQuery有两个合成事件-----hover()方法和toggle()方法.
1.hover(enter,leave);
hover = mouseover + mouseout ;
hover()方法用于模拟光标悬停事件.当光标移动到元素上时,执行第一个函数(enter),当光标移出这个元素时,会触发第二个函数(leave).
上面的例子可以改写成hover()方法
演示代码:
$("#panel").hover(function() {
$(this).find("div.content").show();
},function(){
$(this).find("div.content").hide();
});
2.toggle(事件处理函数1,事件处理函数2,….); //开关函数
jQuery1.9 以后取消了toggle事件
toogle(fn1,fn2,…fnN)
toogle()方法用于模拟鼠标连续单击事件。第1次单击元素,触发第一个函数(fn1),第二次单击同一个元素,触发fn2…如果有多个函数,依次触发,直到最后一个,随后的每次单击从头开始轮番调用这几个函数。
前面的单击标题例子中,使用了如下代码:
$(function() {
$("#btn1").click(function() {
var $div1 = $("#div1");
if ($div1.is(":visible")) {
$div1.hide(3000);
} else {
$div1.show(3000);
}
});
});
虽然能实现效果,但是这种方法不是最合适的.如果需要连续单击”标题”,来达到使”内容”显示和隐藏的目的,那么很适合使用toggle()方法
演示代码:
$(function() {
//需求: 点击标题后 显示 标题下面的div
$("#panel h5.head").toggle(function(){
//让层显示
$(this).next().show();
},function(){
//让层隐藏
$(this).next().hide();
});
});
toggle()方法还有另外一个作用:切换元素的可见状态.如果元素是可见的,单击切换后则隐藏;
如果元素是隐藏的,单击切换后则为可见的.
对于层来说 div对象.toggle();//显示的层变隐藏、隐藏的层变显示
加强效果
为了能有更好的用户体验,现在需要在用户单击”标题”后,不仅显示内容,而且高亮显示”标题”。
单击标题后,标题高亮显示
为了完成这一功能,首先在CSS中定义一个高亮的样式,CSS代码如下:
.highlight {
background-color:#ff3300;
}
演示代码:
$(function() {
//需求: 点击标题后 显示 标题下面的div
$("#panel").click(function() {
$(this).find("div.content").toggle();
$(this).find("h5").toggleClass("highlight");
});
});
学生练习:京东首页,送至 ”北京”
代码见: jQuery演示代码/事件和动画/hover事件练习(送至北京).html
二.动画
(一)内置动画
1.show()和hide()
div.show("slow");//0.6秒
div.show("normal");//0.4秒
div.show("fast");//0.2秒
div.show(毫秒);
如果不加参数直接调用show() 是立即显示 没有动画效果
增加宽度(从左到右增大)、增加高度(从上到下增大),同时增加内容的不透明度
2.fadeIn()和fadeOut()淡入淡出效果
对象.fadeIn();//淡入 增加不透明度
对象.fadeOut();//淡出 减少不透明度 直到元素完全消失(display:none)
与show()方法不同,fadeIn()和fadeOut()方法只改变元素的不透明度.
3.slideUp()、slideDown()收缩、展开效果(用于层)
slideUp()、slideDown() 只会改变元素的高度
动画积累问题解决
当用户快速在某个元素上执行animate()动画时,就会出现动画积累.解决方法是判断元素是否处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,如果元素正处于动画状态不添加动画.
$(function() {
//需求: 点击标题后 显示 标题下面的div
$("#panel").toggle(function(){
if(!$("#panel").find("div.content").is(":animated")){ //不处在动画状态中
$("#panel").find("div.content").slideDown("slow");
}
},function(){
if(!$("#panel").find("div.content").is(":animated")){
$("#panel").find("div.content").slideUp("slow");
}
});
});
(二)自定义动画 animate()
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();
});
});
(三)其他动画方法
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()
学生作业:完成锋利的jQuery第四章中的实例--视频展示效果实例