attr和data

标签：style   blog   io   color   ar   os   使用   sp   java   

attr()获得属性值

通过attr()获得属性时，可以这样$(selector).attr(attrName)。注意，其返回值始终是string型！看下面的例子。通过attr()得到的属性age的值是”31”，属性isstd的值是”false”。另外需要注意的是，attr()对传入的attrName大小写不敏感，就是说attr(’name’)和attr(’NAME’)都能得到期望的返回值。

attr()添加和修改属性

attr修改属性支持三种方式，即可以向API传递三种形参：attr(attrName, value)，   attr(attrName, function)，   attr(obj)。如果第二个参数是function，那么该function会被执行，并将执行结果作为attr()的返回值。attr(obj)等同于多次调用attr(attrName, value)，比如attr({attr1: value1, attr2: value2})等同于attr(attr1, value1).attr(attr1, value2); 在JavaScript代码，可以通过attr()动态修改属性值和添加新属性，如果传入value是对象，我们最终会获得什么呢？看下面几个例子。

var $el = $(‘#jquery-api-attr‘);
$el.attr(‘newAttr1‘, {name: ‘chen‘});
$el.attr(‘newAttr1‘); // "[object Object]"

$el.attr(‘newAttr2‘, [1, 2, 3]);
$el.attr(‘newAttr2‘); // "1, 2, 3"

$el.attr(‘newAttr3‘, null);
$el.attr(‘newAttr3‘); // "undefined"

$el.attr(‘newAttr4‘, undefined);
$el.attr(‘newAttr4‘); // "undefined"

可以看出，如果value是基本数据类型的一种，那么直接返回相应的字符串，但是null value返回的是“undefined”并非”null”。如果value是一个对象，那么对象的toString()会被调用，执行结果即attr()的返回值。

data()修改数据和绑定新数据

和attr()类似，可以在页面生成时绑定数据，实际上是给元素添加名称为data-*的属性。

在JavaScript里，data()修改数据可以这样：data(key, value)和data(obj)。后者等同于data(key1, value1).data(key2, value2)。还有一种方式，如下

var data = $el.data();
data.newAttr = 10;

在使用data()修改数据时，如果value是undefined类型，那么数据不会保存或更新。

$el.data(‘school‘, undefined);
$el.data().hasOwnProperty(‘school‘); // false
$el.data(‘newAttr ‘, undefined);
$el.data(‘newAttr ‘); // 10

data()获取数据

往data()传入一个string称之为key的参数即data(key)，或者data()[key]来获得与key对应的value。但是注意一点，data()可能会返回undefined如果没有任何数据绑定，所以data(key)的方式更为安全。和attr()值返回string类型的值不一样，data()会对静态绑定的数字、布尔、对象、数组和null进行转换。看下面几个例子。

<div class="box" id="jquery-api-data" data-name="chen" data-AGE="31" data-isStd="false" data-func="function(){}"
     data-list=‘{"listname":"eric chen"}‘ data-undefinedkey="undefined" data-nullkey="null" data-last-value="43"></div>
var $el = $(‘#jquery-api-data‘);
$el.data(‘age‘); // 31
$el.data(‘AGE‘); // undefined
$el.data(‘isstd‘); // false
$el.data(‘func‘); // "function() {}"
$el.data(‘list‘); // obj {"listname": "eric chen"}
$el.data(‘undefinedkey‘); // "undefined"
$el.data(‘nullkey‘); // null
$el.data(‘lastValue‘); // 43
$el.data(‘lastvalue‘); // undefined

如果在HTML里静态绑定了数据，通过data()来获取数据时，key必须全小写，比如绑定data-AGE="31"，只能通过data(‘age‘)而不是data(‘AGE‘)。另外注意data-last-value="43"，只能通过data(‘lastValue‘)或者data(‘last-value‘)。 在JavaScript里通过data()修改数据，再获取值时，须严格按照指定的key。比如data(‘AGE‘, 20)，这时data(‘age‘)是31，data(‘AGE‘)返回20。这时因为，在JS里第一调用data()时，会将HTML里静态绑定的数据，复制到jQuery.cache变量里，复制时key中的字符都转换为对应的小写字母。再次使用data()修改数据或添加新数据时，对key不会转换为小写字母，也不会对存入的数据做类型转换！ 通常，data(‘lastValue‘, value)和data(‘last-value‘, value)修改的是同一数据。但是如果是这样子呢？不给data()传入任何参数来获得绑定在$el上的所有数据即一个JSON对象，然后修改这个对象的属性值。

attr和data

标签：style   blog   io   color   ar   os   使用   sp   java   

原文地址：http://www.cnblogs.com/surahe/p/4100817.html