Detailed explanation of jQuery.prop() usage_jquery

The

prop() function is used to set or return the attribute value of the element matched by the current jQuery object.

This function belongs to the jQuery object (instance). If you need to remove a property of a DOM element, use the removeProp() function.

Grammar

This function was added in jQuery 1.6. The prop() function has the following two uses:

Usage 1:

jQueryObject.prop( propertyName [, value ] )

Set or return the value of the specified property propertyName. If the value parameter is specified, it means setting the value of the property propertyName to value; if the value parameter is not specified, it means returning the value of the property propertyName.

The parameter value can also be a function. prop() will traverse and execute the function based on all matched elements. The this pointer in the function will point to the corresponding DOM element. prop() will also pass in two parameters to the function: the first parameter is the index of the element in the matching element, and the second parameter is the current value of the element's propertyName attribute. The return value of the function is the value set for the element's propertyName attribute.

Usage 2:

jQueryObject.prop( object )

Set the values ​​of any number of properties simultaneously in the form of objects. Each attribute of the object object corresponds to propertyName, and the value of the attribute corresponds to value.

Note: All "setting attributes" operations of the prop() function are for each element matched by the current jQuery object; all "reading attributes" operations are only for the first matching element.
Parameters

Please find the corresponding parameters based on the parameter names defined in the previous syntax section.

Parameter Description
propertyName The property name specified by String type.
value The attribute value specified by the optional/Object/Function type, or a function that returns the attribute value.
object An object specified by the Object type, used to encapsulate multiple key-value pairs and set multiple properties at the same time.
The parameter value can be of any type including objects and arrays.

Return value

The return value of the prop() function is of any type. The type of the return value depends on whether the current prop() function performs a "setting attribute" operation or a "reading attribute" operation.

If the prop() function performs a "setting property" operation, it returns the current jQuery object itself; if it performs a "reading property" operation, it returns the read property value.

If the current jQuery object matches multiple elements, when returning the attribute value, the prop() function only uses the first matching element among them. If the element does not have the specified attribute, undefined is returned.

The main difference between prop() and attr(): the prop() function targets the attributes of the DOM element (JS Element object), and the attr() function targets the attributes of the document node corresponding to the DOM element. For details, please see the difference between jQuery functions attr() and prop().

Notes

1. If the type attribute of the and elements is changed through the prop() function, an error will be thrown on most browsers, because this attribute is generally not allowed to be changed later.

2. If you use the prop() function to operate the checked, selected, disabled and other attributes of the form element, if the element is selected (or disabled), it will return true, otherwise (meaning there is no such attribute in HTML), it will return false.

3. The prop() function can also set or return certain attributes on the Element object of the DOM element, such as: tagName, selectedIndex, nodeName, nodeType, ownerDocument, defaultChecked, defaultSelected and other attributes.

4. In IE9 and earlier versions, if the attribute value set using the prop() function is not a simple primitive value (String, Number, Boolean), and before the corresponding DOM element is destroyed, the attribute has no If removed, memory leaks may occur. If you are just storing data, it is recommended that you use the data() function to avoid memory leaks.

Examples & Instructions

Take the following HTML code as an example:

Copy code The code is as follows:

CodePlayer

We write the following jQuery code:

var $n2 = $("#n2");
// prop()操作针对的是元素(Element对象)的属性，而不是元素节点(HTML文档)的属性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined

document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function

// prop()设置的属性也是针对元素(Element对象)，因此也可以通过元素本身直接访问
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer

// 以对象形式同时设置多个属性，属性值可以是对象、数组等任意类型
$n2.prop( { 
  prop_b: "baike",
  prop_c: 18,
  site: { name: "CodePlayer", url: "http://www.jb51.net/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://www.jb51.net/

// 反选所有的复选框(没选中的改为选中，选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
  return !oldValue;
});

Copy after login

The above is the entire content of this article, I hope you all like it.