Home Web Front-end JS Tutorial The difference between attr() and prop() in jQuery when modifying the checked attribute_jquery

The difference between attr() and prop() in jQuery when modifying the checked attribute_jquery

May 16, 2016 pm 04:41 PM
prop

When making the check box select button, a problem occurred. Use the statement $.attr('checked',true) to change the attribute of the check box to checked. It is the first in the chrome browser. It won't work after the first click is valid. IE8 has no problem.

Baidu took a long time to find out that the reason is that the attributes of HTML are divided into attributes and properties. Let’s call the latter properties for now.

The checked attribute is divided into attribute->checked, and property->true, false.

For a checkbox, if checked="checked" is not defined, the result of alert($.attr("checked")) is undefined. If defined, the result is checked. The attribute does not change as the status of the checkbox changes.

If prop($.attr("checked")) is used, the output will be false and true respectively. The property changes as it changes.

So prop() should be used when modifying the checked attribute. prop() was added after jQuery 1.6.

Charts about other similar properties on the Internet:

In addition, in versions before IE9, if the property is not deleted before the DOM element is removed, using the .prop() method to set the value of the DOM element property (except simple types: number, string, boolean) will cause a memory leak. . In order to safely set the value of the DOM object and avoid memory leaks, you can use the .data() method. I haven't encountered it yet, so I'll write it down here.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to solve '[Vue warn]: Missing required prop' error How to solve '[Vue warn]: Missing required prop' error Aug 26, 2023 pm 06:57 PM

How to solve '[Vue warn]: Missing required prop' error

How to solve the '[Vue warn]: Invalid prop: invalid value' error How to solve the '[Vue warn]: Invalid prop: invalid value' error Aug 25, 2023 pm 02:51 PM

How to solve the '[Vue warn]: Invalid prop: invalid value' error

How to solve the '[Vue warn]: Invalid prop: custom validator' error How to solve the '[Vue warn]: Invalid prop: custom validator' error Aug 20, 2023 pm 10:53 PM

How to solve the '[Vue warn]: Invalid prop: custom validator' error

How to solve '[Vue warn]: Invalid prop: type check' error How to solve '[Vue warn]: Invalid prop: type check' error Aug 26, 2023 pm 10:40 PM

How to solve '[Vue warn]: Invalid prop: type check' error

How to deal with '[Vue warn]: Avoid mutating a prop directly' error How to deal with '[Vue warn]: Avoid mutating a prop directly' error Aug 17, 2023 am 11:12 AM

How to deal with '[Vue warn]: Avoid mutating a prop directly' error

Comparison of multi-level delivery schemes in Vue component communication Comparison of multi-level delivery schemes in Vue component communication Jul 18, 2023 pm 03:21 PM

Comparison of multi-level delivery schemes in Vue component communication

How to solve the '[Vue warn]: Avoid mutating a prop directly' error How to solve the '[Vue warn]: Avoid mutating a prop directly' error Aug 17, 2023 pm 05:21 PM

How to solve the '[Vue warn]: Avoid mutating a prop directly' error

How to solve the '[Vue warn]: Invalid prop: update value' error How to solve the '[Vue warn]: Invalid prop: update value' error Aug 26, 2023 pm 08:19 PM

How to solve the '[Vue warn]: Invalid prop: update value' error

See all articles