Jquery Library

Yo,

In this article I will cover how to use Jquery library in your website.
For those who have no idea what Jquery is, well in short, it's a javascript library, you'll only need to include 1 file, and it's super-javascript made easy! visit jquery site here: http://jquery.com/

I'll be posting more about Jquery in the coming articles, so check out this website for more Jquery articles. Now, I'll be discussing about:

1. Jquery Basic
2. Element Selector

1. Jquery Basic

To enable jquery in your website, download the latest library from their site, and include the script in ur html, something like
<script type="text/javascript" src="js/jquery.1.4.2.js" ></script>

we use jQuery or $ prefix to use the functionality, and we can combine it with normal javascript function.

Document Ready function
this function will be executed once the html document is finished downloaded in the browser, ensuring that all html elements are there and ready for manipulation.

$('document').ready(function(){
..
your script here
..
});

2. Element Selector

We use jQuery to simplify the way we get an element in our web page.

After we master how we can get the element that we wanted using jQuery, we can make use a vast number of functions from jQuery, like to get/set a specific element value, to assign/remove a CSS class to html elements, to do animation, and a lot more.

There are three basic selecting method using jQuery, using element id (#), class (.), or element type.

Sample:

1. Use # sign to get element by it's id.
   
   $('#aDivElement') <-- this will get element with id: "aDivElement"
   
   
2. Use . sign to get elements by it's class.
   
   $('.elementClass') <-- this will get all elements that has class: "elementClass"
   
   
3. Use element type to get all elements with that specific type
   
   $('div') <-- this will get all div elements in your page
   $('div.withClass') <-- this will get all div elements in your page that has class: "withClass"
   
   
4. Combination of Selector: we can use multiple selector by selecting element from the select result set. We can make use of children(), parent(), parents(), siblings(), find(), next(), prev() to traverse the select result set.
   
   $('#myElement').parent() <-- this will get parent element of element with id: "myElement"
   $('div').children('p').children('.aClass') <-- this will get elements that has class: "aClass" in a p element within a div