jQuery Attributes
×

jQuery Attributes

0 248

  • In the HTML DOM environment, most of the jQuery operations are performed on the elements on the basis of their attributes and properties in other words to manipulate a specific HTML element we need to modify these attributes.
  • jQuery Attributes

  • The most popular DOM properties are:
  • 1 Name of the class

    2 Name of the element

    3 id

    4 href

    5 title

    6 rel

    7 src

  • If we take the example of an anchor tag,
  • <a id = "linkId"  href = "https://www.codingtag.com"  class = "linkClass"    title = "This is a link" target="_blank"/>

    The markup of the above element contains,

  • The name of the tag is: a
  • Id is: linkId
  • Class is: linkClass
  • Title is: This is a link
  • Target is: _blank, which used for new window
  • Href is: https://www.codingtag.com

These all are the attributes of the given element.


Operations on attributes:

Get attributes value:

To fetch the value of attributes of an element we use the attr() jQuery method.

Example:

In this example, we fetch the data attribute of the paragraph and replace the value of the heading after the click on the button.

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
h3{
background:pink;
padding:20px;
}
p{
background:lightgray;
padding:20px;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$data=$("#p1").attr('data');
$("#head").html($data);
});
});
</script>
</head>
<body>

<h2>jQuery attr() method Example</h2>
<p id="p1" data="hey!! welcome to CodingTag.">This is a paragraph</p>
<h3 id="head">This is heading</h3>
<button>To change the heading data click me!</button>

</body>
</html>

Output:

To set the data attribute value of <p> tag as the value of heading click the button,


Set Attribute Value:

To set the value of the attribute of an HTML element, the following syntax of the attr() method is used.

$(selector). attr(name,value);

Parameter description:

  • name: it represents the name of the attribute of the selected element which value you want to set by this method. It is mandatory.
  • value: it represents the value to set as the value of the given attribute by this method. It is also mandatory.

Example:

In this example, we set the href attribute value of the <a> tag as the paragraph value by clicking on that.

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
h3{
background:pink;
padding:20px;
cursor:pointer
}
p{
background:lightgray;
padding:20px;
}
</style>
<script>
$(document).ready(function(){
$("h3").click(function(){
$data=$(this).attr('data');
$("a").attr("href",$data);
alert("link attribute is set to "+ $data);
});
});
</script>
</head>
<body>

<h2>jQuery attr() method Example</h2>
<a href="">Click me!</a>
<h3 data="https://www.codingtag.com">CodingTag</h3>
<h3 data="https://www.google.co.in">Google</h3>
</body>
</html>

Output:

Click on heading CodingTag to set the <a> tag href attribute value to https://www.codingtag.com.

Now if you click on the link it will reach you on the CodingTag site. The same action will perform for the Google heading.


Adding styles to elements:

To add styles or CSS classes to the selected HTML elements, the addClass() method is used in jQuery.

Syntax:

$(selector). addClass(class_name);

If you want to attach more than one class then the syntax will be,

$(selector). addClass(class_name1,class_name2,….);

Parameter description:

  • class_name: This represents the name of the CSS class that you want to apply to the selected HTML elements. It is required.

Example:

In this example we attach a class .para to the given <p> element and .head to the <h3> element.

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
.head{
background:pink;
padding:20px;
}
.para{
background:lightgray;
padding:20px;
}
.button{
background:green;
padding:10px;
color:white;
border:1px solid green;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).addClass("button");
$("p").addClass("para");
$("h3").addClass("head");
});
});
</script>
</head>
<body>

<h2>jQuery addClass() method Example</h2>
<p>This is a paragraph</p>
<h3>This is a heading</h3>
<button>Click to add CSS</button>
</body>
</html>

Output:

When you click on the button,



Share:


Leave a Reply


Comments
    Waiting for your comments