EDUCBA

Home » Software Development » Software Development Tutorials » jQuery Tutorial » jQuery Attributes

jQuery Attributes

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 –

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

  • 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 ).

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 

jQuery Attributes 1 output

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.

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 

jQuery Attributes 2 output

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 

jQuery Attributes 3 output

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 −

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 

jQuery Attributes 4 output

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.

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 

Program example 5 output

When the button is clicked, the align attribute set to center, and therefore the h1 heading aligns to the center as shown below.

Program example 5 output 2

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.

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 

Program example 6 output

Next, see the example to set the align attribute and apply the style to the < 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 –

Program example 7 output

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 ");

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

  1. How to Install Jquery?
  2. jQuery Methods
  3. jQuery Interview Questions
  4. Uses Of JQuery
0 Shares
Share
Tweet
Share
quiz