jQuery Selectors, Easy To Learn jQuery Selectors

jQuery Selectors

jQuery Selectors are one of the most very important part of jQuery library. With jQuery selectors, you can find or select HTML elements based on their id, classes, attributes, types and much more from a DOM. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

The jQuery selectors are start with the dollar sign and parentheses: $(). It is a factory function.

The factory function $() makes use of following three building blocks while selecting elements in a given examples.

1. Tag Name Selectors - Ex : $("p") , $("h1"), $("h2"), etc.

2. Tag ID(#) Selectors - Ex : $("#test")

3. Tag class(.) Selectors - Ex : $(".test")

jQuery Element Selector

When a user clicks on a button, all

elements will be hidden:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Tag Name Selectors</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>
<style type="text/css">
.padding{ padding:6px 15px; margin:0px 5px;}
</style>
</head>
<body>
 
<h2>This is Element Selector</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
 
<button class="padding">Click Here!</button>
 
</body>
</html>

Output :

jQuery id(#) Selector

To find an element with a specific id, write a hash character, followed by the id of in given document page.

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery ID Selectors</title>
  </head>
  <body>
	
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	$("button").click(function(){
		$("#padding").hide();
	});
	});
	</script>
	<style type="text/css">
	   #btn{ padding:6px 15px; margin:0px 5px;}
	</style>
		 
	<h2>This is id(#) Selector</h2>
    <p>This is sample paragraph.</p>
	<p id="padding">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p>
		 
	<button id="btn">Click Here!</button>
		
        
  </body>
</html>

Output :

jQuery class(.) Selector

The jQuery class selector finds elements with a specific class.

To find elements with a specific class, write a period character, followed by the name of the class

<!DOCTYPE html>
<html>
<head>
<title>jQuery  Class(.) Selector</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
 });
</script>
<style type="text/css">
.padding{ padding:6px 15px; margin:0px 5px;}
</style>
</head>
<body>
 
<h2 class="test">This is class(.) selector</h2>
<p>This is sample paragraph.</p>
<p class="test">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
 
<button class="padding">Click Here!</button>
 
</body>
</html>

Output :

More Examples of jQuery Selectors

Syntax	Description
$("*")	Selects all elements
$(this)	Selects the current HTML element
$("[class]")	Selects all the elements with the class attribute(whatever the value).
$("div[class]")	Selects all the <div> elements that have a class attribute(whatever the value).
$("div[class=myCls]")	Selects all the <div> elements whose class attributes are equal to myCls.
$("div[class\|=myCls]")	Selects all the <div> elements whose class attributes are either equal to myCls or starting with myCls string followed by a hyphen (-).
$("div[class *="myCls"]")	Selects <div> elements whose class attributes contain myCls.
$("div[class~=myCls]")	Selects div elements whose class attributes contain myCls, delimited by spaces.
$("div[class$=myCls]")	Selects <div> elements whose class attributes value ends with myCls. The comparison is case sensitive.
$("div[class!=myCls]")	Selects <div> elements which does not have class attribute or value does not equal to myCls.
$("div[class^=myCls]")	Selects <div> elements whose class attribute value starts with myCls.
$("p.intro")	Selects all <p> elements with class="intro"
$("p:first")	Selects the first <p> 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>
$("[href]")	Selects all elements with an href attribute
$("a[target='_blank']")	Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']")	Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button")	Selects all <button> elements and <input> elements of type="button"
$(":image")	select all input elements with type="image"
$(":file")	select all input elements with type="file"
$(":enabled")	Select all enabled input elements
$(":disabled")	select all disabled input elements
$(":selected")	select all selected input elements
$(":checked")	select all checked input elements
$("tr:even")	Selects all even <tr> elements
$("tr:odd")	Selects all odd <tr> elements

jQuery Tutorial