What is jQuery Selector
A jQuery selector is a way of selecting an HTML element using jQuery. After you select an HTML element Using jQuery, you can perform various operations on it. You can select single as well as the group of HTML elements according to your needs.
The operation of selection specifies with the DOM hierarchy from where the jQUery starts searching and selecting the HTML element.
Why You Should Use jQuery Selector
You should use the jQuery selector to access and manipulate the HTML element. Without selecting the exact element you cannot perform the required task with the required element.
The jQuery library offers selectors features to select any element in a single form or in group form. JQuery provides various effects and manipulation features to apply to HTML elements. The jQuery is the popular language to use and perform various manipulations.
How to Use jQuery Selector to Select HTML Element Using jQuery
A selector of jQuery starts from the dollar($) sign with a parenthesis – $() after it. Below are the various selectors you can use to select and manipulate an HTML element.
Select All Element
If you want to apply a script to all HTML elements in one go, you can use the (*) selector. It will automatically apply the operation to all the HTML elements on a single page.
|
1 2 3 4 5 |
<script type="text/javascript"> $(document).ready(function(){ $("*").css("color", "#000"); }); </script> |
The above script when used in your page converts all element background to red color.
Select Element By ID
You can select an HTML element using the id which is unique for any element on a page. Use the hash(#) sign before the id name to grab the required HTML element.
|
1 2 3 4 5 6 |
<script type="text/javascript"> $(document).ready(function(){ $("#txt-selectbyid").css("color", "red"); }); </script> <p id="txt-selectbyid">This is a paragraph.</p> |
Output
This is a paragraph.
The above example converts the background of the p element with id ‘mypara’.
Select Element By Class
You can select an HTML element using the class with jQuery on a page. Use the dot(.) sign before the class to access the required element.
A class name not required to be unique and you can use the same class name for many HTML elements. This applies the script to all the elements with the same class name
|
1 2 3 4 5 6 |
<script type="text/javascript"> $(document).ready(function(){ $(".txt-selectbyclass").css("background", "red"); }); </script> <p class="txt-selectbyclass">This is a paragraph.</p> |
Output
This is a paragraph.
This will apply the background-color CSS to the paragraph with the ‘mypara’ class name.
Select Element With Multiple Classes
If a class name is the same for many elements and you want to access the one element, you can put another class to it and access it using the multiple class name.
Use the dot(.) sign with multiple class and put them inside the parenthesis without any space among them.
|
1 2 3 4 5 6 |
<script type="text/javascript"> $(document).ready(function(){ $(".txt-para1.txt-para2").css("background", "blue"); }); </script> <p class="txt-para1 txt-para2">This is a paragraph.</p> |
Output
This is a paragraph.
The above example will apply the background CSS property to the paragraph with multiple class names.
Select Element By Attribute
If you want to access an HTML element using the attribute other than class and id. You can do so by using them inside the square bracket after the element name.
See the example below to understand the method of jQuery to and access the HTML element.
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(document).ready(function(){ $('.mydiv-inputbox input[type="button"]').css("background", "#ccc"); }); </script> <div class="mydiv-inputbox"> <input type="button" name="Click" value="Click"/> </div> |
Output
The example given above contains the input of the button type. Use the example to access the HTML element using the jQuery attribute selector.
Select Element By Name
Selecting an element with its name will apply the operation to all the elements with the same name. The method can be useful when you want to apply the CSS to all the elements with the same element name.
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(document).ready(function(){ $(".mydiv-selectbyname p").css("color", "blue"); }); </script> <div class="mydiv-selectbyname"> <p>This is a paragraph to show jQuery selector name.</p> </div> |
Output
This is a paragraph to show jQuery selector name.
The above-given example will apply the color CSS property to all the p elements.
Select the First Element
Suppose you have many elements of the same name and you want to apply the CSS only to the first element. You can use the below-given example to perform the operation and access the HTML element.
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> $(document).ready(function(){ $(".mydiv-selectfirstitem p:first").css("font-weight", "bold"); }); </script> <div class="mydiv-selectfirstitem"> <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> <p>This is the third paragraph.</p> </div> |
Output
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
The above example will apply the CSS only to the first element of p tag.
Select Even Element
If you want to apply the operation to the even element of the table, you can use the jQuery even selector. The jQuery even selector can be used as the example given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<script type="text/javascript"> $(document).ready(function(){ $(".table-selecteven tr:even").css("background", "#ccc"); }); </script> <table border="1" class="table-selecteven" width="100%" cellpadding="5"> <tbody> <tr> <th>Sr. No</th> <th>Cricketer</th> </tr> <tr> <td>1</td> <td>Virat Kohli</td> </tr> <tr> <td>2</td> <td>Mahendra Singh Doni</td> </tr> <tr> <td>3</td> <td>AB De Villier</td> </tr> <tr> <td>4</td> <td>Yuvraj Singh</td> </tr> </tbody> </table> |
Output
| Sr. No | Cricketer |
|---|---|
| 1 | Virat Kohli |
| 2 | Mahendra Singh Doni |
| 3 | AB De Villier |
| 4 | Yuvraj Singh |
The example will apply the color #ccc to the even row of the table using the CSS color property.
Select Odd Element
If you want to apply the operation to the odd element of the table, you can use the jQuery odd selector. The jQuery odd selector can be used as the example given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<script type="text/javascript"> $(document).ready(function(){ $(".table-selectodd tr:odd").css("background", "green"); }); </script> <table border="1" class="table-selectodd" width="100%" cellpadding="5"> <tbody> <tr> <th>Sr. No</th> <th>Cricketer</th> </tr> <tr> <td>1</td> <td>Virat Kohli</td> </tr> <tr> <td>2</td> <td>Mahendra Singh Doni</td> </tr> <tr> <td>3</td> <td>AB De Villier</td> </tr> <tr> <td>4</td> <td>Yuvraj Singh</td> </tr> </tbody> </table> |
Output
| Sr. No | Cricketer |
|---|---|
| 1 | Virat Kohli |
| 2 | Mahendra Singh Doni |
| 3 | AB De Villier |
| 4 | Yuvraj Singh |
The example will apply the color #ccc to the odd row of the table using the CSS color property.
You must also read.