Tuesday, September 13, 2011

What are jQuery Class Selectors and ID selectors Explain them?




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)


$("#SelectId, .ClassName")


The above selector syntax selects all elements with id SelectId and the class ClassName.
We can also select elements in webform directly using jQuery 

No comments:

Post a Comment