So What Is jQuery?
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.
- 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.
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.
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.
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.
var myQuote = $(‘#my_quote’);
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’.
- 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!