What is the difference between attr() and prop() in jquery

The difference between attr() and prop() in jquery is: the attr function operates on the attributes of the document node, and the set attribute value can only be a string type; the prop function operates on the attributes of the js object. The property value set can be of any type including arrays and objects.

Environment:

This article applies to all brands of computers.

Difference introduction:

In jQuery, the attr() function and the prop() function are both used to set or get the specified attribute, 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.

(Recommended tutorial: jquery video tutorial)

The specific differences are as follows:

1. The operation objects are different

It is obvious, 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 -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// 这里的name、age是Person的property
var Person = { name: "小明", age: 18};
</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.

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 can 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 of string type, if it is not a character String type, its toString() method will also be called to convert it to 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 the setting and obtaining of attributes, but also the setting and obtaining of 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.

<button>按钮</button>
    <input type="checkbox" name="" id="" checked="checked">
    <script src="jquery.js"></script>
    <script>
        // $(&#39;button&#39;).on(&#39;click&#39;,function(){

        // });
        // var r = $(&#39;input&#39;);
        $(&#39;button&#39;).on(&#39;click&#39;,function(){
            console.log(11)
            if ($(&#39;input&#39;).prop(&#39;checked&#39;)) {
                $(&#39;input&#39;).prop(&#39;checked&#39;,false);
            }else{
                $(&#39;input&#39;).prop(&#39;checked&#39;,true);
            }
        })
    </script>
   // attr / prop
// attr ==> getAttribute() / setAttribute()
// 用于操作 自定义的属性，对于DOM对象自身的布尔值类型的属性，只能
// 通过这个两个方法来设置或者读取默认值，而不能动态改变值
//
// prop ==> dom.checked = true;
// 对于 布尔值的属性（selected/checked/diabled） 都需要通过直接访问属性
// 方式来操作（点语法、[]）

Everyone knows that native js can get the inner html and outer html of matching elements. The inner is innerHTML and the outer is outerHTML. The dom object of native js has these two attributes.

document.getElementById("linkType").outerHTML;

If you use jQuery, how to get the matching elements (including the html of its own element)?

Since this attribute exists, we can use $("#linkType").prop("outerHTML") to obtain it;

can use $("#linkType").prop( "outerHTML", outerHTML) assignment to change the content of outerHTML;

It is worth noting that jQuery's attr cannot obtain the value of this attribute.

Related recommendations: js tutorial

The above is the detailed content of What is the difference between attr() and prop() in jquery. For more information, please follow other related articles on the PHP Chinese website!