动画
方法
基本：
show([speed,[easing],[fn]]) 显示
hide([speed,[easing],[fn]]) 隐藏
toggle([speed],[easing],[fn]) 交替，可见就隐藏，不可见就显示。
滑动：
slideDown([spe],[eas],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
淡入淡出：
fadeIn([speed],[eas],[fn])
fadeOut([speed],[eas],[fn])
fadeTo([[speed],opa,[eas],[fn]]) 在指定时长内慢慢的将透明度修改到指定的值，0 透明，1 完成可见，0.5 半透明
fadeToggle([speed,[eas],[fn]]) 淡入/淡出 切换
以上动画方法都可以添加参数：
- 第一个参数是动画执行的时长，以毫秒为单位
- 第二个参数是动画的回调函数 (动画完成后自动调用的函数)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
基本
show([speed,[easing],[fn]]) 显示
hide([speed,[easing],[fn]]) 隐藏
toggle([speed],[easing],[fn]) 交替，可见就隐藏，不可见就显示。
滑动
slideDown([spe],[eas],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
淡入淡出
fadeIn([speed],[eas],[fn])
fadeOut([speed],[eas],[fn])
fadeTo([[speed],opa,[eas],[fn]]) 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
fadeToggle([speed,[eas],[fn]]) 淡入/淡出 切换
以上动画方法都可以添加参数：
1、第一个参数是动画执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)
*/
$(function(){
//提供一个可被调用的函数
var func1 = function(){
alert("hide动画完成");
}
//循环执行动画
var func2 = function(){
$("#div1").toggle(1000, func2);
}
//显示 show()
$("#btn1").click(function(){
$("#div1").show(1000, function(){
alert("show动画完成");
});
});
//隐藏 hide()
$("#btn2").click(function(){
$("#div1").hide(1000, func1);
});
//切换 toggle()
$("#btn3").click(function(){
$("#div1").toggle(1000);
});
//循环执行动画
$("#btn8").click(function(){
func2();
});
//淡入 fadeIn()
$("#btn4").click(function(){
$("#div1").fadeIn();
});
//淡出 fadeOut()
$("#btn5").click(function(){
$("#div1").fadeOut(1000, function(){
alert("fadeOut完成");
});
});
//淡化到 fadeTo()
$("#btn6").click(function(){
$("#div1").fadeTo(2000, 0.5, function(){
alert("fadeTo完成");
});
});
//淡化切换 fadeToggle()
$("#btn7").click(function(){
$("#div1").fadeToggle(1000);
});
})
</script>
</head>
<body>
<table style="float: left;">
<tr>
<td><button id="btn1">显示show()</button></td>
</tr>
<tr>
<td><button id="btn2">隐藏hide()</button></td>
</tr>
<tr>
<td><button id="btn3">显示/隐藏切换 toggle()</button></td>
</tr>
<tr>
<td><button id="btn4">淡入fadeIn()</button></td>
</tr>
<tr>
<td><button id="btn5">淡出fadeOut()</button></td>
</tr>
<tr>
<td><button id="btn6">淡化到fadeTo()</button></td>
</tr>
<tr>
<td><button id="btn7">淡化切换fadeToggle()</button></td>
</tr>
<tr>
<td><button id="btn8">循环执行动画</button></td>
</tr>
</table>
<div id="div1" style="float:left;border: 1px solid;background-color: pink;width: 300px;height: 200px;">
jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
</div>
</body>
</html>
练习：品牌显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
text-align: center;
}
a {
color: #04D;
text-decoration: none;
}
a:hover {
color: #F50;
text-decoration: underline;
}
.SubCategoryBox {
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
.SubCategoryBox ul {
list-style: none;
}
.SubCategoryBox ul li {
display: block;
float: left;
width: 200px;
line-height: 20px;
}
.showmore , .showless{
clear: both;
text-align: center;
padding-top: 10px;
}
.showmore a , .showless a{
display: block;
width: 120px;
margin: 0 auto;
line-height: 24px;
border: 1px solid #AAA;
}
/*
后代选择器：
使用该样式的标签，后代中要有a标签，并且a标签的后代中要有span标签
*/
.showmore a span {
padding-left: 15px;
background: url(img/down.gif) no-repeat 0 0;
}
.showless a span {
padding-left: 15px;
background: url(img/up.gif) no-repeat 0 0;
}
.promoted a {
color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
//刚开始是隐藏某些标签的
$("div ul li:gt(5):not(:last)").hide();
//为a标签添加单击事件
$("div div a").click(function(){
//点击之后在显示和隐藏之间切换
$("div ul li:gt(5):not(:last)").toggle();
//为a标签内的span标签添加文字
//先判断当前标签是显示还是隐藏，若显示则删除原有样式，添加向上箭头，并为span标签赋值文本：显示精简品牌
//若隐藏则删除原有样式，添加向下箭头，并为span标签赋值文本：显示全部品牌
var $temp = $("div ul li:gt(5):not(:last)").is(":hidden");
if($temp) {//隐藏时
$("div div").removeClass();//删除原有样式
$("div ul li").removeClass();//删除高亮样式
$("div div").addClass("showmore");//添加新样式
$("div div a span").text("显示全部品牌");
} else {//显示时
$("div div").removeClass();//删除原有样式
$("div div").addClass("showless");//添加新样式
$("div div a span").text("显示精简品牌");
//显示全部品牌时，显示高亮名称
func();
}
//阻止a标签的默认跳转动作
return false;
});
//用于将某些品牌标签加高亮的函数
var func = function(){
$("li:eq(0), li:eq(3), li:contains('奥林巴斯')").addClass("promoted");
}
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440) </i></li>
<li><a href="#">索尼</a><i>(27220) </i></li>
<li><a href="#">三星</a><i>(20808) </i></li>
<li><a href="#">尼康</a><i>(17821) </i></li>
<li><a href="#">松下</a><i>(12289) </i></li>
<li><a href="#">卡西欧</a><i>(8242) </i></li>
<li><a href="#">富士</a><i>(14894) </i></li>
<li><a href="#">柯达</a><i>(9520) </i></li>
<li><a href="#">宾得</a><i>(2195) </i></li>
<li><a href="#">理光</a><i>(4114) </i></li>
<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li><a href="#">明基</a><i>(1466) </i></li>
<li><a href="#">爱国者</a><i>(3091) </i></li>
<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
事件
文档加载
$(function(){})； 替换掉 window.onload = function(){}
事件绑定
click()：单击事件
mouseover()：鼠标移入事件
mouseout()：鼠标移出事件
bind()：一次绑定一个或多个事件
one()：一次绑定一个或多个事件，但该事件只会响应一次
unbind()：解除事件的绑定
on()：为所有满足条件的标签绑定事件，那怕是这个标签在页面运行之后才被创建
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
click() 单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
mousemove() 鼠标移动事件
bind() 一次性绑定一个或多个事件 新版为on() 如果需要为不同事件设置不同响应，可以通过事件对象event的type属性获取当前事件，进而赋予不同操作
one() 一次性绑定一个或多个事件，但只响应一次
unbind() 解除事件的绑定，参数为空时解除所有事件的绑定 新版为off()
live() 绑定事件，可以为选择器匹配到的元素绑定事件，哪怕这个元素是后面动态创建出来的也有效 新版为on()
*/
$(function(){
//为h5绑定单击事件
$("h5").click(function(){//为h5绑定单击事件：click()传入function()是为某个对象绑定单击事件
alert("h5的单击事件");
});
/*
由于在为h5绑定单击事件时，还没有执行到追加h5的语句，因此新的h5没有被绑定上单击事件，此时可以使用live()
新版为on()方法，对h5进行单击事件的绑定，后面新创建的h5标签都会被绑定上单击事件
*/
$("h5").live("click",function(){
alert("live绑定的h5单击事件");
});
$("<h5 class=\"head\">什么是jQuery?</h5>").appendTo("#panel");//在#panel后追加一个h5
//调用h5的单击事件
$("#btn01").click(function(){
$("h5").click();//调用h5的单击事件：click()不传参数是调用某个对象的单击事件
});
//为h5绑定鼠标移入事件
$("h5").mouseover(function(){
console.log("mouse in");
});
//为h5绑定鼠标移出事件
$("h5").mouseout(function(){
console.log("mouse out");
});
/*
//使用bind绑定事件
$("h5").bind("click mouseover",function(){
console.log("bind绑定事件");
});
//使用one绑定事件，每个事件只响应一次
$("h5").one("click mouseover",function(){
console.log("one绑定事件");//控制台会输出两次"one绑定事件"
});
*/
//unbind解绑事件
$("h5").unbind("mouseover mouseout");
});
</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>
<button id="btn01">按钮1</button>
</div>
</body>
</html>
事件移除
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//给li绑定两种事件：单击和鼠标移入
$("li").bind("click mouseenter" , function(){
alert(this.innerHTML);
});
//点击第一个button，将#bj上的mouseenter事件移除
//unbind()可以移除指定的事件，只需要传一个事件名作为参数
//unbind(type,[data|fn]])
//type事件类型 当传入type的时候会解除type事件
//如果没有传入type值，会移除所有事件
$("button:eq(0)").click(function(){
$("li").unbind("click mouseenter");
});
//点击第二个button，将#rl上的所有事件移除
$("button:eq(1)").click(function(){
$("#btn02").unbind();
});
});
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
</div>
<button id="byn01">移除#bj的mouseenter事件</button>
<button id="btn02">移除#rl所有事件</button>
</div>
</body>
</html>
事件冒泡
什么是事件的冒泡？
事件的冒泡是指，父子标签在同时监听同一个事件时，当子标签事件被触发时，也会触发父标签的事件。
如何阻止事件的冒泡？
在子标签事件函数内，加入return false；
事件对象
如何获取 javascript 事件对象呢？
在给标签绑定事件的时候，在 function( event ) 参数列表中添加一个参数，这里取名为 event，这个 event 就是该事件的事件对象
练习：使用 bind() 同时对多个事件绑定同一个函数，怎么获取当前响应的是什么事件？
event的type属性，可以用来判断当前事件类型，进而对不同事件进行不同操作
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
事件对象，封装了当前被触发的事件的所有信息
如何获取呢 javascript事件对象呢？
在给元素绑定事件时，在 function()参数列表中添加event参数（习惯命名为event），这个event就是该事件的事件对象
*/
//1.原生javascript获取 事件对象
window.onload = function(){
document.getElementById("areaDiv").onclick = function(event){
console.log(event);
}
}
$(function(){
//2.JQuery代码获取事件对象
$("#showMsg").click(function(event){
console.log(event);
/*
可以在浏览器中按F12打开console控制台，查看event的所有属性
MouseEvent {isTrusted: true, screenX: 271, screenY: 136, clientX: 271, clientY: 17, …}
altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 271
clientY: 17
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 271
layerY: 17
metaKey: false
movementX: 0
movementY: 0
offsetX: 262
offsetY: 8
pageX: 271
pageY: 17
path: (5) [div#areaDiv, body, html, document, Window]
relatedTarget: null
returnValue: true
screenX: 271
screenY: 136
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: div#areaDiv
target: div#areaDiv
timeStamp: 4004.225000011502
toElement: div#areaDiv
type: "click"
view: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
which: 1
x: 271
y: 17
__proto__: MouseEvent
*/
});
//3.使用bind同时对多个事件绑定同一个函数，怎么获取当前操作是什么事件
$("#areaDiv").bind("mouseover mouseout", function(event){
//event的type属性，可以用来判断当前事件类型，进而对不同事件进行不同操作
var eventType = event.type;
if(eventType=="mouseover"){
console.log("mouse In");
}
if(eventType=="mouseout"){
console.log("mouse Out");
}
});
});
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
练习：图片跟随
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
text-align: center;
}
#small {
margin-top: 150px;
}
#showBig {
position: absolute;
display: none;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//为两张图片绑定鼠标移入移出事件
//鼠标移入小图片区域时显示大图片，鼠标移出小图片区域时隐藏大图片
$("#small").bind("mouseover mouseout mousemove", function(event){
if(event.type=="mouseover"){
$("#showBig").show();
}else if(event.type=="mouseout"){
$("#showBig").hide();
}else if(event.type=="mousemove"){
$("#showBig").offset({
left: event.pageX+10,
top: event.pageY+10
});
}
});
});
</script>
</head>
<body>
<img id="small" src="img/small.jpg" />
<div id="showBig">
<img src="img/big.jpg">
</div>
</body>
</html>
6307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
