jQuery中的事件

作者：曾庆林

事件初探

加载文档完成触发：$(document).ready(function(){})
事件可以多次执行。
代码可以简写：$(function(){})

事件绑定

1 可以之间添加事件函数

  $("h1").click(function(){//触发事件要做的事情})

问题是：

1. 每次单击h1都会相应事件，不能解除。
2. 这个里面的函数也不能复用
3. 只能绑定一个函数

2 可以通过绑定事件

• bind() 绑定事件
• unbind() 解绑事件
• one() 只执行一次

js

$(".box").bind("click",fn1);
$(".box").bind("click",fn2);
// 可以绑定多个
function fn1(){alert("你敢点我，我不是你的菜");
}
function fn2(){alert("我就是去问问老朋友");
}
$("button").bind("click",fn3);
function fn3(){alert("你点我了，就不要找那个她！");$(".box").unbind("click");// 在这里 解绑的 .box 所有click 事件  /* 也可以只解绑一个一个事件如：$(".box").unbind("click"，fn1);   */
}$(".box").one("click",function(){alert("我只出现一次，以后不烦你了");
})

html

<div class="box">box</div>
<button>我是米米</button>

---

合成事件

hover(enter,leave)
用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第一个函数,当光标移出这个元素时,触发指定的第二个函数.

$("h1").hover(function(){// mouseover触法},function(){// mouseout触发}
)

---

模拟事件

trigger

事件都是通过用户执行相应的操作后触发的。有时我们更希望让事件自动执行，而不用手动触发，或者在一个事件中调用另一个事件的处理函数。这时我们可以考虑使用模拟操作。
模拟操作可以使用trigger()方法来完成。

html

<p>this is a p</p>
<form action=""><input type="text" id="good" /><input type="text" />
</form>

js

$(function(){$("p").click(function(){ alert("我被点击了")});$("p").trigger("click");$("#good").trigger("focus");// trigger 可以模拟自动获得焦点
})

---

阻止事件冒泡的方法

在绑定的事件中加入event参数，并在函数中增加event.stopPropagation()调用就可以阻止事件冒泡。也可以使用return false阻止冒泡。

event中还有一个方法：event.preventDefault();作用是阻止默认行为，如表单提交！

html

<div class="papa">父亲<div class="self">自己<div class="son">儿子<span>this is 核心</span><a href="http://www.baidu.com">BAIDU</a></div></div>
</div>

我们在papa 上面绑定一个事件
在span 也绑定一个事件
单击span 时候 papa也会触发单击事件（事件会从子元素传递到父辈元素上面）
怎么样阻止事件的默认向上冒泡传递呢?

a 会默认 跳转页面，怎样阻止默认挑战页面呢？

$("span").bind("click",fn1);
$(".papa").bind("click",fn2);function fn1(e){alert("我是小span的被点击了");e.stopPropagation();//阻止事件冒泡
}
function fn2(){alert("我是papa被点击了");}
$("a").bind("click",fn3);function fn3(e){alert("A被单击了");e.preventDefault();//阻止默认事件}

jQuery中的动画

控制显示和隐藏

show()	“fast”:200	“normal”:400	“slow”:600
hide()

控制不透明度

fadeIn()
fadeOut()
fadeTo()	//$(“div”).fadeTo(“fast”,”0.2”);

控制高度

slideUp()
slideDown()
自定义动画实现

自定义动画实现

animate(params,speed,fun);

累加、累减动画

$("#btn").click(function(){$("#pos").animate({left:"+=20px"},fast);
})

同时执行多个动画

$("#pos").animate({left:"+=20px",height:"+=20px"},fast);

停止动画

stop()方法：停止阶段性动画。
stop(true)方法：停止当前动画后的所有阶段动画。

判断元素是否处于动画状态

$("#ele").is(":animated")
说明：
动画是顺序执行的。

全屏滚动案例

分析

2大步
第一步 单击 li 让 li里面 a href 对应的 div 滚动到相应的位置
第二大步 监听窗口滚动 切换导航的active

html

<div class="fi"><div class="container"><ul><li class="active"><a href="#sc1">第一屏</a></li><li><a href="#sc2">第二屏</a></li><li><a href="#sc3">第三屏</a></li><li><a href="#sc4">第四屏</a></li><li><a href="#sc5">第五屏</a></li><li><a href="#sc6">第六屏</a></li><li><a href="#sc7">第七屏</a></li></ul></div>
</div>
<div class="sc" id="sc1"><h1>1</h1>
</div>
<div class="sc" id="sc2"><h1>2</h1>
</div>
<div class="sc" id="sc3"><h1>3</h1>
</div>
<div class="sc f4" id="sc4"><h1>4</h1>
</div>
<div class="sc"  id="sc5"><h1>5</h1>
</div>
<div class="sc"  id="sc6"><h1>6</h1>
</div>
<div class="sc" id="sc7"><h1>7</h1>
</div>
<p class="line"></p>

css

.active {background-color: #ff3;
}
.sc { height: 600px;}
.sc:nth-of-type(2n+1) { background-color: yellow;}
.f4{ height: 1000px;}

第一步 单击 li 让 li里面 a href 对应的 div 滚动到相应的位置

$(function(){$(".fi li a").click(function(e){e.preventDefault()$(window).unbind("scroll",checkScroll);//单击取消监听var href=$(this).attr("href");//求出里面的href$(this).parent().siblings(".active").removeClass("active");//他的爹的兄弟有active 去掉active；$(this).parent().addClass("active");//给a的爹加activevar  offT=$(href).offset().top;//对应的div 距离顶部的距离$("body,html").animate({"scrollTop":offT-50},600,function(){$(window).bind("scroll",checkScroll);//动画完再监听});//让滚动条滚动到对应距离})

第二步 监听窗口滚动 切换导航的active

1监听窗口滚动
2 滚动距离 与div距离顶部距离 对照，让对应div 的id 相对应的a 的父亲添加 active 其他去掉active

$(window).bind("scroll",checkScroll);//监听滚动function checkScroll(){var st=$(window).scrollTop();//拿到滚动的距离var id;//存一个空的id值$(".sc").each(function (index,elem){//循环每一个第var  offT=$(this).offset().top;//拿到每个div距离顶部的距离；     if(st>=offT-51){//滚动的距离大于 该div距离顶部的距离  （对应的div）51是导航的高度id=$(this).attr("id");//获取他的id值}})$("a[href=#"+id+"]").parent().siblings(".active").removeClass("active");//id值对应的a 的父亲的兄弟有active 去掉active $("a[href=#"+id+"]").parent().addClass("active")//id值对应的a 的父亲添加active }

IT入门 感谢关注

学习地址： www.520mg.com/it