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中幾種資料的實例用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！