attr () usage
attr () Gets the property value
Obtaining attributes attr (), so can $ (selector) .attr (attrName) . Note that the return value is always string type!
eg: by attr () to get the value of the attribute age is "23", the value of the attribute iswork is "true".
Also note that, attr () is insensitive to incoming attrName case, that attr ( 'name') and attr ( 'NAME') can give the desired return value.
<div class="card" id="jq-attr" name="zx" AGE="23" isWork="true"></div> $('#jq-attr').attr('age'); // "23" $('#jq-attr').attr('iswork'); // "true"
attr () to add and modify properties
attr supports three ways to modify the properties, which can transfer three kinds of parameter to the API: attr (attrName, value), attr (attrName, function), attr (obj).
If the second parameter is a function, then the function is executed, and the execution result as attr () return value.
attr (obj) is equivalent to the multiple calls attr (attrName, value), such attr ({attr1: value1, attr2 : value2}), equivalent to attr (attr1, value1) .attr ( attr1, value2);
JavaScript code, by attr () dynamically modify property values and add new properties, if the passed value is an object, will eventually get ↓↓↓
var $el = $('#jq-attr');
$el.attr('attr1', {name: 'chen'});
$el.attr('attr1'); // "[object Object]"
$el.attr('attr2', [1, 2, 3]);
$el.attr('attr2'); // "1, 2, 3"
$el.attr('attr3', null);
$el.attr('attr3'); // "undefined"
$el.attr('attr4', undefined);
$el.attr('attr4'); // "undefined"
As can be seen, if the data type is a basic value, then the corresponding string returned directly, but returns null value "undefined" is not "null". If the value is an object, then the object's toString () is called, the execution result that is attr () return value.
data () usage
data () to modify the data and the new data bound
And attr () Similarly, the data can be bound when the page is generated, the actual name is added to the element data- * attributes.
<div class="card" id="jq-attr" data-name="chen" data-AGE="23" isWork="true"></div>
From JavaScript, data () so that data can be modified: data (key, value), and data (obj). The latter is equivalent to the data (key1, value1) .data (key2, value2). In yet another mode, the following
Data el.data $ = var ();
data.attr = 10;
when using data () to modify the data, if the type value is undefined, then the data will not be saved or updated.
el.data $ ( 'School', undefined);
$ el.data () hasOwnProperty ( 'School');. to true //
$ el.data ( 'attr', undefined);
$ el.data ( 'attr') ; // 10
data () Get Data
To data () call parameter passing a string key, i.e., data (key), or data () [key] to obtain a corresponding key value. But note that, data () may return undefined if there is no data binding, so the data (key) way more secure. And attr () return value string is not the same type, data () numbers will be statically bound, Boolean, objects, arrays, and null for conversion. See below a few examples.
<div class="box" id="jq-data" data-name="zx" data-AGE="23" data-isWork="true" data-func="function(){}" data-list='{"listname":"eric chen"}' data-undefinedkey="undefined" data-nullkey="null" data-last-value="100"></div> var $el = $('#jq-data'); $el.data('age'); // 23 $el.data('AGE'); // undefined $el.data('isWork'); // true $el.data('func'); // "function() {}" $el.data('list'); // obj {"listname": "eric chen"} $el.data('undefinedkey'); // "undefined" $el.data('nullkey'); // null $ el.data ( 'load value'); // 100 $ el.data ( 'load value'); // undefined
If the static binding in HTML data, to obtain data by data (), key must be all lowercase, such as the binding data-AGE = "23", only through the data ( 'age') instead of data ( 'AGE '). Also note that data-last-value = "100 ", only by data ( 'lastValue') or data ( 'last-value') .
When modified using data () in JavaScript, the reacquisition value shall be strictly in accordance with specified key. Such data ( 'AGE', 22) , time data ( 'age') is 23, data ( 'AGE') to return 22. This is because, when the JS in the first call data (), HTML, static data will be bound to jQuery.cache copy variable, copying key characters are converted to the corresponding lower case letters. Again using the data () when you modify data or add new data for key is not converted to lowercase, do not have stored data type conversion!
Typically, data ( 'lastValue', value ) , and data ( 'last-value', value) the same data is modified.
However, if not to data () pass any parameters to obtain all of the data on the binding, i.e., a $ EL JSON object, and then modify an attribute value of the object.
were dt = $ el.data ();
dt [ 'load value'] = 99;
dt.lastValue = 100;
$ el.data ( 'load value'); //?
$ el.data ( 'load value'); //?
You will find E L . D A T A ( ' L A S T - V A L U E ' ) back to back 99 , and el.data ( 'last-value') to return 99, and el.data ( 'lastValue' ) returns 100. Equivalent to this another way:
$ el.data ({ 'Last-value': 99, 'lastValue': 100});
Summary
If a page is to store and transfer data related to the elements, data () ratio attr () is a better choice. Understanding data () works, in order to use the API correctly.