Jquery framework for dummies

// May 22nd, 2009 // No Comments // Design, Programming

So you’ve heard of this wonderful JavaScript library called jQuery. What exactly is jQuery?

How can I make my life easier as a developer? How do I start? Well, writing Javascript jQuery is fun again and you can really enjoy some of the most difficult aspects of Javascript with relative ease. Today we take a look at how to start with jQuery and writing your first script!

What is jQuery?

jQuery is a lightweight Javascript library (some call it a framework), which makes most of the headaches from writing pure Javascript in your applications. It has many powerful features, some of which include: easily through the DOM, adding animations and effects to elements slick, and super simple Ajax techniques and methods. Perhaps the homepage of  jQuery described more precisely:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animation, and Ajax interactions for rapid web development. jQuery is designed to change the way you write JavaScript.

How do I start?

The first thing you need to do to start with jQuery jQuery is to visit the home page and download the latest version of jQuery. Once you’ve downloaded the jQuery library, just load the library to your server and link to the <head> section of your document, as shown 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.

Document Ready Yet?

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 Very 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?

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 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.
  • 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 makes using Ajax extremely easy, it only takes about 5 lines (sometimes less!) of code to make a simple Ajax call.
  • 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.
  • 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!

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.

Note dummy page

Contact me to advertise here

    Leave a Reply