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>