jQuery is like magic.
It’s like the pixie dust of the web, sprinkle some here and animate a dead object to life, or there and add a subtle transition for a smoother user experience.
If you’re like me, you waited way too long to learn jQuery.
I hesitated to learn it because I’m not a programmer, and I thought it would be too hard. Turns out it’s actually pretty easy to learn the basics, even if you’re a front end designer.
jQuery can add subtle transitions and animations that put your theme or website in a whole new category of awesome.
Let me give you a quick introduction to jQuery here. This is not intended to be a full tutorial, just enough to introduce you and convince you to start learning it.
Selectors
In CSS, we have a selector such as .class or #id. jQuery uses these same type of selectors, http://api.jquery.com/class-selector/ with a little different syntax:
[javascript]$(‘.class’) // (jQuery equivalent of .class in CSS)[/javascript]
Don’t worry about what everything means, just know that’s how you write a selector. An id would be similar:
[javascript]$(‘#id’) // (jQuery equivalent of #id in CSS)[/javascript]
Pretty easy so far, right?
Effects
Once you have selected an element, you can now do something with it. jQuery uses “effects” http://api.jquery.com/category/effects/
Here’s a simple effect to fade out the element you selected:
[javascript]$(‘.class’).fadeOut();[/javascript]
Notice how I added a period after the selector. Periods are a way of combining things in jQuery, it’s like a chain. The code above first tells the browser to select the element with .class, then it fades out that element.
One more thing, jQuery statements always end with a semicolon.
Still with me? Good.
Document Setup
First, you always have to call jQuery into your document BEFORE any of the code we are writing. jQuery must come before any scripts that depend on it.
The code above doesn’t really do much unless you put in in a document ready function. This just tells jQuery to wait until the document is ready, then run the script. You will always use the code below in the same way, so don’t stress about understanding it right now.
[javascript]$(document).ready(function() {
// Code here
});[/javascript]
WordPress requires you to use what’s called “no conflict mode.” This just assures all your plugins and themes play nicely together. That looks like this:
[javascript]jQuery(document).ready(function($) {
// Code here
});[/javascript]
That code needs to either go between <script> tags, or in a .js file that is being called onto your current site page. Here’s an example of the whole thing, that you can copy/paste into an html page:
[javascript][/javascript]
Events
Let’s add one more thing, called an event. Events are when the user does something, like clicks an element, or presses a key http://api.jquery.com/category/events/. This is where you start getting deeper into the magic!
Let’s make our .class element fade out only when it is clicked.
[javascript]$(‘.class’).click(function() {
$(this).fadeOut();
});[/javascript]
This code is a little more complex, but all I added was .click(). Then I put a function() { } inside the .click() so it looked like this:
[javascript]$(‘.class’).click(function() {
});[/javascript]
Then I told it to fade out. $(this) is a selector that means manipulate whatever is already selected (in this case .class).
So the whole thing in copy/paste form would look like this:
[javascript][/javascript]
Go ahead and click the “Hello world!” text below to see it fade out.
See the Pen hxbas by Scott Bolinger (@scottb) on CodePen
If you understand what I did above, you can figure out a ton of other fun animations with jQuery very easily. Below are links to a few good places to learn, have fun!
- http://www.codecademy.com/tracks/jquery (Free)
- http://try.jquery.com (Free)
- http://teamtreehouse.com (Paid)