Thursday, April 30, 2020

Understanding jQuery Selectors with Proper examples



Hello guys! Welcome to a new section of my tutorial on jQuery. In my last tutorial post,  I gave a comprehensive list of all the Selectors that can be found in jQuery. So now in this tutorial, i will be using few examples to explain some of those selectors listed in my previous tutorial.

I will be starting with the Name selector and i will give a proper illustration of how this selector can be implemented using jQuery. I will advice you take your time and read through carefully.

Element Name Selector

The element selector selects all the elements that have a tag name of T.

Syntax

Below is the syntax to use this selector -

$( 'tagname' )

Parameter Details

Here is the description of all the parameters used by this selector -

  • tagname - Any standard HTML tag name like p, li, img, div etc.

Return Value

Like any other jQuery selector, this selector also returns an array filled with the found elements.

Example

  • $('p') - Selects all elements with a tag name of p in the HTML document.
  • $('div') - Selects all elements with a tag name of div in the HTML document.

The following example below would select all the divisions and will apply grey color to their background -

<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( )  {
                    /*  This will select all the divisions */
                    $( "div" ).css( "background-color",  "grey" );
               } );
          </script>
     </head>

     <body>
          <div  class = "big"   id = "div1">
               <p>This is the first division of the DOM.</p>
          </div> 

          <div  class = "medium"    id = "div2">
               <p>This is the second division of the DOM.</p>
          </div>

          <div  class = "small"     id = "div3">
               <p>This is the third division of the DOM.</p>
          </div>
     </body>
</html>

Output

Below is the output of the above example.


This is the first division of the DOM.

This is the second division of the DOM.

This is the third division of the DOM.



You can also read our tutorial post on: Understanding the Basics of jQuery


Element ID Selector

The element selector selects a single element with the given id attribute.

Syntax

Below is the syntax to use this selector -

$( '#elementid' )

Parameter Details

Here is the description of all the parameters used by this selector -

  • elementid - This would be an element ID. If the id contains any special characters like periods or colons, you have to escape those characters with backslashes.

Return Value

Like any other jQuery selector, this selector also returns an array filled with the found elements.

Example

  • $('#myid') - Selects a single element with the given id myid.
  • $('div#yourid') - Selects a single division with the  given id yourid.

The following example below would select the second division and will apply grey color to its background -

<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( )  {
                    /*  This will select the second division only */
                    $( "#div2" ).css( "background-color",  "grey" );
               } );
          </script>
     </head>

     <body>
          <div  class = "big"   id = "div1">
               <p>This is the first division of the DOM.</p>
          </div> 

          <div  class = "medium"    id = "div2">
               <p>This is the second division of the DOM.</p>
          </div>

          <div  class = "small"     id = "div3">
               <p>This is the third division of the DOM.</p>
          </div>
     </body>
</html>

Output

Below is the output of the above example.


This is the first division of the DOM.

This is the second division of the DOM.

This is the third division of the DOM.



You can also read our tutorial post on: JavaScript Switch Case

Element Class Selector

The element selector selects all the elements which matches with the given class of the elements. 

Syntax

Below is the syntax to use this selector -

$( '.classid' )

Parameter Details

Here is the description of all the parameters used by this selector -

  • classid - This is the class ID available in the HTML document.

Return Value

Like any other jQuery selector, this selector also returns an array filled with the found elements.

Example

  • $('.big') - Selects all the elements with the given class ID big
  • $('p.small') - Selects all the paragraphs with the given class ID small.
  • $('.big.small') - Selects all the elements with the class of big and small.

The following example below would select all the divisions with the class .big and will apply grey color to its background -

<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( )  {
                    /*  This will select the first division only */
                    $( ".big" ).css( "background-color",  "grey" );
               } );
          </script>
     </head>

     <body>
          <div  class = "big"   id = "div1">
               <p>This is the first division of the DOM.</p>
          </div> 

          <div  class = "medium"    id = "div2">
               <p>This is the second division of the DOM.</p>
          </div>

          <div  class = "small"     id = "div3">
               <p>This is the third division of the DOM.</p>
          </div>
     </body>
</html>

Output

Below is the output of the above example.


This is the first division of the DOM.

This is the second division of the DOM.

This is the third division of the DOM.



You can also read our tutorial post on: JavaScript Operators


Universal Selector

The universal selector selects all the elements in the document.

Syntax

Below is the syntax to use this selector -

$( '*' )

Parameter Details

Here is the description of all the parameters used by this selector -

  • * - A symbolic star.

Return Value

Like any other jQuery selector, this selector also returns an array filled with the found elements.

Example

  • $('*') - Selects all the elements available in a HTML document.

The following example below would select all the elements and would apply grey color to their background. Try to understand that this selector will select every elements including head, body, etc. 

<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( )  {
                    /*  This will select all the elements */
                    $( "*" ).css( "background-color",  "grey" );
               } );
          </script>
     </head>

     <body>
          <div  class = "big"   id = "div1">
               <p>This is the first division of the DOM.</p>
          </div> 

          <div  class = "medium"    id = "div2">
               <p>This is the second division of the DOM.</p>
          </div>

          <div  class = "small"     id = "div3">
               <p>This is the third division of the DOM.</p>
          </div>
     </body>
</html>

Output

Below is the output of the above example.


This is the first division of the DOM.

This is the second division of the DOM.

This is the third division of the DOM.



You can also read our tutorial post on: Python on OS X


Multiple Element Selector
Multiple Element selector selects the combined results of all the specified selectors X, Y or Z. 

You can specify any number of selectors to that will be combined into a single result. Here order of the DOM elements in the jQuery object aren't necessarily identical.

Syntax
Below is the syntax to use this selector -

$( 'X,  Y,  Z, .........' )

Parameter Details
Here is the description of all the parameters used by this selector -

  • X - Any valid selector.
  • Y - Any valid selector.
  • Z - Any valid selector.

Return Value
Like any other jQuery selector, this selector also returns an array filled with the found elements.

Example
  • $('div, p') - Selects all the elements matched by div or p
  • $('p strong, .myclass') - Selects all elements that is matched by strong that are descendants of an element matched by p as well as all of the elements that have a class of myclass.
  • $('p strong, #myid') - Selects a single element matched by strong that is a descendant of an element matched by p as well as elements that its id is myid.

The following example below would select all the elements with class ID big and also element with ID div3 and will apply grey color to its back - ground -

<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( )  {
                    $( ".big, #div3" ).css( "background-color",  "grey" );
               } );
          </script>
     </head>

     <body>
          <div  class = "big"   id = "div1">
               <p>This is the first division of the DOM.</p>
          </div> 

          <div  class = "medium"    id = "div2">
               <p>This is the second division of the DOM.</p>
          </div>

          <div  class = "small"     id = "div3">
               <p>This is the third division of the DOM.</p>
          </div>
     </body>
</html>

Output
Below is the output of the above example.


This is the first division of the DOM.

This is the second division of the DOM.

This is the third division of the DOM.



Alright guys! We have come to the end of this tutorial on jQuery Selectors. In my next tutorial, i will be talking about jQuery attributes.

Feel free to ask your questions where necessary, and i will attend to them as soon as possible. Do follow us on our various social media platforms available.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment