By welkin

Updated:

Contents

#一、jQuery中的运动

##1.animate() ：一个运动函数

###第一个参数 : {} json，用来表示运动的值和属性

1
2
3
4
$('#div1').click(function(){
	$(this).animate({width : 300 , height : 300} );
//点击后div1的宽和高运动变化
//原来div1有原始的宽和高

###第二个参数 : 时间(运动快慢的) 默认 : 400

$(this).animate({width : 300 , height : 300} , 4000 );
//div1在4秒内变化

###第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(慢快慢) linear(匀速) )
$(this).animate({width : 300 , height : 300} , 4000 , ‘linear’)
//div1在4秒内匀速变化

###第四个参数 : 回调函数

1
2
3
4
$(this).animate({width : 300 , height : 300} , 4000 , 'linear',function(){
			alert(123);
		});
//当运动执行完弹出123

###可以利用JQ中的量式操作：

1
$(this).animate({width : 300} , 2000).delay(1000).animate({height : 300} , 2000);

##2.stop()：停止运动（默认只阻止当前运动）

###stop(true)：阻止后续的运动

###stop(true,true)：可以立即停止到指定的目标点（只对当前本次运动而言）

###finish()：立即停止到所有指定的目标点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(this).animate({width : 300 , height : 300} , 4000 , 'linear',function(){
			alert(123);
		});
$('#div2').click(function(){
		
		$('#div1').stop();   //默认 : 只会阻止当前运动
		
		$('#div1').stop(true); //阻止后续的运动
		
		$('#div1').stop(true,true); //可以立即停止到指定的目标点
		
		$('#div1').finish();  //立即停止到所有指定的目标点
		
	});

##3.delay()：延迟

delay(1000);//延迟1s
$(this).animate({width : 300} , 2000).delay(1000).animate({height : 300} , 2000); //当宽走完了停顿1s再走高

#二、jQuery事件操作

##1.delegate()：做事件委托

1
2
3
4
5
6
7
8
9
10
11
//点击li变红
('li').on('click',function(){
		this.style.background = 'red';
	});
//利用事件委托
$('ul').delegate('li','click',function(){
		
		this.style.background = 'red';
		
		
	});//利用冒泡原理，实际点击事件在ul上

###优点：1.省略循环操作；

###2.对后续添加事件直接适用

###undelegate()：阻止事件委托

$(‘ul’).undelegate();

##2.trigger()：主动触发

1
2
3
4
$('#div1').on('click',function(){
		alert(123);
	});
$('#div1').trigger('click');//使原本需要点击的事件，现在打开页面就可以发生

####作用：1.打开页面便可调用函数

####2.更好的适用于自定义事件

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){
	
	$('#div1').on('show',function(){
		alert(123);
	});
	
	$('#div1').on('show',function(){
		alert(456);
	});
	
	$('#div1').trigger('show');
	//先弹出123，再弹出456
});

##3.ev.data、ev.target和ev.type

1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
	
	$('#div1').on('click',{name:'hello'},function(ev){
	      alert(ev.data.name);
		//Hello
		alert( ev.target );
		//当前操作的事件
		alert( ev.type );
		//当前操作事件的类型
	});

});

Contents