The Story behind the Succinctly Series of Books ................................................................... 8
About the Author ...................................................................................................................... 10
Introduction ............................................................................................................................... 11
Preface ....................................................................................................................................... 12
jQuery semantics ..................................................................................................................... 12
How the book is structured ......................................................................................................
12
More code, less words ............................................................................................................. 12
Why oh why did I use alert() for code examples? ............................................................... 12
Color coding ............................................................................................................................. 13
Completely grok jQuery text() before reading this book ....................................................... 13
Code examples ........................................................................................................................ 14
Chapter 1 Core jQuery .......................................................................................................... 15
Base concept behind jQuery .................................................................................................... 15
the central concept behind jQuery is "find something, do something." More specifically, select DOM element(s) from an HTML document and then do something with them using jQuery methods.
The concept, behind the concept, behind jQuery .................................................................... 16
the concept behind jQuery could be extended to include first creating something new, selecting it, and then doing something with it.
jQuery requires HTML to run in standards mode or almost-standards mode .......................... 16
There are known issues with jQuery methods not working correctly when a browser renders an
HTML page in quirks mode. Make sure when you are using jQuery that the browser interprets
the HTML in standards mode or almost standards mode by using a valid doctype.
Waiting on the DOM to be ready
Waiting on the DOM to be readyjQuery fires a custom event named ready when the DOM is loaded and available for manipulation. Code that manipulates the DOM can run in a handler for this event. This is a common pattern seen with jQuery usage. The following sample features three coded examples of this custom event in use. Sample: sample3.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
></script>
<script>
// Standard.
jQuery(document).ready(function () { alert('DOM is ready!'); });
// Shortcut, but same thing as above.
jQuery(function () { alert('No really, the DOM is ready!'); });
// Shortcut with fail-safe usage of $. Keep in mind that a reference
// to the jQuery function is passed into the anonymous function.
jQuery(function ($) {
alert('Seriously its ready!');
// Use $() without fear of conflicts.
});
</script>
</head>
<body></body>
</html>
Keep in mind that you can attach as many ready() events to the document as you would like.
Executing jQuery code when the browser window is completely loaded
Typically, we do not want to wait for the window.onload event. That is the point of using a custom event like ready() that will execute code before the window loads, but after the DOM is ready to be traversed and manipulated.
However, sometimes we actually do want to wait. While the custom ready() event is great for executing code once the DOM is available, we can also use jQuery to execute code once the entire Web page (including all assets) is completely loaded. This can be done by attaching a load event handler to the window object. jQuery provides the load() event method that can be used to invoke a function once the window is completely loaded. Below, I provide an example of the load() event method in use.
Sample: sample4.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
></script>
<script>
// Pass window to the jQuery function and attach
// event handler using the load() method shortcut.
jQuery(window).load(function(){ alert('The page and all its assets
are loaded!'); });
</script>
</head>
<body></body>
Include all CSS files before including jQuery
As of jQuery 1.3, the library no longer guarantees that all CSS files are loaded before it fires the custom ready() event. Because of this change in jQuery 1.3, you should always include all CSS files before any jQuery code. This will ensure that the browser has parsed the CSS before it moves on to the JavaScript included later in the HTML document. Of course,images that arereferenced via CSS may or may not be downloaded as the browser parses the JavaScript.
Using a hosted version of jQuery