jQuery Selectors

jQuery selectors is most important aspects of the jQuery library. jQuery library allow you to select elements in your HTML document by wrapping them in $(" ") (also you have to use single quotes), which is the jQuery wrapper. Selectors are useful and required at every step while using jQuery.

jQuery Selector Syntax

Following basic selector are frequently use in jQuery.

Selector	Description
element Selector	Selects all element match of given elements.
this Selector	Selects current elements.
#id Selector	Selects element whose id is match of given elements.
.class Selector	Selects element whose class is match of given elements.
*	Selects all elements in the document.

element selector

$("p").hide() The jQuery hide() function, hide all <p> elements.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery hide p elements</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function(){
        $("p").hide();
      });
    });
  </script>
</head>
<body>
  <p>First paragraph start here...</p>
  <p>Second paragraph start here...</p>
  <button>Click here to hide above all paragraph</button>
</body>
</html>

this selector

$(this).hide() The jQuery hide() function, hide (this) element.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery hide this element</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function(){
        $(this).hide();
      });
    });
  </script>
</head>
<body>
  <button>Click here to hide this button</button>
</body>
</html>

id selector

$("#div1").hide() The jQuery hide() function, hiding whose id="div1" in the elements.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery hide p#div1 element</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function(){
        $("#div1").hide();
      });
    });
  </script>
</head>
<body>
  <p id="div1">First paragraph start here...</p>
  <button>Click here to hide p#div1 element</button>
</body>
</html>

Run it... »

class selector

$(".div1").hide() The jQuery hide() function, hiding whose class="div1" in the elements.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery hide p.div1 elements</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function(){
        $(".div1").hide();
      });
    });
  </script>
</head>
<body>
  <p class="div1">First paragraph start here...</p>
  <p class="div1">Second paragraph start here...</p>
  <button>Click here to hide above all paragraph</button>
</body>
</html>

Run it... »

* selector

$("*").hide() The jQuery hide() function, hide all the elements.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery hide all elements</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function(){
        $("*").hide();
      });
    });
  </script>
</head>
<body>
  <p>First paragraph start here...</p>
  <p>Second paragraph start here...</p>
  <button>Click here to hide above all paragraph</button>
</body>
</html>

Few custom selectors

Syntax	Description
$(":animated")	Selects elements currently being animated.
$(":button")	Selects any button elements (inputs or buttons tag).
$(":radio")	Selects radio buttons.
$(":checkbox")	Selects checkboxes.
$(":header")	Selects header elements (h1, h2, h3, etc..).

KANSIRIS