Updated March 16, 2023
Introduction of jQuery Attributes
jQuery is a library of JavaScript, which we can use in an html code. The need for jQuery in an html is to easy use JavaScript in that and to make a website more attractive and interactive. Actually, jQuery is a JavaScript toolkit which is having various built-in functions by writing less code, so the motto is “ write less, do more “. In this topic, we are going to learn about jQuery Attributes.
The various important features of jQuery are –
- DOM manipulation– To select DOM elements and modify DOM elements content with open source cross-browser selector engine, which is called Sizzle, is made very easy by The jQuery.
- Event handling– The various types of events, such as a user clicking button or a user clicking on a link, without the need for a separate code in the HTML jQuery provide features for itself event handlers.
- AJAX Support– The AJAX (Asynchronous JavaScript and XML ) is used to render the website page; with the AJAX technology, we can create a responsive and feature-rich site. The jQuery helps to develop the AJAX technology in html code.
- Animations− The various built-in animation effects provided by jQuery which can be use on websites.
- Lightweight− The good feature of jQuery is it is lightweight. It is just 19KB in size.
- Cross Browser Support− The cross-browser is another important feature of jQuery, which supports various browsers Chrome, IE 6.0+, FF 2.0+, Safari 3.0+, and Opera 9.0+.
- Latest Technology− The latest technology, CSS3 selectors, basic XPath syntax, and so are supported by jQuery.
The prerequisites for jQuery Attributes –
Before starting to learn the jQuery Attributes, we should have a basic knowledge of HTML, JavaScript, CSS, Document Object Model (DOM). We are farther going to use the notepad text editor to write the html and jQuery code.
How to Run JQuery Codes?
The jQuery can be written and run two ways as –
- Local Installation– In this, we download the jQuery library on the local machine and start using the jQuery HTML code. The link to download the jQuery is https://jquery.com/download/; we can download the latest version from here. And put the downloaded file “ jquery-3.1.1.min.js ” file into a directory of a website.
- CDN Based Version− In this, we include the jQuery library into an HTML code. The jQuery include directly from CDN ( Content Delivery Network ).
Example #1
We write an HTML example program in which we include the jQuery library as in the below example −
<html>
<head>
<title> My first jQuery example program</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script type = "text/javascript">
$(document).ready(function() {
document.write(" Hello! from jQuery code ");
});
</script>
</head>
<body>
<h1> Hello from html code </h1>
</body>
</html>The output of the above program is
When the event is generated, all the code which is inside of the $(document) .ready () function is executed, or the entire component or in other word elements loaded before DOM.
Next, the basic components which we can modify when it comes to DOM elements are the properties and attributes of the elements assigned value. So let’s see how we can modify the attributes of the elements using jQuery.
Some of the element properties or attributes that are common uses based on the element are – className, title, tagName, id, rel, href, src, alt, align, id, and so all.
Let’s take the example of the html image element and its attribute −
<img class = "class1" id = "id" src = "image.png" alt = "Image not available" title = "Image element example"/>The above element tag name is img, and the attributes are class, id, src, alt, and title; each attribute is assigned some value. These attributes value we can get and change by using jQuery. The jQuery provides two methods, attr() and attr(name, value), to get the attribute value and to set the attribute value of a matched element, respectively.
The syntax of using the attr() method is different based on the purpose of use.
- To get the value of an attribute –
$(element).attr(attribute);- To set the attribute and value –
$(element).attr(attribute, value);- To set attribute and value using a function –
$(element).attr(attribute, function(index, currentvalue));- To set multiple attributes and values –
$(element).attr({attribute : value, attribute : value, attribute : value });To get the Attribute Value of a matched elements –
We can get the attribute value of an element by using the function attr(attribute) from the first element in the matched set or set attribute values onto all matched elements.
Example
Next, we try to get the title attribute value of <h1> tag and get the id attribute value of <h2> tag.
Example #2
<!DOCTYPE html>
<html>
<head>
<title> My first jQuery example program</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
var title = $("h1").attr("title");
$("#id_div").text(title);
});
</script>
</head>
<body>
<div>
<h1 title = " Title attribute of < h1 > element ">This is first Heading.</h1>
<h2 id = " Id attribute of < h2 > element ">This is second Heading.</h2>
<div id = "id_div"></div>
</div>
</body>
</html>The output of the above program is
Example #3
<!DOCTYPE html>
<html>
<head>
<title> My first jQuery example program</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
var id = $("h2").attr("id");
$("#id_div").text(id);
});
</script>
</head>
<body>
<div>
<h1 title = " Title attribute of < h1 > element ">This is first Heading.</h1>
<h2 id = " Id attribute of < h2 > element ">This is second Heading.</h2>
<div id = "id_div"></div>
</div>
</body>
</html>The output of the above program is
To set the Attribute Value of matched elements –
We can set the attribute value of an element by using the function attr(attribute, value) onto all elements in the matched set or set attribute values by using the passes value.
Consider an example which set the src attribute of an image tag to a correct location −
Example #4
<html>
<head>
<title> My first jQuery example program</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.2/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#imgid").attr("src", "altimage.png");
});
</script>
</head>
<body>
<div>
<h1>Setting the src attribute of < img > tag </em>
<img id = "imgid" src = "image.png" alt = " Image not available " />
<div id = "divid"></div>
</div>
</body>
</html>The output of the above program is
Let’s take another example where <h1> tag’s aligned attribute value is left; on click of the button, the align attribute value want to set as the center. Hence using jQuery, when the button is clicked, the align attribute set to center.
Example #5
<!DOCTYPE html>
<html>
<head>
<title> My first jQuery example program</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("button").click(function() {
$("h1").attr("align", "center");
});
});
</script>
</head>
<body>
<div>
<h1 align="left" title = " Title attribute of < h1 > element ">This is first Heading.</h1>
<h2 id = " Id attribute of < h2 > element ">This is second Heading.</h2>
<button>Set the align attribute of the < h1 > tag to center</button>
<div id = "id_div"></div>
</div>
</body>
</html>The output of the above program is
When the button is clicked, the align attribute set to center, and therefore the h1 heading aligns to the center as shown below.
To Applying Styles
Next, we see how to apply different styles to the matched elements using jQuery-provided method addClass(classes). We can apply not only a single style class but can apply multiple classes just separated by space.
Let’s take an example where we set the <p> tag’s class attribute.
Example #6
<!DOCTYPE html>
<html>
<head>
<title> My first jQuery example program</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
.font { color : green; }
.highlighht { background : yellow; }
</style>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("h1").addClass("font");
$("#h2id").addClass("highlighht");
});
</script>
</head>
<body>
<div>
<h1 >This is first heading.</h1>
<h2 id = "h2id" >This is second heading.</h2>
</div>
</body>
</html>The output of the above program is
Next, see the example to set the align attribute and apply the style to the < h1 > tag.
Example #7
<!DOCTYPE html>
<html>
<head>
<title> My first jQuery example program</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
.font { color : green; }
.highlighht { background : yellow; }
</style>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("h1").addClass("font");
$("h1").attr("align", "center");
$("#h2id").addClass("highlighht");
});
</script>
</head>
<body>
<div>
<h1 >This is first heading.</h1>
<h2 id = "h2id" >This is second heading.</h2>
</div>
</body>
</html>The output of the above program is –
Attribute Methods of jQuery
Some of the jQuery attribute methods which modify the DOM elements attributes and properties are –
- attr( properties ) – This method sets attribute value to all matched elements. Above, we have seen an example of this; now we see this method to set multiple key-value properties.
Ex : $( "img" ).attr({ alt : " Image not available", src : "img.png", title : "Image jQuery"});- attr( key, fn ) – This method sets a single attribute or property to a value on all matched elements.
Ex : $("h1").attr("align", "center");- removeAttr( name ) – This jQuery method is used to remove an attribute from all matched elements.
Ex : $("h1"). removeAttr ("align", "center");- hasClass( class ) – This jQuery method used to find a specified CSS class is applied on any one of the matched elements; if yes, then it returns true otherwise false.
Ex : $("p#ptagid"). hasClass ("font ");- addClass( class ) – This jQuery method used on elements to apply the specified class if it is not applied.
Ex : $("h1").addClass("font");- removeClass( class ) – This jQuery method used on elements to removes specified classes or classes.
Ex : $("p#ptagid"). removeClass ("font ");- html( ) – This jQuery method used to get first html tag or matched element.
Ex : $("h1").html( );- text( ) – This jQuery method used to get the text contents of all matched elements, except form and input elements.
Ex : $("#id_div").text(title);- val( ) – This jQuery method used to get the value of input from the first matched element.
Ex : $("#inputid").val( );Conclusion – jQuery Attributes
jQuery is a JavaScript library. jQuery allows performing tasks such as DOM manipulation, event handling, AJAX Support, Animations, Lightweight, Cross Browser Support, Latest Technology. Use jQuery in html code two ways: Local Installation, and another way is CDN Based Version.
The DOM element attributes such as className, title, tagName, id, rel, href, src, alt, align, id and all can be fetch and set by using the jQuery provided method attr() and attr(name, value), respectively.
The different jQuery method is
- attr( properties )
- attr( key, fn )
- removeAttr( name )
- removeClass( class )
- toggleClass( class )
- html( )
- val( )
Recommended Articles
This is a guide to jQuery Attributes. Here we discuss the important features of jQuery and how to run jQuery codes with the examples and outputs. You may also have a look at the following articles to learn more –
