I promised a few people that I would write a few blog posts on jQuery. Plus I am also going to be speaking at Tulsa Techfest on jQuery so these blog posts will help me prepare for that talk. In this post I am going to focus on selectors in jQuery. Selectors are extremely powerful and really the first thing you need to know when starting with jQuery. Selectors allow you to select any element in the DOM. The problem in the past of trying to select values within the DOM is each browser has its own implementation. You then would have to liter your code with ugly switch statements but now jQuery abstracts out the browser differences without you having to worrying about it. jQuery selectors are similar to css selectors so let's start by reviewing css selectors.
Selectors in CSS
In css what does the following type selector do :
div {color: blue;}
If you said it makes the text in any div blue you would be right. And I'm sure everyone knows about class selectors so what does this do:
makered {color:red}
In this rule the anything that has its class attribute set to make red will have red font. And the last one is ID selectors:
#reddiv {color:red}
This rule will set the text to red inside the div that's id attribute is set to reddiv. There are several other types of selectors but for sake of brevity I am going to skip those. For more on these css selectors visit http://css.maxdesign.com.au/selectutorial/.
Selectors in jQuery
There are three types of basic selectors: element, id , and class. The following jQuery statement is an element selector that selects all div elements. The elements are called a matched set.
$("div")
The dollar sign is just a shortcut for writing JQuery which is the main class for all of this stuff. Now to add css to the matched set we say:
$("div").css("border","3px solid red");
This will give all divs in our html document a red border.
Now let's say we need to do a selection based on the element id:
$("#somediv").css("border","3px solid red");
This will give a red border to the div with the id of "somediv". Note: the # is important and must be there.
The final selector I am going to talk about in this post is the class selector. If we wanted to apply a red border to the following html element:
<div class="redBorderClass"/>
We would write the following jQuery selector:
$(".redBorderClass").css("border","3px solid red");
Easy stuff uh? It is but we are just scratching the surface on how you can use jQuery to select DOM elements. I'm going to do a part 2 of this post where I dive into some more advanced selectors. The documentation on jQuery is really great so for more info on selectors go here: http://docs.jquery.com/Selectors