第一部分
1,
(1)$()是$(document)的简写，默认参数是document.
$(function(){}是$(document).ready(function(){})的简写。
2,
(1)事件绑定 bind(type [,data],fn);
type是事件类型，有blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,
mouseover,mousemove,mouseout,mouseenter,mouseleave,change,select,submit,keydown,
keypress,keyup和error等，也可是是自定义名称。
(2)下面是一个有关bind的例子，实现单击标题是显示内容：
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){ //等待所有dom绘制完成后就执行
$("#panel h5.head").bind("click",function(){
var $content = $(this).next();
if($content.is(":visible")){
$content.hide();
}else{
$content.show();
}
});//bind
}); //$(document)
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继prototype之后的有一个优秀的javascript类库
</div>
</div>
</body>
</html>
对于click,mouseover,mouseout这类事件，可以使用下面的简写方法：
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){ //等待所有dom绘制完成后就执行
$("#panel h5.head").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
});
}); //$(document)
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继prototype之后的有一个优秀的javascript类库
</div>
</div>
</body>
</html>
(3)合成事件 hover()方法，语法结构是 hover(enter,leave);用于模拟光标悬停事件。当光标移动到元素上，触发enter函数，当光标移出这个元素触发第二个函数leaver.下面例子同样效果：
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){ //等待所有dom绘制完成后就执行
$("#panel h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
}); //$(document)
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继prototype之后的有一个优秀的javascript类库
</div>
</div>
</body>
</html>
(4)toggle()方法，toggle(fn1,fn2,---fnN);模拟鼠标连续单击事件，第一个触发fn1,第二次触发fn2,然后依次向后触发，循环触发。下面使用toggle实现例子
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){ //等待所有dom绘制完成后就执行
$("#panel h5.head").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
}); //$(document)
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继prototype之后的有一个优秀的javascript类库
</div>
</div>
</body>
</html>
toggle()方法另外一个作用是：切换元素的可见状态，如果可见单击后隐藏；如果隐藏，单击后可见。例子：
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){ //等待所有dom绘制完成后就执行
$("#panel h5.head").toggle(function(){ //两个函数依次触发
$(this).next().toggle(); //下一个元素在显示和隐藏之间交替
},function(){
$(this).next().toggle(); //下一个元素在显示和隐藏之间交替
});
}); //$(document)
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继prototype之后的有一个优秀的javascript类库
</div>
</div>
</body>
</html>
3,事件冒泡
(1)事件冒泡，因为多个元素绑定同一事件，而且有嵌套关系，事件触发时就会按照dom的层次结构像水泡
一样不断向上直至顶端。下面就是冒泡的例子：
<!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=gb2312" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" >
$(document).ready(function () { //等待所有dom绘制完成后就执行
//为span绑定click事件
$("span").bind("click", function () {
var txt = $("#msg").html() + "<p>内层span元素被单击</p>";
$("#msg").html(txt); //为msg赋值
}); //bind
$("#content").bind("click", function () {
var txt = $("#msg").html() + "<p>外层div元素被单击</p>";
$("#msg").html(txt); //为msg赋值
}); //bind
$("body").bind("click", function () {
var txt = $("#msg").html() + "<p>body元素被单击</p>";
$("#msg").html(txt); //为msg赋值
});//bind
}); //$(document)
</script>
</head>
<body>
<div id="content">
外层div元素 <br />
<span>内层span元素</span> <br />
外层div元素 <br />
</div>
<div id="msg"></div>
</body>
</html>
(2)事件对象：当单击元素element时，事件对象就被创建了，这个事件对象只有事件处理函数才能访问到，事件处理函数执行完毕，事件对象就销毁了。
$("element").bind("click",function(event){ //event事件对象
});
(3)停止冒泡事件，阻止默认行为，添加如下代码即可：
event.stopPropagation(); //阻止冒泡，event是function(event)的参数，也可以是任意的参数如e event.preventDefault();//阻止默认行为，如阻止表单提交return false;//同样可以阻止冒泡，也可以阻止表单提交
(4)事件捕获与事件冒泡相反，从顶端body向div再向span捕获，jQuery不支持。
4,事件对象的属性：
(1)event.type 获取事件类型
$("a").click(function (event) {
alert(event.type); //获取事件属性 输出"click"
return false; //阻止连接跳转
});
(2)event.target 获取触发事件的元素。
$("a[href=‘http://google.com‘]").click(function (event) {
var tg = event.target;
alert(tg.href); //在页面添加一个a,单击输出http://google.com
return false;
});
(3)event.relatedTarget 访问相关元素。
(4) event.pageX 和 event.pageY 获取光标相对于页面的x坐标和y坐标。
$("body").click(function (event) {
alert("当前位置:" + event.pageX + "," + event.pageY);
});
(5)event.witch 在鼠标单击时获取鼠标的左右中键(对应1，2，3)，在键盘事件中获取键盘事件。
$("a").mousedown(function (e) { //鼠标按下
alert(e.which)
});
$("input").keyup(function (e) { //键盘按下
alert(e.which); //输入a弹出65
});
(6)event.metaKey 不同浏览器对ctrl解释不同，在jQuery中就是为键盘事件获取ctrl按键。
5,移除事件
(1)$("#btn").unbind("click");//移除click事件
$("#btn").unbind();//移除所有的事件
语法结构：unbind([type],[data]);//type是事件类型，data是要移除的函数。
a,如果没有参数，移除所有绑定事件。
b,如果提供事件类型做为参数，只删除该类型的绑定事件。
c,如果把绑定时传递的参数做为第2个参数，则只有这个特定的事件处理函数被删除。
(1)下面是例子
$("#content").bind("click", fun2 = function () { //给函数命名
var txt = $("#msg").html() + "<p>外层div元素被单击</p>";
$("#msg").html(txt); //为msg赋值
}); //bind
$("#content").click(function () { //单击自己时，自己解绑
$("#content").unbind("click", fun2);
});
(3)one(type,[data],fn);//type是事件类型 one()方法绑定的事件只触发一次就自动解绑。
$("#btn").one("click", function () {
$("#test").append("绑定函数1");
}).one("click", function () {
$("#test").append("绑定函数1");
});
另外jquery1.7添加了on(),off(),delegate(),undelegate()事件绑定。
6 模拟事件
(1)常用模拟,使用trigger()方法模拟用户操作，比如页面加载完毕，触发后相当于用户单击
$("#content").trigger("click");//触发click事件，模拟事件
(2)触发自定义事件
$("body").bind("myClick", function () { //自定义名称的事件
alert("自定义事件触发了");
});
$("body").trigger("myClick"); //触发
(3)传递参数：trigger(type,[data])方法 type是事件类型，data是传递给处理函数的附加数据。
$("body").bind("myClick", function (event, msg1, msg2) { //自定义名称的事件
alert(msg1+msg2);
});
$("body").trigger("myClick",["自定义事件参数1","参数2"]); //触发
(4)执行默认操作：
$("input").trigger("focus");不但触发input的focus事件，还会是input得到焦点。
$("input").triggerHandle("focus"); 触发input的focus事件 ，但是不会使input得到焦点。
triggerHandle()方法触发事件但是不执行浏览器默认操作。
(5)绑定多个事件类型：
添加如下样式
.over{ background-color:Red;}
$("div").bind("mouseover mouseout", function () {
$(this).toggleClass("over");
});//当鼠标移过来class=over,div变红，移走消失。
(6)添加事件命名空间：
$("div").bind("click.plugin", function () {
alert("click事件");
});
$("div").bind("mouseover.plugin", function () {
alert("mouseover事件");
});
$("div").bind("dbclick", function () {
alert("dbclick事件");
});
$("body").click(function () {
$("div").unbind(".plugin");//解除命名空间plugin的所有事件
});
(7)相同事件名称，不同命名空间执行方法：
$("div").bind("click", function () {
alert("click事件");
});
$("div").bind("click.plugin", function () {
alert("click.plugin事件");
});
$("body").click(function () {
$("div").trigger("click!");//叹号匹配所有不包含在命名空间中的click方法
});
//如果去掉叹号，两者都触发。
第二部分 动画
1,
(1)show()将元素display样式设置为先前的显示状态(block,inline);hide()将display样式设置为none,导致隐藏。
可以加参数fast,slow,normal,时间整数(毫秒)。
(2)fadeOut()改到透明度到消失，fadeIn()相反。
(3)slideDown()向下显示，slideUp()向上隐藏。
(4)animate(params,speed,callback)自定义动画，params为样式如{property1:"value1",property2:"value2"}
speed速度，可选；callback动画执行完执行的函数，可选。
2 下面是有关动画的一个综合的例子：
样式：
#panel
{
position:relative;
width:100px;
height:300px;
border:1px solid #0050D0;
background:#96e555;
cursor:pointer;
}
html代码：
<div id="panel"></div>
jQuery代码：
$("#panel").click(function () {
$(this).animate({ left: "+=500px" }, 3000) //累计从左移动，先执行
.animate({ height: "-=100px" }, 2000) //累计减少高度，后执行
.animate({ opacity: "0.5" }, 3000)//透明度降低到0.5
.fadeOut("slow", function () { //动画都可以带有回调函数
$(this).css("display", "block"); //显示,css方法不加入到动画队列，因此在callback中
$(this).animate({ opacity: "1" }, 3000); //改变透明度
});
});
(1)+=和-=可以累计改变属性的值，如果直接写数字则改变一次。
(2)animate中的left是从左，top是从上；
(3)css()方法不会加入到动画队列，而是立即执行。
(4)将多个属性放到animate中会同时执行这些动画。
3,停止动画和判断是否正在动画
(1)stop[clearQueue][gotoEnd]);可选参数,true或false;clearQueue是否要清空未执行的动画队列；gotoEnd代表
是否直接跳转到 当前动画 的末状态。 如果直接使用stop()就停止当前正在进行的动画，后面的动画继续。
(2)hover(enter,leave)是鼠标悬停事件,进入执行enter，出来执行leave;下面的例子防止动画效果与鼠标不一致：
$("#panel").hover(function () {
$(this).stop() //终止当前动画
.animate({ height: "150px", width: "300px" }, 2000);
}, function () {
$(this).stop() //终止当前动画
.animate({ height: "22px", width: "60px" }, 2000);
});
如果有多个动画，想在enter时停止，可以将参数clearQueue设为true ,像这样stop(true)
stop(false,true)让当前动画直接到末状态。
stop(true,true)让当前动画直接到末状态，并清空动画队列。
(3)判断是否处于动画状态
if (!$(element).is(":animated")) { //判断是否处于动画状态
}; //如果当前没有进行动画，添加新动画
(4)延迟动画 delay(1000) 延迟1秒。
4,其他动画
(1)toggle()在显示和隐藏之间切换。
(2)slideToggle()通过高度切换可见行。
(3)fadeTo(2000,0.5)通过透明度调到指定值,2秒透明度到0.5
(4)fadeToggle()通过不透明度切换可见性。
最后一个例子挺好的，实现播放页面的转动，但是我敲出来html后，一看没有css修饰，难看的很，于是什么都不想写了，下面是网上下载的源代码：
html+jQuery
<!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>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var page = 1;
var i = 4; //每版放4个图片
//向后 按钮
$("span.next").click(function(){ //绑定click事件
var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
var v_width = $v_content.width() ;
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数
if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画
if( page == page_count ){ //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
$v_show.animate({ left : ‘0px‘}, "slow"); //通过改变left值，跳转到第一个版面
page = 1;
}else{
$v_show.animate({ left : ‘-=‘+v_width }, "slow"); //通过改变left值，达到每次换一个版面
page++;
}
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
});
//往前 按钮
$("span.prev").click(function(){
var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
var v_width = $v_content.width();
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数
if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画
if( page == 1 ){ //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
$v_show.animate({ left : ‘-=‘+v_width*(page_count-1) }, "slow");
page = page_count;
}else{
$v_show.animate({ left : ‘+=‘+v_width }, "slow");
page--;
}
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
});
});
</script>
</head>
<body>
<div class="v_show">
<div class="v_caption">
<h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
<div class="highlight_tip">
<span class="current">1</span><span>2</span><span>3</span><span>4</span>
</div>
<div class="change_btn">
<span class="prev" >上一页</span>
<span class="next">下一页</span>
</div>
<em><a href="#">更多>></a></em>
</div>
<div class="v_content">
<div class="v_content_list">
<ul>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
css
* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#2B93D2; text-decoration:none; }
a:hover { color:#E31E1C; text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
/* v_show style */
.v_show { width:595px; margin:20px 0 1px 60px; }
.v_caption { height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat 0 0; }
.v_caption h2 { float:left; width:84px; height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px; }
.v_caption .cartoon { background-position: 0 -100px; }
.v_caption .variety { background-position:-100px -100px; }
.highlight_tip { display:inline; float:left; margin:14px 0 0 10px; }
.highlight_tip span { display:inline; float:left; width:7px; height:7px; overflow:hidden; margin:0 2px; background:url(img/btn_cartoon.gif) no-repeat 0 -320px; text-indent:-9999px; }
.highlight_tip .current { background-position:0 -220px; }
.change_btn { float:left; margin:7px 0 0 10px; }
.change_btn span { display:block; float:left; width:30px; height:23px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px; cursor:pointer; }
.change_btn .prev { background-position:0 -400px; }
.change_btn .next { width:31px; background-position:-30px -400px; }
.v_caption em { display:inline; float:right; margin:10px 12px 0 0; font-family:simsun; }
.v_content { position:relative; width:592px; height:160px; overflow:hidden; border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid #E7E7E7; }
.v_content_list { position:absolute; width:2500px;top:0px; left:0px; }
.v_content ul {float:left;}
.v_content ul li { display:inline; float:left; margin:10px 2px 0; padding:8px; background:url(img/v_bg.gif) no-repeat; }
.v_content ul li a { display:block; width:128px; height:80px; overflow:hidden; }
.v_content ul li img { width:128px; height:96px; }
.v_content ul li h4 { width:128px; height:18px; overflow:hidden; margin-top:12px; font-weight:normal; }
.v_content ul li h4 a { display:inline !important; height:auto !important; }
.v_content ul li span { color:#666; }
.v_content ul li em { color:#888; font-family:Verdana; font-size:0.9em; }
锋利的jQuery第四章:jQuery中的事件和动画,布布扣,bubuko.com
时间： 2024-10-02 06:21:49