Simple Guide: How To Get Started With jQuery (Part One)
So, you have heard of this wonderful Javascript library named jQuery. What exactly is jQuery?
How can it make my life easier as a developer? How do I get started? Well, jQuery makes writing Javascript fun again and really allows you to take advantage of some of the more difficult aspects of Javascript with relative ease. Today, we will have a look at how to get started with jQuery, and writing your first script!
So What Is jQuery?
jQuery is a very lightweight Javascript library (some call it a framework), that takes most of the headache out from writing pure Javascript in your applications. It has many very powerful features, some of which include: easily traversing the DOM, adding slick animations and effects to elements, and super simple Ajax techniques and methods. Perhaps the jQuery home page describes jQuery most accurately:
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
What Are Some Of The Benefits Of jQuery?
Of course, you wouldn’t use a framework or library if there was no benefit or positive result that would come from using it. Let’s briefly go over some of the benefits and features of using the jQuery library.
- It dramatically reduces the amount of code that needs to be written compared to pure Javascript, which leads to less development time and more readable code. We will go over some example code later on in this article.
- It is (arguably) much easier to understand than scripting with pure Javascript. In this world, the quicker and easier it is to finish the development process the more time we have to focus on other goals.
- The documentation is extremely well organized and the community is very active with helping out anyone who may be struggling with a snippet of code.
- It makes using Ajax extremely easy, it only takes about 5 lines (sometimes less!) of code to make a simple Ajax call.
- A wide range of plugins and extensions have been developed for jQuery to make it easy for you to get the exact functionality you are looking for.
- jQuery is fun!
How Do I Get Started?
The first thing you need to do to get started with jQuery is visit the jQuery home page and download the latest version of jQuery. Once you have downloaded the jQuery library, simply upload the library to your server and link to in in the <head> section of your document as seen in the code below.
<script type="text/javascript" src="/jquery.js"></script>
In addition, you can let google host your jQuery code for you, which can result in faster loading times for the end user, especially if the version of jQuery is already cached by their browser. To learn more about letting google host your code, visit the Google Ajax libraries.
Now that we have downloaded and properly linked to the jQuery library on our server, we can move onto our next piece of code, which will execute when the document is ready.
Is The Document Ready?
To run our first jQuery script, we need to encapsulate all of our script inside a function. This function (in a nutshell) will execute any code contained inside when the document is ready. Note that this is similar but not the exact same thing as the popular ‘onload’ event. Let’s take a look at an example and then go over it in more detail.
$(document).ready(function(){
//Code here
});
Above, we tell jQuery to run (or execute) any code between the function, as soon as the DOM is ready. There are benefits to this, though it may not seem clear at first glance. Firstly, using this technique we are completely separating our Javascript from our HTML, instead of having the two mixed. Secondly, we are not actually waiting for the page to load, but for the DOM to load completely. This ensures that we are not executing any code before the DOM is ready to deal and execute the code.
For the lazy developers out there, or for those who just want to save some precious keystrokes, you can shorten the above section of code to reflect the code below. Both behave the exact same way.
$(function(){
//Code here
});
Your First jQuery Script
We now know how to link to the jQuery library and set up our document.ready function, the last step is to actually write some of our jQuery code that will affect or manipulate our page in some manner.
For our first script lets keep it simple. For this example, lets say we have a page with some paragraphs and a blockquote at the bottom. We only want to show the blockquote if the user clicks on a button we have setup. Have a look at the final code and then we will discuss the details.
$(document).ready(function(){
var myQuote = $('#my_quote');
myQuote.hide();
$('.button').click(function(){
myQuote.show(500);
});
});
Be sure to check out the demo to see how this code will function
Now, lets go over the code above step by step.
- As discussed, we enclose all of our code to be executed inside of the $document.ready() function.
- We set our blockquote id (my_quote) equal to a variable named myQuote. We now have access to the blockquote element with the id of ‘my_quote’.
- Next, we hide the blockquote with Javascript, this way if JS is disabled it will be present for the user to see. We use the built in hide method jQuery gives us.
- The next part of our code is the meat and potatoes of our script. We tell jQuery that when the button with a class of ‘button’ is clicked, then show the blockquote. Notice we have passed an integer to the show method, 1000 would be about 1 second.
- That’s it! When the user clicks on the button, the blockquote will be shown over the course of half of a second. Pretty painless huh?
Further Resources To Get You Started
Looking for more jQuery help and places to find out more? Below are some must have resources and websites when working with the jQuery library.
Stay Tuned For More!
We hope that this brief introduction to jQuery has sparked your interest in the wonderful library. Stay tuned for more jQuery tutorials, tricks, and tips! If you have any questions, comments, or suggestions, please let us know in the comments section below!
About the author:
This was a guest post from LaptopLogic.com. They have reviews of all the Dell laptops that are highly popular among designers as well as all the laptop accessories you need to get the most out of your laptop.
jump to the comment form ↓
May 14th, 2009
Very clean and well written break down. I will be linking to this from one of my articles :-) Thanks~
May 14th, 2009
@Soh: Thanks a lot :)
May 14th, 2009
thx really cool beginner guide ^^
May 14th, 2009
thanks for sharing that, you gave me all the more reasons to love jquery :)
May 15th, 2009
awesomeness! great for a beginning programmer like myself.
May 15th, 2009
Great, simple and very clear into into JQuery. Keep em coming!
May 15th, 2009
A handy and easy to follow post, thanks!
May 15th, 2009
Great introduction, Jon. I’m just starting with jQuery and know just enough to get myself in trouble, I think.
One question I have. This may make sense to the programmers out there, but me not coming from a programming background, I’ve not really understood the reasoning behind declaring a variable?
I understand how your example above works 100% but I guess I’m wondering why you would declare a variable instead of doing something like this:
#my_quote.hide();
$(‘.button’).click(function(){
#my_quote.show(500);
What advantage do you have by declaring the variable in this example?
Thanks, Jon.
May 15th, 2009
Okay so I use multiple JS library’s for different visual effects on my site. They interfere with each other all the time and I need some help from someone who is great with JS! I know Jquery is one of the library’s. email me at site.control@burninginfo.com
May 15th, 2009
This jQuery tut is awesome! Easy to read and actually understand. I’ve been looking for resources on this topic for the past 2 months or so and this tutorial is one of the best. Looking forward to more on beginner jQuery tuts. Bookmarked and dugg.
May 16th, 2009
JQuery rocks.
May 18th, 2009
Great, simple and very clear into into JQuery. Keep em coming!.
May 19th, 2009
I love JQuery especialy Lavalamp ;D
May 20th, 2009
I do have to say, out of all of the JS frameworks I’ve used jQuery is by far the easiest, i don’t know about the best though ;)
May 20th, 2009
jQuery is Superb and thanks a ton for the article..
But the best platform for developing mind blowing applications remains this- http://bit.ly/OxdIK
May 21st, 2009
Thanks for the intro. For the longest time I thought jQuery was related to mySQL or MS SQL. LOL
May 26th, 2009
I picked a project from someone who used jQuery so this is just what I needed to get me familiar with it. Thanks for taking the time to put this together.
June 9th, 2009
This is way simple than I thought this would turn out to be.
Thanks for placing it in simple terminology.
June 12th, 2009
I love Jquery.
July 8th, 2009
I’ve been looking for a decent framework to help me with javascript. I love ajax applications, so it is comforting that jQuery can help aid with construction of ajax applications.
November 18th, 2009
Hi,
Great Article, Sime and useful guides.
Thanks
December 11th, 2009
$(document).ready(function(){
//Code here
});
$(function(){
//Code here
});
these are equals ?
Who Linked To This Post?
Share your thoughts, leave a comment!