Jquery Selectors are one of the important part of Jquery library. It is process of finding out the element in Document Object Model(DOM).
We can also say selector is used to select one or more element in DOM
All the selector in Jquery start with $() sign.
There are the following selector in Jquery
1. #Id selector
2. class Selector
3. Universal Selector
4. Multiple element selector
5 Name Selector.
Now we will see the examples of all selector
1. #Id Selector:
It uses the Id attribute of an html and find out the specific id in HTML DOM element. It is the fastest and best ways to find out the specific Id in DOM element.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/jquery.min.js"></script>
<script>
$(function () {
$("button").click(function () {
$("#Line1").hide();
});
});
</script>
</head>
<body>
<p id="Line1">This is the first line</p>
<p>This is the Second line</p>
<button>Click Here</button>
</body>
</html>
Note: In the above example, we have used Id i.e “Line1” of Paragraph. which is used for hiding the specific paragraph .
2. Class Selector:
It is used to select the html element on basis of css class name.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/jquery.min.js"></script>
<script>
$(function () {
$("button").click(function () {
$(".colorcss").hide();
});
});
</script>
<style>
.colorcss {
background-color:silver;
font-size:20px;
}
</style>
</head>
<body>
<p class="colorcss">This is the first line</p>
<p class="colorcss">This is the Second line</p>
<button>Click Here</button>
</body>
</html>
Note: In the above example we are hiding the both paragraph on basis of css class name.
3. Universal Selector:
It will select all the element of Dom Element.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/jquery.min.js"></script>
<script>
$(function () {
$("button").click(function () {
$("*").hide();
});
});
</script>
<style>
.colorcss {
background-color:silver;
}
</style>
</head>
<body>
<p class="colorcss">This is the first line</p>
<p class="colorcss">This is the Second line</p>
<label>EmpName:</label>
<input type="text" name="txtEmpName" value=" " />
<br /><br />
<button>Click Here</button>
</body>
</html>
Note: In above example it will hide all the element of Html element.
4. Multiple Element Selector
It is used to select the element on basis of multiple element in DOM element.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/jquery.min.js"></script>
<script>
$(function () {
$("button").click(function () {
$(".colorcss,#p2,#p3").hide();
});
});
</script>
<style>
.colorcss {
background-color:silver;
}
</style>
</head>
<body>
<p class="colorcss">This is the first line</p>
<p Id="p2">This is the Second line</p>
<p Id="p3">This is the third line</p>
<button>Click Here</button>
</body>
</html>
It will hide the element on basis of css class,Id Name in above example.
5. Name Selector:
Name selector is used to select the html Dom element on basic of html tag name.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/jquery.min.js"></script>
<script>
$(function () {
$("button").click(function () {
$("p,div").hide();
});
});
</script>
</head>
<body>
<p>This is the first line</p>
<p>This is the Second line</p>
<div id="Div1">
<p>I am in Div1 </p>
</div>
<div id="Div2">
<p>I am in Div2 </p>
</div>
<button>Click Here</button>
</body>
</html>
In the above example, if we have to hide all paragraph and div element then we can use name selector.
Summary
In the above examples, we have learnt the basic concept of selector in Jquery.
Chandradev's Blog 
One thought on “What is the Selector in Jquery ? (Part 3)”