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 AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

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 the "[Vuewarn]:Missingrequiredprop" error When developing Vue applications, you sometimes encounter a common error message: "[Vuewarn]:Missingrequiredprop". This error usually refers to the lack of required property values ​​in the component, causing the component to fail to render properly. The solution to this problem is simple. We can avoid and deal with this error through some skills and regulations. Here are some solutions

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

Methods to solve "[Vuewarn]:Invalidprop:invalidvalue" error When developing applications using Vue.js, we often encounter some errors and warnings. One of the common errors is "[Vuewarn]:Invalidprop:invalidvalue". This error usually occurs when we try to pass an invalid value to a property of a Vue component. In this article, we will delve into the root cause of this 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 Fix “[Vuewarn]:Invalidprop:typecheck” Error Vue.js is a popular JavaScript framework for building user interfaces. When developing applications using Vue.js, we sometimes encounter some error messages, one of which is "[Vuewarn]:Invalidprop:typecheck". This error is usually caused by incorrect use of attributes in the component

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

Methods to solve the "[Vuewarn]:Invalidprop:customvalidator" error During the development process of using Vue, we often encounter some warning and error messages. One of the common error messages is "[Vuewarn]:Invalidprop:customvalidator". The reason this error message occurs is because when we use the custom validator function, we fail to correctly validate the component passed to it.

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

Methods to solve the "[Vuewarn]:Avoidmutatingapropdirectly" error When developing projects using Vue.js, we may encounter a common warning message: "[Vuewarn]:Avoidmutatingapropdirectly". The meaning of this warning message is that we should not directly change the value of a props attribute, but should trigger an event to let the parent component change the pro

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 "[Vuewarn]:Avoidmutatingapropdirectly" error When developing web applications using Vue.js, we often encounter some warnings or errors. One of the common warnings is "[Vuewarn]:Avoidmutatingapropdirectly", which means that we directly modify a property (prop) passed by the parent component in the component. In this article, we

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

Methods to solve the "[Vuewarn]:Invalidprop:updatevalue" error In Vue development, we often encounter the "[Vuewarn]:Invalidprop:updatevalue" error. This error is usually caused by a parent component passing an invalid value to a child component. Although this error is a Vue warning rather than a fatal error, it should still be resolved in time to ensure the robustness of the program. This article will introduce

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 Vue is a very popular front-end framework. It provides a component-based development method and realizes the development of complex applications through the nesting and communication of components. In actual development, communication between components is often an important issue. When there are multi-level relationships between components, how to efficiently transfer data becomes a question that developers need to think about. This article will introduce several common multi-level component communication schemes and compare them. Use props and $emitVue to provide

See all articles