jQuery: The Write Less, Do More JavaScript Library

API/1.1.2/DOM/Attributes

From jQuery JavaScript Library

(Redirected from DOM/Attributes)
Jump to: navigation, search

addClass( class )

Adds the specified class(es) to each of the set of matched elements.

Return value: jQuery
Parameters:

  • class (String): One or more CSS classes to add to the elements

Example:

 $("p").addClass("selected")
Before:
 <p>Hello</p>
Result:
 [ <p class="selected">Hello</p> ]


Example:

 $("p").addClass("selected highlight")
Before:
 <p>Hello</p>
Result:
 [ <p class="selected highlight">Hello</p> ]


attr( name )

Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned.

When accessing "checked", "disabled", or "readonly" properties on form elements, this method returns true if they are present.

Return value: Object
Parameters:

  • name (String): The name of the property to access.

Example:

Returns the src attribute from the first image in the document.

 $("img").attr("src");
Before:
 <img src="test.jpg"/>
Result:
 test.jpg


attr( properties )

Set a key/value object as properties to all matched elements.

This serves as the best way to set a large number of properties on all matched elements. Note that you must use 'className' as key if you want to set the class-Attribute. Or use .addClass( class ) or .removeClass( class ).

Return value: jQuery
Parameters:

  • properties (Map): Key/value pairs to set as object properties.

Example:

Sets src and alt attributes to all images.

 $("img").attr({ src: "test.jpg", alt: "Test Image" });
Before:
 <img/>
Result:
 <img src="test.jpg" alt="Test Image"/>


attr( key, value )

Set a single property to a value, on all matched elements.

Note that you can't set the name property of input elements in IE. Use $(html) or .append(html) or .html(html) to create elements on the fly including the name property.

Return value: jQuery
Parameters:

  • key (String): The name of the property to set.
  • value (Object): The value to set the property to.

Example:

Sets src attribute to all images.

 $("img").attr("src","test.jpg");
Before:
 <img/>
Result:
 <img src="test.jpg"/>


attr( key, fn )

Set a single property to a computed value, on all matched elements.

Instead of supplying a string value as described above, a function is provided that computes the value.

Return value: jQuery
Parameters:

  • key (String): The name of the property to set.
  • value (Function): A function returning the value to set. Scope: Current element, argument: Index of current element

Example:

Sets title attribute from src attribute.

 $("img").attr("title", function() { return this.src });
Before:
 <img src="test.jpg" />
Result:
 <img src="test.jpg" title="test.jpg" />


Example:

Enumerate title attribute.

 $("img").attr("title", function(index) { return this.title + (++index); });
Before:
 <img title="pic" /><img title="pic" /><img title="pic" />
Result:
 <img title="pic1" /><img title="pic2" /><img title="pic3" />


html()

Get the html contents of the first matched element. This property is not available on XML documents (although it will work for XHTML documents).

Return value: String
Example:

 $("div").html();
Before:
 <div><input/></div>
Result:
 <input/>


html( val )

Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).

Return value: jQuery
Parameters:

  • val (String): Set the html contents to the specified value.

Example:

 $("div").html("<b>new stuff</b>");
Before:
 <div><input/></div>
Result:
 <div><b>new stuff</b></div>


removeAttr( name )

Remove an attribute from each of the matched elements.

Return value: jQuery
Parameters:

  • name (String): The name of the attribute to remove.

Example:

 $("input").removeAttr("disabled")
Before:
 <input disabled="disabled"/>
Result:
 <input/>


removeClass( class )

Removes all or the specified class(es) from the set of matched elements.

Return value: jQuery
Parameters:

  • class (String): (optional) One or more CSS classes to remove from the elements

Example:

 $("p").removeClass()
Before:
 <p class="selected">Hello</p>
Result:
 [ <p>Hello</p> ]


Example:

 $("p").removeClass("selected")
Before:
 <p class="selected first">Hello</p>
Result:
 [ <p class="first">Hello</p> ]


Example:

 $("p").removeClass("selected highlight")
Before:
 <p class="highlight selected first">Hello</p>
Result:
 [ <p class="first">Hello</p> ]


text()

Get the text contents of all matched elements. The result is a string that contains the combined text contents of all matched elements. This method works on both HTML and XML documents.

Return value: String
Example:

Gets the concatenated text of all paragraphs

 $("p").text();
Before:
 <p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>
Result:
 Test Paragraph.Paraparagraph


text( val )

Set the text contents of all matched elements.

Similar to html(), but escapes HTML (replace "<" and ">" with their HTML entities).

Return value: String
Parameters:

  • val (String): The text value to set the contents of the element to.

Example:

Sets the text of all paragraphs.

 $("p").text("<b>Some</b> new text.");
Before:
 <p>Test Paragraph.</p>
Result:
 <p><b>Some</b> new text.</p>


Example:

Sets the text of all paragraphs.

 $("p").text("<b>Some</b> new text.", true);
Before:
 <p>Test Paragraph.</p>
Result:
 <p><b>Some</b> new text.</p>


toggleClass( class )

Adds the specified class if it is not present, removes it if it is present.

Return value: jQuery
Parameters:

  • class (String): A CSS class with which to toggle the elements

Example:

 $("p").toggleClass("selected")
Before:
 <p>Hello</p><p class="selected">Hello Again</p>
Result:
 [ <p class="selected">Hello</p>, <p>Hello Again</p> ]


val()

Get the content of the value attribute of the first matched element.

Use caution when relying on this function to check the value of multiple-select elements and checkboxes in a form. While it will still work as intended, it may not accurately represent the value the server will receive because these elements may send an array of values. For more robust handling of field values, see the fieldValue function of the Form Plugin.

Return value: String
Example:

 $("input").val();
Before:
 <input type="text" value="some text"/>
Result:
 "some text"


val( val )

Set the value attribute of every matched element.

Return value: jQuery
Parameters:

  • val (String): Set the property to the specified value.

Example:

 $("input").val("test");
Before:
 <input type="text" value="some text"/>
Result:
 <input type="text" value="test"/>