Detailed explanation of the difference between attr and prop in jquery with examples and usage

After the prop method is introduced in higher versions of jquery, when should prop be used? When to use attr? What's the difference between the two of them? These problems arise.

There are many answers online about the difference between the two. Here is a very simple experience:

For the inherent attributes of the HTML element itself, use the prop method when processing.

For our own custom DOM attributes of HTML elements, use the attr method when processing them.

In jQuery, both the attr() function and the prop() function are used to set or get specified attributes, and their parameters and usage are almost identical.

But it has to be said that the uses of these two functions are not the same. Let's introduce the difference between these two functions in detail.

1. Different operation objects

Obviously, attr and prop are the abbreviations of the words attribute and property respectively, and they both mean "attribute".

However, in jQuery, attribute and property are two different concepts. Attribute represents the attribute of the HTML document node, and property represents the attribute of the JS object.

<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->
<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
// 这里的name、age、url均是obj的property
var obj = { name: "CodePlayer", age: 18, url: "http://www.php.cn/" };
</script>

In jQuery, the design goal of the prop() function is to set or get the attribute (property) on the specified DOM element (referring to the JS object, Element type); the design of the attr() function The goal is to set or get the attribute on the document node corresponding to the specified DOM element.

<!-- attr()函数针对的是该文档节点的attribute -->
<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
// prop()函数针对的是该DOM元素(msg)自身的property
var msg = document.getElementById("message");
var $msg = $(msg);
</script>

Of course, in the underlying implementation of jQuery, the functions of functions attr() and prop() are implemented through JS native Element objects (such as msg in the above code). The attr() function mainly relies on the getAttribute() and setAttribute() methods of the Element object. The prop() function mainly relies on the native object property acquisition and setting methods in JS.

<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);
/* *** attr()依赖的是Element对象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value ) *** */
// 相当于 msg.setAttribute("data_id", 145);
$msg.attr("data_id", 145);
// 相当于 msg.getAttribute("data_id");
var dataId = $msg.attr("data_id"); // 145
/* *** prop()依赖的是JS原生的 element[property] 和 element[property] = value; *** */
// 相当于 msg["pid"] = "pid值";
$msg.prop("pid", "pid值");
// 相当于 msg["pid"];
var testProp = $msg.prop("pid"); // pid值
</script>

Of course, jQuery encapsulates these operations, making them more convenient for us to operate (such as setting multiple properties at the same time in the form of objects), and achieving cross-browser compatibility.

In addition, although prop() targets the property of the DOM element, not the attribute of the element node. However, changes to some attributes of DOM elements will also affect the corresponding attributes on the element nodes. For example, the property's id corresponds to the attribute's id, and the property's className corresponds to the attribute's class.

<p id="message" class="test" data_id="123"></p>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);
document.writeln( $msg.attr("class") ); // test
$msg.prop("className", "newTest");
// 修改className(property)导致class(attitude)也随之更改
document.writeln( $msg.attr("class") ); // newTest
</script>

2. Different application versions

attr() is a function that exists in jQuery version 1.0, and prop() is a new function in jQuery version 1.6. There is no doubt that before 1.6, you could only use the attr() function; in 1.6 and later versions, you can choose the corresponding function according to actual needs.

3. The attribute value types used for setting are different

Since the attr() function operates on the attributes of the document node, the attribute value set can only be StringType, if it is not a string type, its toString() method will also be called to convert it to a string type.

The prop() function operates on the properties of JS objects, so the property values ​​set can be of any type including arrays and objects.

4. Other detailed issues

Before jQuery 1.6, only the attr() function was available. This function was not only responsible for setting and obtaining attributes, but also setting and obtaining properties. Work. For example: before jQuery 1.6, attr() could also set or get the properties of DOM elements such as tagName, className, nodeName, nodeType, etc.

Until jQuery 1.6 added the prop() function and was used to set or get the property, attr() was only used to set and get the attribute.

In addition, for the checked, selected, disabled and other attributes of the form element, before jQuery 1.6, attr() obtained the return value of these attributes as Boolean type: if it is selected (or disabled), it returns true, otherwise Return false.

But starting from 1.6, use attr() to obtain the return value of these attributes as String type. If it is selected (or disabled), it returns checked, selected, or disabled, otherwise (that is, the element node does not have this attribute). undefined. Moreover, in some versions, these attribute values ​​represent the initial state value when the document is loaded. Even if the selected (or disabled) state of these elements is changed later, the corresponding attribute values ​​will not change.

Because jQuery believes that: attribute's checked, selected, and disabled represent the value of the attribute's initial state, and property's checked, selected, and disabled represent the value of the property's real-time state (the value is true or false).

Therefore, in jQuery 1.6 and later versions, please use the prop() function to set or get checked, selected, disabled and other properties. For other operations that can be implemented with prop(), try to use the prop() function.

<input id="uid" type="checkbox" checked="checked" value="1">
<script type="text/javascript">
// 当前jQuery版本为1.11.1
var uid = document.getElementById("uid");
var $uid = $(uid);
document.writeln( $uid.attr("checked") ); // checked
document.writeln( $uid.prop("checked") ); // true
// 取消复选框uid的选中(将其设为false即可)
// 相当于 uid.checked = false;
$uid.prop("checked", false);
// attr()获取的是初始状态的值，即使取消了选中，也不会改变
document.writeln( $uid.attr("checked") ); // checked
// prop()获取的值已经发生变化
document.writeln( $uid.prop("checked") ); // false
</script>

The above is the detailed content of Detailed explanation of the difference between attr and prop in jquery with examples and usage. For more information, please follow other related articles on the PHP Chinese website!