2012年3月27日

jQuery data()



jQuery.data() 

簡介



相信很多的前端工程師喜歡將資料塞到html的標籤裡面,當作屬性的方式存放,這樣子實在很方便,先將資料塞入目標節點在往後需要使用的時候直接呼叫 $('selector').attr('key') 拿取,但這並不是很好的做法,這樣會使得我們的html程式過長過大,降低了SEO中的內容代碼比。


更多SEO細節,可以參考維基百科網路行銷第一步-SEO

解決辦法


其實如果需要將某些資料塞入DOM Tree某的節點上,可以不用真正的寫入它的標籤屬性中,jQuery提供了一種解決的辦法,$.data(),這個方法提供了三個參數,我們將下面做說明: 

jQuery.data( element, key, value )

  • element 必要的參數,這個屬性就是我們要塞入資料的節點。
  • key - 欲塞入資料的鍵值,往後取得資料使用。
  • value - 欲塞入的資料,可為任何的資料型態

透過一些範例來瞭解如何使用吧!


範例一 :
<!DOCTYPE html> <html> <head> <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>var div = $("div")[0]; jQuery.data(div, "test", { first: 16, last: "pizza!" }); $("span:first").text(jQuery.data(div, "test").first); $("span:last").text(jQuery.data(div, "test").last);</script> </body> </html>
輸出 :
The values stored were 16 and pizza!


範例二 : 使用Selector的data
$("div").data("test", { first: 16, last: "pizza!" }); $("div").data("test").first //16; $("div").data("test").last //pizza!;
範例三 : 在非DOM元素中塞入資料(詳解data方法)
其實在JavaScript中每個DOM Tree Element都是一個object,不信 ? 來看看下面的圖片吧


在chrome開發工具中可以看到DOM Element擁有許多的屬性,也就是一個,還可以發現它是一個HTMLElement Object,所以jQuery.data()說穿了就是在某個object上加上了新的值。下面我們使用一個最簡單的例子,大家看完就會一目瞭然囉 !
// Simple object var myObject = {myProperty : 'myValue'}; // using jQuery append property $.data(myObject, 'newProperty1', 'newValue1'); $.data(myObject, 'newProperty2', 'newValue2');
最後來看看myObject長甚麼樣子吧







完畢! 關於jQuery data()方法的介紹大致上就到這邊,關於這個方法如果你有更妙的應用請你不吝告知。

參考資料 : 
jQuery官方講解 

沒有留言:

ShareThis