jquery中几种数据的实例用法汇总

这篇文章主要介绍了jQuery常用几种数据处理方法的实例介绍，给初学的朋友们一些建议参考。

1.clearQueue()

从序列中删除仍未运行的所有项目
.clearQueue(queueName)
$("div").clearQueue();//清空队列

2. .data()

向被选元素附加数据，或者从被选元素获取数据

$(selector).data(name)//如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据
$(selector).data(name,value)向被选元素附加数据
$("#btn1").click(function(){
  $("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
  alert($("div").data("greeting"));
});
//向元素附加数据，然后取回该数据

3. .dequeue()

为匹配元素执行序列中的下一个函数

.dequeue(queueName)
$("div").queue(function () {
  $(this).toggleClass("red");
  $(this).dequeue();
});//使用 dequeue() 终止一个自定义的队列函数

4. jQuery.hasData()

检测元素是否拥有与之相关的任何 jQuery 数据

jQuery.hasData(element)//可选。需要检查其数据的 DOM 元素
$(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 的结果

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

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

5. .queue()

显示或操作在匹配元素上执行的函数队列

.queue(queueName)//字符串值，包含序列的名称。默认是 fx, 标准的效果序列
function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}//显示队列的长度
$('#foo').slideUp().fadeIn();//当这条语句执行时，元素会立即开始其滑动动画，但是淡入过渡被置于 fx 队列，只有当滑动过渡完成后才会被调用

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

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

等价于：

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

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

5. .removeData()

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

$(selector).removeData(name)//如果没有规定名称，该方法将从被选元素中删除所有已存储的数据
$("#btn2").click(function(){
  $("div").removeData("greeting");
  alert("Greeting is: " + $("div").data("greeting"));
});//从元素中删除之前添加的数据

以上就是jquery中几种数据的实例用法汇总的详细内容，更多请关注其它相关文章！