jQuery Selectors Basics

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 select 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 $(). In 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 the 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 is conflicting with something else then you can replace the $ sign with the jQuery name and you can use the function jQuery() instead of $(). Now let's implement jQuery with a small HTML code:



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



In a similar way 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:



Result:


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



Result:



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

1. We can choose multiple elements (HTML tags), for example: $(".myParagraph, #myParagraph, .leftPanel").action().
   
2. $(“*”): Selects all elements in the document.
   
3. $("p ~ ul"): Selects all elements matched by <ul> that follow a sibling element matched by <p>.
   
4. $("code, em, strong"): Selects all elements matched by <code> or <em> or <strong>.
   
5. $(":empty"): Selects all elements that have no children.
   
6. $("div[p]"): Selects all elements matched by <div> that contain an element matched by <p>.
   
7. $("div/p"): Selects all elements matched by <p> that are children of an element matched by <div>.
   
8. $("div//code"): Selects all elements matched by <code> that are descendants of an element matched by <div>.
   
9. $("//p//a"): Selects all elements matched by <a> that are descendants of an element matched by <p>.
   
10. $("li:first-child"): Selects all elements matched by <li> that are the first child of their parent.
    
11. $("li:last-child"): Selects all elements matched by <li> that are the last child of their parent.
    
12. $(":parent"): Selects all elements that are the parent of another element, including text.
    
13. $("li:contains(second)"): Selects all elements matched by <li> that contain the text second.

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 problem in jQuery Selectors.