clearQueue([queueName]) 从队列中移除任未运行的项目
queueName：可选。字符串值，包含序列名称。默认是fx，标准的效果序列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>
$("#start").click(function() {
var myDiv = $("div");
myDiv.show("slow");
myDiv.animate({
left: ‘+=200‘
}, 5000);
myDiv.queue(function() {
var _this = $(this);
_this.addClass("newcolor");
_this.dequeue();
});
myDiv.animate({
left: ‘-=200‘
}, 1500);
myDiv.queue(function() {
var _this = $(this);
_this.removeClass("newcolor");
_this.dequeue();
});
myDiv.slideUp();
});
$("#stop").click(function() {
var myDiv = $("div");
myDiv.clearQueue();
myDiv.stop();
});
</script>
</body>
</html>
queue([queueName]) 显示或操作在匹配元素上执行的函数队列
queueName：可选。字符串值，包含序列名称。默认是fx，标准的效果序列。
每个元素可拥有一到多个由jQuery 添加的函数队列。在大多数应用程序中，只使用一个队列（默认名为 fx）。队列运行在元素上异步地调用动作序列，而不会终止程序执行。
$(‘#foo‘).slideUp().fadeIn();
.queue() 方法允许我们直接对这个函数队列进行操作。调用带有回调函数的 .queue() 方法特别有用；它允许我们在队列末端放置一个新函数。
$(‘#foo‘).slideUp();
$(‘#foo‘).queue(function() {
alert(‘Animation complete.‘);
$(this).dequeue();
});
当通过 .queue() 添加函数时，我们应当确保最终调用了 .dequeue()，这样下一个排队的函数才能执行。
dequeue([queueName]) 终止一个自定义的队列函数
queueName：可选。字符串值，包含序列名称。默认是fx，标准的效果序列。
当调用 .dequeue() 时，会从序列中删除下一个函数，然后执行它。该函数反过来会（直接或间接地）引发对 .dequeue() 的调用，这样序列才能继续下去。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
margin: 3px;
width: 50px;
position: absolute;
height: 50px;
left: 10px;
top: 30px;
background-color: yellow;
}
div.red {
background-color: red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Start</button>
<div></div>
<script>
$("button").click(function() {
$("div").animate({
left: ‘+=200px‘
}, 2000);
$("div").animate({
top: ‘0px‘
}, 600);
$("div").queue(function() {
$(this).toggleClass("red");
$(this).dequeue();
});
$("div").animate({
left: ‘10px‘,
top: ‘30px‘
}, 700);
});
</script>
</body>
</html>
data() 想元素附加数据，然后取回该数据
$(selector).data(name) 从元素返回数据：
name 可选。规定要取回数据的名称。如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。
$(selector).data(name,value) 向元素附加数据：
name 必须。规定要设置的数据名称。
value 必须。规定要设置的数据值。
$(selector).data(object) 使用对象向元素附加数据：
object 必须。规定包含名称/值对的对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
The values stored were
<span></span> and
<span></span>
</div>
<script>
$("div").data("test", {
first: 16,
last: "pizza!"
});
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
</script>
</body>
</html>
hasData() 方法检测元素是否拥有与之相关的任何 jQuery 数据
jQuery.hasData(element)：
element 一个用于检测数据的DOM元素。
- jQuery.hasData()
方法提供了方法来确定一个元素是否有任何数据，这些数据是使用jQuery.data()设置的。如果一个元素没有关联的data对象，该方法返回false;否则返回true。 - jQuery.hasData(element) 的主要优点是它并不创建 data 对象。如果元素上没有 data 象，那么该方法也不会与元素上的 data 对象关联。相反，jQuery.data(element)总是向调用者返回一个 data 对象，即使该元素上不含有 data 对象，它也会创建一个。
- jQuery的事件系统是使用jQuery数据 存储事件处理程序的。 因此，使用.on(), .bind(), .live(), .delegate()，或一个速记事件方法 绑定事件到一个元素上的时候，也会在那个元素上关联一个 data 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Results: </p>
<script>
var $p = jQuery("p"),
p = $p[0];
$p.append(jQuery.hasData(p) + " "); /* false */
$.data(p, "testing", 123);
$p.append(jQuery.hasData(p) + " "); /* true*/
$.removeData(p, "testing");
$p.append(jQuery.hasData(p) + " "); /* false */
$p.on(‘click‘, function() {});
$p.append(jQuery.hasData(p) + " "); /* true */
$p.off(‘click‘);
$p.append(jQuery.hasData(p) + " "); /* false */
</script>
</body>
</html>
removeData() 在元素上移除绑定的数据
removeData( [name] )：
name：要移除的存储数据名。
removeData( [list] )：
list：一个数组或空间分隔的字符串命名要删除的数据块。
- .removeData()方法允许我们移除用.data()绑定的值。当带name参数调用的时候，.removeData()将删除那个特有的值，当不带任何参数的时候，.removeData()将移除所有的值。
- 需要注意的是.removeData()仅会删除来自jQuery内部.data()缓存中的数据， 并且元素上任何相应的data-属性不会被删除。后调用data()，会重新检索data-的属性的值。 为了防止这种情况，可以在.removeData()旁边使用.removeAttr()来移除data-属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div { margin:2px; color:blue; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>value1 before creation: <span></span></div>
<div>value1 after creation: <span></span></div>
<div>value1 after removal: <span></span></div>
<div>value2 after removal: <span></span></div>
<script>
$("span:eq(0)").text("" + $("div").data("test1"));
$("div").data("test1", "VALUE-1");
$("div").data("test2", "VALUE-2");
$("span:eq(1)").text("" + $("div").data("test1"));
$("div").removeData("test1");
$("span:eq(2)").text("" + $("div").data("test1"));
$("span:eq(3)").text("" + $("div").data("test2"));
</script>
</body>
</html>
整理学习，在运用中掌握，有些知识不见得一下子通透，但必须做到先了解。
时间： 2024-10-10 05:44:44