Where to Start with jQuery Selectors

With jQuery there are many ways to select elements. We are going to cover two of the most popular selectors id and class.

jQuery uses the same selectors as CSS. This makes it very easy to select the elements you want to work with. The two most commonly used selectors are id and class. So before we start make sure you have your jQuery setup and the $(document).ready() function on the page.

Selecting by ID

This is best used when you want to target one specific element. The selector is exactly the same as what you would use to set styles for the particular element in CSS.

Selecting element with CSS and setting some styles.

#youridhere {
	display: none;
}

Now selecting the same element with jQuery and adding CSS styles.

$("#youridhere").css("display","none");

Selecting by Class

With the class selector you can select multiple elements at once. jQuery deals with multiple elements in a very simple manor. It returns an array of jQuery objects. With the way jQuery is designed it will automaticaly apply anything you do to your selection to all elements without having to loop threw the results.

Lets take a simples example of hiding all elements with a class of hide. To do this with CSS we would create the class in our style sheet like so:

.hide {
	display: none;
}

To do this same thing to all the elements with the class of hide in jQuery. You would use the following statement:

$(".hide").css("display","none");

This should get you started on the path of using jQuery in your projects. To read more about the selectors your can use in jQuery check out the documentation.

Related Posts

1. Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site.
2. Add Scroll Bars to Full Browser Flash with a Simple jQuery Plugin
3. Adding Twitter to your site with jQuery Part 1
4. jQuery's document.ready(), What is it and Why is it Useful?
5. Using jQuery and XML to Populate a Drop-Down Box