.prop()
JQ Home <<
A & P <<
.prop()
First element property retrieval and matched set property setting.
Description
The .prop()
method is used to retrieve a property value from the first element within the matched set, or set one or more property values within the matched set.
- Returns
undefined
for property values that haven't been set. - Use the
.attr()
method to retrieve or set DOM attributes. - When changing the dynamic state of a DOM element, the
.prop()
method should be used to setdisabled
andchecked
. - When changing the dynamic state of a DOM element, the
.val()
method should be used for getting and setting value. - In IE6-8, when using the
.prop()
method to set a DOM element property to anything other than a simple primitive value (boolean, number or string), the method can cause memory leaks. This happens if the property is not removed using the.removeProp()
method before the DOM element is removed from the document. To safely set values on DOM elements without memory leaks, use the.data()
method.
Syntax
Signature | Description |
---|---|
.prop( propertyName ) | Retrieve a property value from the first element within the matched set. |
.prop( propertyName, value ) | Set a single property value within the matched set. |
.prop( map ) | Use a map of attribute-value pairs to set multiple property values within the matched set. |
.prop( propertyName, function(index, prop) ) | A function returning the property value to set. |
Parameters
Parameter | Description | Type |
---|---|---|
propertyName | The property name. | String |
value | A value to set the property to. | String orNumber |
properties | A plain JavaScript object of key-value pairs to set. | PlainObject |
function(index, prop) | A function.
|
Function |
Return
Retrieving - A String
object.
Setting - A jQuery
object including the updated properties within the matched set.
.prop( propertyName )
Example
A & P << Top
Retrieve a property value from the first element within the matched set.
- Use a looping construct such as
.each()
or.map()
to get element properties for all elements within the matched set.
In the example below we get the value of the class attribute for the table that has an id of 'table1'.
Table Row 1, Table Data 1 | Table Row 1, Table Data 2 |
Table Row 2, Table Data 1 | Table Row 2, Table Data 2 |
$(function(){
$('#btn26').on('click', function() {
alert('The first column in the table above has a class of: '
+ $('#table1 col').prop('class') + '.');
});
});
.prop( propertyName, value )
Example
A & P << Top
Set a single attribute value within the matched set.
In the example below when we press the button we disable input of type 'checkbox'.
$(function(){
$('#btn27').on('click', function() {
$("#form1 input[type='checkbox']").prop({
disabled: true
});
});
});
.prop( properties )
Example
A & P << Top
A plain JavaScript object of key-value pairs to set multiple property values within the matched set.
We can set multiple property values using a 'map' of property-value pairs which we pass to the method in object literal format, commonly known as JSON. Take a look at: JavaScript Intermediate - Lesson 7: Object Literals for more information on object literals and JSON.
In the example below when we press the button we disable input of type 'checkbox' and check each box.
$(function(){
$('#btn28').on('click', function() {
$("#form2 input[type='checkbox']").prop({
disabled: true,
checked: true
});
});
});
.prop( propertyName, function(index, prop) )
Example
A & P << Top
A function returning the property value to set.
In the example below when we press the button we switch checked boxes to unswitched and vice versa.
$(function(){
$('#btn29').on('click', function() {
$("#form3 input[type='checkbox']").prop('checked', function(index, prop) {
if (prop == true) {
return false;
} else {
return true;
}
});
});
});
Related Tutorials
jQuery Basic Tutorials - Lesson 10 - Working With General CSS Properties