Friday, May 1, 2020

The Practical Guide to jQuery Attribute Methods



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.

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>

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>

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>

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>

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>

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>

Output

Below is the output of the above example.

jQuery 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>

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>

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>

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>

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>

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.

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>

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.
Share:

0 comments:

Post a Comment