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.

In this tutorial, you will learn about different kinds of HTML element selectors with syntax and examples.

Syntax – jQuery selector

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

1. Select HTML element using tag

To select an element in jQuery using tag, use the following syntax.

</>
Copy
 $("tag")

Examples

</>
Copy
$("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

2. Select HTML element using id

To select an element in jQuery using id, use # (hash) symbol infront of the actual id you provide.

</>
Copy
 $("#id")

Examples

</>
Copy
$("#personName") // to select element with id="personName"
$("#pAge") // to select element with id="pAge"

3. Select HTML element using class

To select elements in jQuery using class, use . (dot) symbol infront of the actual class you provide

</>
Copy
 $(".class")

Examples

</>
Copy
$(".roundButton") // to select elements with class="roundButton"
$(".book") // to select elements with class="book"

4. 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.

Examples

</>
Copy
$("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.

1. 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>

2. Example – Select elements 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>

3. 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>

4. 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>

5. 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>

Conclusion

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