jQuery.data()
簡介
相信很多的前端工程師喜歡將資料塞到html的標籤裡面，當作屬性的方式存放，這樣子實在很方便，先將資料塞入目標節點在往後需要使用的時候直接呼叫 $('selector').attr('key') 拿取，但這並不是很好的做法，這樣會使得我們的html程式過長過大，降低了SEO中的內容代碼比。
其實如果需要將某些資料塞入DOM Tree某的節點上，可以不用真正的寫入它的標籤屬性中，jQuery提供了一種解決的辦法，$.data()，這個方法提供了三個參數，我們將下面做說明:
jQuery.data( element, key, value )
透過一些範例來瞭解如何使用吧!
範例一 :
輸出 :
The values stored were 16 and pizza!
範例二 : 使用Selector的data
範例三 : 在非DOM元素中塞入資料(詳解data方法)
其實在JavaScript中每個DOM Tree Element都是一個object，不信 ? 來看看下面的圖片吧
在chrome開發工具中可以看到DOM Element擁有許多的屬性，也就是一個，還可以發現它是一個HTMLElement Object，所以jQuery.data()說穿了就是在某個object上加上了新的值。下面我們使用一個最簡單的例子，大家看完就會一目瞭然囉 !
最後來看看myObject長甚麼樣子吧
參考資料 :
jQuery官方講解
更多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官方講解
沒有留言:
張貼留言