How to use jQuery
Using jQuery couldn’t be any simpler, head over to the jQuery website and simply download the library. This consists of only one file, which makes everything even more simple!
Upload this file to somewhere on your server and then include it to the head of the page you want to test something on, it should look something like this.
A Simple jQuery Example
Add this div to the body of your test page:
Then add this code to the head of the page.
This is a extremely simple example, but I think it demonstrates nicely what jQuery stands for, “do more and write less!”
One of the most important functions available to you when using jQuery is the following:
As the name suggests this calls and runs whatever is inside the function when the document is ready ie when the page finishes loading. Try inserting the code below into the head of your test page.
First add the button to your page
Then add the jQuery below to the head.
You will see an alert pop out with the text “You clicked my button”.
Selectors are hugely important factor of selecting elements from the dom or the page to a non programmer. jQuery allows you to use numerous ways to select elements. Im only going to touch on a few of the most important ones, have a look at the following examples.
//# selects by the id of the element like so : $("#mybutton");
//. fullstop or a dot select by the class of the element like so : $(".mybutton");
//using a tree or selecting multiples elements by there element type
// selects all divs on the page $("div");
// selects all spans within a div on the page $("div span");
Im going to touch on one last subject in this small tutorial and thats binding of events to the same element. Earlier I showed you how to bind a click function to an element, but what jQuery rather uniquely does is enable you to continuously bind function after function to that element. So in the same function I could lets say add a click function and also a mouseover function with an action in it to change the color of the button. I’ll give a quick example below.
Using your button with the id of “mybutton” that you should have inserted into the body of your test page. Add the following code to the head of your page.
In this one line of code I can now tell whether you moused over the button and then perform an action if you do and whether you clicked the button or not. Hopefully your starting the see the scope and speed of this scripting language. Thats it for now, check my jQuery category for other posts about jquery.