1 数据缓存Data
数据缓存模块为DOM元素和js对象提供统一的数据设置、读取和移除方法。除了维护jq内部数据之外，还支持用户自定义数据。
jq内部，数据缓存模块为队列模块、动画模块、样式操作模块、事件系统提供基础功能，负责文虎这些模块运行时的内部数据。
1.1 .data() 为匹配元素读取或设置自定义数据。
示例：
<script>
$content = $("#my");
$content.data("test", {name: "bolala", age: 25});
//存储在缓存中，不在DOM体现
$("span").first().text($content.data("test").name)
.end().last().text($content.data("test").age);
</script>
参数1：没传入参数时，返回第一个匹配元素关联的自定义数据缓存对象，包含H5 中data-数据。
参数2：如果传入参数key和value，则为每个匹配元素设置任意类型的数据，并处罚自定义事件setData和changeData。
<div id="my" data-tip="haha"></div>
<script>
$content = $("#my");
$content.data("test", {name: "bolala", age: 25});
console.log($content.data());
//{test:{name: "bolala", age: 25},tips:"haha"}
</script>
参数3：如果是键值对的对象，就是批量设置对象。
$content = $("#my");
var options = {name: "bolala", age: 25, tips: "haha"};
$content.data(options);
console.log($content.data());
//{name:"bolala",age:25,tips:"haha"}
**参数4：只传入key，返回指定名称的值.
1.2 .removeData() 移除匹配的自定义属性
$content = $("#my");
var options = {name: "bolala", age: 25};
$content.data(options).data("tips","haha");
console.log($content.data("name"));//bolala
$content.removeData();
console.log($content.data("name"));//undefined
2 队列Queue
队列模块是队列的js实现，不仅能支持函数的入队和出队操作，出队的函数会被自动调用。在jQuery中，队列模块为动画模块提供基础功能。
2.1 使用案例
- Ajax队列
$("div")
.queue('ajax', function (sign) {
$.get("data.php")
.done(function (data) {
console.log(data);
sign();
})
})
.delay(2000, 'ajax')
.queue('ajax', function () {
$.get("data.php")
.done(function (data) {
console.log(data);
})
})
.dequeue('ajax');//执行ajax这个队列
- 动画+Ajax队列
$("div")
.animate({"width":"200px","height":"100px"},500)
.slideToggle()
.delay(1000)
.fadeIn(1000)
.queue(function (sign) {
$.get("data.php")
.done(function (data) {
$("div").text($(this).text()+data);
sign();
})
})
.delay(1000)
.animate({"width":"100px","height":"100px"},200)
tips1:如果没有队列名称默认是，标准动画fx。
tips2:动画队列会自动调用出队方法，其他队列要自己调用dequeue()。
2.2 .queue() 方法
用法：根据参数不同，共有三种用法。
① 不传参数或者传入队列名：返回匹配元素关联的函数队列。
②第一个参数没有或者是队列名，第二个参数是函数：添加函数到队列中。示例如下：
<div id="my1">动画队列</div>
<div id="my2">AJAX队列:</div>
<body>
<script>
var $my1 = $("#my1"), $my2 = $("#my2");
$my1
.animate({"width": "200px", "height": "100px"}, 500)
.delay(2000)
.queue(function (sign) {
$.get("data.php")
.done(function (data) {
$my1.text($(this).text() + data);
sign();
})
})
.animate({"width": "100px", "height": "100px"}, 200);
$my2
.queue('ajax', function (sign) {
$.get("data.php")
.done(function (data) {
$my2.text($my2.text()+data);
sign();
})
})
.delay(2000, 'ajax')
.queue('ajax', function () {
$.get("data.php")
.done(function (data) {
$my2.text($my2.text()+data);
})
});
// .dequeue('ajax');//执行ajax这个队列
console.log($my1.queue());//(3) ["inprogress", ƒ, ƒ]
console.log($my2.queue("ajax"));//(3) [ƒ, ƒ, ƒ]
③第一个参数为空或为队列名，第二个参数是函数数组：就是用函数数组替换队列。
var $my1 = $("#my1"), $my2 = $("#my2");
var arr = [
function (sign) {
$my2.animate({height: "200px"}, 1000);
delay1(sign, 1000);
},
function (sign) {
$my1.animate({width: "500px"}, 1000);
delay1(sign, 2000);
},
function () {
console.log("动画完成");
}
];
//添加动画之间的延时
function delay1(sign, time) {
setTimeout(function () {
sign();
}, time)
}
$(":root").queue("myfx", arr).dequeue("myfx");
注意点：队列中函数列表中的函数可以传入一个参数，当该函数运行时，此函数被调用就是执行下次函数。
2.3 .dequeue() 方法
用于出队并执行函数队列中的下一个函数。
2.4 .delay()方法
延迟一段时间，继续执行函数。
2.5 clearQueue() 方法
移除函数队列中的所有还没被执行的函数，.stop()只针对动画，这个针对所有基于队列。
2.6 promise()
返回一个异步队列的只读副本，观察莫个队列和计数器是否完成。
//上同
dequeue("myfx").promise().done(function () {
console.log("动画添加成功");
});
网友评论