Difference between attr () and prop () in jQuery 1.6 +, jqueryattr

Difference between attr () and prop () in jQuery 1.6 +, jqueryattr

Recently, when I wrote an optimization method for selecting and canceling all checkbox options, I found that many experts used. prop (). After checking the help document of jquery, we can see that this is a newly added method in jquery 1.6.1 to set attributes. But now we have attr (). Why do we need to add prop? So I read the relevant documents and summarized them.
The following describes the conditions under which they are used: 1. checked, selected, readonly, and disabled are processed in the same way as before 1.6.1 and 1.6, that is, attr () is used directly, as shown in figure

          $(“:checkbox”).attr(“checked”, true);          $(“option”).attr(“selected”, true);          $(“input”).attr(“readonly”, true);          $(“input”).attr(“disabled”, true);

Even such code:

          if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ } 

All of them can be normally run in jquery above 1.6, but there are some bugs, as described below. II. In the following. attr () example, although it works normally in versions earlier than jQuery 1.61, it must be replaced by. prop:
　　　　　

1         　　　　　　　　.attr                                     .prop2 　　　　 　　　$(window).attr()                             $(window).prop()3 　　　　　　　 $(document).attr()                           $(document).prop()4  　　　　　　　$(':checkbox').attr('checked',true)          $(':checkbox').prop('checked',true)5  　　　　　　　$('option').attr('selected',true)            $('option').prop('selected',true)

 

First, the. attr () method in window or document cannot run normally in jQuery1.6, because attributes cannot exist in window and document. They contain properties (such as location or readyState) and must be operated using the. prop () method or simply using the javascript native method. In jQuery1.6.1, the use of. attr () in window and document will be automatically converted to use. prop (not tried yet ). Secondly, checked, selected, and other boolean attributes mentioned above are specially treated because of the special relationship between these attributes and their corresponding properties. Attribute is usually seen in the following html code, for example:

              <input type=”checkbox” checked=”checked”>

However, it only indicates that the checked attribute is set to the default value or initial value during page loading, regardless of whether the checkbox element is selected. In general, properties is a browser used to record the current property value. Normally, properties reflects their corresponding attributes.
 Therefore, when a user clicks a checkbox element or selects an option for a select element, the properties is kept up-to-date, but the corresponding attributes is not necessarily, it is only used by the browser to save the initial value of this attribute. 
   In jQuery1.6, if you use the following method to set checked:

              $(“:checkbox”).attr(“checked”, true);

The checkbox element is not checked because it is used to set attributes, but all values are set as initial values.
In summary, I think that when setting these prioerties, the prop () is used, while the initialized value is obtained using attr ().
The following is a complete list of Using. attr () to dynamically obtain and set boolean attributes/properties supported by jQuery1.6.1:

Autofocus, autoplay, async, checked, controls, defer, disabled, hidden, loop, multiple, open, readonly, required, scoped, selected

Of course, the code can still run normally in jQuery1.6.1. We recommend that you use the. prop () method to set these boolean attributes/properties.

What is jquery prop?

Prop () gets the attribute value of the matched element.
This method is developed after jquery1.6 to distinguish the previous. attr () method.

The biggest difference is that the. prop () method can be used for Boolean attributes after 1.6.
This Boolean attribute, explained again, is that the attribute value is only true | false.
You can also use the. prop () method to add only the attribute name and do not need to write the attribute value. For example, checked and disable are actually Boolean attributes.

1. Add a property name. This property will take effect. Use prop ();
2. There are true and false attributes using prop ();
3. For others, use attr ();

The problem of jquery-202 for attr Method

Use $ ('selector '). prop ("checked"); // obtain the checked value of the selected item;
$ ('Selector '). prop ("checked",' "true"); // you can specify the checked value of the selected item;
This is enough.