Hello guys! Welcome to my new tutorial section on jQuery. In this section of my tutorial on jQuery i will be taking my time to properly explain some of the attribute methods i listed down on my last tutorial on how to add attributes to an element using jQuery.
I listed down about 12 major attribute methods and i will be starting with the jQuery set attribute properties. I will advice you take your time to read through carefully and also ask questions.
I listed down about 12 major attribute methods and i will be starting with the jQuery set attribute properties. I will advice you take your time to read through carefully and also ask questions.
Set Attribute Properties
The attr( properties ) method sets a key/value object as properties to all matched elements.
Syntax
Below is the syntax to use this method -
selector.attr( {property1 : value1, property2 : value2} )
Parameter Details
Here is the description of all the parameters used by this methods -
- property - This is the CSS property of the matched element.
- value - This is the value of the property to be set.
Example
The following example below would change the properties of an image 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( ) {
$( "img" ).attr( {
src: "/images/jquery.gif" ,
title: "jQuery" ,
alt: "My Logo"
} );
} );
</script>
</head>
<body>
<div class = "division" id = "divid">
<p>The following is the Logo of jQuery.</p>
<img src = "/jquery/images/jquery.gif" title = "None" alt = "None" />
</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( ) {
$( "img" ).attr( {
src: "/images/jquery.gif" ,
title: "jQuery" ,
alt: "My Logo"
} );
} );
</script>
</head>
<body>
<div class = "division" id = "divid">
<p>The following is the Logo of jQuery.</p>
<img src = "/jquery/images/jquery.gif" title = "None" alt = "None" />
</div>
</body>
</html>
Output
Below is the output of the above example.
The following is the Logo of jQuery.
You can also read our tutorial post on: Understanding jQuery Selectors with examples
attr( key, func ) Method
attr( key, func ) method sets a single property to a computed value, on all matched elements.
Syntax
Below is the syntax to use this method -
selector.attr( key, func )
Parameter Details
Here is the description of all the parameters used by this methods -
- key - The name of the property to set.
- func - This is a function returning the value to set. This function would have one argument which is the index of the current element.
Example
The following example below would create a border for each table -
<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( ) {
$( "table" ).attr( "border" , function( index ) {
return "6px";
} );
} );
</script>
</head>
<body>
<table>
<tr><td>The is the first table</td></tr>
</table>
<table>
<tr><td>This is the second table</td></tr>
</table>
<table>
<tr><td>This is the third table</td></tr>
</table>
</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( ) {
$( "table" ).attr( "border" , function( index ) {
return "6px";
} );
} );
</script>
</head>
<body>
<table>
<tr><td>The is the first table</td></tr>
</table>
<table>
<tr><td>This is the second table</td></tr>
</table>
<table>
<tr><td>This is the third table</td></tr>
</table>
</body>
</html>
Output
Below is the output of the above example.
| The is the first table |
| This is the second table |
| This is the third table |
removeAttr( name ) Method
The removeAttr( name ) method removes an attribute from each of the matched elements.
Syntax
Below is the syntax to use this method -
selector.removeAttr( name )
Parameter Details
Here is the description of all the parameters used by this methods -
- name - Name of the property to be removed.
Example
The following example below would remove the border from each table -
<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( ) {
$( "table" ).removeAttr( "border" );
} );
</script>
</head>
<body>
<table border = "5">
<tr><td>The is the first table</td></tr>
</table>
<table border = "6">
<tr><td>This is the second table</td></tr>
</table>
<table border = "7">
<tr><td>This is the third table</td></tr>
</table>
</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( ) {
$( "table" ).removeAttr( "border" );
} );
</script>
</head>
<body>
<table border = "5">
<tr><td>The is the first table</td></tr>
</table>
<table border = "6">
<tr><td>This is the second table</td></tr>
</table>
<table border = "7">
<tr><td>This is the third table</td></tr>
</table>
</body>
</html>
Output
Below is the output of the above example.
| The is the first table |
| This is the second table |
| This is the third table |
You can also read our tutorial post on: Introduction to JavaScript Animation with examples
hasClass( class ) Method
The hasClass( class ) method returns true if the specified class is present on at least one of the set of matched elements otherwise it returns false.
Syntax
Below is the syntax to use this method -
selector.hasClass( class )
Parameter Details
Here is the description of all the parameters used by this methods -
- class - The name of the CSS class.
Example
The following example below will check which paragraph has class purple -
<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( ) {
$( "#result1" ).text( $( "p#pid1" ).hasClass( "purple" ) );
$( "#result2" ).text( $( "p#pid2" ).hassClass( "purple" ) );
} );
</script>
<style>
.purple { color: purple; }
.green { color: green; }
</style>
</head>
<body>
<p class = "purple" id = "pid1">This is the first Paragraph.</p>
<p class = "green" id = "pid2">This is the second Paragraph.</p>
<div id = "result1"></div>
<div id = "result2"></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( ) {
$( "#result1" ).text( $( "p#pid1" ).hasClass( "purple" ) );
$( "#result2" ).text( $( "p#pid2" ).hassClass( "purple" ) );
} );
</script>
<style>
.purple { color: purple; }
.green { color: green; }
</style>
</head>
<body>
<p class = "purple" id = "pid1">This is the first Paragraph.</p>
<p class = "green" id = "pid2">This is the second Paragraph.</p>
<div id = "result1"></div>
<div id = "result2"></div>
</body>
</html>
Output
Below is the output of the above example.
This is the first Paragraph.
This is the second Paragraph.
true
false
removeClass( class ) Method
The removeClass( class ) method removes all or the specified classes from the set of matched elements.
Syntax
Below is the syntax to use this method -
selector.removeClass( class )
Parameter Details
Here is the description of all the parameters used by this methods -
- class - The name of the CSS class.
Example
The following example below would remove the class purple from the first paragraph -
<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( ) {
$( "p#pid1" ).removeClass( "purple" );
} );
</script>
<style>
.purple { color: purple; }
.green { color: green; }
</style>
</head>
<body>
<p class = "purple" id = "pid1">This is the first Paragraph.</p>
<p class = "green" id = "pid2">This is the second Paragraph.</p>
</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( ) {
$( "p#pid1" ).removeClass( "purple" );
} );
</script>
<style>
.purple { color: purple; }
.green { color: green; }
</style>
</head>
<body>
<p class = "purple" id = "pid1">This is the first Paragraph.</p>
<p class = "green" id = "pid2">This is the second Paragraph.</p>
</body>
</html>
Output
Below is the output of the above example.
This is the first Paragraph.
This is the second Paragraph.
You can also read our tutorial post on: The complete guide to JavaScript Math Object with examples
toggleClass( class ) Method
The toggleClass( class ) method will add the specified class if it is not present, removes the specified class if it is present.
Syntax
Below is the syntax to use this method -
selector.toggleClass( class )
Parameter Details
Here is the description of all the parameters used by this methods -
- class - The name of the CSS class.
Example
The following example below would remove the class with one click and in second click it would again add the same class -
<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( ) {
$( "p#pid" ).click( function( ) {
$( this ).toggleClass( "purple" );
} );
} );
</script>
<style>
.purple { color: purple; }
</style>
</head>
<body>
<p class = "green">Click the following line below to see result</p>
<p class = "purple" id = "pid">This is the first Paragraph.</p>
</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( ) {
$( "p#pid" ).click( function( ) {
$( this ).toggleClass( "purple" );
} );
} );
</script>
<style>
.purple { color: purple; }
</style>
</head>
<body>
<p class = "green">Click the following line below to see result</p>
<p class = "purple" id = "pid">This is the first Paragraph.</p>
</body>
</html>
Output
Below is the output of the above example.
Click the following line below to see result
This is the first Paragraph.
html() Method
The html() method gets the html contents of the first matched element. Note: this property is not available XML document but it does works for XHTML documents.
Syntax
Below is the syntax to use this method -
selector.html( )
Parameter Details
Here is the description of all the parameters used by this methods -
- NA
Example
The following example below would get HTML content of the first paragraph and display it in second paragraph -
<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 content = $( "p" ).html( );
$( "#pid2" ).html( content );
} );
</script>
<style>
.purple { color: purple; }
.green { color: green; }
</style>
</head>
<body>
<p class = "green" id = "pid1">This is the first Paragraph.</p>
<p class = "purple" id = "pid2">This is the second Paragraph.</p>
</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 content = $( "p" ).html( );
$( "#pid2" ).html( content );
} );
</script>
<style>
.purple { color: purple; }
.green { color: green; }
</style>
</head>
<body>
<p class = "green" id = "pid1">This is the first Paragraph.</p>
<p class = "purple" id = "pid2">This is the second Paragraph.</p>
</body>
</html>
Output
Below is the output of the above example.
This is the first Paragraph.
This is the first Paragraph.
You can also read our tutorial post on: How to implement JavaScript String Html Wrappers
html(val) Method
The html(val) method sets the html contents of every matched element. This property is not available on XML documents but works fine on XHTML documents.
Syntax
Below is the syntax to use this method -
selector.html( val )
Parameter Details
Here is the description of all the parameters used by this methods -
- val - Any string.
Example
The following example below would get HTML content of the first paragraph and would display it on the second paragraph -
<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 content = $( "p" ).html( );
$( "#pid2" ).html( content );
} );
</script>
<style>
.purple { color: purple; }
.green { color: green; }
</style>
</head>
<body>
<p class = "green" id = "pid1">This is the first Paragraph.</p>
<p class = "purple" id = "pid2">This is the second Paragraph.</p>
</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 content = $( "p" ).html( );
$( "#pid2" ).html( content );
} );
</script>
<style>
.purple { color: purple; }
.green { color: green; }
</style>
</head>
<body>
<p class = "green" id = "pid1">This is the first Paragraph.</p>
<p class = "purple" id = "pid2">This is the second Paragraph.</p>
</body>
</html>
Output
Below is the output of the above example.
This is the first Paragraph.
This is the first Paragraph.
text() Method
text() method gets the combined text contents of all matched elements. This method works for both XML and XHTML documents.
Syntax
Below is the syntax to use this method -
selector.text( )
Parameter Details
Here is the description of all the parameters used by this methods -
- Na
Example
The following example below would find the text in the first paragraph stripping out the html, then set the html of the first paragraph to show it is just text -
<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 content = $( "p#pid1" ).text( );
$( "#pid2" ).html( content );
} );
</script>
<style>
.purple { color: purple; }
.green { color: green; }
</style>
</head>
<body>
<p class = "green" id = "pid1">This is the first Paragraph.</p>
<p class = "purple" id = "pid2">This is the second Paragraph.</p>
</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 content = $( "p#pid1" ).text( );
$( "#pid2" ).html( content );
} );
</script>
<style>
.purple { color: purple; }
.green { color: green; }
</style>
</head>
<body>
<p class = "green" id = "pid1">This is the first Paragraph.</p>
<p class = "purple" id = "pid2">This is the second Paragraph.</p>
</body>
</html>
Output
Below is the output of the above example.
This is the first Paragraph.
This is the first Paragraph.
You can also read our tutorial post on: Learning JavaScript Number Object with examples
text(val) Method
The text(val) method sets the text contents of all matched elements. This method is similar to html( val ) but escapes all HTML entities.
Syntax
Below is the syntax to use this method -
selector.text( val )
Parameter Details
Here is the description of all the parameters used by this methods -
- val - Any string.
Example
The following example would set the HTML content of the first paragraph to the second paragraph but it escapes all the HTML 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( ) {
var content = $( "p#pid1" ).html( );
$( "#pid2" ).text( content );
} );
</script>
<style>
.purple { color: purple; }
.green { color: green; }
</style>
</head>
<body>
<p class = "green" id = "pid1">This is the <i>first Paragraph</i>.</p>
<p class = "purple" id = "pid2">This is the second Paragraph.</p>
</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 content = $( "p#pid1" ).html( );
$( "#pid2" ).text( content );
} );
</script>
<style>
.purple { color: purple; }
.green { color: green; }
</style>
</head>
<body>
<p class = "green" id = "pid1">This is the <i>first Paragraph</i>.</p>
<p class = "purple" id = "pid2">This is the second Paragraph.</p>
</body>
</html>
Output
Below is the output of the above example.
This is the first Paragraph.
This is the <i>first Paragraph</i>.
val() Method
The val() method gets the input value of the first matched element.
Syntax
Below is the syntax to use this method -
selector.val( )
Parameter Details
Here is the description of all the parameters used by this methods -
- Na
Example
The following example would set the HTML content of the first input box in the second paragraph -
<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 content = $( "input" ).val( );
$( "p#pid2" ).text( content );
} );
</script>
<style>
.purple { color: purple; }
.green { color: green; }
</style>
</head>
<body>
<input type = "text" value = "First Input Box" />
<input type = "text" value = "Second Input Box" />
<p class = "green" id = "pid1">This is the <i>first Paragraph</i>.</p>
<p class = "purple" id = "pid2">This is the second Paragraph.</p>
</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 content = $( "input" ).val( );
$( "p#pid2" ).text( content );
} );
</script>
<style>
.purple { color: purple; }
.green { color: green; }
</style>
</head>
<body>
<input type = "text" value = "First Input Box" />
<input type = "text" value = "Second Input Box" />
<p class = "green" id = "pid1">This is the <i>first Paragraph</i>.</p>
<p class = "purple" id = "pid2">This is the second Paragraph.</p>
</body>
</html>
Output
Below is the output of the above example.
This is the first Paragraph.
First Input Box
val(val) Method
The val (val) method sets the input value of every matched element.
If this method is called on radio buttons, check boxes, or select options then it would check, or select them at the passed value.
If this method is called on radio buttons, check boxes, or select options then it would check, or select them at the passed value.
Syntax
Below is the syntax to use this method -
selector.val( val )
Parameter Details
Here is the description of all the parameters used by this methods -
- val - If it is called on <input> but if it is called on <select> with the passed <option> value them 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.
Example
The following example below would set the value attribute of the second input with the value content of the first input -
<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 content = $( "input" ).val( );
$( "input" ).val( content );
} );
</script>
</head>
<body>
<input type = "text" value = "First Input Box" />
<input type = "text" value = "Second Input Box" />
</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 content = $( "input" ).val( );
$( "input" ).val( content );
} );
</script>
</head>
<body>
<input type = "text" value = "First Input Box" />
<input type = "text" value = "Second Input Box" />
</body>
</html>
Output
Below is the output of the above example.
Alright guys! We have come to the end of this tutorial post on jQuery attribute methods. Feel free to ask your questions where necessary.
Thanks for reading and bye for now.
Thanks for reading and bye for now.