jQuery Selectors



As we indicated earlier, jQuery works by selelcting the HTML elements and then performing actions on them. In this part of the tutorial we will take a look at the Selector part of jQuery.

jQuery Selector makes use of expressions to find matching HTML elements. With jQuery selectors you can find elements based on their id, classes, types, attributes, values of attributes etc.

Selectors in jQuery, start with the dollar sign and the selection to be made is indicated inside parentheses: $().

You can select the elements in three ways as shown in the following table

Table : jQuery Selectors


jQuery Element Description Example 
 Element Name  
 Represents an Element name available in the page.  
 $('p') selects all paragraphs in the document. 
 Elemeny ID 
 Represents an Element  available with the given ID . 
 $('#foo') selects the single element in the  in the 
document that has an ID  foo. 
 Element Class 
 Represents an element  available with the given class. 
 $('.foo') selects all elements in the document  
that have a class of foo.


OK, the table and all these formal describtion will look dry things to learn. So will will give plenty of examples to understand. We will give three examples each one corresponding to the above three rows in the table above.

Let us take a look at this exmple. This is about the same as the Hello World example. 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     $("p").hide();
  9.   });
  10. });
  11. </script>
  12. </head>
  13.  
  14. <body>
  15. <h2>Reference Designer jQuery Tutorial</h2>
  16. <p>First Paragraph no id or class</p>
  17. <p>Second Paragraph no id or class</p>
  18. <p>Second Paragraph no id or class </p>
  19. <button>Click me and the above three paragraphs will vanish</button>
  20. </body>
  21. </html>



Try this example here .

This example hides all the three paragraps. But what if we wish to hide only one of the three paragraphs ? There should be some way to differentiate the particular paragraph (that we wish to hide) from other paragraphs. One way to make this differentiation explicit is to give it an id. Let us give the second paragraph an id ( as id1). If we use the selector $('#id1'), it will select the the element with id = id1. In that case, it will hide only that one element with id = id1. Let us look at this example. 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     $("#id1").hide();
  9.   });
  10. });
  11. </script>
  12. </head>
  13.  
  14. <body>
  15. <h2>Reference Designer jQuery Tutorial</h2>
  16. <p>First Paragraph with  no id or class</p>
  17. <p id="id1">Second Paragraph with id  = id1</p>
  18. <p>Third Paragraph with  no id or class </p>
  19. <button>Click me and 2nd paragraph will vanish</button>
  20. </body>
  21. </html>




Try this example here here .

Pay attention to how we narrowed our choice of selecting an html element using 

$("#id1").hide();

Thie ("#id1") will cause the selection of the following element in the html. 

<p id="id1">Second Paragraph with id  = id1</p>

In place of id we could also select a paragraph by its class. Take a look at the following example. 



  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     $(".class1").hide();
  9.   });
  10. });
  11. </script>
  12. </head>
  13.  
  14. <body>
  15. <h2>Reference Designer jQuery Tutorial</h2>
  16. <p>First Paragraph with  no id or class</p>
  17. <p class="class1">Second Paragraph with class = class1</p>
  18. <p>Third Paragraph with  no id or class </p>
  19. <button>Click me and 2nd paragraph will vanish</button>
  20. </body>
  21. </html>



It does the same function of as the previous example but we have narrowed down our selection using class in place of id.
Try this example here here .

Exercises


1. Make changes in the selection by id example code so that you assign three different ids to the three paragraphs. Make changes so that on clicking the button, only the the third paragrah vanish.



2. Make changes in the selection by id example code so that you assign three different ids ( id1, id2 and id3) to the three paragraphs. Make changes so that on clicking the button, first two paragraps with id1 and id2 vanish. If you are get stuck, the solution is here


3. Make changes in the selection by class example code so that you have three classes for the three paragraphs class1, class2 and class3. On clicking the button, the first and third paragraphs with class as class1 and class3 should vanish.