Introduction to JQuery: Part 1
JQuery is a javascript library that simplifies javascript’s interaction with HTML to speed up javascript coding.
Benefits of JQuery
- Lightweight Footprint
- CSS3 Compliant
- Cross-Browser compatibility
What you will need
- Javascript enabled browser
- JQuery Library
- An application to code in(Coda, Aptana, or even notepad)
Starting out
To start out coding with the JQuery library you will need to import the library. Usually I like to structure my site with a /lib folder at the root of the directory. This way I can include all of my javascript libraries in one central location so they don’t replicate down the road. So for this project i’ll setup my directory structure with my JQuery files inside the lib folder. Next we’ll create an index.html file inside the root directory. This will be our testing file for our JQuery code. Alright, let’s get started, let’s start by adding a basic page structure to your index.html file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>JQuery Test</title> </head> <body> </body> </html>
Next we need to add in our JQuery script so that we can use it. Add in the following code inside your header tags. Use the src tag to point to your JQuery javascript file.
<script type="text/javascript" src="lib/jquery.js" />Making Sure the document is ready
First off, any JQuery code that we want to include goes into script tags. This is because JQuery runs on top of javascript, so in order for the browser to understand what JQuery is doing, it needs to be included inside the script tags.
Now, the first thing that we need to do is make sure that the document is ready to be used. We do this to make sure that no changes occur before the user is ready to see it. So if the page isn’t loaded or the user is on a slow connection, the JQuery code will not start executing until the document is loaded and ready. To do this we use the document ready function in JQuery.
<script> $(document).ready(function(){ }); </script>
Adding a click event to a link
Now that our document is ready for our JQuery code we can add some functionality to our site. The first thing we’ll deal with is adding a link to our index.html file. That way we have something to manipulate when we go to code our JQuery. Let’s add a link to our index.html file now.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>JQuery Test</title> <script type="text/javascript" src="lib/jquery.js" /> </head> <body> <a href="http://www.google.ca/">Link</a> </body> </html>
Once we have our link added we can start to code the JQuery. What we’re going to do in this instance is instead of taking the user to google, we’re going to just display a simple javascript alert instead.
<script> $(document).ready(function(){ $('a').click(function({ alert("Obviously you're still here and not over at google"); event.preventDefault(); )); }); </script>
Alright, so that probably looks a little confusing right off the bat, especially if you’re used to regular javascript coding. Let’s break it down into a little more detail. To start off, $(’a'). This means that we’re taking the element “a” from the html. If we wanted to use the id of say a form(id=”test”) then we could just do $(’#test’) instead. Then after we have a function. This will allow us to do something with the element that we retrieved from the HTML. In this case, we’re going to use the “.click()” function to allow us to process an event when any element with an attribute of “a” is clicked. Now because we want to do something with that event whenever it’s clicked, we can use a function inside of the click function. That’s where the .click(function(){}) section comes from. Now in order to actually accomplish something with the event that was created we need to put the rest of our code inside of the curly braces of the function. In this case we’re just creating a plain javascript alert box with a message in it. The next line, “event.preventDefault();” is just a function in JQuery that disables the default behavior of the element. In this case the default behavior is to send the user to google, so we’re going to make the user stay at our page and just simply display a javascript alert.
Since .click is a function we will need to close our the function using a “;”. That’s it, you just wrote your first function and created your first event. All together the code looks like this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>JQuery Test</title> <script type="text/javascript" src="lib/jquery.js" /> <script> $(document).ready(function(){ $('a').click(function({ alert("Obviously you're still here and not over at google"); event.preventDefault(); )); }); </script> </head> <body> <a href="http://www.google.ca/">Link</a> </body> </html>
For more information on JQuery or more tutorials you can visit the jquery site at http://jquery.com/. If you have any questions or comments feel free to leave a comment and I’ll respond as quickly as possible.
Cheers