jQuery 数据

1.列表

jQuery 数据操作函数

这些方法允许我们将指定的 DOM 元素与任意数据相关联。

函数	描述
.clearQueue()	从队列中删除所有未运行的项目。
.data()	存储与匹配元素相关的任意数据。
jQuery.data()	存储与指定元素相关的任意数据。
.dequeue()	从队列最前端移除一个队列函数，并执行它。
jQuery.dequeue()	从队列最前端移除一个队列函数，并执行它。
jQuery.hasData()	存储与匹配元素相关的任意数据。
.queue()	显示或操作匹配元素所执行函数的队列。
jQuery.queue()	显示或操作匹配元素所执行函数的队列。
.removeData()	移除之前存放的数据。
jQuery.removeData()	移除之前存放的数据。

2.jQuery 遍历 - clearQueue() 方法

实例

清空队列：

$("div").clearQueue();

定义和用法

clearQueue() 方法从序列中删除仍未运行的所有项目。

语法

.clearQueue(queueName)

参数	描述
queueName	可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

详细说明

当调用 .clearQueue() 方法时，序列中未被执行的所有函数都会被从序列中删除。如果不使用参数，则 .clearQueue() 从 fx （标准效果序列）中删除剩余的函数。在这种方式中，它类似于 .stop(true)。不过，.stop() 方法只用于动画，而 .clearQueue() 也可用于删除通过 .queue() 方法添加到通用 jQuery 序列的任何函数。

3.jQuery 数据 - data() 方法

实例

向元素附加数据，然后取回该数据：

$("#btn1").click(function(){
  $("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
  alert($("div").data("greeting"));
});

定义和用法

data() 方法向被选元素附加数据，或者从被选元素获取数据。

从元素返回数据

从被选元素中返回附加的数据。

语法

$(selector).data(name)

参数	描述
name	可选。规定要取回的数据的名称。 如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。

向元素附加数据

向被选元素附加数据。

语法

$(selector).data(name,value)

参数	描述
name	必需。规定要设置的数据的名称。
value	必需。规定要设置的数据的值。

使用对象向元素附加数据

使用带有名称/值对的对象向被选元素添加数据。

语法

$(selector).data(object)

参数	描述
object	必需。规定包含名称/值对的对象。

4.jQuery 数据 - jQuery.data() 方法

实例

向元素附加数据，然后取回该数据：

$("#btn1").click(function(){
  $("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
  alert($("div").data("greeting"));
});

定义和用法

data() 方法向被选元素附加数据，或者从被选元素获取数据。

注释：这是底层级的方法；使用 .data() 更加方便。

从元素返回数据

从被选元素中返回附加的数据。

语法

$(selector).data(name)

参数	描述
name	可选。规定要取回的数据的名称。 如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。

向元素附加数据

向被选元素附加数据。

语法

$(selector).data(name,value)

参数	描述
name	必需。规定要设置的数据的名称。
value	必需。规定要设置的数据的值。

使用对象向元素附加数据

使用带有名称/值对的对象向被选元素添加数据。

语法

$(selector).data(object)

参数	描述
object	必需。规定包含名称/值对的对象。

5.jQuery 遍历 - dequeue() 方法

实例

使用 dequeue() 终止一个自定义的队列函数：

$("div").queue(function () {
  $(this).toggleClass("red");
  $(this).dequeue();
});

定义和用法

dequeue() 方法为匹配元素执行序列中的下一个函数。

语法

.dequeue(queueName)

参数	描述
queueName	可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

详细说明

当调用 .dequeue() 时，会从序列中删除下一个函数，然后执行它。该函数反过来会（直接或间接地）引发对 .dequeue() 的调用，这样序列才能继续下去。

6.jQuery 遍历 - jQuery.dequeue() 方法

实例

使用 dequeue() 终止一个自定义的队列函数：

$("div").queue(function () {
  $(this).toggleClass("red");
  $(this).dequeue();
});

定义和用法

dequeue() 方法为匹配元素执行序列中的下一个函数。

注释：这是底层级的方法；使用 .dequeue() 更加方便。

语法

.dequeue(queueName)

参数	描述
queueName	可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

详细说明

当调用 .dequeue() 时，会从序列中删除下一个函数，然后执行它。该函数反过来会（直接或间接地）引发对 .dequeue() 的调用，这样序列才能继续下去。

7.jQuery 遍历 - hasData() 方法

实例

在元素上设置数据，然后查看 hasData 的结果：

$(function(){
  var $p = jQuery("p"), p = $p[0];
  $p.append(jQuery.hasData(p)+" "); /* false */
  jQuery.data(p, "testing", 123);
  $p.append(jQuery.hasData(p)+" "); /* true */
  jQuery.removeData(p, "testing");
  $p.append(jQuery.hasData(p)+" "); /* false */
});

定义和用法

hasData() 方法检测元素是否拥有与之相关的任何 jQuery 数据。

语法

jQuery.hasData(element)

参数	描述
element	可选。需要检查其数据的 DOM 元素。

详细说明

jQuery.hasData() 方法检测元素当前是否拥有通过使用 jQuery.data() 设置的任何值。如果没有数据与元素相关（根本不存在数据对象或者数据对象为空），则该方法返回 false；否则返回 true。

jQuery.hasData(element) 的主要优势是，在不存在数据对象的情况下，不会创建并将数据对象与元素进行关联。相反地，jQuery.data(element) 总是向调用者返回数据对象，如果之前数据对象不存在，则会创建它。

8.jQuery 遍历 - queue() 方法

实例

显示队列的长度：

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

定义和用法

queue() 方法显示或操作在匹配元素上执行的函数队列。

语法

.queue(queueName)

参数	描述
queueName	可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

操作队列

queue() 方法操作在匹配元素上执行的函数队列。

语法

.queue(queueName,newQueue)

参数	描述
queueName	可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

详细说明

每个元素均可拥有一到多个由 jQuery 添加的函数队列。在大多数应用程序中，只使用一个队列（名为 fx）。队列运行在元素上异步地调用动作序列，而不会终止程序执行。典型例子时调用元素上的多个动画方法。例如：

$('#foo').slideUp().fadeIn();

当这条语句执行时，元素会立即开始其滑动动画，但是淡入过渡被置于 fx 队列，只有当滑动过渡完成后才会被调用。

.queue() 方法允许我们直接对这个函数队列进行操作。调用带有回调函数的 .queue() 方法特别有用；它允许我们在队列末端放置一个新函数。

这个特性与动画方法提供回调函数类似，但是无需在动画执行时设置回调函数。

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});

等价于：

$('#foo').slideUp(function() {
  alert('Animation complete.');
});

请注意，当通过 .queue() 添加函数时，我们应当确保最终调用了 .dequeue()，这样下一个排队的函数才能执行。

例子 1

对自定义函数进行队列操作：

$(document.body).click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},2000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });
  $("div").animate({left:'-=200'},500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });
  $("div").slideUp();
});

例子 2

设置队列数组来删除队列：

$("#start").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},5000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });
  $("div").animate({left:'-=200'},1500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });
  $("div").slideUp();
});

$("#stop").click(function () {
  $("div").queue("fx", []);
  $("div").stop();
});

9.jQuery 遍历 - jQuery.queue() 方法

实例

显示队列的长度：

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

定义和用法

queue() 方法显示或操作在匹配元素上执行的函数队列。

注释：这是底层级的方法；使用 .queue() 更加方便。

语法

.queue(queueName)

参数	描述
queueName	可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

操作队列

queue() 方法操作在匹配元素上执行的函数队列。

语法

.queue(queueName,newQueue)

参数	描述
queueName	可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

详细说明

每个元素均可拥有一到多个由 jQuery 添加的函数队列。在大多数应用程序中，只使用一个队列（名为 fx）。队列运行在元素上异步地调用动作序列，而不会终止程序执行。典型例子时调用元素上的多个动画方法。例如：

$('#foo').slideUp().fadeIn();

当这条语句执行时，元素会立即开始其滑动动画，但是淡入过渡被置于 fx 队列，只有当滑动过渡完成后才会被调用。

.queue() 方法允许我们直接对这个函数队列进行操作。调用带有回调函数的 .queue() 方法特别有用；它允许我们在队列末端放置一个新函数。

这个特性与动画方法提供回调函数类似，但是无需在动画执行时设置回调函数。

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});

等价于：

$('#foo').slideUp(function() {
  alert('Animation complete.');
});

请注意，当通过 .queue() 添加函数时，我们应当确保最终调用了 .dequeue()，这样下一个排队的函数才能执行。

例子 1

对自定义函数进行队列操作：

$(document.body).click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},2000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });
  $("div").animate({left:'-=200'},500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });
  $("div").slideUp();
});

例子 2

设置队列数组来删除队列：

$("#start").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},5000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });
  $("div").animate({left:'-=200'},1500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });
  $("div").slideUp();
});

$("#stop").click(function () {
  $("div").queue("fx", []);
  $("div").stop();
});

10.jQuery 数据 - removeData() 方法

实例

从元素中删除之前添加的数据：

$("#btn2").click(function(){
  $("div").removeData("greeting");
  alert("Greeting is: " + $("div").data("greeting"));
});

定义和用法

removeData() 方法删除之前通过 data() 方法设置的数据。

语法

$(selector).removeData(name)

参数	描述
name	可选。规定要删除的数据的名称。 如果没有规定名称，该方法将从被选元素中删除所有已存储的数据。

11.jQuery 数据 - jQuery.removeData() 方法

实例

从元素中删除之前添加的数据：

$("#btn2").click(function(){
  $("div").removeData("greeting");
  alert("Greeting is: " + $("div").data("greeting"));
});

定义和用法

removeData() 方法删除之前通过 data() 方法设置的数据。

注释：这是底层级的方法；使用 .removeData() 更加方便。

语法

$(selector).removeData(name)

参数	描述
name	可选。规定要删除的数据的名称。 如果没有规定名称，该方法将从被选元素中删除所有已存储的数据。