zoukankan html css js c++ java

锋利的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;
    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",  "300px" }, 2000);
}, function () {
    $(this).stop()  //终止当前动画
.animate({ height: "22px",  "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 { 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; 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; 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; 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 { 31px; background-position:-30px -400px; }
.v_caption em { display:inline; float:right; margin:10px 12px 0 0; font-family:simsun; }
.v_content { position:relative; 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; 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; 128px; height:80px; overflow:hidden; }
.v_content ul li img {  128px; height:96px; }
.v_content ul li h4 { 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; }

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

查看全文

相关阅读:
hdu 3790 最短路径问题
 hdu 2112 HDU Today
最短路问题以hdu1874为例
 hdu 1690 Bus System Floyd
hdu 2066 一个人的旅行
 hdu 2680 Choose the best route
hdu 1596 find the safest road
hdu 1869 六度分离
 hdu 3339 In Action
序列化和反序列化

原文地址：https://www.cnblogs.com/wang7/p/2725121.html