jQuery学习--Chapter03小结(jQuery事件与动画)

jQuery学习--Chapter03小结(jQuery事件与动画)

1.页面载入 ready(fn)

	$(document).ready(function(){
	  // 在这里写你的代码...
	});
	  //简写方式
	$(function(){
	  // 在这里写你的代码...
	});

2.常用鼠标事件

(1). click() 单击鼠标时触发 

	$("p").click();

(2). mouseover() 鼠标指针移过时触发

	$("p").mouseover();

(3). mouseout() 鼠标指针移除时触发

	$("p").mouseout();

3.常用键盘事件

(1). keydown() 按下按键时触发

	$(window).keydown(function(event){
	  switch(event.keyCode) {
	    // ...
	    // 不同的按键可以做不同的事情
	    // 不同的浏览器的keycode不同
	    // 更多详细信息:     http://unixpapa.com/js/key.html
	    // ...
	  }
	});

(2). keyup() 释放按键时触发

	$("input").keyup(function(){
	  $("input").css("background-color","#D6D6FF");
	});

(3). keypress() 产生可打印的字符时触发

	$("input").keydown(function(){
	  $("span").text(i+=1);
	});

4. 常用表单事件

(1). focus() 获取焦点

	$("input[type=text]").focus(function(){
	  this.blur();
	});

(2). blur() 失去焦点

	$("input[type=text]").blur( function () { alert("Hello World!"); } );

5. 绑定事件

在jQuery中，如果需要为匹配的元素同时绑定一个或多个事件，可以使用bind() 方法，其语法如下：

	bind(type,[data],fn)

type: 事件类型，主要包括blur、focus、click、mouseout等基础事件。

[data]: 可选参数，作为event.data属性值传递给事件对象的额外数据对象，该参数不是必须

fu: 处理函数，用来绑定的处理函数

(1). 绑定单个事件

	$("input").bind("click",function(){
   	    //处理代码...
	});

(2). 绑定多个函数

	$("input").bind({
	        mouseover:function(){
	               //处理代码
	        },
	        mouseout:function(){
	                //处理代码
	        }
	});

6. 移除事件

移除事件与绑定事件是相对的，jQuery中，未匹配的元素移除单个或多个事件，可以使用unbind() 方法，其语法如下：

	unbind([type],[fn])

unbind() 方法的两个参数都不是必须的，当unbind() 不带参数是，表示移除所绑定的全部事件。
7.复合事件

(1). hover() 

在jQuery中，hover() 方法用于模拟鼠标指针悬停事件。当鼠标指针移动到元素上时，会触发指定的第一个函数 (enter)；当鼠标指针移除这个元素时，会触发指定的第二个函数 (leave),该方法相当于mouseover 与 mouseout 事件的组合。其语法如下：

	hover(enter,leave);
	//示例
	$("td").hover(
	  function () {
	    $(this).addClass("hover");
	  },
	  function () {
	    $(this).removeClass("hover");
	  }
	);

(2). toggle()

toggle()方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。其语法如下   

	toggle(fn1,fn2,......fnN)
	//示例
	$("td").toggle(
	  function () {
	$(this).addClass("selected");
	  },
	  function () {
	$(this).removeClass("selected");
	  }
	);

8. 元素的显示与隐藏

(1).  show() 用于 显示隐藏的匹配元素，其语法如下：

	show([speed,[easing],[fn]]) 

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

	$("p").show("fast",function(){
          $(this).text("Animation Done!");
	});

    (2).hide()用于 隐藏显示的元素，其语法如下：

	hide([speed,[easing],[fn]])

	$("p").hide("fast",function(){
   	    alert("Animation Done.");
        });

9. 淡入淡出

    (1). fadeIn() 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数，其语法如下：

	fadeIn([speed],[eas],[fn])

	("p").fadeIn("fast",function(){
		alert("Animation Done.");
	});

(2). fadeOut()  通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数 ，其语法如下

	fadeOut([speed],[eas],[fn])

	$("p").fadeOut("fast",function(){
		alert("Animation Done.");
	});

10. 滑动

(1). slideDown() 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

	slideDown([speed,[easing],[fn]])

	$("p").slideDown("fast",function(){
	alert("Animation Done.");
	});

(1). slideDown() 通过高度变化（向上减小）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

	slideUp([speed,[easing],[fn]])

	$("p").slideUp("fast",function(){
		alert("Animation Done.");
	});