Jquery.prop () using the detailed

Source: Internet
Author: User
Tags tagname

The prop () function is used to set or return the property value of the element that the current jquery object matches.

The function belongs to the jquery object (instance). If you need to delete the properties of the DOM element, use the Removeprop () function.

Grammar

jQuery 1.6 adds this function. There are two ways to use the Prop () function:

Usage One:

Jqueryobject.prop (PropertyName [, value])

Sets or returns the value of the specified property propertyname. If the value parameter is specified, the value of the Set property PropertyName is values, or the value of the property PropertyName is returned if no value parameter is specified.

The parameter value can also be a function, prop () will execute the function according to all the elements of the match, and the this pointer in the function will point to the corresponding DOM element. Prop () also passes 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 property. The return value of the function is the value set for the element's PropertyName property.

Usage Two:

Jqueryobject.prop (object)

Sets the value of any number of properties in the form of an object. Each property of the object objects corresponds to PropertyName, and the value of the property corresponds to value.

Note: All the Set property actions of the prop () function are for each element that the current jquery object matches, and all read property operations are for the first matched element.
Parameters

Find the corresponding parameter based on the parameter name defined in the previous syntax section.

Parameter description
PropertyName The name of the property specified by the string type.
Value optionally/object/function the property value specified by the type, or a function that returns the value of the property.
An object that is specified by the type objects, which encapsulates multiple key-value pairs while setting multiple properties.
The parameter value can be any type, including objects and arrays.

return value

The return value of the prop () function is any type, and the type of the return value depends on whether the current prop () function performs a set property operation or a read property operation.

If the prop () function performs a set property operation, the current jquery object itself is returned, and if it is a read property operation, the value of the property read to is returned.

If the current jquery object matches multiple elements and returns the property value, the prop () function only takes precedence over the first matching element. If the element does not have a specified property, the undefined is returned.

The main differences between prop () and attr (): the prop () function is for the properties of the DOM element (JS element Object), and the attr () function is for the properties of the document node corresponding to the DOM element. For details, see the difference between the jquery function attr () and prop ().

Precautions

1. If you change the Type property of the <input> and <button> elements through the prop () function, an error will be thrown on most browsers because this property is generally not allowed to be changed at a later time.

2. If the prop () function is used to manipulate attributes such as checked, selected, disabled, etc. of the form element, returns True if the element is selected (or disabled), otherwise (meaning that the attribute is not in HTML) returns false.

3. The prop () function can also set or return certain properties on the element object of the DOM elements, for example: TagName, SelectedIndex, NodeName, NodeType, Ownerdocument, Attributes such as defaultchecked and defaultselected.

4. In IE9 and earlier versions, if the property value set with the prop () function is not a simple original value (String, number, Boolean), and the property is not removed until the corresponding DOM element is destroyed, May cause a memory leak issue. If you are just trying to store data, it is recommended that you use data () functions to avoid memory leak issues.

Example & Description

Take the following HTML code as an example:

The 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 write the following jquery code :

var $n 2 = $ ("#n2");//The Prop () operation is for the attributes of the element object, not the attribute Document.writeln ($n 2.prop ("Data-key") of the element node (HTML document); Undefineddocument.writeln ($n 2.prop ("Data_value")); Undefined Document.writeln ($n 2.prop ("id")); N2document.writeln ($n 2.prop ("TagName")); Pdocument.writeln ($n 2.prop ("ClassName")); Demo Testdocument.writeln ($n 2.prop ("InnerHTML")); Codeplayerdocument.writeln (typeof $n 2.prop ("getattribute")); The properties of the function//prop () setting are also for elements (element objects), so you can also access $n2.prop ("Prop_a", "Codeplayer") directly through the element itself;d Ocument.writeln ($n 2[0 ].PROP_A); Codeplayervar N2 = document.getElementById ("n2");d Ocument.writeln (n2.prop_a); Codeplayer//Set multiple properties at the same time as object, the property value can be an object, an array, and any type $n2.prop ({prop_b: "Baike", Prop_c:18, site: {name: "Codeplayer", url : "http://www.jb51.net/"});d Ocument.writeln ($n 2[0].prop_c); 18document.writeln ($n 2[0].site.url); http://www.jb51.net///Uncheck all the checkboxes (uncheck instead, select to uncheck) $ ("Input:checkbox"). Prop ("Checked", function (index, OldValue ) {return!OLDVAlue;}); 

  

Jquery.prop () using the detailed

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.