HomeProgramjQuery

Attributes in jQuery

Some of the most basic components, we can manipulate DOM elements, are properties and attributes assigned to those elements.

Some of the most basic components, we can manipulate DOM elements, are properties and attributes assigned to those elements.

Most of these attributes are available through JavaScript as DOM node attributes. Some of the more common attributes are:

  1. className
  2. tagName
  3. id
  4. href
  5. title
  6. rel
  7. src

Consider the following HTML code fragment for an image element:

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

In marking this element, the tag name is img, and the markup for id, src, alt, class, and title represents the properties of the element, each with a name and a value.

jQuery provides us with methods to manipulate element properties easily and help us access these elements so that we can change their properties.

Get attribute values ​​in jQuery

The attr () method can be used to get the value of an attribute from the first element in the matched set or set the attribute values ​​on the matched elements.

For example

The following is a simple example that takes the title attribute of the tag and sets the value

with the same value.
 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:

This is first paragraph.

This is second paragraph.

Set the attribute value in jQuery

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

For example

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 be used to apply defined Style Sheets on all matching elements. You can specify multiple classes that are separated by spaces.

For example

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:

This is first paragraph.

This is second paragraph.

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 above

For example

Similar to the syntax and examples above, the following example 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

match into Hello World .

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 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

3.5 ★ | 2 Vote

You should read it

May be interested

jQuery