jQuery Selectors

jQuery selectors functions are used to select a matching element from HTML DOM.

In simple words, you can say that jQuery selectors are used to select HTML elements, and after selecting the elements, you can perform various operations on them.

  • JQuery selectors always start with a dollar sign, which is called the factory function $().
  • jQuery Selector is a function, which is used to select and manipulate HTML DOM elements.
  • jQuery Selectors works with HTML DOM element like name, id, classes, types, attributes, values of attributes and many more.

Mainly used jQuery Selectors

SelectorTypeExampleDescription
$("p")Element Selector
$("p").hide();
Hides all HTML <p> tags.
$(".article")Class Selector
$(".article").hide();
Hides all elements with class="article".
$("#menu")ID Selector
$("#menu").hide();
Hides the element with id="menu".

jQuery Selector Example

Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery with HTML Example</title> 
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head> 
<body>

<script>
$(document).ready(function(){
      $("body").css("background","pink");
});
</script> 

<p>This is sample text.</p>

</body>
</html>

In the above example, the body color of the web page will become pink when the document is ready.