|
Being in the world of programming and development, I am sure that you would have surely heard about "JQuery". So now in this article I am going to provide you with a simple outline of JQuery. I would let you know, what JQuery is all about, how it can help you and most important, how you can use JQuery.
What is JQuery?
jQuery is an amazing JavaScript library that makes it easy to create wonderful web effects in just a few lines of code. As the website says:”
“jQuery is a JavaScript library that takes this motto to heart: Writing JavaScript code should be fun. jQuery achieves this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.”
Maybe you are thinking… “Why I would need another JavaScript library”? Just give a try and you will see how simple and powerful it is even if you have already used Moo.fx, Scriptaculous, TW-SACK or Prototype.
Why Do I Need jQuery?
Simple. In just one glance at the source code of a page using jQuery you’ll see how easy it is to use, how much it accomplishes in so few lines of code, and how graceful it is.
Advantages Of JQuery!
- 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.
Where can I Use jQuery?
You should use jQuery when you need:
* A small library that gives you powerful control over the Document Object Model
* With very little effort or work on your part
Or
* Quick access to AJAX
* Without a lot of bloat (overhead - wasted code)
* And some basic animation effects to spice things up
But…
If you need super fancy effects for animation, drag and drop, and super smooth animation then you’ll probably want to use Prototype and one of the many great library created to enhance the effects.
Where to get JQuery?
You can download the source code (15k), a lot of plugins and read some excellent tutorials at the jQuery website. jQuery was created by John Resig. So, 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.
When 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.
Launching Code on Document Ready
The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:
window.onload = function(){ alert("welcome"); }
Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is that the HTML 'document' isn't finished loading yet, when you first try to run your code.
To circumvent both problems, jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event.
$(document).ready(function(){
// Your code here
});
Inside the ready event, add a click handler to the link:
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
Save your HTML file and reload the test page in your browser. Clicking the link on the page should make a browser's alert pop-up, before leaving to go to the main jQuery page.
For click and most other events, you can prevent the default behaviour - here, following the link to jquery.com - by calling event.preventDefault() in the event handler:
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
Complete Example
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.
$(document).ready(function(){ var myQuote = $('#my_quote'); myQuote.hide(); $('.button').click(function(){ myQuote.show(500); }); });
How Does This Code Works?
- 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?
|
