Introduction
This is my very first article on any jQuery specific title; I have posted many articles using jQuery with ASP.NET within the past few days. Now I'm wishing to explore jQuery from the 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 the 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 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. The first paragraph is using an id selector, the second is using a class selector and th thired is the tag itself. In the head section you can see I am calling the first paragraph which has an id="name" using # selector type, the second paragraph has class="address" using . selector type and the last one directly uses the div tag.
Let's back to jQuery.
In jQuery we use an id selector type as $('#name'), class selector type as $('.address) and tag selector type as $('div').
Now, let's convert the 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!! The output is the same with jQuery but jQuery makes it quick and even more robust.
In the above example you can see I am referring to the 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 robustness in jQuery.
I hope you like it. Thanks.