Jquery核心(三) Data

jQuery数据操作详解

最新推荐文章于 2025-07-28 20:59:47 发布

原创最新推荐文章于 2025-07-28 20:59:47 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #ViewUI

jQuery 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了jQuery中关于数据操作的方法，包括数据的读取、设置、移除及队列操作等核心功能。通过实例展示了如何使用data()方法来存储和检索元素上的任意数据，以及queue()、dequeue()方法来管理动画队列。

jQuery数据

[1] data( name )      Returns: Any
      name ： String 存储的数据的标识。
      说明：返回data(name, value)设置的名为name的数据。如果一个jQuery集合中有多个元素，则返回第一个元素的值。该方法用于避免循环引用的风险地获取存储的数据。

Js代码

$("button").click(function(e) {
var value;
switch ($("button").index(this)) {
case 0 :
value = $("div").data("blah");
break;
case 1 :
$("div").data("blah", "hello");
value = "Stored!";
break;
case 2 :
$("div").data("blah", 86);
value = "Stored!";
break;
case 3 :
$("div").removeData("blah");
value = "Removed!";
break;
}
$("span").text("" + value);
});

$("button").click(function(e) {
      var value;

      switch ($("button").index(this)) {
        case 0 :
          value = $("div").data("blah");
          break;
        case 1 :
          $("div").data("blah", "hello");
          value = "Stored!";
          break;
        case 2 :
          $("div").data("blah", 86);
          value = "Stored!";
          break;
        case 3 :
          $("div").removeData("blah");
          value = "Removed!";
          break;
      }

      $("span").text("" + value);
    });

[2] data( name, value )      Returns: jQuery
      name ： String 存储的数据的标识。
      value：   Any 存储的数据。
      说明：设置数据。

Js代码

$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);

 $("div").data("test", { first: 16, last: "pizza!" });
    $("span:first").text($("div").data("test").first);
    $("span:last").text($("div").data("test").last);

[3] removeData( name )       Returns: jQuery
      name ： String 存储的数据的标识。
      说明：移除数据。

Js代码

$("div").data("test1", "VALUE-1");
$("div").removeData("test1");

 $("div").data("test1", "VALUE-1");
 $("div").removeData("test1");

[4] queue( [name] )       Returns: Array<Function>
      name ： String 队列的标识(默认为fx)。
      说明：返回第一个匹配元素的队列（为一个函数数组an array of functions）。

Js代码

$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();

  $("#show").click(function () {
      var n = $("div").queue("fx");
      $("span").text("Queue length is: " + n.length);
    });
    function runIt() {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").slideToggle(1000);
      $("div").slideToggle("fast");
      $("div").animate({left:'-=200'},1500);
      $("div").hide("slow");
      $("div").show(1200);
      $("div").slideUp("normal", runIt);
    }
    runIt();

[5] queue( [name], callback )       Returns: jQuery
      name ： String 存储的数据的标识(默认为fx)。
      callback ： Function 增加到队列的函数。
      说明：在所有匹配元素的队列尾部添加一个函数并立即执行。

Js代码

$(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();
});

 $(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();
    });

[6] queue( [name], queue )       Returns: jQuery
      name ： String 存储的数据的标识(默认为fx)。
      queue ： Array<Function>替换原队列的队列。
      说明：用一个新队列替换匹配的元素的队列。

[7] dequeue( [name] )       Returns: jQuery
      name ： String 存储的数据的标识(默认为fx)。
      说明：将队首函数出队，并执行。