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 the 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 the jQuery are –
- DOM manipulation– To select DOM elements, and to modifying DOM elements content with open source cross-browser selector engine which is called Sizzle is made very easy by The jQuery made it easy.
- Event handling– The various types of events, for example, a user clicking button or a user clicking on a link, without the need of a separate code in the HTML jQuery provides features for itself event handlers.
- AJAX Support– The AJAX (Asynchronous JavaScript and XML ) used for the purpose of rendering 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 websites.
- Lightweight− The good feature of the jQuery is it is lightweight. It is just 19KB in size.
- Cross Browser Support− The cross-browser is another important feature of the 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 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 ).
Program Example #1
We write 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 $(document) .ready () function is executed or the entire component or in other word elements loaded before DOM.
4.5 (4,643 ratings)
View Course
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 the 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 the jQuery. The jQuery provides two method 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 –
The attribute value of an element we can get 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 the example to get the title attribute value of <h1> tag and to get the id attribute value of <h2> tag.
Program 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
Program 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 –
The attribute value of an element we can set 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 −
Program 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 the jQuery when the button is clicked the align attribute set to center.
Program 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 by using jQuery provided method addClass( classes ). We can apply not only 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.
Program 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 < h1 > tag.
Program 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 used to remove an attribute from all of the 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 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, one way is 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 the 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 –
