Summary of usage examples of several types of data in jquery

This article mainly introduces several commonly used data processing methods in jQuery Instance introduction, giving some suggestions and reference to beginners.

1.clearQueue()

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

2. .data()

Append data to the selected element, or get data from the selected element

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

3. .dequeue()

Execute the next function in the sequence for the matching element

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

4. jQuery.hasData()

Detect whether the element is related to it The Query.hasData() method of any jQuery data

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 的结果

detects whether an element currently has any value set by using jQuery.data(). If there is no data related to the element (no data object exists at all or the data object is empty), this method returns false; otherwise it returns true

The main advantage of jQuery.hasData(element) is that when there is no data object In the case of , the data object is not created and associated with the element. On the contrary, jQuery.data(element) always returns the data object to the caller. If the data object does not exist before, it will be created

5. .queue()

Display or operate Function queue executed on matching elements

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

This feature is similar to the animation method providing callback function, but there is no need to set a callback function when the animation is executed:

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

Equivalent In:

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

When adding functions via .queue(), we should ensure that .dequeue() is eventually called so that the next queued function can be executed

5. .removeData()

Method to delete the data previously set through the data() method

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

The above is the detailed content of Summary of usage examples of several types of data in jquery. For more information, please follow other related articles on the PHP Chinese website!