As with the attr() method, to get and set a value of a property in jQuery you can use a similar approach: the prop() method. attr() and prop() are similar in their capabilities and in the parameters they accept. Besides, for those of you who like anecdotes, the prop() method was extracted from attr() as a way to reorganize the latter and to let it focus solely on attributes. Prior to version 1.6, attr() dealt with both attributes and properties. But that’s a very old story.
The syntax of the prop() method to retrieve the value of a property is as follows.
| Method syntax: prop | |
|---|---|
| prop(name) | |
| Obtains the value of the given property for the first element in the matched set. | |
| Parameters | |
| name | (String) The name of the property whose value has to be retrieved. |
| Returns | |
| The value of the property for the first matched element. The value undefined is returned if the value of a property hasn’t been set or if the matched set has no elements. | |
Consider once again a checkbox element:
<input type="checkbox" id="legal-age" name="legal-age" title="Check this!" />You can verify if it’s checked with the use of the prop() method. In this example pretend that you completely forgot about the :checked filter and the is() method:
if ($('#legal-age').prop('checked') === false) {
console.log('The checkbox is currently unchecked');
}The jQuery prop() method provides access to some commonly used properties that, traditionally, have been a thorn in the side of page authors everywhere due to their browser dependency. This set of normalized-access names, which is also used by attr(), is shown in table 4.1.
Table 4.1. jQuery prop() normalized-access names
| jQuery normalized name | DOM name |
|---|---|
| cellspacing | cellSpacing |
| cellpadding | cellPadding |
| class | className |
| colspan | colSpan |
| contenteditable | contentEditable |
| for | htmlFor |
| frameborder | frameBorder |
| maxlength | maxLength |
| readonly | readOnly |
| rowspan | rowSpan |
| tabindex | tabIndex |
| usemap | useMap |
Knowing if a certain check box is checked or not is nice, but what if you want to programmatically mark it as checked? You can achieve this goal employing the prop() method as a setter. The syntax of its first variant as a setter is shown here.
| Method syntax: prop | |
|---|---|
| prop(name, value) | |
| Sets the named property to the given value for all elements in the jQuery collection. | |
| Parameters | |
| name | (String) The name of the property to be set. |
| value | (Any|Function) Specifies the value of the property. This can be any JavaScript expression that results in a value or it can be a function. The function is invoked for each element, passing the index of the element in the jQuery collection and the current value of the named attribute for that particular element. The return value of the function becomes the property value. |
| Returns | |
| The jQuery collection. | |
You can programmatically mark as checked a given check box as follows:
$('#legal-age').prop('checked', true);As we pointed out, attr() and prop() have a lot in common, and the variant where you can specify multiple properties at once is no exception. The syntax of this variation is presented here.
| Method syntax: prop | |
|---|---|
| prop(properties) | |
| Uses the properties and values specified by the given object to set corresponding properties on all elements of the matched set | |
| Parameters | |
| properties | (Object) An object whose properties are copied as properties to all elements in the set |
| Returns | |
| The jQuery collection | |
This format allows you to quickly set multiple properties, avoiding a long chain of single calls to prop(). For example, you can write the following:
$('input:checkbox').prop({
disabled: true,
checked: true
});The last method to discuss in regard to property management is removeProp(). It removes a property set by using the prop() method for all the elements selected. Its syntax is shown here.
Unlike removeAttr(), this method doesn’t allow for a list of space-separated names. This method shouldn’t be used to remove native properties such as checked or required because it’ll completely remove the property. Once removed, it can’t be added again to the element. If you wish to change the current status of one of those properties, set the value to false using prop().
Element attributes and properties are useful concepts for data as defined by HTML and the W3C, but in the course of page authoring, you frequently need to store your own custom data. Let’s see what jQuery can do for you on that front.
Leave a Reply