Learning Some Helpful Libraries - HTML5 Mobile Game Development - page 79

As for where in your page the <script> tag should be added, it's up to you. The only restriction is that
it should be before the first reference of the jQuery object. Most websites that use jQuery for enhancing the
page recommend putting it at the bottom of the page before the </body> tag. For games this is less important
because nothing is going to be visible on the page until jQuery and the rest of the JavaScript is loaded.
Understanding the $
All JavaScript loaded into a page shares a global namespace. This means that if you have a top-level variable
defined in one JavaScript file, it could be accessed and overwritten in a subsequently loaded JavaScript file.
Sometimes this is a good thing. When writing a game, for example, it's nice to partition your code into vari-
ous files and still have it all work together. When writing a library, however, it would be nice if you didn't
need to worry about every method in your library conflicting with methods in your game. You might, for ex-
ample, want to add a hide() method to your game objects without having it conflict with the hide() method
provided by your DOM manipulation library.
jQuery solves this problem by wrapping everything it does into a single object called the jQuery object. So
if you want to hide an element on the page that has an ID of "my-object-id" (and didn't know any other
jQuery), you could write:
var elem = document.getElementById("my-object-id");
jQuery(elem).hide();
jQuery has a couple of additional tricks up its sleeve. First, you can use the $ object instead of typing the full
word jQuery . The following code is equivalent to what you wrote previously:
var elem = document.getElementById("my-object-id");
$(elem).hide();
You're still missing the most powerful part of jQuery, though, and that is CSS selectors. As opposed to
passing an actual DOM object to jQuery, you can just pass a string that represents a CSS selector, and jQuery
matches one or more objects that match that selector. So you could get the preceding code down to one line:
$("#my-object-id").hide();
If you remember your CSS, prefixing something with a pound sign (#) means you're targeting an ID property.
jQuery also supports more complicated selectors, so you could, for example, write:
$("#my-form > input[type=checkbox]:checked").hide();
This would hide all the currently checked check boxes directly inside of an element with an ID of my-form .
Manipulating the DOM
Much of what jQuery is good at is “manipulating the DOM.” This phrase means modifying the structure and
content of a web page. The term DOM stands for Document Object Model, which is the programmatic interface
to the web page.
The jQuery hide() method is only one of the many functions jQuery provides for manipulating the DOM.
A few of the methods ( attr , css , animate , val , html , and text ) have two forms: a “getter” form and a
“setter” form. The getter form often takes no arguments or a single string argument and returns a value; a setter
form usually takes one or two arguments, a property and a value, or an object literal to set multiple values at
once. Following are some examples using the different forms: