web前端入门到实战：jQuery中的事件、动画、表单应用

什么是事件?

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。在事件中经常使用术语 " 触发 " （或 " 激发 " ）常用click(）方法触发

DOM的加载

$(document).ready() 方法与 window.onload () 方法的区别：

事件绑定

使用bind（）方法为每个匹配元素的特定事件绑定事件处理函数。bind() 方法的调用格式： bind(type,[data], fn )

• type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如 “click” 或 “submit” ，还可以是自定义事件名。
• data: 作为 event.data 属性值传递给事件对象的额外数据对象
• fn : 绑定到每个匹配元素的事件上面的处理函数

实例：

//事件绑定
$("#btn1").bind("click",function(){
   alert("点我触发bind函数");
})

<button id="btn1">点我触发bind函数</button>
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

使用 jQuery 的 is()方法判断元素是否可见，使用is()方法:

alert($("button").parent().is("body"));
 /*
  * $("#b1").is(":visible") 判断id为d1的元素是否可见
  * 可见返回true，不可见就返回false
  * 
  * next($("#b1").is(":visible"));
  */
alert("#btn2").is(":visible");
$("#btn2").click(function(){
 	if($("#b1").is(":visible")){
 		//$(this).next().css();
 		 $(this).next().hide();
 	}else{
 		$(this).next().show();
 	}
})

合成事件-hover()

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

hover() 方法语法结构为： hover([over,]out)

• over: 鼠标移到元素上要触发的函数
• out: 鼠标移出元素要触发的函数

实例：

$(function(){			
	/*
	 * 合成事件hover()方法的语法结构:
	 *  hover(enter,leave);
	 * 
	 * */
	 $("#btn2").hover(function(){
	 	 $(this).next().show();
	 },function(){
	 	$(this).next().hide();
	 })
})

<button id="btn1">点我触发bind函数</button>
<button id="btn2">隐藏或者显示</button>
<div id="b1" style="display: none;">
	<img src="img/log.jpg"/>
</div>
web前端开发学习Q-q-u-n：784783012 ，分享学习的方