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>
<!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>
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>
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 |