Post
Ask Question

JQuery and CSS Selectors: Part 1

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:

image001.jpg

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

image001.jpg

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.


Similar Articles