jquery 队列

最新推荐文章于 2022-01-06 13:32:19 发布

前端学习

最新推荐文章于 2022-01-06 13:32:19 发布

阅读量339

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/kaizi524/article/details/64922857

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>noConflict</title>
</head>
<script src="js/jquery1.7.1.js"></script>

<body>
<div class="div">123</div>

<div class="el">each</div>

<div class="odiv">div</div>
<span class="span">span</span>
</body>
</html>
<script>
// 1避免冲突
// J = $.noConflict();
// J(".div").css("color","#f00");
// 2each
// $.each() //可以遍历数组，和对象
// $('obj').each()
// end()
// addBack()
// add()
var arr = ['a','b','c'];
var obj = {'name':'hello','age':'20'};
$.each(obj,function(i,val){
	console.log(i);
	console.log(val);
})
// end
$('.odiv').next().css('background','#f00').end().css('color','#00f');
// addBack 1.8已经废弃
// $('.odiv').next().css('background','#f00').addBack().css('color','#00f');

/**
 * jquery队列
 * jq队列中，存储的都是函数
 * jquery队列，当进行出队操作时，会自动执行相应的函数
 * $queue(队列添加的元素,'队列名','函数')
 * delay()
 */
function a(){
	// alert(1);
	$('.div').css({'background':'#00f'});
	// $('.div').dequeue('fx');
}
function b(){
	alert(2);
}
function c(){
	alert(4);
}
// $.queue(document,'owl',a);
// $.queue(document,'owl',b);
// $.queue(document,'owl',c);
// $.dequeue(document,'owl');
// $.dequeue(document,'owl');

$('.div').animate({'width':'200'});
// $('.div').queue('fx',a); //如果没有跳出队列，则会停止在这
$('.div').queue('fx',function(){
	setTimeout(function(){
		$('.div').dequeue();
	},2000)
})

/**
 * Callbacks() 
 * Callbacks('once')
 * 	-once
 * 	-memory
 * 	-unique
 * 	-stopOnFalse //只要函数存在return false立即跳出
 * add()
 * fire() 触发
 * remove()
 * 应用场景
 * 
 * Deferred
 */
function a(){
	alert(1);
}
function b(){
	alert(2);
}
// var cb = $.Callbacks();
// cb.add(a); 
// cb.add(b);
// cb.fire(); //1,2
// cb.add(b);
// cb.remove(a);
// cb.fire(); //,2,2
//once,memory
var cb = $.Callbacks('memory');
cb.add(a); 
cb.add(b);
cb.fire();
cb.add(b);
// cb.fire();

/**
 * 队列延时对象
 * Deferred基于Callbacks
 * -resolve , done
 * -reject , faile
 *
 * when
 */
//1
var cb = $.Callbacks();
setTimeout(function(){
	alert(1);
	cb.fire();
})
cb.add(function(){
	alert(2);
});
//2
var dfd = $.Deferred();
setTimeout(function(){
	alert(1);
	dfd.resolve();
})
dfd.done(function(){
	alert(2);
})
// ajax
/*$.ajax({
	url : 'xxx.php',
	success : function(){},
	error : function(){}
})
$.ajax('xxx.php').done(function(){}).faile(function(){});*/
//点击第一次延时弹出，第二次立即弹出
var dfd2 = $.Deferred();
$('input').click(function(){
	setTimeout(function(){
		dfd2.resolve(); //状态一直保持
	},2000)
	dfd2.done(a);
})
function a(){
	alert('弹出');
}
// when多个回掉结束后触发
$.ajax('1.php').done(function(){});
$.ajax('2.php').done(function(){});
$.when($.ajax('1.php'),$.ajax('2.php')).done(function(){});

</script>

前端学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 队列

noConflict123eachdivspan// 1避免冲突// J = $.noConflict();// J(".div").css("color","#f00");// 2each// $.each() //可以遍历数组，和对象// $('obj').each()// end()// addBack()// add()var arr = ['
复制链接

扫一扫

专栏目录