Find, Do

Technically speaking, the standard for JavaScript doesn't include any information on input and output. It's meant to be a hosted language, living inside another program--in this case, the browser. But since it has been used in browsers for so long, input and output in JavaScript usually means using functions that search and update web pages. The problem is that these functions are, in a word, terrible. They have long, confusing names. They return values that look like regular JavaScript values, but aren't. They have poor default settings.

Almost immediately after interactive web pages became possible, people began writing helper scripts that would "wrap" these poorly-engineered browser functions in more convenient forms. The most popular of these is jQuery, which was invented in 2005 by John Resig. It's not always the most advanced library, or the most comprehensive. But it has been one of the easiest to use, with a clean and fluent interface and a metric ton of plugins to cover a wide variety of use cases. For that reason, we'll be learning jQuery in this book, but you should also familiarize yourself with other popular helper libraries.

Everyone Else

JavaScript libraries are like opinions: everyone has one, and theirs is always the best. But beyond the jQuery bubble, there are a lot of really interesting, powerful ideas being written. Even if you don't commonly use them, it's worth checking out a few alternatives just to see what they do well, and what you can learn.

YUI - An incredibly comprehensive system created at Yahoo! that covers everything from basic page manipulation to large-scale application design. Somehow, YUI has never become popular, a fact I attribute to its slightly clumsy interface (and the fact that most coders are vaguely embarrassed by the name "Yahoo!").
Dojo - Much like YUI, Dojo is an "everything-and-the-kitchen-sink" library organized into a wide range of modules.
Zepto - A jQuery-compatible library meant to be smaller and faster on mobile devices. This library only works reliably on Webkit-based browsers.
Prototype - One of the early competitors to jQuery, Prototype has fallen by the wayside, particularly as some of its innovations--namely, altering the built-in page objects to make them more user-friendly--have fallen out of fashion.

jQuery is based on a "find tags, then do something to them" philosophy. Its primary innovation was the ability to look for elements on the page using CSS selectors. If you've done any CSS, you should be familiar with selectors: they're the rules that you set up to specify which parts of the page get a certain style. This book assumes that you know enough to write some simple selectors, but here's a basic review:

Selector	Meaning	Example
`tag`	Finds all tags matching the selector	`li, div, h1`
`.class`	Finds all elements with a given class name	`.content, .external, .dialog-box`
`#id`	Finds a single element with the specified ID	`#main, #menu, #next`
`parent > child`	Finds child elements that are directly inside the parent	`body > h1`
`ancestor child`	Finds any child elements that are anywhere inside the ancestor element	`body a`

For more information on CSS and CSS selectors, you may want to check out this comprehensive guide from Mozilla.

The DOM

If you've only written HTML and CSS, chances are you're used to thinking of the page as plain text, with tags that tell act kind of like the bold or italic buttons in a word processor: start a certain kind of formatting here, stop it elsewhere. But JavaScript sees the page differently--the same way the browser sees it. And the browser "sees" your HTML document by converting it into a tree of nested elements, called the Document Object Model or the DOM for short.

There are lots of metaphors we could use, but the easiest way to visualize the conversion from text to data structure is to open up your development tools and switch to the "HTML" or "Elements" tab (depending on your browser). You'll probably see only a few tags at first--probably the <head> and <body> tags--but if you click the indicator next to these elements (it probably looks like a + or a triangle) you can expand it to see the elements inside each parent element, all eventually rooted in the <html> element that surrounds everything on the page. Keep this arrangement in mind when we find ourselves talking about "sibling," "parent," "child," or "ancestor" elements.

Although we often use the terms "tag" and "element" to mean the same thing, looking at this view of the document makes a distinction clear. When it's in plain text, we write tags with attributes. The browser then converts that to a data structure made up of elements, fixing any misplaced or unknown tags along the way. Some people are sticklers for proper usage, insisting that we should only call <div> or <p> "tags" if they're in text format. But in this document, for reasons of readability if nothing else, we'll use them interchangeably.

In the last few chapters, we've been loading scripts using the script tag, either inline or external via the src attribute. Now it's time to open up the developer tools again, using both the console and the HTML views (Chrome currently calls this "Elements"). While still on this page, from the console, type the following code, pressing enter after each line: var rows = $('#selectors tr'); rows.hide(); rows.fadeIn();

You should see the table of selectors above vanish and then reappear with a fade effect. Our first function call, $('#selectors tr'), told jQuery to find any <tr> tags inside of the #selectors element (the table has an ID of "selectors"). jQuery actually creates two functions that you can use for finding elements, $ and jQuery, but most people use the shorter form, so we will too. Then we called the hide() and fadeIn() methods on the resulting object, causing it to do exactly those actions. If you watch in the HTML/Elements tab, you'll see the inline styles for those parts of the page change (usually this change is highlighted in yellow).

For right now, let's just concentrate on searching for elements on the page using jQuery. Try using the following jQuery selections in your console, and then mouse over them in the resulting output line. You should see the elements highlighted on the page when you hover over each one in the array-like jQuery object that's returned. $('code'); //finds all code elements $('code:first'); //finds just the first code element $('p:odd'); //finds only odd-numbered paragraph tags $('td, th'); //finds both th and td tags $('table > td'); //finds td tags that are direct children of the table

You'll notice that not all of these are valid CSS3 selectors. :odd, for example, is not defined in the W3C specification, even though it's very useful. jQuery defines a number of these custom selectors in order to save you some time, and also because that way they can support it in all browsers (the W3C equivalent to :odd, :nth-child, doesn't work in older browsers like IE). If you'd like more information, the jQuery documentation includes a page listing all the selectors (standard or not) supported by jQuery.

That last query tells us something interesting: there are no <td> tags that are direct children of the table tag, because they're all contained in a <tr> tag and then in the table (sometimes there's also a <tbody> between the two as well). In that case, jQuery doesn't throw an error, even if you try to call functions like hide() or fadeIn on the resulting object. Instead, the result is an empty array, and the functions are simply ignored. Since jQuery objects are "array-like," the way to test whether or not you've found something is (just as with arrays) to check the length property. if ($('table > td').length > 0) { //do something with the query here //you can also just test the length by itself--non-zero numbers are truthy }

Whenever we call the jQuery function (through $ or jQuery) and pass in a selector, what we get back is a special object that contains a huge number of functions for changing the selected elements. It also contains functions for finding other elements, using the current selection as a starting place. For example, you might want to locate a menu, and then find different child elements in order to give them a certain appearance or behavior: var menu = $('.menu'); //now, starting from the menu, we'll find different items inside var listItems = menu.find('li'); var links = menu.find('li > a'); var submenus = menu.find('ul');

The complete list of functions for navigating around the document (or traversing it) this way are listed in jQuery's traversal function documentation, but the most useful ones include:

Function	Role
`find()`	Given a selector, find any elements matching it inside the current selection
`children()`	If called with a selector, finds all direct child elements matching it. If called without, returns all child elements.
`parent()`	Returns the parent element (there's only one possible parent)
`closest()`	Returns the nearest ancestor element matching the selector. This includes the current element, so running `$('li').closest('li')` will return the same objects you started with.
`next()`	If called without a selector, it returns the next element with the same parent. If you provide a selector, it only finds the next element if it matches.
`prev()`	Same as `next()`, but working in the opposite direction (up the page instead of down).

Manipulation

Finding elements with jQuery is all well and good, but what do we do with them once we have them? The answer comes in the form of the manipulation functions. The simplest form of manipulation is just to replace the contents of an element using html(). For example, there's an element after this paragraph with an ID of "substitute." Let's change its contents by running the following code from the console.


$('#substitute').html('This space intentionally left blank.');

Note that when we change the page using jQuery, for most changes, jQuery will apply our alteration to all of the objects you selected--whether that's just one element (as above) or a long list. For example, $('p').html('replaced') will change the contents of every <p> tag on the page. You don't have to write a loop to affect each selected element, because jQuery will do it for you. Just make sure your selectors are accurate, since it will also happily affect elements that you didn't intend to target.

The html() function is, like many of jQuery's functions, both what we call a getter and a setter. By this, I mean that it can either get the inner HTML of an element, or it can set it. If you call html() without providing any input, as below, you'll get back the contents of the element. $('#substitute').html(); //should be what you previously inserted here

You can type any string you want into the html() function, including other HTML tags. While that's not the most efficient way to construct a page, it's a useful ability to have. We can already imagine being able to create a large numbered list using a loop and some jQuery: var list = ""; for (var i = 0; i < 100; i++) { list = list + "<li> #" + i; } $('#substitute').html(list); You can also feed a jQuery object into html(), which will remove those objects from their current location and insert them into the selected element or elements. For example, we might grab the first code example off this page, and insert it into our substitute element: var code = $('code:first'); $('#substitute').html(code);

If you want to keep the current contents, but add to them, you might consider using append() instead of html(). The former works the same way, but it supplements an element's inner HTML instead of replacing it. append() makes our list-generation loop quite a bit simpler, because we don't have to generate all the HTML in one big string. for (var i = 0; i < 100; i++) { var item = "<li> #" + i; $('#substitute').append(item); }

Finally, let's look at a few methods for changing the appearance of an item. If you'd like to alter the inline style for an element, you can use the css() function, which takes as its inputs the name of the CSS property you want to change, followed by the value you'd like to give it. Try it out on the blockquote element that follows:

"I don't have to forgive my enemies. I've had them all killed."
--General Ramon Maria Naraez


var quote = $('blockquote');
quote.css('border', '8px dotted #CCC');
quote.css('color', 'red');
quote.css('background-color', 'green');

Like html(), css() is both a getter and a setter. If you don't provide a value as the second input to the function, it will retrieve the current value of that property. The best part of using this function to get CSS properties is that it's not limited to only inline styles. It will pull whatever the current computed style for the element is--meaning inline, stylesheet, and built-in styles. You can see this if you try to get the text-decoration style for our blockquote, which I have not set in any way on this page. $('blockquote').css('text-decoration'); // should return "none" Be careful, though. The format that you get a property back from css() may not match the way you set it, or the way you expect. Asking for the color style of an element in Firefox currently gets formatted as an "rgb(0, 0, 0)"-style string, even if it was set with a regular color string like "black." It can also vary from browser to browser. Be sure to test your code as widely as possible, to make sure you handle differences in CSS implementation.

Stay Classy, jQuery

When you call the css() function as a setter, it sets the styles inline. Of course, we're always taught that inline styles are a bad idea when writing HTML: they're repetitive, break up your code, and if you ever change the look of your site you have to go through each line of HTML to update the style attributes. It's much better practice to use a CSS class, thus separating the appearance of your site from its structure. The same is true of JavaScript, and jQuery's got your back: var headline = $('h1'); headline.addClass('awesome'); //in addition to classes it already had, now has a class of "awesome" headline.removeClass('awesome'); //and now just the "awesome" class has been removed, leaving others untouched

By using classes instead of CSS properties, we keep our JavaScript separate from the look and feel of our site. Now, if we decide to give the page a style makeover, we don't have to hunt through many lines of JavaScript to find places where we might be setting styles via code. Whenever possible, use each web language only for the problems it's designed for:

HTML: structure and content
CSS: look and feel
JavaScript: interaction and behavior

While it's sometimes frustrating that to develop web pages, we need to know (at least) three different languages, when they're broken out this way it's easy to see how we also benefit from this arrangement. Each of the three front-end web languages is well-suited to its task in a way that the others are not: it would be painful to write and style a page using only JavaScript, just as it is slow and difficult to do all your styling in your HTML, or write all of your interactions using CSS transitions. Using the right language for the right task makes our code simpler--and in a few chapters chapter, we'll learn about ways that JavaScript can create interactive elements that would be impossible in the other two.

Example Code

It's time to practice on the console again. The following lines of code will help you explore the jQuery interface a bit more, including its many handy functions for interacting with elements and their properties. Try typing each line into the console, and see what you get back, or what changes. //Let's start with some animations $('p').slideUp(); $('p').slideDown(); //Note that animations stack--by default, they don't overlap. $('code').slideUp().slideDown(); //Let's mess with our links $('a'); //Of course, it would be more fun to only mess with the sidebar links $('aside').find('a'); //You can do that with a selector as well $('aside a'); //But you can't go the other way: starting from links and finding asides $('a').closest('aside'); //You can get information about an element's attribute using attr() //Let's get the href for our links: $('a').attr('href'); //Note that you only get the value from the first link. //Setting an attribute, however, affects all elements. $('a').attr('href', 'http://example.com'); //likewise, we can get the html for the first paragraph... $('p').html(); //...or we can replace it for all of them. $('p').html('This space intentionally left blank.'); //Remember to refresh to reset everything! //Let's practice setting some styles $('li').css('background', 'green'); //Many functions in jQuery will set multiple properties if you //provide an object instead of individual arguments. $('li').css({ background: 'green', 'margin-left': "40px", //you can set hyphenated properties by quoting them marginTop: '10px' //alternately, you can camelCase them });

These are some common uses of jQuery, but they're by no means exhaustive. One of the best ways to learn the library better is to decide on something you want to do--hide only links to certain domains! add a class to all elements inside another type of element! find elements that contain a certain word!--and then look through the jQuery Application Programming Interface (API) documentation for functions that will help you accomplish that task. The API also includes information on what arguments are required, and which are optional for any given call. For example, fadeOut() has a default speed, but by calling fadeOut('slow');, we can change how fast the element disappears.

Beginning jQuery

Find, Do

Manipulation

Stay Classy, jQuery

Example Code