Simple Guide: How To Get Started With jQuery (Part One)




jQuerySo, 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!

UPDATE: Part II of this series is now up! Go check it out here!

Laptop Logic

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.

Comments:

Scroll back to the top
Content


Receive the top stories from SpyreStudios and the Splashpress Media network every week, right in your Inbox. Relevant and timely content is yours for FREE!