<!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>
jquery 队列
最新推荐文章于 2022-01-06 13:32:19 发布