What are JQuery Selectors?

JQuery Selectors plays important role in JQuery world. To understand JQuery concepts you need to have a good understanding of JQuery Selectors. Conceptually no matter what technology/platform we used at the server side, the browsers (IE, chrome, Firefox etc.) understand only HTML and client side scripting. So no matter how simple or complex code we write at serve side the server has to deliver the output in HTML tags to the client browser.

Each web page we access has a collection of HTML Tags, style sheets and client side scripting. To manipulate the behavior and appearance of HTML tags, class we use JQuery Selectors in JQuery. So if we have a HTML page like following; we can manipulate the behaviour of the HTML tags used in this page with the help of JQuery Selector.

As you can see from the HTML Code we have two paragraphs, one horizontal line, one unordered list with four list item and one Image in the HTM page. With the help of JQuery Selectors we can manipulate the behavior of either of the HTML element used in the web page.

So to select and manipulate the behavior of Paragraphs in the above HTML page we can use JQuery Selectors like this:

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

As discussed in our last post anything in JQuery starts with $(). Since we are going to deal with paragraphs we have passed paragraph tags. We are manipulating two appearances of the all the paragraphs used in the web page. We have applied background color and change the font to Arial for all the paragraphs used in the web page. The output of the web page is following:

As you can see from the output appearance of all the paragraphs have been changed.

If you want to apply behavior to all the HTML tags in the document all you have to use is following in the JQuery script code:

$("*").css("background-color", "pink");

The asterisk represents all the HTML tags in the web page. This will change the output to following:

If we have to change appearances of multiple attributes of the selector we can write the same as following:

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

If you want to change the appearance based on a condition JQuery helps you in that as well. The following JQuery code will change the color of the paragraph if it contains the value "Vikash".

<script language="javascript" type="text/javascript">
$(document).ready(function () {
    $("p:contains('Vikash')").css({"color" : "red","font-family" : "Arial"});
});
</script>

For a complete list of JQuery Selectors and how to use it you can visit http://www.w3schools.com/jquery/jquery_ref_selectors.asp

I am binding this post here and we will learn JQuery Selectors events in next post.

Thanks! for reading till this point