Hello guys! Welcome to a new section of my tutorial on jQuery. In this tutorial, we are going to be looking into the various attributes of jQuery.
Some of the most basic components that we can easily manipulate when it comes to DOM elements are the properties and attributes that is assigned to those elements.
Most of these attributes that we are discussing about are available through JavaScript DOM node properties. Some of the most common properties are -
Some of the most basic components that we can easily manipulate when it comes to DOM elements are the properties and attributes that is assigned to those elements.
Most of these attributes that we are discussing about are available through JavaScript DOM node properties. Some of the most common properties are -
- tagName
- className
- src
- title
- rel
- id
- href
Let us consider the following HTML markup for an image element -
<img id = "imageid" src = "image.gif" alt = "image" class = "myclass"
title = "this is an image" />
title = "this is an image" />
In this element's markup, the tag name is img, and the markup for id, src, alt, class, and title represents the element's attributes, each of which consists of a name and a value.
jQuery gives us the means to easily manipulate an element's attributes and gives us access to the element so that we can also be able to change its properties.
jQuery gives us the means to easily manipulate an element's attributes and gives us access to the element so that we can also be able to change its properties.
You can also read our tutorial post on: Understanding jQuery Selectors with examples
Getting Attribute Value
The attr() method can be used to either fetch the value of an attribute from the first element in the set attribute values onto all the matches elements.
Example
Following is a simple example that fetches title attribute of <em> tag and set <div id ="divid"> value with the same value -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
var title = $( "em" ).attr( "title" );
$( "#divid" ).text( "title" );
} );
</script>
</head>
<body>
<div>
<em title = "Strong and Mighty">This is the first Paragraph.</em>
<p id = "myid">This is the second Paragraph.</p>
<div id = "divid"></div>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
var title = $( "em" ).attr( "title" );
$( "#divid" ).text( "title" );
} );
</script>
</head>
<body>
<div>
<em title = "Strong and Mighty">This is the first Paragraph.</em>
<p id = "myid">This is the second Paragraph.</p>
<div id = "divid"></div>
</div>
</body>
</html>
Output
Below is the output of the above example.
This is the first Paragraph.
This is the second Paragraph.
Strong and Mighty
You can also read our tutorial post on: An Introduction to jQuery
Setting Attribute Values
The attr(name, value) method can be used to set the named attribute onto all elements in the wrapped set using the passed value.
Example
Following is a simple example that set the src attribute of an image tag to a correct location -
<html>
<head>
<title>jQuery Example</title>
<base href = "https://www.webdesigntutorialz.com" />
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#myimg" ).attr( "src", "/jquery/images/jquery.gif" );
} );
</script>
</head>
<body>
<div>
<img id = "myimg" src = "/images/jquery/.gif" alt = "Show images" />
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<base href = "https://www.webdesigntutorialz.com" />
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#myimg" ).attr( "src", "/jquery/images/jquery.gif" );
} );
</script>
</head>
<body>
<div>
<img id = "myimg" src = "/images/jquery/.gif" alt = "Show images" />
</div>
</body>
</html>
Output
Below is the output of the above example.
You can also read our tutorial post on: The Basic Concepts of Debugging in JavaScript
Applying Styles
The addClass( class) method can be used to apply defined style sheets onto all the matched elements. You can specify multiple classes which should be separated.
Example
Following is a simple example which sets class attribute of a paragraph <p> tag -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "em" ).addClass( "selected" );
$( "#myid" ).addClass( "highlight" );
} );
</script>
<style>
.selected { color: green; }
.highlight { background-color: grey; }
</style>
</head>
<body>
<div>
<em title = "Strong and Mighty">This is the first Paragraph.</em>
<p id = "myid">This is the second Paragraph.</p>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "em" ).addClass( "selected" );
$( "#myid" ).addClass( "highlight" );
} );
</script>
<style>
.selected { color: green; }
.highlight { background-color: grey; }
</style>
</head>
<body>
<div>
<em title = "Strong and Mighty">This is the first Paragraph.</em>
<p id = "myid">This is the second Paragraph.</p>
</div>
</body>
</html>
Output
Below is the output of the above example.
This is the first Paragraph.
This is the second Paragraph.
Attribute Methods
The following table below lists down few useful methods which can be used for manipulating attributes and properties -
| Sr.No. | Methods & Description |
|---|---|
| 1 | attr( properties )
Set a key/value object as properties to all matched elements.
|
| 2 | attr( key, fn )
Set a single property to a computed value, on all matched elements.
|
| 3 | removeAttr( name )
Remove an attribute from each of the matched elements.
|
| 4 | hasClass( class )
Returns true if the specified class is present on at least one of the set of matched elements.
|
| 5 | removeClass( class )
Removes all or the specified class(es) from the set of matched elements.
|
| 6 | toggleClass( class )
Adds the specified class if it is not present, removes the specified class if it is present.
|
| 7 | html( )
Get the html contents (innerHTML) of the first matched element.
|
| 8 | html( val )
Set the html contents of every matched element.
|
| 9 | text( )
Get the combined text contents of all matched elements.
|
| 10 | text( val )
Set the text contents of all matched elements.
|
| 11 | val( )
Get the input value of the first matched element.
|
| 12 | val( val )
Set the value attribute of every matched element if it is called on <input> but if it is called on <select> with the passed <option> value then passed option would be selected, if it is called on check box or radio box then all the matching check box and radiobox would be checked.
|
In my next tutorial, i will be making use of series of examples to show how the above listed methods can be implemented in jQuery.
You can also read our tutorial on: A Practical Guide to JavaScript Multimedia with examples
Complet List of Attribute Methods
Below is the complete list of the attribute methods in various cases -
| Sr.No. | Selector & Description |
|---|---|
| 1 |
$("#myID").attr("custom")
This would return value of attribute custom for the first element matching with ID myID.
|
| 2 |
$("img").attr("alt", "Sample Image")
This sets the alt attribute of all the images to a new value "Sample Image".
|
| 3 |
$("input").attr({ value: "", title: "Please enter a value" });
Sets the value of all <input> elements to the empty string, as well as sets The jQuery Example to the string Please enter a value.
|
| 4 |
$("a[href^=https://]").attr("target","_blank")
Selects all links with an href attribute starting with https:// and set its target attribute to _blank.
|
| 5 |
$("a").removeAttr("target")
This would remove target attribute of all the links.
|
| 6 |
$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");});
This would modify the disabled attribute to the value "disabled" while clicking Submit button.
|
| 7 |
$("p:last").hasClass("selected")
This return true if last <p> tag has associated classselected.
|
| 8 |
$("p").text()
Returns string that contains the combined text contents of all matched <p> elements.
|
| 9 |
$("p").text("<i>Hello World</i>")
This would set "<I>Hello World</I>" as text content of the matching <p> elements.
|
| 10 |
$("p").html()
This returns the HTML content of the all matching paragraphs.
|
| 11 |
$("div").html("Hello World")
This would set the HTML content of all matching <div> to 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")
Sets the value attribute of every matched element <button>.
|
| 15 |
$("input").val("on")
This would check all the radio or check box button whose value is "on".
|
| 16 |
$("select").val("Orange")
This would select Orange option in a dropdown box with options Orange, Mango and Banana.
|
| 17 |
$("select").val("Orange", "Mango")
This would select Orange and Mango options in a dropdown box with options Orange, Mango and Banana.
|
Alright guys! We have come to the end of this tutorial post. Feel free to ask your questions via the comment box below and your questions will be attended to as soon as possible.
Follow us on our various social media handles available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails.
Thanks for reading and bye for now.
Follow us on our various social media handles available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails.
Thanks for reading and bye for now.