Lesson 3 jQuery Selectors

❮ Previous Lesson Next Lesson ❯

jQuery selectors are the essence of the jQuery library. jQuery selectors let you select and manipulate HTML elements. We can use jQuery selectors to find and select HTML elements based on their name, id, classes, types, attributes and more. Actually it creates an object called jQuery which holds references to those elements. We use the dollar sign and parentheses to indicate a selector: $().

There are several types of jQuery selectors, the basic ones are the element selector, the id selector, the class selector. Besides, there are many more varieties of jQuery selectors which we shall examine some of them.

3.1 The Element Selector

This is simplest jQuery selector that selects an element based on its name. For example, you can select all <p> elements using the syntax $("p"). An example is to select all <li> elements using the syntax $("li"). Let's examine the following Example:

Example 3.1

In this example, we use jQuery to select the <h2> and <li> elements and then hide them.

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("h2").hide();
    });
	 $("#btn2").click(function(){
        $("li").hide();
    });
});
</script>
</head>
<body>
	
<h2>This is heading2</h2>
<ul>
<li>Apple
<li>Orange
<li>Pear
<li>Grape
</ul>
<button id="btn1">Click to hide heading2</button><br>
<button id="btn2">Click to hide bulleted items</button>
</body>
</html>

This is heading2

Apple
Orange
Pear
Grape

3.2 The Class Selector

The class selector lets you select elements with a specific class.

To select elements with a specific class, use the following syntax:

$(".classname")

Where classname is the name of the class.

You can also select a certain element with a particular class name. For example:

$("p.class1) will select the p element with class name class1

Example 3.2

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn3").click(function(){
        $(".myheader").hide();$("p.para1").hide();
    });
});
</script>
</head>
<body>
 <h3 class="myheader">This is my heading</h3>

<p class="para1">This is paragraph 1.</p>
<p>This is paragraph 2.</p>

<button id="btn3">Click to hide heading and paragraph 1</button>
</body>
</html>

This is my heading

This is paragraph 1.

This is paragraph 2.

3.3 The id Selector

The id selector lets jQuery select an element with a specific id. As id is unique for a web page, using id selector allows jQuery to find a single and unique element.

The syntax is

$("#myID")
  
where myID is the unique id of an element.

Example 3.3

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn4").click(function(){
        $("#myID").hide();
    });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p id="myID">This is my paragraph.</p>

<button id="btn4">Click to hide paragraph</button>
</body>
</html>

This is a heading

This is my paragraph.

❮ Previous Lesson Next Lesson ❯