Home
1
Learning jQuery [Part 1] Sat Jul 03, 2010 2:29 am
RockerMan
Technician
Posts : 901
Points : 388
Age : 32
Location : Georgia
Browser :
Learning jQuery [Part 1] Start learning jQuery here |
Learning jQyery This tutorial was suggested/requested by Ankillien OK so there is alot of people wanting to learn jQuery, so I am here to help you with that. Durning the course of this series I will be learning you the basics of jQuery and a few simple effects. So what is jQuery? jQuery is a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML, it is a fast and concise JavaScript library which simplifies the creation of animations, communications to server requests, document transversing and event handling. So basicly it is a development tool which allows for easier, faster JavaScript development. Where can I use it? You can use jQuery anywhere, the script is placed in a script tag and thats it. OK so lets get started! To start, we need a copy of the jQuery library, which you can download at the bottom of this tutorial via the download button. Right Click >> Save Link As >> Save it to your desktop. Once you have done this drag the file into your favorite editor inside the <head> tags. you have now succesfully added the whole jQuery library. You need to do this unless the effects won't work. We are now going to do a quick effect, you have proberly seen it on all beginners tutorials for jQuery, it's the Hello World  OK so we start with the HTML:
This page loads the jQuery library you have just added (If you are not using FTP be sure to change the jquery.js to the link of where you have hosted it | If you are using FTP make sure the URL points to where you stored your copy of jquery! This example assumes that you store it in the same directory as the HTML). Two comments indicate where we will expand this template with code. As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready. To do this, we register a ready event for the document.
OK so lets investigate this code 
Putting an alert into that function does not make much sense, as an alert does not require the DOM to be loaded. So lets try something a little more sophisticated: Show an alert when clicking a link. Add this to your body:
Now upgrade the jQuery to this:
This should show the alert as soon as you click on the link. Then, open the html page in the browser and click any link. You should see a pop-up window with "Hello world!" message regardless of what link was clicked. Thanks for your time and hope to see you read the rest of the series to come. RockerMan |
| Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators. |
