One of the most important parts of a jQuery library is jQuery Selectors.
Table of Contents
Selectors in jQuery
Allows JQuery selectors to select and manipulate HTML elements.
jQuery selectors are used to finding or selecting HTML elements based on their name, ID, categories, types, properties, attribute values, and more. In addition, it has some custom selectors of its own. And it is based on existing CSS selectors.
All jQuery selectors start with a dollar sign and parentheses: $ ().
jQuery has three main selectors:
- The element Selector
- The #id Selector
- The .class Selector
The element Selector
The JQuery component selector selects the element of the HTML tag.
You can select all elements on a page like <p>: $(“p”)
Example:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});The #id Selector
Using jQuery’s #id selector, the Html tag is given a specific id and we can access that id using the id selector.
An ID must be unique to a page, you should use the # ID selector when you want to find a single, unique element.
After the HTML element ID, type the hash character so that you can find the element with the unique ID: $(“#test”)
Example:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});The .class Selector
jQuery’s .class selector is used to find elements of a specific class.
To find elements of a particular class, first type the character of the period, followed by the name of the class: $(“.test”)
Example:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});More examples of jQuery selectors are as follows
| Syntax | Description | Example |
| $(“*”) | Selects all elements | $(document).ready(function(){ $(“button”).click(function(){ $(“*”).hide(); }); }); |
| $(this) | Selects the current HTML element | $(document).ready(function(){ $(“button”).click(function(){ $(“this”).hide(); }); }); |
| $(“p.intro”) | Selects all <p> elements with class=”intro” | $(document).ready(function(){ $(“button”).click(function(){ $(“p.intro”).hide(); }); }); |
| $(“p:first”) | Selects the first <p> element | $(document).ready(function(){ $(“button”).click(function(){ $(“p.first”).hide(); }); }); |
| $(“ul li:first”) | Selects the first <li> element of the first <ul> | $(document).ready(function(){ $(“button”).click(function(){ $(“ul li:first”).hide(); }); }); |
| $(“ul li:first-child”) | Selects the first <li> element of every <ul> | $(document).ready(function(){ $(“button”).click(function(){ $(“ul li:first-child”).hide(); }); }); |
| $(“[href]”) | Selects all elements with an href attribute | $(document).ready(function(){ $(“button”).click(function(){ $(“[href]”).hide(); }); }); |
| $(“a[target=’_blank’]”) | Selects all <a> elements with a target attribute value equal to “_blank” | $(document).ready(function(){ $(“button”).click(function(){ $(“a[target=’_blank’]”).hide(); }); }); |
| $(“a[target!=’_blank’]”) | Selects all <a> elements with a target attribute value NOT equal to “_blank” | $(document).ready(function(){ $(“button”).click(function(){ $(“a[target!=’_blank’]”).hide(); }); }); |
| $(“:button”) | Selects all <button> elements and <input> elements of type=”button” | $(document).ready(function(){ $(“button”).click(function(){ $(“:button”).hide(); }); }); |
| $(“tr:even”) | Selects all even <tr> elements | $(document).ready(function(){ $(“tr:even”).css(“background-color”, “yellow”); }); |
| $(“tr:odd”) | Selects all odd <tr> elements | $(document).ready(function(){ $(“tr:even”).css(“background-color”, “yellow”); }); |
