jQuery学习—

jQuery学习——数据

jQuery.data()

存储任意数据到指定的元素并且/或者返回设置的值。

jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时，jQuery 同时也会移除添加在上面的数据。我们可以在一个元素上设置不同的值，并获取这些值

获取存放在元素上名叫 "blah" 的数据。

<!DOCTYPE html>
<html>
<head>
  <style>
div { margin:5px; background:yellow; }
button { margin:5px; font-size:14px; }
p { margin:5px; color:blue; }
span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>A div</div>
<button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
 
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button>
<p>The "blah" value of this div is <span>?</span></p>
<script>
$("button").click(function(e) {
  var value, div = $("div")[0];
 
  switch ($("button").index(this)) {
    case 0 :
      value = jQuery.data(div, "blah");
      break;
    case 1 :
      jQuery.data(div, "blah", "hello");
      value = "Stored!";
      break;
    case 2 :
      jQuery.data(div, "blah", 86);
      value = "Stored!";
      break;
    case 3 :
      jQuery.removeData(div, "blah");
      value = "Removed!";
      break;
  }
 
  $("span").text("" + value);
});
 
</script>
 
</body>
</html>

.data()

.data( key, value )
- key
  
  类型: String
  
  一个字符串，用户存储数据的名称。（译者注：存储的数据名）
- value
  
  类型: Object
  
  新的数据值；它可以是任意的Javascript数据类型，包括Array 或者 Object。
添加的版本: 1.4.3.data( obj )
- obj
  
  类型: Object
  
  一个用于更新数据的键/值对

.data() 方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。

我们可以在一个元素上设置不同的值，之后获取这些值：

$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
 
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

在 jQuery 1.4.3 用.data(obj)设置一个元素的数据对象可以扩充元素上原先存储数据。jQuery 自身也通过.data()方法，使用用'events' 和 'handle'名字储存信息，并且存储任意用下划线('_')开头的数据名供内部使用。

在jQuery1.4.3前(从jQuery 1.4开始).data()方法完全取代所有的数据,而不是仅仅扩展原有的数据对象。如果你正在使用第三方插件，完全替代元素的数据对象也许是不可取的，因为插件也有可能设置数据。

由于浏览器用插件和外部代码相互作用,.data()方法不能在<object>（除非是Flash插件），<applet> 或 <embed>元素上使用。

Additional Notes:（其他注意事项：）

注意这个方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许通过自定义属性附加数据。

从div元素储存然后找回一个值。

<!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>
$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
</script>
 
</body>
</html>

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。通过.data(name, value)或HTML5 data-* 属性设置

添加的版本: 1.2.3.data( key )
- key
  
  类型: String
  
  存储的数据名.
添加的版本: 1.4.data()
- 这个方法不接受任何参数。

HTML5 data-* Attributes（HTML5 data-* 属性）

从jQuery 1.4.3起， HTML 5 data- 属性将自动被引用到jQuery的数据对象中。嵌入式破折号处理属性（ attributes）的方式在 jQuery 1.6 中已经改变，以使之符合W3C HTML5 规范.

举个例子, 给定下面的HTML:

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

下面所有的 jQuery 代码都能运行。

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";

每次尝试将字符串转换为一个JavaScript值（包括布尔值（booleans），数字（numbers），对象（objects），数组（arrays）和空（null））。如果这样做不会改变值的表示，那么该值将转换为一个数字（number）。例如，“1E02”和“100.000”是等同于数字（数字值100），但将转换它们会改变他们的表示，所以他们被保留为字符串。字符串值“100”被转换为数字100。

如果数据(data)属性是一个对象（以“{”开始）或数组（以'['开始），可以用jQuery.parseJSON 将其解析成字符串；它必须遵循有效的JSON的语法，包括带双引号的属性名称。如果该值不能解析为一个JavaScript值，它将被保留为字符串。

如果不想将取出的属性值直接当作字符串的话，请使用attr()方法。

data-属性是在第一次使用这个数据属性后不再存取或改变（所有的数据值都在jQuery内部存储）。

调用 .data() 时如果不带参数，将会以 JavaScript 对象的形式获取所有数据。这个对象可以安全的存放在变量中，因为一旦这个新对象被提取出来，之后对元素进行的 .data(obj)操作，将不会再影响这个对象。另外，直接操作这个对象会比每次调用 .data() 来设置或获取值要快一些：

var mydata = $("#mydiv").data();
if ( mydata.count < 9 ) {
    mydata.count = 43;
    mydata.status = "embiggened";
}

Additional Notes:（其他注意事项：）

注意这个方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许通过自定义属性附加数据。

获取存放在元素上的名为 "blah" 的数据。

<!DOCTYPE html>
<html>
<head>
  <style>
  div { margin:5px; background:yellow; }
  button { margin:5px; font-size:14px; }
  p { margin:5px; color:blue; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>A div</div>
  <button>Get "blah" from the div</button>
  <button>Set "blah" to "hello"</button>
 
  <button>Set "blah" to 86</button>
  <button>Remove "blah" from the div</button>
  <p>The "blah" value of this div is <span>?</span></p>
<script>
$("button").click(function(e) {
  var value;
 
  switch ($("button").index(this)) {
    case 0 :
      value = $("div").data("blah");
      break;
    case 1 :
      $("div").data("blah", "hello");
      value = "Stored!";
      break;
    case 2 :
      $("div").data("blah", 86);
      value = "Stored!";
      break;
    case 3 :
      $("div").removeData("blah");
      value = "Removed!";
      break;
  }
 
  $("span").text("" + value);
});
 
</script>
 
</body>
</html>

jQuery.hasData()

描述: 确定任何一个元素是否有与之相关的jQuery数据。

jQuery.hasData( element )

element

类型: Element

一个用于进行检查数据的DOM元素。

jQuery.hasData()方法提供了一种方法来确定一个元素是否有任何数据，这些数据是使用jQuery.data()设置的。如果一个元素没有数据（没有在所有数据对象或数据对象是空的），该方法返回false ;否则返回true 。

jQuery.hasData(element) 的主要优点是它并不创建 data 对象。如果元素上没有 data 对象，那么该方法也不会与元素上的 data 对象关联。相反，jQuery.data(element)总是向调用者返回一个 data 对象，即使该元素上不含有 data 对象，它也会创建一个。

请注意，jQuery的事件系统是使用jQuery数据存储事件处理程序的。因此，使用.on(), .bind(), .live(),.delegate()，或一个速记事件方法绑定事件到一个元素上的时候，也会在那个元素上关联一个 data 对象。

元素上设置数据，看到hasData的结果。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Results: </p>
<script>
var $p = jQuery("p"), p = $p[0];
$p.append(jQuery.hasData(p)+" "); /* false */
 
$.data(p, "testing", 123);
$p.append(jQuery.hasData(p)+" "); /* true*/
 
$.removeData(p, "testing");
$p.append(jQuery.hasData(p)+" "); /* false */
 
$p.on('click', function() {});
$p.append(jQuery.hasData(p)+" "); /* true */
 
$p.off('click');
$p.append(jQuery.hasData(p)+" "); /* false */
 
</script>
 
</body>
</html>

jQuery.removeData()

jQuery.removeData( element [, name ] )返回: jQuery

描述: 删除一个先前存储的数据片段。

添加的版本: 1.2.3jQuery.removeData( element [, name ] )
- element
  
  类型: Element
  
  要移除数据的DOM对象
- name
  
  类型: String
  
  要移除的存储数据名.

注意这是一个底层的方法，你应该用.removeData()代替。

jQuery.removeData()方法允许我们移除用jQuery.data()绑定的值。当带name参数调用的时候，jQuery.removeData()将删除那个特有的值，当不带任何参数的时候，所有的值将被移除。

.removeData()

描述: 在元素上移除绑定的数据

添加的版本: 1.2.3.removeData( [name ] )
- name
  
  类型: String
  
  要移除的存储数据名.
添加的版本: 1.7.removeData( [list ] )
- list
  
  类型: Array,String
  
  一个数组或空间分隔的字符串命名要删除的数据块。

.removeData()方法允许我们移除用.data()绑定的值。当带name参数调用的时候，.removeData()将删除那个特有的值，当不带任何参数的时候，所有的值将被移除。从jQuery的内部.data() 缓存不影响任何在文档中的HTML5的data-属性，使用.removeAttr()可以移除这些属性。

当使用.removeData("name")时，如果没有这个属性名字是在内部数据缓存，jQuery将试图在元素上找到一个 data-的属性。为了避免重复查询 data- 属性，将这个名称设置为无论是null 或 undefined的值(例如 .data("name", undefined))，而不是使用.removeData()。

从jQuery 1.7开始, 当所谓的键数组或一个空间分隔键的字符串，.removeData()删除在该数组或字符串的每一个键值。

至于jQuery 1.4.3,调用的.removeData()将导致属性值被删除恢复到DOM中的名称相同的数据属性的值，而不是设置undefined。

Set a data store for 2 names then remove one of them.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { margin:2px; color:blue; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>value1 before creation: <span></span></div>
  <div>value1 after creation: <span></span></div>
  <div>value1 after removal: <span></span></div>
 
  <div>value2 after removal: <span></span></div>
<script>
 
    $("span:eq(0)").text("" + $("div").data("test1"));
    $("div").data("test1", "VALUE-1");
    $("div").data("test2", "VALUE-2");
    $("span:eq(1)").text("" + $("div").data("test1"));
    $("div").removeData("test1");
    $("span:eq(2)").text("" + $("div").data("test1"));
    $("span:eq(3)").text("" + $("div").data("test2"));
 
</script>
 
</body>
</html>

jQuery学习——数据

Contents:

获取存放在元素上名叫 "blah" 的数据。

.data( key, value )

添加的版本: 1.4.3.data( obj )

Additional Notes:（其他注意事项：）

从div元素储存然后找回一个值。

添加的版本: 1.2.3.data( key )

添加的版本: 1.4.data()

HTML5 data-* Attributes（HTML5 data-* 属性）

Additional Notes:（其他注意事项：）

获取存放在元素上的名为 "blah" 的数据。

jQuery.hasData( element )

元素上设置数据，看到hasData的结果。

添加的版本: 1.2.3jQuery.removeData( element [, name ] )

添加的版本: 1.2.3.removeData( [name ] )

添加的版本: 1.7.removeData( [list ] )

Set a data store for 2 names then remove one of them.