Every project in this book is built around jQuery; it's the foundation for everything we do. To download a copy of jQuery, we can visit the jQuery site at http://jquery.com/. There are download buttons here to obtain production and development versions of the library, as well as a wealth of other resources including full API documentation, tutorials, and much, much more to help you familiarize yourself with using the library.

One of the core concepts of jQuery is based on selecting one or more elements from the Document Object Model (DOM) of a web page, and then operating on those elements somehow using the methods exposed by the library.

We'll look at a range of different ways of selecting elements from the page throughout the projects in the book, as well as a wide selection of the different methods we can call on elements, but let's look at a basic example now.

Let's say there is an element on a page that has an id attribute of myElement. We can select this element using its id with the following code:

jQuery("#myElement");

As you can see, we use simple CSS selectors in order to select the elements from the page that we wish to work with. These can range from simple id selectors as in this example, class selectors, or much more complex attribute selectors.

As well as using jQuery to select elements, it is also common to use the $ alias. This would be written using $ instead of jQuery, as follows:

$("#myElement");

Once the element has been selected in this way, we would say that the element is wrapped with jQuery, or that it's a jQuery object containing the element. Using the jQuery (or $) method with a selector always results in a collection of elements being returned.

If there are no elements that match the selector, the collection has a length of 0. When id selectors are used, we would expect the collection to contain a single element. There is no limit as to how many elements may be returned in the collection; it all depends on the selector used.

We can now call jQuery methods that operate on the element or elements that have been selected. One of the great features of most jQuery methods is that the same method may be used to either get a value, or set a value, depending on the arguments passed to the method.

So to continue our example where we have selected the element whose id attribute is myElement, if we wanted to find out its width in pixels, we could use jQuery's width() method:

$("#myElement").width();

This will return a number which specifies how many pixels wide the element is. However, if we wish to set the width of our element, we could pass the number of pixels that we'd like the element to have its width set to as an argument to the same method:

$("#myElement").width(500);

Of course, there is much more to using jQuery than these simple examples show, and we'll explore much more in the projects contained in this book, but this simplicity is at the heart of the library and is one of the things that have made it so popular.

Project 1, Sliding Puzzle, helps us build a sliding puzzle game. We'll use jQuery and jQuery UI together to produce this fun application and also look at the localStorage API.

Project 2, A Fixed Position Sidebar with Animated Scrolling, helps us implement a popular user interface feature – the fixed-position sidebar. We focus on working with the CSS of elements, animation, and event handling.

Project 3, An Interactive Google Map, teaches us how to work with Google's extensive Maps API in order to create an interactive map. We look at a range of DOM manipulation methods and look at how to use jQuery alongside other frameworks.

Project 4, A jQuery Mobile Single-page App, takes a look at the excellent jQuery Mobile framework in order to build a mobile application that combines jQuery with the Stack Exchange API. We also look at jQuery's official template engine, JsRender.

Project 5, jQuery File Uploader, uses jQuery UI once again, this time implementing a Progressbar widget as part of a dynamic front-end file uploader. We also cover writing jQuery plugins by making our uploader a configurable jQuery plugin.

Project 6, Extending Chrome with jQuery, shows us how we can extend the popular Chrome web browser with an extension built with jQuery, HTML, and CSS. Once again we make use of JsRender.

Project 7, Build Your Own jQuery, takes a look at how we can build a custom version of jQuery using a range of key web developer's tools including Node.js, Grunt.js, Git, and QUnit.

Project 8, Infinite Scrolling with jQuery, takes a look at another popular user-interface feature – infinite scrolling. We focus on jQuery's AJAX capabilities, again use JsRender, and look at the handy imagesLoaded plugin.

Project 9, A jQuery Heat Map, helps us build a jQuery-powered heat map. There are several aspects to this project including the code that captures clicks when pages are visited, and the admin console that aggregates and displays the information to the site administrator.

Project 10, A Sortable, Paged Table with Knockout.js, shows us how to build dynamic applications that keep a user interface in sync with data using jQuery together with the MVVM framework Knockout.js.

Some of the projects covered in this book can be completed using nothing but a browser and a simple text editor. Of course, a complete IDE is always going to make things easier, with features such as code completion, code coloring, and collapsible blocks. So using an IDE over a simple text editor is recommended.

Other projects rely on additional JavaScript frameworks or community-built plugins. Several projects use third-party services hosted on the Internet in order to consume data. One project requires the use of several additional and highly specialized applications.

Where additional software or scripts are required, or API access is needed, these requirements are discussed in the relevant projects and information is included on where to obtain the required code or applications, how to install them, and how to use them sufficiently for the project to be completed.

This book is aimed primarily at front-end developers that have some knowledge and understanding of HTML, CSS, and JavaScript. Some jQuery experience is desired, but not essential. All code, whether it be HTML, CSS, or JavaScript (including jQuery) is discussed in full to explain how it is used to complete the project.

In this book, you will find several headings appearing frequently.

To give clear instructions of how to complete a procedure or task, we use:

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="css/common.css" />
  </head>
  <body>
    <script src="js/jquery-1.9.0.min.js"></script>
  </body>
</html>

<div data-role="header">
    <a href="bounty-hunter.html" data-icon="home" 

        filter: "!)4k2jB7EKv1OvDDyMLKT2zyrACssKmSCXeX5DeyrzmOdRu8sC5L8d7X3ZpseW5o_nLvVAFfUSf"

pieces.appendTo(imgContainer).draggable("destroy");

if (timer) {
  clearInterval(timer);
  timerDisplay.text("00:00:00");
}

timer = setInterval(updateTime, 1000);
currentTime.seconds = 0;
currentTime.minutes = 0;
currentTime.hours = 0;

pieces.draggable({

cd C:\\msysgit\\msysgit\\share\\msysGit

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.