The difference between attr and prop in jquery

When should I use prop after the introduction of the prop method in the high version of jquery? When should I use attr? What's the difference between them? These problems have arisen.
I have some opinions about their differences:

• The prop method is recommended for handling the intrinsic properties of the HTML element itself
• For HTML elements Our custom DOM properties, we recommend using the Attr method when processing

The above description may be a little vague, as you can see in a few examples.

<id= "First"  href= "#"  target= "_self"  > Hyperlinks </a>

In this example, the DOM attribute of <a> element has ID, href, target, these properties are <a> element itself, which contains these attributes, Or a property that can be intelligently prompted in the IDE, these are called intrinsic properties. When handling these properties, it is recommended to use Prop.

<id= "First"  href= "#"  target= "_self"  UUU= "Guoguo"> hyperlink </a>

In this example, the DOM attribute of the <a> element has ID, href, target, UUU, the first three are intrinsic properties, and the last "UUU" attribute allows us to customize,<a> The element itself does not have this property, and this is the custom DOM property. When handling these properties, it is recommended to use attr.

Read HTML element intrinsic property (assigned value)

<href= "#"  target= "_self"> hyperlink </  Thevalues for both a >//attr and prop are read successfully//attr ("href") are: #//prop ("href") the value is: http://localhost:4590/ Attributehandle/index#alert ($ ("a"). attr ("href")); Alert ($ ("a"). Prop ("href"));

Read HTML element intrinsic property (unassigned)

The intrinsic properties of different HTML tags are not exactly the same, for example: The Checked property is an intrinsic property of the checkbox tag, but not the intrinsic property of the a tag. Although the Class property is an intrinsic property of the A tag, it is not read with attr () if the attribute is not assigned a value in the element.

<ahref="#"Target= "_self">Hypertext links</a><inputtype= "checkbox"ID= "Testcheckbox"value= "Test checkbox"/>Alert ($ ("a"). attr ("id"));//output: Undefinealert ($ ("a"). Prop ("id"));//output: Default Value "" Alert ($ ("a"). attr ("checked");// Output: Undefinealert ($ ("a"). Prop ("checked"));//output: Undefinealert ($ ("#testCheckBox"). attr ("checked"));// Output: Undefinealert ($ ("#testCheckBox"). Prop ("checked"));//output: Default value Falsealert ($ ("a"). attr ("class"));// Output: Undefinealert ($ ("a"). Prop ("class"));//output: Default value ""

Read HTML element custom attribute (assigned value)

<href= "#"  target= "_self"  uuu= "Guoguo"  > Hyperlinks </a>alert ($ ("a"). attr ("UUU"));//output: Guoguoalert ($ ("a"). Prop ("UUU"));//output: Undefine

Read HTML element custom attributes (Unassigned)

<href= "#"  target= "_self"  uuu= "Guoguo"  > Hyperlinks </a>alert ($ ("a"). attr ("abc"));//output: Undefinealert ($ ("a"). Prop ("abc"));//output: Undefine

Set HTML element intrinsic properties

<href= "#"  target= "_self"  uuu= "Guoguo"  > Hyperlinks </a>$ ("a"). attr ("id", "link");//id attribute added succeeded $ ("a"). Prop ("id", "link");//id Property added successfully

Set HTML element Custom properties

<href= "#"  target= "_self"  uuu= "Guoguo"  > Hyperlinks </a>$ ("a"). attr ("abc", "Myself");//Successfully added property abc= "Myself" $ ("a "). Prop (" abc "," Myself ");//Add ABC Property failed $ (" a "). attr (" Action "," AddAttribute ");//Successfully added property action=" AddAttribute "$ (" a "). Prop ("Action", "AddAttribute");//Failed to add the Action property

Summarize

Prop Read Property values: Reading an intrinsic property of an assignment will get the value of the property, reading the intrinsic property of the unassigned will get the default value of the property, read from the defined property regardless of whether the assignment is undefine.
Prop Set property value: Prop can only set intrinsic property values.
Attr Read Property value: Whether it is an intrinsic property or a custom property, attr can only read an attribute value that is already in the element, and a property value that is not in the Read element returns undefine.
attr Setting property values: attr You can set property values on any property.

The difference between attr and prop in jquery