锋利的jQuery第四章:jQuery中的事件和动画

　　现在开始学习第四章了。

第一部分

(1)$()是$(document)的简写，默认参数是document.

$(function(){}是$(document).ready(function(){})的简写。

(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的例子，实现单击标题是显示内容：

View Code

 <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这类事件，可以使用下面的简写方法：

View Code

 <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.下面例子同样效果：

View Code

 <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实现例子

View Code

 <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()方法另外一个作用是：切换元素的可见状态，如果可见单击后隐藏；如果隐藏，单击后可见。例子：

View Code

 <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的层次结构像水泡

一样不断向上直至顶端。下面就是冒泡的例子：

View Code

<!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)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; }

总结：这些东西不难，但是每天的任务总是不能完成。

posted @ 2012-10-15 22:03 金河阅读(1036) 评论(1) 编辑收藏举报

刷新页面返回顶部

我们的使命不是改变世界，而是持续的改变自己。

我为什么而活

锋利的jQuery第四章:jQuery中的事件和动画

公告