Week 1 - Installing JQuery
17 Feb 2010 - tips-tutorials
Every time you use Jquery on a page, you must make sure that the JQuery library is referenced on the page. This library contains all JQuery functions allowing to you write less code to do more. This library can be found on http://jquery.com/ and follow the link 'download JQuery'.
Copy the code displayed and save it into a new .js file (eg. jquery.js) .
This file must then be referenced in the section of your page using the following code:
You are now ready to write JQuery Code!
Code can be written in the head section or saved in its own file and attached the same way as above. I personally like to write it in the then once it is working as I want it, I cut it and put it in its own unique file. For these examples I will just write the code in the section.
Working Example
To get us off and running lets create an example which fades a red box out when you click on it
Click on the red box and it will fade out after 5 seconds and then not be displayed
How to develop it
How lets create a red square in the body section with an id of redsquare using the following code.
JQuery is similar to CSS in the respect that it can reference objects by Class Name or by ID. Class names are referenced using . and id using #. To reference the redbox using JQuery we would use #redsquare as it has an id of redsquare.
Now lets write the query code in the head section
Breaking down the code:
This means when the document object is ready code inside the { } will be executed.
References the redsquare we previously created with an id (#) of redsquare
Means when the #redsquare is clicked on, a function will be executed
$(this) references the current object that has been clicked and .fadeOut(500) means it will fade out after 500 milliseconds and then be displayed as none when complete. Other units of time that can be used are the strings ‘ slow’ or ‘fast’ .
Finished Code
Congratulations, your first JQuery project is complete!
Simon Lait
Web Developer, Candeo Media
Your Comments
Comment on this Post
There are no comments for this post yet.