Now that you know how to understand the DOM, let’s manipulate it with jQuery! There are a few prerequisites you should do before tackling this tutorial:
How jQuery thinks
My “aha!” moment with jQuery came as soon as I figured out the way jQuery thought. Luckily, this is easy and only two steps:
1. Find some HTML
2. Do something with it
That’s it! That’s literally all you need to know to start understanding and writing your own jQuery. Let’s break it down:
Finding some HTML
In the previous article, we discussed finding things in the DOM. Luckily, jQuery uses the exact same kind of selectors you probably already use in your CSS, like:
A basic jQuery selector for the same elements look like this:
$('h1')$('ul#mylist li')$('a:hover')
The $(' ')part is how you tell jQuery to select that item. Cake, right? Right.
Doing something with it
Now that you’ve selected your element, it’s time to do something with it. In this case, we’re going to add a class of “active” to that item. addClass() is a built-in jQuery method that will add a class to your selection.
To add the “active” class to the same elements from above:
$('h1').addClass("active"); – find all h1′s in the HTML and do something (add the class) “active” to them. $('ul#mylist li').addClass("active"); — find every li in your “mylist” unordered list and add the class “active” to them$('a:hover').addClass("active"); — find every anchor in the hover state in your document and add the class “active” to them
Get it? The basic syntax of jQuery is “select something dot do something semicolon”: $('selectSomething').doSomething();
Some other very handy jQuery methods you’ll likely use a lot:
show() and hide() – shows or hides the selection. e.g.: $('h1').hide();removeClass() – remove a class from your selection. e.g.: $('h1').removeClass("active");hasClass() – finds items in your selection with a particular class. e.g.: $('ul#mylist').hasClass("active");fadeIn() and fadeOut() – changes the transparency of your selection slowly, like a prettier show() and hide(). e.g.: $('h1').fadeIn(500);
Did you notice that we added a number to the fadeIn() method? According to the jQuery documentation, fadeIn accepts a duration. One second = 1000, so $('h1').fadeIn(500); brings any h1′s from completely hidden to completely visible in half of a second.
Try this
Download your example docs for this tutorial and open jquery2.html in both your text editor and Firefox. Activate Firebug and go to your console.
We have a list of places here. In the markup, you’ll notice that it’s an unordered list with an id of “places”. In the console of Firebug, type this and click “run”:
$('ul#myplaces').hide();
Bam! List gone! You should know that you’re not removing the list from the DOM, just hiding it in the browser. How would you make it visible again?
Often, you’ll want to edit the styling of an item with jQuery. For example, let’s make the h1 tag red:
$('h1').css("color","red");
The jQuery documentation for css() says we can give css() a property name and then the property, separated by quotes.
One of the most used jQuery methods in UI development is the ability to “select all items”, So, let’s check all of the checkboxes in the “numbers” fieldset:
$('fieldset#numbers input[type="checkbox"]').attr("checked","checked");
We’re finding all of the checkboxes in the “numbers” fieldset, then changing the attributes of the checkbox to checked using jQuery’s attr() method.
As you (hopefully) know, adding checked="checked" in the markup for a checkbox checks that checkbox. jQuery lets us assign attributes to elements in the DOM using syntax you’re already familiar with. Check? Check.
Homework
Using the Firebug console in Firefox:
- Hide all of the food images on the page. A beverage while you’re learning to code is always helpful, though, so never hide the Newcastle. Hint: you can select multiple items the exact same way you would in your CSS.
- Make the
h1 bold and blue. Feel free to rely on the jQuery documentation for an example.
- Uncheck all of the checkboxes in the numbers fieldset
- Check the last checkbox in the letters fieldset
