Second Day: Selectors of jQuery

jQuery selectors are backbone or you can say the most important parts of the jQuery library. jQuery selectors are very need to perform any action on any element or event.

jQuery Selectors 

jQuery selectors allow you to select HTML element(s) and then perform required operation on them.

jQuery selectors are used to "search" (or select) HTML elements based on their name, id, class, types, attributes, values of attributes and much more. It's based on the idea of CSS Selectors as its known and easy to use, and it has some of its own selectors as addition, which can be used with other selectors.

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

As '$' sign is alias of jQuery so you can always find examples with jQuery() or $() depending on your version of jQuery.

---

Element Selector

This jQuery selector selects HTML elements (tags) based on their element (tag) name.
You can select all <div> elements (tag) on a HTML page like this:

$("div")

Example Code: This below code will hide all <div> elements, when button is clicked.

$(document).ready(function(){
  $("button").click(function(){
    $("div").hide();
  });
}); 

Working example link

---

The #id Selector

This jQuery selector selects single unique element with its id attribute of HTML tag, since id can be applied to any element in HTML, this selector plays a great role.

An id is supposed to be unique within a page, so you should use the #id selector when you want to find a single, unique element.
To find an element with a specific id, just write a hash character, followed by the id value of the HTML element you want to search or select, like one below:

$('#main')

Example Code: This below code will hide element with id "main", when button is clicked.

$(document).ready(function(){
  $("button").click(function(){
    $("#main").hide();
  });
});

Working example link

---

The .class Selector

 This jQuery selector selects element by their specified class name, which are defined as attributes in HTML elements. An Element can have multiple classes separates by spaces, and jQuery class selector can select element based on one or more of those classes of element.

To search or select element using class you need to write period (.) character followed by class name, like one given below:

$('.row')

Example Code: This below code will hide all elements with class "row", when button is clicked.

$(document).ready(function(){
  $("button").click(function(){
    $(".row").hide();
  });
});

 Working example link

---

Miscellaneous jQuery Selectors

There are other selectors like pseudo selectors, grouping selectors, nesting selector, etc. I am mentioning some of them in list below:

Syntax	Description
$("*")	Selects all HTML elements
$(this)	Selects the current HTML element object
$("h1, p")	Selects all <h1> and <p> elements
$("#main, .row")	Selects element with id="main" and elements with class="row"
$("div.row")	Selects all <div> elements with class="row"
$("div:first")	Selects the first <div> element
$("ul li:first")	Selects the first <li> element of the first <ul>
$("ul li:first-child")	Selects the first <li> element of every <ul>
$("[src]")	Selects all elements with an src attribute
$("input[type='text']")	Selects all <input> elements with a type attribute value equal to "text"
$("input[type!='button']")	Selects all <input> elements with a type attribute value NOT equal to "button"
$(":button")	Selects all <button> elements and <input> elements of type="button"
$("div:even")	Selects all even ordered <div> elements
$("div:odd")	Selects all odd ordered <div> elements

 

For More info on jQuery selectors write to me or refer CSS selectors.