jQuery and CSS Selectors Part-1
Introduction
This is my very first post on jQuery specific title; I
have posted many articles using jQuery with ASP.NET within last few days. Now
I'm wishing to explore jQuery from very basics, here comes my title 'jQuery CSS
Selectors'. I'm not going to talk about definitions here, just going to show
you something using examples. So, let's begin.
Look at this table:
Type of Selector
|
In CSS
|
In jQuery
|
Details
|
ID
|
#name { }
|
$('#name')
|
It will select all
controls/elements that have id = 'name'.
|
Class
|
.address { }
|
$('.address')
|
It will select all
controls/elements that have class = 'address'.
|
Using Tag Name
|
div { }
|
$('div')
|
It will select all div in the
page.
|
In above table you can see three commonly used selector
types (using id, class or tag name) and how we call it in CSS and jQuery. Don't
get confused over here; look at the example to get it better.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exploring
jQuery</title>
<style type="text/css">
#name
{
background-color:Fuchsia;
}
.address
{
background-color:Lime;
}
div
{
background-color:Gray;
}
</style>
</head>
<body>
<!--Exaple
on id selector-->
<p id="name">
I am in ID selector.
</p>
<!--Example
on class selector-->
<p class="address">
I am in Class selector.
</p>
<!--Example
on tag selector-->
<div>
I am in Tag selector.
</div>
</body>
</html>
Output screen:-
In above example, in the body I have two paragraphs and
one div. First paragraph is using id selector, second is using class selector
and thirst is tag itself. In the head section you can see I am calling first
paragraph which has id="name" using # selector type, second paragraph which has
class="address" using . selector type and last one by directly using div tag.
Let's back to jQuery.
In jQuery we uses id selector type as $('#name'), class
selector type as $('.address) and tag selector type as $('div').
Now, let's convert above example from CSS to jQuery.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exploring
jQuery</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#name').css('background-color', 'Fuchsia');
$('.address').css('background-color', 'Lime');
$('div').css('background-color', 'Gray');
});
</script>
</head>
<body>
<!--Exaple
on id selector-->
<p id="name">
I am in ID selector.
</p>
<!--Example
on class selector-->
<p class="address">
I am in Class selector.
</p>
<!--Example
on tag selector-->
<div>
I am in Tag selector.
</div>
</body>
</html>
Output screen:-
Wow!! Same output with jQuery also but jQuery make it
quick and even more robust.
In the above example you can see I am referring jQuery
library file using
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
And also using a jQuery method
<script type="text/javascript">
$(document).ready(function () {
$('#name').css('background-color', 'Fuchsia');
$('.address').css('background-color', 'Lime');
$('div').css('background-color', 'Gray');
});
</script>
In the next part you will see the actual example of
robust in jQuery.
I hope you like it. Thanks.
Comments
Post a Comment