JQuery实战个人笔记

[list]
[*]浏览器中ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进。Opera浏览器比较特殊，li的标识符和其他浏览器不同。
[*]list-style属性值为none时，可以清除ul和li前面的小圆点
[*]清除子菜单的缩进值，需要padding和margin都为0，其中IE6和IE7只有margin也为0的时候才可以清除缩进值
[*]可以使用bakcground-repeat来控制背景图的重复填充方式
[*]text-decoration属性值为none时，可以取消文字上的下划线
[*]float的值是left，可以使原本各自位于一行的元素全部在一行中向左浮动
[*]在一个包含了多个元素的JQuery对象上执行each方法，可以注册给each方法的那个function的内容被每一个元素执行。同时这个function还可以接收到一个参数，表示这个元素的索引值。JQuery中的很多方法也用到了each
[*]eq方法可以根据索引值只得到JQuery对象中包含的多个元素中的某一个元素，并仍然返回元素对应的新JQuery对象
[*]addClass和removeClass方法用于添加和移除元素的class定义
[*]Javascript中的setTimeout方法可以延时执行某些代码，对应的clearTimeout可以清除设定的延时操作
[*]cursor属性可以控制元素上的鼠标样式，pointer的属性值表示手型样式，也就是我们常见的链接鼠标样式
[*]z-index可以控制元素在页面中的层高，值越大就会在页面的层越靠前，也就会覆盖住一些z-index值较低的元素。只有position的值为relative或absolute的元素，z-index才会生效
[*]JQuery中的load方法十分强大，可以把一个指定的静态，动态页面或服务器端程序输出的数据装入到执行load方法的JQuery对象包装着的元素中
[*]load方法还支持部分装载，在装入的页面地址后面加空格，然后使用选择器，就可以把页面中符合选择器的部分装入进来
[*]被load的页面一定要是UTF-8编码的，否则装入后中文会出现乱码。
[*]bind可以用于给指定的节点绑定Javascript的事件或JQuery中定义的事件。对于JQuery中没有直接提供注册方法的事件，可以用这种方式注册。方法的第二个参数可以是事件执行的方法定义。
[*]ajaxStart，ajaxStop对应ajax交互开始前和结束后的事件，给某一个节点注册了这两个事件后，当前页面的ajax交互开始前和结束后，就会执行指定的方法

[/list]

<style type="text/css">
   ul,li{
	padding:0px;
	margin:0px;
	list-style:none;
	}
	li{
		float:left;
		background-color:#606F6F;
		color:white;
		margin-right:2px;
		border:2px solid white;
	}
	div{
		clear:left;
		background-color:#6E6E6E;
		color:white;
		width:300px;
		height:100px;
		padding:10px;
		display:none;
	}
	div.contentTop{
	display:block;
	}
	.liIn{
		background-color:#6E6E6E;
		border:2px solid #6E6E6E
	}

	</style>
	<script>
	$(document).ready(function(){

	$("li").each(function(index){
	//每个Li都会执行function方法
	//index为返回Li的索引值
	var timeOut="";
	$(this).mouseover(function(){
	var menuthis = $(this);
		timeOut = setTimeout(function(){
		//原来显示的区域隐藏
		$("div.contentTop").removeClass("contentTop");
		$("li.liIn").removeClass("liIn");
		$("div:eq("+index+")").addClass("contentTop");
		$(menuthis).addClass("liIn");
		},300);
	}).mouseout(function(){
		clearTimeout(timeOut);
	});
	});
	});
	</script>
	  <ul >
		<li class="liIn">
		Menu1
		</li>
		<li>
		Menu2
		</li>
		<li>
		Menu3
		</li>
	  </ul>
	  <div class="contentTop">content1</div>
	  <div >content2</div>
	  <div >content3</div>