jQuery学习笔记——事件与特效

一、鼠标事件

1.click( ) ：单击鼠标时，触发或将函数绑定到指定元素的click事件

2.mouseover( )：鼠标指针移过时，触发或将函数绑定到指定元素的mouseover事件

3.mouseout( )：鼠标指针移出时，触发或将函数绑定到指定元素的mouseout事件

$(function(){
  		// 获取a标签，绑定鼠标移入事件
  		$(".nav-ul li a").mouseover(function(){
  			$(this).css("background","#FD5000");
  		})
  		$(".nav-ul li a").mouseout(function(){
  			$(this).css("background","#ff2832");
  		})
  	})

二、绑定事件与移除事件

1.绑定事件

语法：bind(type,[data],fn);

type：事件类型，主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件

[data]：可选函数

fn：处理函数

① 绑定一个事件

$(".on").bind("mouseover",function(){
  			$(".topDown").show();
  		})

② 绑定多个事件

$(".on").bind({
  			"mouseover":function(){
  				$(".topDown").show();
  			},
  			"mouseout":function(){
  				$(".topDown").hide();
  			}
  		})

2.移除事件

语法：unbind(事件类型,处理函数)

注意：当unbind()不带参数时，表示移除所绑定的全部事件

// 点击解除按钮，解除第一个Li事件
    		$("#del").click(function(){
    			$("#nav li:first").unbind();
    		})

三、复合事件

1. hover( )：复合事件，复合的是鼠标的移入，移出事件

$(".on").hover(function(){
  			// 第一个相当于mouseover  
  			$(".topDown").show();
  		},function(){
  			// 第二个相当于mouseout  
  			$(".topDown").hide();
  		})

2. toggle( )：复合事件，可以切换元素的可见状态，如果元素是可见，就改为隐藏，如果元素是隐藏就改为可见

$("#btnShow").toggle(function(){
			// 第一个function代表显示
			// 可以加上显示的完成时间，以毫秒为单位
			$("h3").show(1000);
		},
		function(){
			// 第二个function代表隐藏
			$("h3").hide(1000);
		})

四、控制元素的显示及隐藏

1. show() 控制元素的显示
2. hide( )控制元素的隐藏

可以为show（）和hide( ) 方法指定一个速度参数， slow、normal、 fast 分别对应时间为0.6秒、0.4秒和0.2秒

五、改变元素的透明度

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

fadeIn()：可以让元素淡入，不加参数默认为0秒，我们可以指定淡入的时间，还可以自定义淡入的时间

fadeOut()：可以让元素淡出，不加参数默认为0秒，我们可以指定淡入的时间，还可以自定义淡入的时间

$("input[name=fadein_btn]").click(function(){
			// 淡入
			$("img").fadeIn(2000);// 淡入 0.6秒
		})
		$("input[name=fadeout_btn]").click(function(){
			// 淡出
			$("img").fadeOut("slow");// 淡入出0.6秒
		})

六、改变元素的高度

slideDown() 可以使元素逐步延伸显示

slideUp() 可以使元素逐步缩短直至隐藏

$("h2").click(function(){
			// 让元素逐步缩短直到隐藏
			$(".txt").slideUp(1000);			
			// 让元素逐步延伸展示
			$(".txt").slideDown(1000);
		})

七、prop()

以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

什么时候使用attr()，什么时候使用prop()？
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();

        // 全选
		$("#checkedAll").click(function(){
			// prop():获取属性值，设置属性值，常用在属性值为true或false的情况下			
			$("input[name=items]").prop("checked",true);
		})