Home > Article > Web Front-end > The difference between .attr() and .data()
The difference between .attr() and .data()
- php中世界最好的语言Original
- 2018-04-19 15:39:301624browse
This time I will bring you the difference between .attr() and .data(). What are the precautions when using .attr() and .data(). The following is a practical case. Let’s take a look. take a look.
JqueryObjectProperties and DOM properties
A simple example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery中.attr和.data的区别</title>
</head>
<body>
<p id="app"data-foo="hello"></p>
</body>
<script type="text/javascript"src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
vargetAttr1 = $('#app').attr('data-foo');
vargetData1 = $('#app').data('foo');
console.log('getAttr1: '+ getAttr1);//hello
console.log('getData1: '+ getData1);//hello
$('#app').attr('data-foo','world');//$.attr 设置DOM元素属性值
vargetAttr2 = $('#app').attr('data-foo');
vargetData2 = $('#app').data('foo');
console.log('getAttr2: '+ getAttr2);//world
console.log('getData2: '+ getData2);//*** hello ***
$('#app').data('foo','WORLD');//$.data 设置DOM node属性值
vargetAttr3 = $('#app').attr('data-foo');
vargetData3 = $('#app').data('foo');
console.log('getAttr3: '+ getAttr3);//world
console.log('getData3: '+ getData3);//*** WORLD ***
</script>
</html>
• $.attr() takes the attribute value from the DOM element every time, that is, it is consistent with the attribute value in the tag in the view. •$.attr('data-foo') will get the data-foo attribute value from the tag;
•$.attr('data-foo', 'world') will insert the string 'world' into the 'data-foo' attribute of the tag;
•$.data() takes the value from the Jquery object. Since the object attribute value is stored in memory, it may be inconsistent with the attribute value in the view. •$.data('foo') will get the attribute value of foo from the Jquery object, not the data-foo attribute value from the tag;
•$.data('foo', 'world') will insert the string 'world' into the 'foo' attribute of the Jquery object instead of the data-foo attribute of the view tag.
Combining the above code and explanation, everyone should be able to understand the difference between the two.
Summary
Therefore, $.attr() and $.data() should avoid mixed use, that is, the following two situations should be avoided as much as possible:
1. Use $.attr() to set the attribute, and then use $.data() to get the attribute value;
2. Use $.data() to set the attribute, and then use $.attr() to get the attribute value.
At the same time, from a performance perspective, it is recommended to use $.data() for set and get operations, because it only modifies the attribute value of the Jquey object and will not cause additional DOM operations.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
jQuery makes mouse wheel operation picture zoom size
jQuery implements the back to top function
jQuery determines whether to browse to the bottom of the webpage
The above is the detailed content of The difference between .attr() and .data(). For more information, please follow other related articles on the PHP Chinese website!