一，页面载入事件

jQuery——1：jQuery基础与选择器中提到过，在文档“就绪”之前，是无法安全操纵页面的。为此， jQuery 的$(document).ready(function(){}); 可以先检测这种状态，功能上它与原生JavaScript中的 window.onload=function(){}; 可以进行替换，但在执行时间、执行数量以及简化能力方面有些区别，这里就这两种方式进行讨论，这将有助于理解后面的内容。

（一）执行时间

方式	执行时间
`$(document).ready(function(){});`	事件在DOM完全加载后就可以执行。
`window.onload=function(){};`	事件在网页中所有的元素及静态文件完全加载后才执行。

从上面的比较看得出来，由于少加载了静态文件等额外文件，前者能在最短时间内触发并执行事件，这对于多数情况来说是比较实用的，它能在网络速度及处理能力有限的情况下尽可能快地准备好完成事件的触发与执行。

因为在jQuery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载的进度。遇到执行ready()方法时，如果isReady值未被设置，那么就说明页面并未加载完成并将未完成的部分用一个数组缓存起来，当全部DOM加载完成后，再将未完成的部分通过缓存一一执行。

但是，如果绑定在某些元素的事件需要相关资源加载完才能触发与执行的话，可以使用load()方法。 load()方法会在元素的onload事件中绑定一个处理函数，实现对某些元素的特别对待，如果处理函数绑定给window对象，那么前者效果上就等于后者了。当然，后者也有方法等效于前者：

window.onload = initPage;

document.addEventListener("DOMContentLoaded", function() { //为document对象绑定 DOMContentLoaded 事件类型
	alert("The task of loading DOM is completed ahead of time!")；
}, false);

function initPage() {
	alert("The task of loading ALL is completed!");
}

（二）执行数量

方式	执行数量
`$(document).ready(function(){});`	可以重复写多个并且每次执行结果不同。
`window.onload=function(){};`	也能重复写多个，但由于覆盖机制导致只执行最后一处。

后者效果：

window.onload = initPage1;
window.onload = initPage2; //会覆盖window.onload = initPage1;
function initPage1() {
	alert('window.onload = initPage1;');
}
function initPage2() {
	alert('window.onload = initPage2;');
}

前者效果：

$(document).ready(function(){
	initPage1();
});
$(document).ready(function(){ //不会覆盖，而是追加;
	initPage2();
});
function initPage1() {
	alert('window.onload = initPage1;');
}
function initPage2() {
	alert('window.onload = initPage2;');
}

通常情况下会使用：

$(document).ready(function(){
	initPage1();
	initPage2();
});
function initPage1() {
	alert('window.onload = initPage1;');
}
function initPage2() {
	alert('window.onload = initPage2;');
}

或者
window.onload = function (){
	initPage1();
	initPage2();
};
function initPage1() {
	alert('window.onload = initPage1;');
}
function initPage2() {
	alert('window.onload = initPage2;');
}

（三）简化

方式	简化
`$(document).ready(function(){});`	可以为`$((function(){});`
`window.onload=function(){};`	不能简化。

二，事件机制

这里有必要说一下事件执行相关的基础概念。

（一）事件流：捕获与冒泡

关于多个嵌套的节点对象对同一种事件进行响应的先后顺序，涉及到事件流概念，可以简单参考JavaScript——7：事件及事件处理

大多数浏览器并不是都支持捕获阶段， 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>
		<title>事件中的冒泡现象</title>
		<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">
		</script>
		<style type="text/css">
			body {
				font-size: 13px
			}

			.clsShow {
				border: #ccc 1px solid;
				background-color: #eee;
				margin-top: 15px;
				padding: 5px;
				width: 220px;
				line-height: 1.8em;
				display: none
			}

			.btn {
				border: #666 1px solid;
				padding: 2px;
				width: 50px;
				filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#ECE9D8);
			}
		</style>
		<script type="text/javascript">
			$(function() {
				var intI = 0; //记录执行次数
				$("body,div,#btnShow").click(function(event) { //三种对象嵌套的对象都绑定了同一种点击事件
					intI++; //次数累加
					$(".clsShow")
						.show() //显示
						.html($(this).prop("tagName")+"被点击了!") //设置内容
						.append("<div>执行次数 <b>" + intI + "</b> </div>"); //追加文本
				})
			})
		</script>
	</head>
	<body>
		<div>
			<input id="btnShow" type="button" value="点击" class="btn" />
		</div>
		<div class="clsShow"></div>
	</body>
</html>

仅是单击按钮，但却执行了3次同样的程序，这就是因为事件在执行过程中存在冒泡现象：虽然单击的是最里层的按钮，但按钮的外围<div>元素和更外围的<body>元素的事件也被触发并执行了。

因此有必要对事件的作用范围进行限制，一种方法是使用stopPropagation()方法停止冒泡：

$(function() {
	var intI = 0; //记录执行次数
	$("body,div,#btnShow").click(function(event) { //点击事件
		intI++; //次数累加
		$(".clsShow")
			.show() //显示
			.html($(this).prop("tagName")+"被点击了!") //设置内容
			.append("<div>点击事件执行次数 <b>" + intI + "</b> </div>"); //追加文本
		event.stopPropagation(); //阻止冒泡
	})
})

阻止冒泡的第二种方式，是在事件处理函数最后使用return false;语句实现停止事件的冒泡过程，但这条语句同时会停止元素的默认行为。

（二）事件委托

所谓的事件委托，就是将原本需要绑定到某元素的事件绑定到它的父元素上，待事件通过冒泡机制传递到父元素时触发并执行事件。

在jQuery——2：jQuery操作DOM的”复制元素节点“中遇到过一个问题，那就是复制过来并插入到某处的元素并没有复制原来那个元素所绑定的事件，虽然通过使用$.clone(true)；解决了，但我们还是要考虑如何给动态生成的元素绑定事件这一重要需求。
事件委托机制就能很好地满足这种需求——要给新创建的元素绑定某事件。

试想一下，这里有一个<ul>元素，下面需要动态生成多个<li>元素，同时需要在动态生成的该元素上绑定某事件。
如果<li>元素数量比较大的话，生成一个就要手动绑定一次事件，那是相当麻烦。
如果将事件通过委托机制绑定到父元素<ul>上，每一个动态生成的子元素<li>自动绑定该事件，就能通过事件冒泡机制自动触发与执行。

（三）事件对象

在触发DOM上的某个事件时会产生一个事件对象 event，event 对象的供了有关事件的细节。事件触发时，会将一个event对象传入到事件处理程序中，在所有事件处理函数运行结束后，事件对象就被销毁。

但由于 DOM 与 IE 对事件对象的不同理解，导致在用事件对象获取事件信息和控制事件传播时需要考虑兼容性问题。

jQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断。

继续看事件委托中的假设情况。“每一个动态生成的子元素<li>上就自动绑定了某事件”是如何实现的？
因为事件对象是跟当前触发元素息息相关的，所以我们就能通过事件对象的event.target属性获取到当前具体是哪个<li>元素触发了事件。

更多事件对象属性与方法，请参考官方文档：Event Object。

三，事件绑定

前面我们多次提到“绑定事件”，其实根据使用就能大概知道是什么意思。

在前面文章中我们多次使用到click鼠标点击事件，为了完成在某元素上的点击效果，整个过程需要两个步骤：

将事件绑定到元素上，等待触发。
编写事件处理函数，待事件触发后执行。

$(function() {
	$("div").click(//直接绑定click事件
		function() {//事件处理函数
			alert($(this).text());
		}
	);
})

所以，这里要讲的就是第一个步骤的实现方式。

jQuery提供多种事件绑定方式，能实现不同的事件触发与执行效果。但要注意版本问题，有些方法在最新版本中可能已经被废弃。所有事件绑定方式请参考官方文档：Event Handler Attachment。

（一）直接绑定

我们之前使用的所有事件绑定方式都是直接绑定，有以下类型：

类型	事件	说明
Document Loading	`.ready()`	当DOM文档加载完成时触发
	`.load()`	当页面加载完成时触发 deprecated: 1.8, removed: 3.0
	`.unload()`	当离开本页面时触发 deprecated: 1.8, removed: 3.0
	`.error()`	当页面元素没有正确载入时触发 deprecated: 1.8, removed: 3.0
	`.resize()`	当窗口大小变化时触发
	`.scroll()`	当滚动指定的元素时时触发
Mouse Events	`.click()`	当点击鼠标左键时触发
	`.contextmenu()`	当点击鼠标右键时触发
	`.dblclick()`	当双点击鼠标左键时触发
	`.mousedown()`	当按下鼠标键时触发
	`.mouseup()`	当松开鼠标按钮时触发
	`.mouseenter()`	当鼠标光标移动到元素上时触发，事件只作用于目标元素
	`.mouseover()`	当鼠标光标移动到元素上时触发，事件作用于目标元素以及后代元素
	`.mouseout()`	当鼠标光标移出了元素上时触发
Keyboard Events	`.keydown()`	当键盘按键按下时触发，可根据事件对象的keyCode属性的值执行不同事件处理函数
	`.keypress()`	当获得焦点的元素上有键盘按键按下时触发
	`.keyup()`	当获得焦点的元素上有键盘按键松开时触发
Form Events	`.focus()`	当元素获得焦点时触发
	`.focusin()`	当元素及其后代元素获得焦点时触发
	`.blur()`	当元素及其后代元素失去焦点时触发
	`.focusout()`	当元素及其后代元素失去焦点时触发
	`.select()`	当元素内部有文本被选择时触发
	`.change()`	当元素的值发生变化时触发
	`.submit()`	当提交表单时触发

（二）使用on()方法绑定事件

使用$.on( events [, selector ] [, data ], handler(eventObject) )方法在选定的元素上绑定一个或多个事件。

events ：一个或多个空格分隔的事件类型或可选的命名空间。
selector：用于指定元素的哪些后代能够触发事件。如果选择器为空或省略，事件总是在它到达当前元素时触发。
data：触发事件时要在event.data中传递给事件处理函数的数据。
handler：触发事件时要执行的函数，即事件处理函数。

1，最普通的使用方法

<style>
	div {
		background-color: #32A3CE;
		width: 300px;
		padding: 10px;
		margin: 5px;
	}
</style>
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script>
	$(function (){
		$("div").on('click', {title: "div"}, function (event) {
			$(this).removeAttr("style").attr("title", event.data.title);
		});
	})
</script>

<div style="background-color:#ffff7f;">TEXT</div>
<div style="background-color:rgb(255, 212, 187);">TEXT</div>
<div style="background-color:orange;">TEXT</div>
<div style="background-color:#ff473a;">TEXT</div>

绑定点击事件，移除元素style属性。

2，添加并触发自定义事件

使用on()方法绑定自定义事件需要两个步骤：

输入自定义事件的名称与具体的操作。
使用trigger()方法来实现自动触发。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			#div0  {
				width: 400px;
				background-color: #dedede;
				border: 2px solid #888888;
			}
			#p1  {
				padding: 1px;
				margin: auto;
				font-size: large;
				background-color: #cbcbcb;
			}
		</style>
		<script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>  
	</head>
	<body>
		<div id="div0">
			<div id="div1">
				<p id="p1">问题描述:</p>
			</div>
			<textarea id="textarea" maxlength="200" rows="8" cols="53" resize="none"></textarea>
			<div id="div2" style="text-align: right;">
				<span class="textLength">200</span>/200
			</div>
		</div>

		<p><button type="button" id="btn1">注册自定义事件diyEvent</button></p>
		<p><button type="button" id="btn2">触发自定义事件diyEvent</button></p>
		<p style="margin-top: 100px;"><a href="http://www.51xuediannao.com/">懒人建站</a>http://www.51xuediannao.com/整理</p>
		<script>
			$btn1 = $("#btn1");
			//绑定自定义事件diyEvent，事件处理函数第一个参数是事件对象
			$btn1.on("diyEvent", function(event, a, b, fun) {
				console.log(a, b);
				fun();
			});
			
			$btn1.on('click', function() {
				$("#textarea").val("自定义事件已经通过on绑定，等待trigger触发").trigger("myChange")//触发myChange事件
			});

			//通过trigger触发指定的自定义事件，第一个参数是自定义的事件名，第二个参数是一个数组，数组中的项会和该自定义事件的处理函数的参数项一一对应
			$("#btn2").on('click', function() {
				$btn1.trigger("diyEvent", ["1", "22", function() {
					alert("已触发自定义事件diyEvent并执行显示本内容的函数。");
				}]);
			});
			
			//处理textarea的输入
			var haHa = function() {
				var test = function($el) {
					var value = $el.val();
					$(".textLength").text(200-value.length);
				};
				$("#textarea").on("input propertychange", function() {//即刻搜索事件
					test($(this));
				}).on("myChange", function() {//btn1点击后显示的内容
					test($(this));
				});
			};
			
			haHa();
		</script>
	</body>
</html>

即刻搜索事件监听输入框字数

3，使用命名空间

事件名称可以添加指定的命名空间来简化触发或删除事件。命名空间类似CSS类，因为它们是不分层次的，只需要有一个名字相匹配即可，所以触发或删除事件而不会干扰其他绑定在该元素上的同一类型的事件。

<p>命名空间实例</p>
<script type="text/javascript">
	// 事件处理函数，弹出警告框并显示命名空间
	function handler(event) {
		alert(event.namespace);
	}
	
	var $p = $("p");
	// A：为所有p元素绑定click事件，定义在abc和foo两个命名空间下
	$p.on("click.abc.foo", handler);
	// B：为所有p元素绑定click事件，定义在test命名空间下
	$p.on("click.test", handler);
	// C：为所有p元素绑定click事件，定义在new和foo两个命名空间下
	$p.on("click.new.foo", handler);
	// 执行所有的click事件处理函数，不限定命名空间 (触发A、B、C)
	
	$p.trigger("click"); // ""
	// 执行定义在abc命名空间下的click事件处理函数 (触发A)
	$p.trigger("click.abc"); // "abc"
	// 执行定义在foo命名空间下的click事件处理函数 (触发A和C)
	$p.trigger("click.foo"); // "foo"
	// 执行同时定义在foo和abc命名空间下的click事件处理函数 (触发A)
	$p.trigger("click.foo.abc"); // "abc.foo"
	// 执行定义在test命名空间下的click事件处理函数 (触发C)
	$p.trigger("click.test"); // "test"
	// 移除所有定义在foo命名空间下的click事件处理函数
	$p.off("click.foo");
</script>

4，给同一元素绑定多个事件

可以使用对象的形式在同一元素上绑定多个事件：

<!DOCTYPE html>
<html>
	<head>
		<style>
			.active {
				color: #ff0000;
			}

			.inside {
				background-color: #55ffff;
			}
		</style>
		<script src="https://code.jquery.com/jquery-latest.js"></script>
	</head>
	<body>
		<button class="test">test button</button>
		<p><span class="test"></span></p>
		<script>
			var $span = $("span[class=test]");
			$("button[class=test]").on({
				click: function() {//事件一
					$(this).toggleClass("active");
					$span.text("click事件触发").fadeIn(30).fadeOut(2000);
				},
				mouseenter: function() {//事件二
					$(this).addClass("inside");
					$span.text("mouseenter事件触发").fadeIn(30).fadeOut(2000);
				},
				mouseleave: function() {//事件三
					$(this).removeClass("inside");
					$span.text("mouseleave事件触发").fadeIn(30).fadeOut(2000);
				}
			});
		</script>
	</body>
</html>

5，给动态生成的元素绑定事件

on()方法还有一个相当重要的用法，就是通过事件委托机制给新添加的元素绑定事件。

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 240px;
			}
			
			ul {
				padding: 15px;
				background-color: #A7CBFF;
			}

			.test {
				padding: 3px;
				margin: 10px;
				background-color: #B5CCCA;
				list-style-type: circle;
				font-size: large;
			}

			.active {
				list-style-type: square;
				color: #ff0000;
			}
		</style>
		<script src="https://code.jquery.com/jquery-latest.js"></script>
	</head>
	<body>
		<div>
			<ul>
				<li class="test">A paragraph!</li>
			</ul>
		</div>
		<script>
			$(function() {
				var count = 0;
				$("ul, ol").on("click", "li", function(){ //第一个on()方法，为动态生成的元素绑定事件
					var $li = $("<li>A new paragraph! "+(++count)+"</li>").attr("class","test");
					$("ul li:last, ol li:last").after($li);
				}).on("mouseenter mouseleave", "li", function (){//第一个on()方法，为为动态生成的元素绑定其他事件
					$(this).toggleClass("active");
				});
			})
		</script>
	</body>
</html>

为动态生成的元素绑定多个事件

还可以使用bind()方法、delegate()方法、live()方法绑定事件，但由于jQuery版本升级，它们都不再被推荐使用甚至有的已经被废弃，所以这里就不再讲。
总之，事件绑定默认使用on()方法就行了。

（三）使用one()方法绑定事件

使用$.one( events [, selector ] [, data ], handler(eventObject) )方法在选定的元素上绑定一个或多个事件处理函数，在每个元素上每种事件处理函数最多执行一次。

四，事件切换

所谓事件切换，就是有两个及以上的事件绑定于一个元素，然后它们根据元素的行为动作进行切换。

jQuery提供两个方法用于事件的切换，一个是hover()，另一个是toggle()。

（一）hover()

使用.hover( handlerIn(eventObject), handlerOut(eventObject) )方法能将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。

<!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>4-3-1</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				font-size: 13px;
				line-height: 130%;
				padding: 60px
			}

			#panel {
				width: 300px;
				border: 1px solid #0050D0
			}

			.head {
				height: 24px;
				line-height: 24px;
				text-indent: 10px;
				background: #96E555;
				cursor: pointer;
				width: 100%;
			}

			.content {
				padding: 10px;
				text-indent: 24px;
				border-top: 1px solid #0050D0;
				display: block;
				display: none;
			}
		</style>
		<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#panel h5.head").hover(function() {//鼠标移入时触发
					$(this).next().show();
				}, function() {//鼠标移出时触发
					$(this).next().hide();
				});
			})
		</script>
	</head>
	<body>
		<div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig
				创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
		</div>
	</body>
</html>

同样的效果，我们可以用on()方法绑定多个事件来实现：

$(function() {
	$("#panel h5.head").on("mouseenter mouseleave", function (){//第一个on()方法，为为动态生成的元素绑定其他事件
		$(this).toggleClass("active")
			   .next().slideToggle();//jQuery滑动特效
	});
})

（二）toggle()

我们早就用过一种toggle()方法，它能实现点击后显示与隐藏功能。

但这里的toggle()方法接收函数参数用于在点击时依次执行。
由于这个方法在 jQuery1.9 中就被移除了，这里也就不再介绍。

五，移除事件

实际上，在jQuery的历史中同样出现过多种解绑事件的方法，但就像我始终推荐使用on()方法绑定事件而不是其他绑定方法的原因逸一样，这里只介绍使用off()方法解绑事件。

（一）使用off()方法解绑事件

使用$.off( events [, selector ] [, handler(eventObject) ] ) )方法在选定的元素上解绑事件。

events ： on()方法中绑定的事件名或命名空间。
selector：on()方法中触发事件的元素。
handler：事件处理函数。

1，最普通的使用方法

<!DOCTYPE html>
<html>
	<head>
		<style>
			button {
				margin: 5px;
			}

			button#theone {
				color: red;
				background: yellow;
			}
		</style>
		<script src="https://code.jquery.com/jquery-latest.js"></script>
	</head>
	<body>
		<button id="theone">Does nothing...</button>
		<button id="bind">Add Click</button>
		<button id="unbind">Remove Click</button>
		<div style="display:none;">Click!</div>
		<script>
			function aClick() {
				$("div").show().fadeOut("slow");
			}
			$("#bind").click(function() {
				$("body").on("click", "#theone", aClick)//事件委托
					.find("#theone").text("Can Click!");
			});
			$("#unbind").click(function() {
				$("body").off("click", "#theone", aClick)
					.find("#theone").text("Does nothing...");
			});
		</script>
	</body>
</html>

2，移除多个事件

$("p").off() //移除所有事件

$("p").off("click") //移除所有click事件

$("p").off("click.abc") //移除click.abc命名空间

$("p").off( "click", function1 )//移除绑定function1函数的click事件

$("p").off( "click", "span")//移除绑定在 p 上的 span 的click委托事件

六，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>
		<title>网页选项卡应用</title>
		<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">
		</script>
		<style type="text/css">
			body {
				font-size: 13px
			}

			ul,
			li {
				margin: 0;
				padding: 0;
				list-style: none
			}

			#menu li {
				text-align: center;
				float: left;
				padding: 5px;
				margin-right: 2px;
				width: 50px;
				cursor: pointer
			}

			#menu li.tabFocus {
				width: 50px;
				font-weight: bold;
				background-color: #f3f2e7;
				border: solid 1px #666;
				border-bottom: 0;
				z-index: 100;
				position: relative
			}

			#content {
				width: 260px;
				height: 80px;
				padding: 10px;
				background-color: #f3f2e7;
				clear: left;
				border: solid 1px #666;
				position: relative;
				top: -1px
			}

			#content li {
				display: none
			}

			#content li.conFocus {
				display: block
			}
		</style>
		<script type="text/javascript">
			$(function() {
				$("#menu li").each(function(index) { //带参数遍历各个选项卡
					$(this).click(function() { //注册每个选卡的单击事件
						$("#menu li.tabFocus").removeClass("tabFocus"); //移除已选中的样式
						$(this).addClass("tabFocus"); //增加当前选中项的样式
						//显示选项卡对应的内容并隐藏未被选中的内容
						$("#content li:eq(" + index + ")").show()
							.siblings().hide();
					});
				});
			})
		</script>
	</head>
	<body>
		<ul id="menu">
			<li class="tabFocus">家居</li>
			<li>电器</li>
			<li>二手</li>
		</ul>
		<ul id="content">
			<li class="conFocus">我是家居的内容</li>
			<li>欢迎您来到电器城</li>
			<li>二手市场，产品丰富多彩</li>
		</ul>
	</body>
</html>

（二）一个简陋的二级列表

<!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>
		<title>列表中的导航菜单应用</title>
		<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">
		</script>
		<style type="text/css">
			body {
				font-size: 13px
			}

			ul,
			li {
				list-style-type: none;
				padding: 0px;
				margin: 0px
			}

			.menu {
				width: 190px;
				border: solid 1px #E5D1A1;
				background-color: #FFFDD2
			}

			.optn {
				width: 190px;
				line-height: 28px;
				border-top: dashed 1px #ccc
			}

			.content {
				padding-top: 10px;
				clear: left
			}

			a {
				text-decoration: none;
				color: #666;
				padding: 10px
			}

			.optnFocus {
				background-color: #fff;
				font-weight: bold
			}

			div {
				padding: 10px
			}

			div img {
				float: left;
				padding-right: 6px
			}

			span {
				padding-top: 3px;
				font-size: 14px;
				font-weight: bold;
				float: left
			}

			.tip {
				width: 190px;
				border: solid 2px #ffa200;
				position: absolute;
				padding: 10px;
				background-color: #fff;
				display: none
			}

			.tip li {
				line-height: 23px;
			}

			#sort {
				position: absolute;
				display: none
			}
		</style>
		<script type="text/javascript">
			$(function() {
				var curY; //获取所选项的Top值
				var curH; //获取所选项的Height值
				var curW; //获取所选项的Width值
				var srtY; //设置提示箭头的Top值
				var srtX; //设置提示箭头的Left值
				var objL; //获取当前对象
				/*
				 *设置当前位置数值
				 *参数obj为当前对象名称
				 */
				function setInitValue(obj) {
					curY = obj.offset().top
					curH = obj.height();
					curW = obj.width();
					srtY = curY + (curH / 2) + "px"; //设置提示箭头的Top值
					srtX = curW - 5 + "px"; //设置提示箭头的Left值
				}
				$(".optn").mouseover(function() { //设置当前所选项的鼠标滑过事件
						objL = $(this); //获取当前对象
						setInitValue(objL); //设置当前位置
						var allY = curY - curH + "px"; //设置提示框的Top值
						objL.addClass("optnFocus"); //增加获取焦点时的样式
						objL.next("ul").show().css({
							"top": allY,
							"left": curW
						}) //显示并设置提示框的坐标
						$("#sort").show().css({
							"top": srtY,
							"left": srtX
						}); //显示并设置提示箭头的坐标
					})
					.mouseout(function() { //设置当前所选项的鼠标移出事件
						$(this).removeClass("optnFocus"); //删除获取焦点时的样式
						$(this).next("ul").hide(); //隐藏提示框
						$("#sort").hide(); //隐藏提示箭头
					})
				$(".tip").mousemove(function() {
						$(this).show(); //显示提示框
						objL = $(this).prev("li"); //获取当前的上级li对象
						setInitValue(objL); //设置当前位置
						objL.addClass("optnFocus"); //增加上级li对象获取焦点时的样式
						$("#sort").show().css({
							"top": srtY,
							"left": srtX
						}); //显示并设置提示箭头的坐标
					})
					.mouseout(function() {
						$(this).hide(); //隐藏提示框
						$(this).prev("li").removeClass("optnFocus"); //删除获取焦点时的样式
						$("#sort").hide(); //隐藏提示箭头
					})
			})
		</script>
	</head>
	<body>
		<ul>
			<li class="menu">
				<div>
					<img alt="" src="Images/icon.gif" />
					<span>电脑数码类产品</span>
				</div>
				<ul class="content">
					<li class="optn"><a href="#">笔记本</a></li>
					<ul class="tip">
						<li><a href="#">笔记本1</a></li>
						<li><a href="#">笔记本2</a></li>
						<li><a href="#">笔记本3</a></li>
						<li><a href="#">笔记本4</a></li>
						<li><a href="#">笔记本5</a></li>
					</ul>
					<li class="optn"><a href="#">移动硬盘</a></li>
					<ul class="tip">
						<li><a href="#">移动硬盘1</a></li>
						<li><a href="#">移动硬盘2</a></li>
						<li><a href="#">移动硬盘3</a></li>
						<li><a href="#">移动硬盘4</a></li>
						<li><a href="#">移动硬盘5</a></li>
					</ul>
					<li class="optn"><a href="#">电脑软件</a></li>
					<ul class="tip">
						<li><a href="#">电脑软件1</a></li>
						<li><a href="#">电脑软件2</a></li>
						<li><a href="#">电脑软件3</a></li>
						<li><a href="#">电脑软件4</a></li>
						<li><a href="#">电脑软件5</a></li>
					</ul>
					<li class="optn"><a href="#">数码产品</a></li>
					<ul class="tip">
						<li><a href="#">数码产品1</a></li>
						<li><a href="#">数码产品2</a></li>
						<li><a href="#">数码产品3</a></li>
						<li><a href="#">数码产品4</a></li>
						<li><a href="#">数码产品5</a></li>
					</ul>
				</ul>
				<img id="sort" src="Images/sort.gif" alt="" />
			</li>
		</ul>
	</body>
</html>