jQuery - Selectors

jQuery selectors allow you to select and manipulate HTML element(s). A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. Simply you can say, selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.
  • $ sign to define/access jQuery
  • (selector) to "query (or find)" HTML elements
  • jQuery action() to be performed on the element(s)
All selectors in jQuery start with the dollar sign and parentheses: $().

The element Selector:

$(div) - select all DIV elements on a page.

Example:
When a user clicks on any button, all DIVs elements will be hidden:
$(document).ready(function(){
    $("button").click(function(){
        $("div").hide();
    });
});

The #id Selector:

When a user clicks on a button with id="button1", all DIVs elements will be hidden:
$(document).ready(function(){
   $("#button1").click(function(){
      $("div").hide();
   });
});

The .class Selector:

When a user clicks on a button with id="button1", all elements will class="test" be hidden:
$(document).ready(function(){
   $("#button1").click(function(){
      $(".test").hide();
   });
});

Universal Selector:

The universal selector selects all the elements available in the document.
When a user clicks on a button with id="button1", all elements will apply blue color to their background.
$(document).ready(function(){
   $("#button1").click(function(){
      $("*").css("background-color", "blue");
   });
});