jQuery selector

Using JavaScript document.getElementById(), document.getElementsByClass(), etc., you can select an HTML element and apply operations on it. In jQuery, an HTML element or group of HTML elements (based on a criteria like class or tag) could be selected using the notation $ (dollar) symbol followed by parenthesis.

Syntax - jQuery selector

Following is the syntax to select an element in jQuery using tag :

  • Select HTML element using tag

    To select an element in jQuery using tag
     $("tag")
    $("p") // to select all paragraph elements
    $("div") // to select all div elements
    $("h2") // to select all heading2 elements
    $("a") // to select all anchor elements
    $("table") // to select all tables
    
  • Select HTML element using id

    To select an element in jQuery using id, use # (hash) symbol infront of the actual id you provide
     $("#id")
    $("#personName") // to select element with id="personName"
    $("#pAge") // to select element with id="pAge"
    
  • Select HTML element using class

    To select elements in jQuery using class, use . (dot) symbol infront of the actual class you provide
     $(".class")
    $(".roundButton") // to select elements with class="roundButton"
    $(".book") // to select elements with class="book"
    
  • Select HTML element using combinations of Tag, ID and Class

    Combinations of tag, id and class could be used to filter specific HTML elements that would like to manipulate. This is similar to how you provide in a css file.
    $("p.highlite") // to select paragraph elements with class="highlite"
    $("div#mainTitle") // to select div element with id="mainTitle"
    $("div .btn") // to select elements with class="btn" within the child elements of div node
    

Examples - jQuery selector

Following examples help you understand the usage of jQuery selector :

Example - Select elements using Tag

Following example demonstrates how to use jQuery selector to select all HTML elements with p (paragraph) tag.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btnAct").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>

 <h2>Heading 2</h2>

 <p>A paragraph.</p>
 <p>Another paragraph.</p>

 Some List
 <ul>
   <li>Item 1</li>
   <li>Item 2</li>
 </ul>

 <button id="btnAct">Hide paragraphs</button>

</body>
</html>
Try Online

Example - Select element using ID

In the following example, jQuery selector is used to select HTML element with a specific ID.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btnAct").click(function(){
    $("#uselessPara").hide();
  });
});
</script>
</head>
<body>

 <h2>Heading 2</h2>

 <p id="uselessPara">A paragraph.</p>
 <p>Another paragraph.</p>

 Some List
 <ul>
   <li>Item 1</li>
   <li>Item 2</li>
 </ul>

 <button id="btnAct">Hide useless paragraph</button>

</body>
</html>
Try Online

Example - Select elements using Class

In the following example, jQuery selector is used to select HTML element with a specific Class value.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btnAct").click(function(){
    $(".abc").hide();
  });
});
</script>
</head>
<body>

 <h2>Heading 2</h2>

 <p class="abc">A paragraph.</p>
 <p>Another paragraph.</p>

 Some List
 <ul>
   <li class="abc">Item 1</li>
   <li>Item 2</li>
 </ul>

 <button id="btnAct">Hide abc class elements</button>

</body>
</html>
Try Online

Example - Select elements using Tag and Class

In the following example, jQuery selector is used to select HTML element(s) with a specific combination of tag and class.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btnAct").click(function(){
    $("li.abc").hide();
  });
});
</script>
</head>
<body>

 <h2>Heading 2</h2>

 <p class="abc">A paragraph.</p>
 <p>Another paragraph.</p>

 Some List
 <ul>
   <li class="abc">Item 1</li>
   <li>Item 2</li>
 </ul>

 <button id="btnAct">Hide li elements with abc class</button>

</body>
</html>
Try Online

Example - Select elements with multiple combinations of Tags, Classes and IDs

The following example takes the selection of elements to next level. We use a combination of tag, class and ID to select HTML Element(s).

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btnAct").click(function(){
    $("li.abc, p.cdf").hide();
  });
});
</script>
</head>
<body>

 <h2>Heading 2</h2>

 <p class="abc">A paragraph.</p>
 <p class="cdf">Another paragraph.</p>

 Some List
 <ul>
   <li class="abc">Item 1</li>
   <li>Item 2</li>
 </ul>

 <button id="btnAct">Hide li.abc and p.cdf elements</button>

</body>
</html>
Try Online

Conclusion

In this jQuery Tutorial, we have learnt jQuery selector() with the help of examples.