Learning jQuery | The Basics
jQuery a new kind of JavaScript Library
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.
Learning jQuery
jQuery is CSS3 compliant, has a lightweight footprint and works cross-browser. Plus it allows us to add cool effects to our website or blog. Use it with Ajax and you can have a very real time feel to your site.
So assuming you know a little about jQuery, let’s get to the basics.
Where should you host your jQuery file?
After thinking about this one, I feel that you should use the copy of jQuery that is hosted at Google, unless you are using a secure (SSL) site. If you are using a secure site, then you should get the latest version of jQuery and upload it to your server. If you do not use SSL, then you should add this code to your site;
%MINIFYHTML66c92e4ed9c123376d39338b3d51e4445%
Basically, using the version of jQuery stored on Google’s servers are best for you because Google is a CDN and your users will most likely have already cached this file from another website, increasing your website loading time.
Where should you call jQuery from?
There are many articles out there that suggest you should put the call to jQuery in the HEAD section of your page and there are ones that suggest you put it in your FOOTER just before the end of the BODY. YSlow for instance, is one that states you should load jQuery in the footer for best performance.
However, some programs will not work if you do this, so be sure that you can. Otherwise, just to be safe, load jQuery from the HEAD section and you should be all set.
BONUS Tip for WordPress Users
For those of you who use WordPress and would like to know how to properly configure jQuery, you are in luck. The first thing we need to do is remove the local jQuery in WordPress. Just open your functions.php file and add this line of code. Basically this reads, if you are not an admin (a visitor to the site) then remove the line that loads jQuery.
if ( !is_admin() ) wp_deregister_script('jquery'); ?>
Now we want to add the code to load Google’s CDN Hosted version of jQuery. I take the easy way here and just add a direct link to Google’s jQuery before the WP_HEAD section in my header.php file.
%MINIFYHTML66c92e4ed9c123376d39338b3d51e4446%
Hey Jim, hope you’re well.
Wow, this will really make my page load faster? I had never given any thought to my page loading speed until reading this post. And I did not even realize my local Wordpress had a type of jQuery anywhere in the code. (Of course, there is a LOT I do not know about code, believe it or not.) :)
– a query from Jannie, (I guess you could say a jQuery of sorts.)
@Jannie: JannieQuery, That’s great!
Yes! It’s a caching system and it’s on G’s servers. So, most people will not have to download (or even make a query to your server) jQuery, saving time. WordPress is a great tool, and it is well documented, but there is a lot to grasp. Once you start to understand the hooks, you will be alright.
If you can get all of your javascripts into one script and then load it at the bottom of the page, your visitors will appreciate it. But, that can be difficult when you are using plugins in WordPress.