JQuery for Dummies (Me)
jQuery is a JavaScript library that acts as a helper. In order to pinpoint certain elements on a webpage and be able to change those elements, you have to use jQuery. How, you ask? By using DOM, or Document Object Model. Each browser has a slightly different DOM interface, which is why you need jQuery — it lets you talk to each browser in its own language.
Very simply, you have to first find, then manipulate your elements. Finding is simple enough; you type this into your terminal and are able to select the element you want:
$(“h1”);
The dollar sign is a stand-in for jQuery, so you don’t have to write it over and over again. Inside the parentheses is the HTML div class you’re looking for, and everything is wrapped up nicely with a semicolon.
From here, you can change text, add messages, style with CSS, remove features at the click of a button, and add animation. Those last two, removing (and adding) features and animation, require event handling. This means that the code is looking for a certain event in order to fire: a mouse click, a second mouse click, hovering, and pretty much anything a user can do with a mouse.
Just to show off something jQuery can do…
$(document).ready(function() {
$(‘#tour’).on(‘click’, ‘button’, function() {
$(‘.photos’).slideToggle();
});
function showPhotos() {
$(this).find(‘span’).slideToggle();
}
$(‘.photos’).on(‘mouseenter’, ‘li’, showPhotos);
$(‘.photos’).on(‘mouseleave’, ‘li’, showPhotos);
});
This little bit of code waits until the page has finished loading to start running the jQuery. Then it looks for the element with the HTML class #tour, and when the user clicks on that element, it will toggle the photos in the HTML file. Then when the mouse clicks again on the #tour element, the photos will slide back into nothingness. The function showPhotos is just a bit of refactoring to get rid of duplication — nothing fancy.
All this newfound knowledge comes from the Try JQuery CodeSchool course. It’s three hours of nonstop “look at this new thing you can do!” The videos are explained well, and hints are waiting in a separate tab when you’re running through the exercises when you get stuck (greatly appreciated). The bad things are how quickly the videos go — they’re only around 4 minutes each — and that there aren’t any notes that you can follow. Furiously typing code while trying to follow along and listen to what’s going on gets frustrating. I remedied this by pasting my solutions and what they were doing as I went through the exercises.
While severely lacking in any interesting content (the examples were all about vacations, which wasn’t very conducive to trying to learn) the course itself was good. Just throw on some bloopers at the end of those videos and I’d watch it again.
