Setting up jQuery

Oh, the pain of trying to implement a pre-made script from the internet when you don’t understand how it works! I used to go through this all the time –  I’d find someone’s plugin for a sweet jQuery carousel or lightbox or hover effect, but I didn’t understand enough code to figure out what I was doing wrong, and get it working. I didn’t even really get the basics – where does the call for the script go? Do I put all the jQuery right in my markup? Does it go in the header or the footer? And of course, WHY WON”T THIS WORK?!

If you’ve ever experienced this bang-your-head-against-a-wall frustration, I hope I can fill in some of the blanks for you. This  post is intended for beginners, who want to understand the basics of how to set up their (or anyone else’s) scripts. It assumes you are familiar with HTML, CSS, classes and ids.

jquery

What is jQuery? How is it different than Javascript?

jQuery is not a language, per se – it’s a JavaScript library. Written in pure JS, and created by programmer John Resig, it transforms the sometimes clunky syntax of JavaScript into something easier to write and understand. More importantly, in my opinion, it makes it possible to use the power of JavaScript without suffering common cross-browser compatibility issues.

Here’s a piece of pure javascript that finds an element in a page with an ID of ‘content’ and then writes a message in it.
document.getElementById('content').innerHTML = "Hello world!";

Here’s the exact same piece of code in jQuery:

$('#content').html('Hello World!');

In both cases, we’re saying “Find the element with an ID of  ‘content’, and write Hello World inside of it.” But the jQuery statement is shorter, neater and easier to read -which is a big part of why the library is so popular!

How do I use jQuery?

This used to drive me BONKERS when I first started coding. I’d find these awesome plugins people had built, and I’d want to use them, but I didn’t understand how to set things up. The scripts wouldn’t work, I didn’t really know how to troubleshoot them, and I’d give up, discouraged.

[N.B.: There are a number of ways to write JavaScript, and a lot of times programmers and devs, passionate creatures that they are, will demand that their way is the best way! It’s important to understand that while there are absolutely Best Practices for coding that improve your code and your process, the internet will not kerplode if you do not follow these practices while you are learning. For many of us, it’s hard enough to grasp the very basics! If you’re learning to code for fun, no matter who tells you otherwise, it is totally acceptable to put all your energy into just understanding jQuery and making things work.  Your craftsmanship can improve later, once you have the basic concepts down. ]

Here are a couple of conceptual things that helped me understand how to get my jQuery set up:

  • Your browser speaks JavaScript by default, but not jQuery (remember, it’s a JS library). That means you will need to include jQuery somewhere in your page (I get mine from Google).
  • I prefer to include my jQuery at the bottom of the page, not in the header. This is so the DOM (document object model, aka a fancy way of saying ‘the html in the page’) will have loaded by the time my scripts load. Say your scripts fire before your page is loaded – all that sweet jQuery you wrote has nothing to act on. So your plans for flashing blue headers and animated backgrounds (seriously, what the hell were you thinking?) are thwarted, because your jQuery loads, says “There’s nothing on this page for me to animate,” and then stops working.
  • I almost always wrap my jQuery in $(document).ready(function(){};. This tells your code to do its thing as soon as the DOM is ready. This is important if you’re using scripts that aren’t connected to actions, like clicking or hovering. At this stage, you don’t really need to understand exactly what document.ready means, just trust me and use it (but if you’re hard-core, here are some details).

When I sit down to work, this is what my stripped down, jQuery-ready HTML page looks like:

html

And this is what my brand new, ready-to-use jQuery file looks like:

jquery

 

Now let’s make sure it works! In your new jQuery file, write:

alert('Hello World!');

helloworld

We can get into the whats and the whys and hows of this later, but for now, just understand that alert() is a piece of JavaScript that the browser understands by default. It`s going to generate one of those tacky, spammy, porno-y popups – but it`s also going to tell us whether we have our files wired up correctly.

Save this file, and open index.html in your browser.
alert

 

Victory! We have correctly wired up our jQuery.

Didn’t work for you? Here are a few ways to troubleshoot:

  • Doublecheck your spelling.
  • Make sure your files are in the right place. Did you put your JS file in the JS directory?
  • Make sure your files have the same name as what you’re referencing in your markup. Did you accidentally call your JS file man.js, instead of main.js?
  • Make sure you’re viewing the correct file in your browser. Did you accidentally save more than one version?
  • Make sure you are loading your jQuery library before you are loading your new jQuery file.
  • Look for errors in your console.

Still can’t get it? Tweet at me – I’ll try to help!