With JavaScript becoming more and more popular among web developers these days, they are turning to powerful JavaScript frameworks to get their dynamic jobs complete. The most commonly used of these frameworks is jQuery. With its powerful built in CSS selectors engine, manipulating elements has become a breeze instead of a chore. As this is a short tutorial, I will briefly be talking about the jQuery selector.
So What Is This $()?
The $() function is the most important part of jQuery. Without it, there would be no point in the features that jQuery provides. You can select one element, two elements or as many as you want and manipulate them without the need for a loop of some kind. When you select an element with the $(), the element is returned as a jQuery object not an element as with normal JavaScript implementations like:
- Code: Select all
document.getElementById('element');
There are many ways to use the jQuery selector, here are a few examples:
Tag Name: Select all the elements in a document by tag name, in this case select all the span tags.
- Code: Select all
$('span');
ID: Select an element by its identifier. Same as a CSS class would style an element based on its ID, you can select an element based on it.
- Code: Select all
$('#some_element');
Class: Select all elements that use the specified class name.
- Code: Select all
$('.some_class');
There are a lot more ways to select elements using jQuery. Here are a few examples, I wont explain them though, try to figure them out for your self.
- Code: Select all
$('div.post');
$('table tr th.first');
$('body div#header a');
They seem pretty self explanatory, but what about the next one?
- Code: Select all
$('li:first');
If your still confused, check out the Useful Links section.
Useful Links
jQuery.com: The official jQuery site
jQuery Docs: Well written documentation describing the features, with examples, of jQuery
Conclusion
An easy bite sized tutorial for jQuery beginners. There will be some more on the way soon, one of which will explain selectors more.