jQuery Selectors Basics

Introduction

As in our Day 1 and Day 2 lessons, we know jQuery is a special library of JavaScript. This library harnesses the power of CSS selectors to let us quickly and easily access elements or groups of elements in the Document Object Model (DOM). We know the basic syntax of jQuery is as in the following,

$(selector).action()

Now let's learn more about this syntax. jQuery selectors are used to selecting one or more HTML elements using jQuery. Once an element is selected, we can do various operations on that selected element. A selector starts with $(). The parentheses may be an element, a class, or an ID. For example,

<div class=”leftBorder”> C# Corner</div>  
<div ID=”leftPanel”>C# Corner</div>

For the preceding code, jQuery syntax (for selectors ) will be,

$(“div”).action
$(“.leftBorder”).action
$(“#leftPanel”).action

So here we used three things, HTML tag name, class name, and ID name. There are jQuery selectors. The factory function $() is a synonym of the jQuery() function. So in case, you are using any other JavaScript library where a $ sign conflicts with something else, you can replace the $ sign with the jQuery name and use the function jQuery() instead of $(). Now let's implement jQuery with a small HTML code,

<html>
<head>
<title>jQuery Selectors</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script type="text/javascript" language="javascript"> $(document).ready(function() {
$("div").css("background-color", "red");
}); </script>
</head>
<body>
<div>
This is third paragraph.
</div>
</body>
</html>

When we applied these actions using CSS, the preceding code has the jQuery selector div. The result will show the following,

result will show

Similarly, we can use the class name and ID name. Now here we are using the class name "myParagrapg". We will get the same result as in the following,

<head>
<html>
<title>jQuery Selectors</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script type="text/javascript" language="javascript"> $(document).ready(function() {
$(".myParagraph").css("background-color", "red");
}); </script>
</head>
<body>
</body>
</html>
<div class="myParagraph">
This is third paragraph. (Using Class Name)
</div>

Result,

output

Now let's use the ID name as in the following,

<html>
<head>
<title>jQuery Selectors</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script type="text/javascript" language="javascript"> $(document).ready(function() {
$("#ayParagraph").css("background-color", "red");
}); </script>
</head>
<body>
</body>
</html>
<div id="myParagraph">
This is third paragraph. (Using ID Name)
</div>

Result,

Result

So this was a simple concept of jQuery selectors. Selectors are very important and will be helpful at every step when using jQuery. Many important things can help you better understand jQuery selectors.

We can choose multiple elements (HTML tags), for example- $(".myParagraph, #myParagraph, .leftPanel").action().
$("*")- Selects all elements in the document.
$("p ~ ul")- Selects all elements matched by <ul> that follow a sibling element matched by <p>.
$("code, em, strong")- Selects all elements matched by <code> or <em> or <strong>.
$(":empty")- Selects all elements with no children.
$("div[p]")- Selects all elements matched by <div> that contain an element matched by <p>.
$("div/p")- Selects all elements matched by <p> that are children of an element matched by <div>.
$("div//code")- Selects all elements matched by <code> that are descendants of an element matched by <div>.
$("//p//a")- Selects all elements matched by <a> that are descendants of an element matched by <p>.
$("li:first-child")- Selects all elements matched by <li> that are the first child of their parent.
$("li:last-child")- Selects all elements matched by <li> that are the last child of their parent.
$(":parent")- Selects all elements that are the parent of another element, including text.
$("li:contains(second)")- Selects all elements matched by <li> that contain the text second.

Summary

You can use all the selectors shown above with any HTML tag. Do more practice; you will get more clarification. Comment here if you have any problems with jQuery Selectors.

Reference

CSS selectors