jQuery Selectors

in this tutorial you will learn about jQuery Selectors, this is most important part of jQuery library.

What is jQuery Selectors

jQuery selector allow to select or manipulate HTML Element.

jquery basically use to find html element as html name, classes, id, name, id, classes, types, attributes, values of attributes etc.

jQuery Selector Syntax

$("selector_type")

Basically jQuery selector start with dollar sign and after write parentheses and under parentheses you will write double quotes ⇒ $("")

We mostly use 3 selectors

  • Element Selector
  • Id Selector 
  • Class Selector

We show you an example of these three

Element Selector 

it is denoted by element name

In this, we will select name of the element. like do you want to select h2 element 

$("h2")

when you will select h2 then you will be able to perform action on all h2 element as same.

Exmalple

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h2").hide();
  });
});
</script>
</head>
<body>
<h1>This is a h1 heading</h>
<h2>This is a h2 heading .</h2>
<h2>This is a another h2 heading .</h2>
<button>hide h2 heading</button>
</body>
</html>

When You click on button then all h2 heading will be hide.

as well as you can perform action other html element like paragraph, span, table, tr, and td etc.

Id Selector

It is the property of the html tag you can define id for any html tag but It is unique on the page

If html tag have two same name Id Attribute on the page then it is considered an error.

Id selector work in Id Attribute of html tag and Id selector denoted by $("#id_name"). 

Dollar Sign ⇒ parentheses ⇒  under parentheses type double quotes ⇒ under double quotes write Hash and id name 

$("#idselctor_name")

Id selector Example

when click on btn_hide then paragraph will be hide and  click on btn_show then paragraph will be show which id name is myparagraph

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn_hide").click(function(){
    $("#myparagraph").hide();
  });

 $("#btn_show").click(function(){
    $("#myparagraph").show();
  });
});
</script>
</head>
<body>
<h2>Id Selector Tutorial</h2>
<p>This is a paragraph.</p>
<p id="myparagraph">This is my paragraph.</p>
<button id="btn_hide">Hide Paragraph </button>
<button id="btn_show">Show Paragraph</button>
</body>
</html>

Class Selector

jquery class select work for html tag class attribute which can perform action with specefic class   denoted by $("#id_name"). 

Dollar Sign ⇒ parentheses ⇒  under parentheses type double quotes ⇒ under double quotes write Dot and class name 

$(".class_name")

Class selector Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn_hide").click(function(){
    $(".myparagraph").hide();
  });

 $("#btn_show").click(function(){
    $(".myparagraph").show();
  });
});
</script>
</head>
<body>
<h2>Id Selector Tutorial</h2>
<p>This is a paragraph.</p>
<p id="myparagraph">This is my paragraph.</p>
<button class="btn_hide">Hide Paragraph </button>
<button class="btn_show">Show Paragraph</button>
</body>
</html>