Attributes in Jquery: A Practical Guide

Attributes in Jquery is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

  id = "imageid" src = "image.gif" alt = "Image" class = "myclass" title = "This is an image" /> 

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { var title = $ ( "em" ). attr ( "title" ); $ ( "#divid" ). text ( title ); }); 

  title = "Bold and Brave" > This is first paragraph.  id = "myid" > This is second paragraph.  id = "divid" > 

It will produce the following result:

Set the attribute value in jQuery

The attr (name, value) method can help set named properties on all elements in a bounded set using the passed value.

For instance,

The following simple example sets the src attribute of an image tag to an exact location.

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( "#myimg" ). attr ( "src" , "./images/jquery.jpg" ); }); 

  id = "myimg" src = "wrongpath.jpg" alt = "Sample image" /> 

Apply Style in jQuery

The addClass (classes) method can help apply defined Style Sheets on all matching elements. You can specify multiple classes that are separated by spaces.

For instance,

The following simple example sets the class attribute of a tag

:

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( "em" ). addClass ( "selected" ); $ ( "#myid" ). addClass ( "highlight" ); });  title = "Bold and Brave" > This is first paragraph.  id = "myid" > This is second paragraph. 

It will produce the following result:

The Atribute method in jQuery

The following table lists some useful methods that you can use to manipulate properties.

Formula & Description1 attr (properties)

Set up a pair of key / value objects as attributes on all matching elements.

2 attr (key, fn)

Set a single attribute to a calculated value, on all matching elements.

3 removeAttr (name)

Remove an attribute from each matched element.

4 hasClass (class)

Returns true if the given class is present in at least one element in the set of matched elements.

5 removeClass (class)

Remove all or the given classes from the matched set of elements

6 toggleClass (class)

Add a given class if it is not present, remove the given class if it is present

7 html ()

Receive the HTML content of the first element matched.

8 html (val)

Set the HTML content of each matched element.

9 text ()

Get the text combination of all matching elements

10 text (val)

Set the text content of all matched elements

11 val ()

Get the input value of the first matched element

12 val (val)

Set the attribute value to each matched element if it is called on but if called abovewith value If the option is transferred, then the selected option will be selected. If it is called on the checkbox or radiobox then all checkboxes and radiobox matches will be checked.

For instance,

Similar to the syntax and examples above, the example below will help you better understand the use of various Attribute methods in different situations:

Formula & Description1 $ ("# myID"). Attr ("custom")

This method will return the value of the custom attribute for the first element that matches the id of myID.

$ 2 ("img"). Attr ("alt", "Sample Image")

This method sets the alt attribute of all Image to a new "Sample Image" value.

3 $ ("input"). Attr ({value: "", title: "Please enter a value"});

Set the value of all elements to an empty string, as well as set The jQuery Example to Please enter a value .

4 $ ("a [href ^ = http:///]").attr ("target", "_blank")

Select all links with an href attribute starting with http:/// and set its target attribute to _blank .

5 $ ("a"). RemoveAttr ("target")

This method removes the target attribute of all links

6 $ ("form"). Submit (function () {$ (": submit", this).attr ("disabled", "disabled");});

This method modifies the "disabled" property to the "disabled" value while clicking the Submit button.

7 $ ("p: last"). HasClass ("selected")

Returns true if the tag

Finally, there is a class selected .

8 $ ("p"). Text ()

Returns the string containing the combined text content of all elements

match.

9 $ ("p"). Text (" Hello World ")

This method will set " Hello World " as the text content of the elements

matched.

$ 10 ("p"). Html ()

This method returns the HTML content of all matching paragraphs

11 $ ("div"). Html ("Hello World")

This method will set the HTML content of all tags

12 $ ("input: checkbox: checked"). Val ()

Get the first value from a checked checkbox

13 $ ("input: radio [name = bar]: checked"). Val ()

Get the first value from a set of radio buttons.

$ 14 ("button") val ("Hello")

Set the value attribute of each matched element .

15 $ ("input") val ("on")

This method will check all radiobox or checkbox buttons and its value is "on".

$ 16 ("select"). Val ("Orange")

This method will select the Orange option in the dropdown options box Orange, Mango and Banana.

$ 17 ("select"). Val ("Orange", "Mango")

This method will choose Orange and Mango options in a dropdown box with options Orange, Mango and Banana.

Follow tutorialspoint

Last lesson: Selector in jQuery

Next lesson: DOM access in jQuery