jQuery selectors allows to easily identify set of page elements for performing user friendly or required operations .
In general, Selection of elements can be 3 types in jQuery. They are
1. Class Selector (.)
2. ID Selector (#)
3. Element selector (<element tag>)
We will learn Class and ID selectors in this article and will learn about element selectors in the next article.
Class Selector (.)
A class selector is to identify class to search for. An element can have multiple classes. There is no restriction. Operations are applied based on the class that matches.
$(.demo) – Selects all elements in side a web page with the class demo
Example of using class Selector
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="beyondrelational"> This is Div using class selector </div>
<p class="beyondrelational"> This is P using class selector </p>
<script>$(".beyondrelational").css("border","8px solid blue");</script>
</body>
</html>
ID Selector (#)
An element can be selected or indentified based on id. It Matches a single element with the given id attribute.
$('#EmpNo) - Selects an element with the ID EmpNo in the web page.
Example of using ID Selector
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="beyondrelational"> This is Div class using ID selector </div>
<script>$("#beyondrelational").css("border","8px solid blue");</script>
</body>
</html>
Selecting class and ID Selectors at a time (Multiple selectors)
$("#IDSel, .ClassSel")
The above selector syntax selects all elements with id IDSel and the class ClassSel.
We can also select elements in webform directly using jQuery , that we will discuss in next post. Till then keep visiting !!!