JQuery Selector Basics and understanding Tag Selector

What is JQuery Selectors?
JQuery selectors are used to select elements.  In order to apply any effect or style change, it is necessary to select element, JQuery Selectors are used to select element in order to apply those changes.

Lets understand through different examples.

I have a form with  text formatted with following html tags

• H2 Tag
• HR Rule Tag
• P Paragraph Tag
• UL/LI Tag
• B bold Tag

My HTML looks something as below image.

And it appears in browser as under

Ok, now we will start with basic examples of how selectors works in JQuery.

Select Particular Tag and apply CSS Format

Example 1: Let select all paragraph tag in our page and change its text background to yellow color.

Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
    $("p").css("background-color", "Yellow");
});
</script>


It will result in following output on browser screen.

Example 2: Let select all "h2" tag (header tag on top) in our page and change its font family and size to verdana, 35px.

Please add below script at the end of the page.

<script language="javascript" type="text/javascript">

    $(document).ready(function () {

        $("p").css("background-color", "Yellow");

        $("h2").css("font-family", "Verdana");

        $("h2").css("font-size", "35px");

});

</script>

It will change all h2 tag font.  You can notice that one of h2 lies in Nested master page, while other is on page where JQuery selector tag is defined.

Well obvious questions might be running in your mind that i can do all this from CSS file, than what is the advantage?

The only thing I can say at this point is hold on for a while and we will discuss how it is different and more beneficial.

In next few blog post we will understand few more ways to use JQuery selectors.

Watch Live demo of JQuery Element Selector Example