JQuery. prop () Usage Details, jqueryprop

JQuery. prop () Usage Details, jqueryprop

The prop () function is used to set or return the attribute values of the elements matching the current jQuery object.

This function is a jQuery object (instance ). To delete attributes of a DOM element, use the removeProp () function.

Syntax

This function is added to jQuery 1.6. The prop () function has the following usage:

Usage 1:

JQueryObject. prop (propertyName [, value])

Sets or returns the value of the specified propertyName attribute. If the value parameter is specified, the value of the property propertyName is set to value. If the value parameter is not specified, the value of the property propertyName is returned.

The parameter value can also be a function. prop () executes the function based on traversal of all matched elements. The this pointer in the function points to the corresponding DOM element. Prop () also passes in two parameters for 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 propertyName attribute of the element. The Return Value of the function is the value set for the propertyName attribute of the element.

Usage 2:

JQueryObject. prop (object)

Set the values of any multiple attributes as objects at the same time. Each attribute of the object corresponds to propertyName, and the attribute value corresponds to value.

Note: All "set attributes" operations of the prop () function are for each element that the current jQuery object matches. All "read attributes" operations are only for the First Matching Element.
Parameters

Find the corresponding parameter based on the parameter name defined in the preceding syntax.

Parameter description
The property name specified by the propertyName String type.
Optional value: the attribute value specified by the Object/Function type, or the Function that returns the attribute value.
An object of the Object type. It is used to encapsulate multiple key-value pairs and set multiple attributes.
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 executes the "set attribute" operation or "read attribute" operation.

If the prop () function performs the "set attribute" operation, the current jQuery object itself is returned. If it is a "read attribute" operation, the read attribute value is returned.

If the current jQuery object matches multiple elements, when the returned attribute value is returned, the prop () function only takes the first matching element as the standard. If this element does not have a specified attribute, undefined is returned.

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

Notes

1. If you use the prop () function to change the type attribute of the <input> and <button> elements, an error will be thrown in most browsers, because this attribute cannot be modified later.

2. If you use the prop () function to manipulate attributes such as checked, selected, and disabled of a form element, true is returned if the element is selected (or disabled, otherwise (meaning that this attribute is not in HTML), false is returned.

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, and defaultSelected.

4. In IE9 and earlier versions, if the attribute value set using the prop () function is not a simple Original Value (String, Number, Boolean ), this attribute is not removed before the corresponding DOM element is destroyed, which may cause memory leakage. If you only want to store data, we recommend that you use the data () function to avoid Memory leakage.

Example & Description

The following section of the HTML code is used as an example:

Copy codeThe Code is as follows: <div id = "n1">
<P id = "n2" class = "demo test" data-key = "UUID" data_value = "1235456465"> CodePlayer </p>
<Input id = "n3" name = "order_id" type = "checkbox" value = "1">
<Input id = "n4" name = "order_id" type = "checkbox" checked = "checked" value = "2">
</Div>
We compile the following jQuery code:

Var $ n2 = $ ("# n2"); // The prop () operation is intended for the attributes of the Element (Element Object), rather than the attribute document of the Element node (HTML document. writeln ($ n2.prop ("data-key"); // undefineddocument. writeln ($ n2.prop ("data_value"); // undefineddocument. writeln ($ n2.prop ("id"); // n2document. writeln ($ n2.prop ("tagName"); // Pdocument. writeln ($ n2.prop ("className"); // demo testdocument. writeln ($ n2.prop ("innerHTML"); // CodePlayerdocument. writeln (typeof $ N2.prop ("getAttribute"); // function // attributes set by prop () are also for elements (Element objects ), therefore, you can directly access $ n2.prop ("prop_a", "CodePlayer"); document. writeln ($ n2 [0]. prop_a); // CodePlayervar n2 = document. getElementById ("n2"); document. writeln (n2.prop _ a); // CodePlayer // you can set multiple attributes in the form of an object. The attribute value can be an object or an array of any type. $ n2.prop ({prop_ B: "baike ", prop_c: 18, site: {name: "CodePlayer", url: "http://www.bkjia.com/"}); document. write Ln ($ n2 [0]. prop_c); // 18document. writeln ($ n2 [0]. site. url); // The http://www.bkjia.com/// Selects all check boxes (unselected to select, selected to unselected) $ ("input: checkbox "). prop ("checked", function (index, oldValue) {return! OldValue ;});

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