《锋利的jQuery》学习总结（3）-事件和动画

最新推荐文章于 2025-12-08 09:18:56 发布

转载最新推荐文章于 2025-12-08 09:18:56 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/hyzccc/blog/769748

文章标签：

#javascript #ViewUI

本文详细介绍了jQuery中的事件处理机制，包括DOM加载、事件绑定、合成、冒泡及捕获等概念，并展示了如何通过事件对象控制事件流程。此外，还深入探讨了jQuery提供的动画效果及其用法。

为什么80%的码农都做不了架构师？>>>

jQuery中的事件

####DOM的加载

$(document).ready()，相当于js中的window.onload()。不同的是后者要等到网页中所有的元素完全加载之后才可以访问，而前者只需要解析完DOM后就可以操作，且可以多次使用，不会覆盖之前的加载；

####事件绑定

bind(),如

<div id="panel">
		<h5 class="head"> 什么是jQuery</h5>
		<div class="content">
			哦你多大呢凑合额看大奖哦打开了，wd令我敬佩免费佛可能没法；恶魔的渴望唯美的没事啊离开你漂亮的吗；
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			$("#panel h5.head").bind("mouseup",function(){
				var $content=$(this).next();//优化性能
				if($content.is(":visible")){
					$content.hide()
				}else{
					$content.show();
				}
			});
		});

####事件合成 #####hover（）和toggle（）； ####事件冒泡和事件捕获：

页面上多个元素响应同一个事件，前者从低级DOM到高级DOM,后者相反；jQuery不支持事件捕获；

####停止事件冒泡和组织默认行为：

event.stopPropagation()和event.preventDefault()；

     事件对象的属性：event.type、event.stopPropagation、event.preventDefault()、event.target（获取触发事件的元素）、event.pageX、eventPageY、event.relatedTarget、event.which、event.metaKey.

####移除事件

unbind()和one();后者的处理函数只会执行一次，就会被立即删除；

####模拟操作

trigger(),triggerHandler()后者只会触发绑定的特定事件；

#jQuery中的动画

show()/hide()、fadeIn()/fadeOut()、slideUp()/slideOut()、animate()、toggle()、slideToggle()、fadeTo()、fadeToggle()；animate()可以实现前面所有的动画，也可以自定义动画；

部分代码展示

<div class="v_show">
		<div class="v_caption">
			<h2 class="cartoon" title="图片">图片</h2>
			<div class="hightlight_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="c_content_list">
				<ul>
					<li><a href="#"><img src="001.png" alt="图一"></a><h4><a href="#">图一</a></h4><span>查看</span></li>
					<li><a href="#"><img src="002.png" alt="图一"></a><h4><a href="#">图二</a></h4><span>查看</span></li>
					<li><a href="#"><img src="003.png" alt="图一"></a><h4><a href="#">图三</a></h4><span>查看</span></li>
					<li><a href="#"><img src="004.png" alt="图一"></a><h4><a href="#">图四</a></h4><span>查看</span></li>
					<li><a href="#"><img src="005.png" alt="图一"></a><h4><a href="#">图五</a></h4><span>查看</span></li>
				</ul>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			var page=1;
			var i=4;
			$("span.next").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();//寻找到外围div的宽度
				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");
						page=1;
					}else{
						$v_show.animate({left:'-='+v_width},"slow");
						page++;
					}
					$parent.find("span").eq((page-1)).addClass("current")
						.siblings().removeClass("current");
				}
			});
		});
		// 动画效果的代码
	</script>

转载于:https://my.oschina.net/hyzccc/blog/769748