Jquery——Day2（基础事件）

在jquery中，加载事件采用$(document).ready()方法，用它来代替JavaScript中的window.onload方法。

二者的区别在于（1）执行时机上，window.onload必须在网页所有元素加载到浏览器后才执行即访问网页中的元素；而$(document).ready()方法在于若DOM结构准备完全就绪，就可以被调用；（2）调用次数上，window.onload方法只可以加载一次，而$(docuemnt).ready()方法可以多次使用。（3）简写方式上，在jquery中，事件加载是有简写方式的，即$(function(){})。

事件分为：绑定事件bind()、简写事件、

1、绑定事件bind()

bind( type [,data] ,fn)，该方法含有三个参数，第1个参数为事件的类型（blur、focus、load、click、mouseover等），第2个参数为可选的参数，第3个参数用来绑定的处理函数。

<div id="panel">
<h5 class="head">什么是jquery</h5>
<div class="content">
	jquery是一门编程语言，是一个优秀的JavaScript库，便于开发人员使用。
</div>
</div>

若要点击“什么是jquery”，出现content类下的文本内容，即需要使用click点击事件。

（1）绑定click事件

$(function(){
	$('#panel h5.head').bind('click',function(){
		$(this).next().show();
	});
});

（2）绑定mouseover、mouseout事件

若鼠标滑过标题，即下面的内容content将显示出来；若鼠标滑出标题链接时，即下面的内容隐藏

$(function(){
	$("#panel h5.head").bind("mouseover",function(){
		$(this).next().show();
	}).bind("mouseout",function(){
		$(this).next().hide();
	});
});

与mouseover、mouseout事件相对应的另外两个鼠标事件是mouseenter、mouserleave

二者区别：

（1）定义上讲，mouseover()、mouseout()表示鼠标移入和移出时会触发，

mouseenter()、mouseleave()表示鼠标穿过或穿出时会触发；

（2）当穿过子元素时，mouseenter()、mouseleave()不会触发，而mouseover()、mouseout()会触发

     （注意：enter不会触发子节点，over会触发子节点，平时使用enter的居多）

2、简写事件

    简写事件方式与bind()绑定事件实现效果相同，唯一的区别在于减少了代码量，将上述代码改写如下：

$(function(){
	$("#panel h5.head").mouseover(function(){
		$(this).next().show();
	}).mouseout(function(){
		$(this).next().hide()
	});
});

此外，与鼠标事件mouseover、mouseout对应的还有键盘事件keypress、keydown、keyup，写法类似。

keyup()、keydown()返回的是一个键值keyCode

keypress()表示触发鼠标按下。

（2）光标事件激活focus()、光标丢失blur()

同时focusIn()也表示表示光标激活，focusOut()表示光标丢失。

区别在于

focus()、blur()必须是当前元素才能激活，

而focusIn()、focusOut()可以是子元素激活。

3、复合（合成）事件

（1）ready(fn)：表示DOM结构加载完毕

（2）hover(fn1,fn2)：用于模拟光标悬停事件。

若光标移动到元素上，会触发指定的第一个函数（enter）；移出该元素时，会触发第二个函数（leave），

它是mouseenter()、mouseleave()的结合体。

$(function(){
	$("#panel h5.head").hover(function(){       //enter
		$(this).next().show(); 
	},function(){                               //leave
		$(this).next().hide();
	});
});

（3）toggle()：用于模拟鼠标连续单击事件。

toggle(fn1,fn2,...,fnN)

若第一次单击元素，触发第一个函数（fn1）；若第二次单击时，触发第二个函数（fn2），以此类推。

$(function(){
	$("#panel h5.head").toggle(function(){    //fn1
		$(this).next().toggle();
	},function(){                             //fn2
		$(this).next().toggle();
	});
});

（4）加强效果

即在css样式中添加类highlight（高亮）

.highhight{background:#ff3300;}

上述代码，在显示函数中，添加“高亮”，使得标题高亮显示；在隐藏函数中，添加高亮，使得内容高亮显示。

$(function(){
	$("#panel h5.head").toggle(function(){    //fn1
		$(this).addClass("highlight");
		$(this).next().toggle();
	},function(){                             //fn2
		$(this).removeClass("highlight");		
		$(this).next().toggle();
	});
});