jQuery事件 (jQuery实现图片轮播)

jQuery事件按执行时间,主要分为两种,第一种是在网页加载完执行,第二种绑定在元素中,由访问者某些行为触发。

$(document).ready(function(){
//事件
});
$("#xx").bind( "click",function(){
//事件
});
$("#xx").unbind("click");  //接触该元素的所有click事件

当然,第二种事件一般情况下是放在第一种内部的

事件的简写

$("#xx").click(function(){
//事件
});

jQuery还提供了一些合成事件,简化代码

hover(enter,leave);//光标移动到某位置,触发enter事件,离开触发leave事件
toggle(fn1,fn2,fn3...);//鼠标连续单击事件
$("#xx").hover(function(){
$(this).hide();
},function{
$(this).show(); }); //此段代码仅为举例,运行效果并不好

事件冒泡的解决方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>example for html5</title>
<script src="jquery.js" type="text/javascript"></script> </head> <body> <div id="diveve">
<p id="peve">
ncqnvqj<a href=# id="aeve">aeve</a>
</p>
</div> <script type="text/javascript">
$(document).ready(function(){
$("#diveve").click(function(){
alert("div");
});
$("#peve").click(function(event){
alert("p");
event.stopPropagation();
});
$("#aeve").click(function(event){
alert("a");
event.stopPropagation();
}); });

模拟操作:trigger()

$("#xx").trigger("click");    //普通模拟

$("#xx").bind("myclick",function(){});
$("#xx").trigger("myclick"); //自定义事件 $("#xx").bind("myclick",function(event,message1,message2){});
$("#xx").trigger("myclick",["我的自定义","事件"]); //传递数据

集合以上知识点,可实现图片的轮播动画:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>example for html5</title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css"> .showmore{
position:absolute;
top:100px;
width:300px;
left:50%;
margin-left:-150px;
height:100px;
overflow:hidden;
display:inline-block;
border:1px pink solid
}
</style>
</head> <body>
<div><a href=# id="button">翻页</a></div>
<div class="showmore" > </div>
<script type="text/javascript">
$(document).ready(function(){ for(var i=1;i<5;i++)
{ $divpic=$("<img class='imgr'/>");
$divpic.attr("src",String(i)+".jpg");
$(".showmore").append($divpic);
$divpic.css({"position":"absolute","top":"0px","left":i*100-100+"px","width":"100px","height":"100px"});
}
$(function()
{ //把轮播函数放在匿名函数中
$("#button").bind("click",function() //给button绑定事件
{
$(".imgr").animate({left:"-=100px"},function() //animate()方法中回调函数的使用
{
for(var i=0;i<4;i++) //遍历找出第一张图片,并将其移动到盒子最后端
{
if($($(".imgr")[i]).css("left")=="-100px") //这里涉及到DOM和jQuery对象的相互转化
{
$($(".imgr")[i]).css("left","300px");
}
}
});
});
});
}); </script> </body>
</html>
上一篇:【PowerOJ1752&网络流24题】运输问题(费用流)


下一篇:洛谷 - P4452 - 航班安排 - 费用流