jQuery - Attributes
user-pcr
Some of the main components that we can manipulate when it comes to DOM elements are the properties and attributes assigned to those elements.
Most of these attributes are available through JavaScript as properties of the DOM node. Some of the most common properties are −
- class name
- tag name
- I'd
- HREF
- title
- rel
- CSR
Consider the following HTML markup for an image element −
<img id="imageid" src="image.gif" alt="Image" class="myclass" title = "This is an image"/>
In the markup for this element, the tag name is img, and the markup for id, src, alt, class, and title represents the element's attributes, each consisting of a name and a value.
jQuery gives us the ability to easily manipulate the element's attributes and gives us access to the element so that we can also change its properties.
Get attribute value
The attr() method can be used to retrieve an attribute value from the first element in the matched set, or set attribute values ​​for all matched elements.
Set attribute value
The attr(name, value) method can be used to set a named attribute on all elements in a boxed set using the passed value.
Applying Styles
The addClass(classes) method can be used to apply specific style sheets to all matching elements. You can specify multiple classes separated by spaces.
Attribute Methods
The following table lists several useful methods that you can use to manipulate attributes and properties.
| Sr.No. | Methods and Description |
|---|---|
| one | attr (properties)
Set the key/value object as properties on all matching elements. |
| 2 | attr (key, fn)
Set the single property to a computed value for all matching elements. |
| 3 | removeAttr (name)
Remove an attribute from each matched element. |
| 4 | hasClass(class)
Returns true if the specified class is present in at least one of the set of matching elements. |
| five | removeClass(class)
Removes all or the specified class(es) from the set of matched elements. |
| 6 | toggleClass (class)
Adds the specified class if not present, removes the specified class if present. |
| 7 | html()
Get the HTML content (innerHTML) of the first matched element. |
| 8 | html (val)
Set the HTML content of each matched element. |
| nine | text ()
Get the combined text content of all matched elements. |
| 10 | text (val)
Set the text content of all matching elements. |
| eleven | val()
Get the input value of the first matched element. |
| 12 | val (val)
Set the value attribute of each matched element if called on an <input> but if called on a <select> with an <option> value passed then the passed option will be selected if called on a radio button or radio button all matching checkboxes and radioboxes will be checked . |
Set the key/value object as properties on all matching elements.
Set the single property to a computed value for all matching elements.
Remove an attribute from each matched element.
Returns true if the specified class is present in at least one of the set of matching elements.
Removes all or the specified class(es) from the set of matched elements.
Adds the specified class if not present, removes the specified class if present.
Get the HTML content (innerHTML) of the first matched element.
Set the HTML content of each matched element.
Get the combined text content of all matched elements.
Set the text content of all matching elements.
Get the input value of the first matched element.
Set the value attribute of each matched element if called on an <input> but if called on a <select> with an <option> value passed then the passed option will be selected if called on a radio button or radio button all matching checkboxes and radioboxes will be checked .
Examples
Similar to the above syntax and examples, the following examples will help you understand how to use different attribute methods in different situations.
$("#MyId"). atr ("custom")
This will return the value of the custom attribute for the first element that matches myID.
$("img"). attr("alt","sample image")
This sets the alt attribute of all images to the new value "Sample Image".
$("input"). attr({value: "", title: "Please enter a value"});
Sets the value of all <input> elements to an empty string, and also sets the jQuery example to a string. Enter a value .
$("a[href=https://]").attr("target", "_blank")
Selects all links with an href attribute starting with https:// and sets its target attribute to _blank .
$("a"). removeAttr("target")
This will remove the target attribute of all links.
$("form") submit(function() { $(":submit", this).attr("disabled", "disabled"); });
This will change the disabled attribute to "disabled" when the submit button is clicked.
$("p:last"). hasClass("selected")
Returns true if the last <p> tag has an associated selected class.
$("r"). Text ()
Returns a string containing the combined text content of all matched <p> elements.
$("p"). text("<i>Hello World</i>")
This will set "<I> Hello World</I>" as the text content of the corresponding <p> elements.
$("r"). HTML()
This returns the HTML content of all matching paragraphs.
$(div). html("Hello World")
This will set the HTML content of all matching <div>s to Hello World .
$("input: checkbox: checked"). shaft()
Get the first value from the checked checkbox.
$("input: radio [name=bar]: checked"). shaft()
Get the first value from the radio button set.
$("button"). Shaft ("Hello")
Sets the value attribute of each matched <button> element.
$("input"). Shaft ("on")
This will check for any radio or checkbox button whose value is "on".
$("choose"). Val ("Orange")
This will select the Orange option in the dropdown list with the Orange, Mango and Banana options.
$("select"). val ("orange", "mango")
This will select the Orange and Mango options in the dropdown with the Orange, Mango and Banana options.
