jQuery 数据操作函数

首页 > 代码库 > jQuery 数据操作函数

2024-11-03 22:17:02 208人阅读

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>

整理学习，在运用中掌握，有些知识不见得一下子通透，但必须做到先了解。

jQuery 数据操作函数

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > jQuery 数据操作函数

jQuery 数据操作函数

看完仍有疑问？有类似问题直接问程序猿