jQuery Selectors

In this article, we will see examples of some commonly used selectors while working with jQuery.

jQuery Selectors

Selectors allow html elements to be selected, so that we can perform some operation on them.

Selectors in jQuery start with the dollar sign or jQuery and parentheses: $() or jQuery()

Element selector

The element selector selects html elements by name.

For example, $(“div”) selects all “div” elements. Similarly $(“h2”) selects all h2 elements.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").hide();
    });
});
</script>
</head>
<body>
<div>This is a div</div>
<p>This is a paragraph</p>

<button>Click me</button>
</body>
</html>

ID selector

We can use the id of an html element to select the element uniquely.

For example, if we have a paragraph with id “p1”, we can select it as $(“#p1”)

Note the use of # symbol before the element id.

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

<p id="p2">
Second paragraph
</p>

<button>Click me</button>
</body>
</html>

Class selector

Class selector selects elements of a specified class.

For example, $(.class1)

Notice the use of period(.) for selecting class.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".class1").hide();
    });
});
</script>
</head>
<body>
<div class="class1">
This is a div with class : class1
</div>

<p class="class2">
First paragraph with class : class2
</p>

<p class="class1">
Second paragraph with class : class1
</p>

<button>Click me</button>
</body>
</html>

this selector

We can use “this” selector to select current element.

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

Descendant selector

Using descendent selector, we can select relationships like children, siblings etc.

For example, you can select an h2 element in a div as $(“div h2”)

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div h2").hide();
    });
});
</script>
</head>
<body>
<h2>
H2 : outside div
</h2>
<div>
<h2>
H2 : inside div
</h2>
</div>

<button>click me</button>
</body>
</html>

jQuery Selectors