At its heart, jQuery does something that sounds dull: it lets you modify the contents of web pages by manipulating the model that the browser creates when it processes the HTML, a process known as DOM (Document Object Model) manipulation, which I describe in detail later. If you have picked up this book, then you have probably already done some DOM manipulation, using either another JavaScript library or the built-in web browser API (application programming interface), and now you want to do it in a better way.

jQuery goes beyond better. It makes DOM manipulation a pleasure and, on occasion, an actual joy. There is something elegant and graceful about the way that jQuery works that transforms a task that can be pure drudgery into something that is simple and easy. Once you start using jQuery, there is no going back. Here are the top reasons that I use jQuery in my projects.

• jQuery is expressive. I can do more work with much code.
• jQuery methods apply to multiple elements. The DOM API approach of select-iterate-modify is gone, meaning fewer for loops to iterate through elements and fewer mistakes.
• jQuery deals with implementation differences between browsers. I don’t have to worry about whether Internet Explorer (IE) supports a feature in an odd way, for example; I just tell jQuery what I want, and it works around the implementation differences for me.
• jQuery is open source. When I don’t understand how something works or I don’t quite get the result I expect, I can read through the JavaScript code and, if needed, make changes.

The genius of jQuery is that it takes something that is a major grind in web development and makes it simple, quicker, and easier. I can’t ask for more than that. Not everything is perfect, of course, and there are one or two rough edges, which I’ll explain as I get into the details. But even with the occasional flaw, I love working with jQuery, and I hope you will find it equally compelling and enjoyable to use.

Understanding jQuery UI and jQuery Mobile

In addition to the core jQuery library, I also cover jQuery UI and jQuery Mobile, which are user interface (UI) libraries built on top of jQuery. jQuery UI is a general-purpose UI toolkit intended to be used on any device, and jQuery Mobile is designed for use with touch-enabled devices such as smartphones and tablets.

Understanding jQuery Plug-ins

jQuery plug-ins extend the functionality of the basic library. Some plug-ins are so good and so widely used that I have covered them in this book. There are a lot of plug-ins available (although the quality can vary), so if you don’t like the plug-ins I describe in this book, you can be confident that an alternative approach is available.

What Do I Need to Know?

Before reading this book, you should be familiar with the basics of web development, have an understanding of how HTML and CSS (cascading style sheets) work, and, ideally, have a working knowledge of JavaScript. If you are a little hazy on some of these details, I provide refreshers for HTML, CSS, and JavaScript in Chapters 2, 3, and 4. You won’t find a comprehensive reference for HTML elements and CSS properties, though. There just isn’t the space in a book about jQuery to cover HTML in its entirety. If you want a complete reference for HTML and CSS, then I suggest another of my books: The Definitive Guide to HTML5, also published by Apress.

What Is the Structure of This Book?

This book is split into six parts, each of which covers a set of related topics.

What’s New in This Edition?

Since the first edition of this book, jQuery, jQuery UI, and jQuery Mobile have all undergone substantial changes.

Are There Lots of Examples?

There are loads of examples. One of the nice aspects of jQuery is that almost any task can be performed in several different ways, allowing you to develop a personal jQuery style. To show the different approaches you can take, I have included a lot of different examples—so many, in fact, that I include the complete HTML document you are working with only once in some chapters in order to fit everything in. The first example in every chapter is a complete HTML document, as shown in Listing 1-1, for example.

Listing 1-1.  A Complete Example Document

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <script src="jquery-2.0.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("img:odd").mouseenter(function (e) {
                $(this).css("opacity", 0.5);
            }).mouseout(function (e) {
                $(this).css("opacity", 1.0);
            });
        });
    </script>
</head>
<body>
    <h1>Jacqui's Flower Shop</h1>
    <form method="post">
        <div id="oblock">
            <div class="dtable">
                <div id="row1" class="drow">
                    <div class="dcell">
                        <img src="aster.png"/><label for="aster">Aster:</label>
                        <input name="aster" value="0" required>
                    </div>
                    <div class="dcell">
                        <img src="daffodil.png"/><label for="daffodil">Daffodil:</label>
                        <input name="daffodil" value="0" required >
                    </div>
                    <div class="dcell">
                        <img src="rose.png"/><label for="rose">Rose:</label>
                        <input name="rose" value="0" required>
                    </div>
                </div>
                <div id="row2" class="drow">
                    <div class="dcell">
                        <img src="peony.png"/><label for="peony">Peony:</label>
                        <input name="peony" value="0" required>
                    </div>
                    <div class="dcell">
                        <img src="primula.png"/><label for="primula">Primula:</label>
                        <input name="primula" value="0" required>
                    </div>
                    <div class="dcell">
                        <img src="snowdrop.png"/><label for="snowdrop">Snowdrop:</label>
                        <input name="snowdrop" value="0" required>
                    </div>
                </div>
            </div>
        </div>
        <div id="buttonDiv"><button type="submit">Place Order</button></div>
    </form>
</body>
</html>

This listing is taken from Chapter 5. Don’t worry about what it does; just be aware that the first example in each chapter is a complete HTML document, similar to the one shown in Listing 1-1. Almost all of the examples are based around the same basic HTML document, which displays a simple flower shop. It isn’t the most exciting example, but it is self-contained and includes all of the things we are interested in when working with jQuery.

For the second and subsequent examples, I only show you the elements that change. This is generally just the script element, which is where your jQuery code lives. You can spot a partial listing because it starts and ends with ellipsis (...), as shown in Listing 1-2.

Listing 1-2.  A Partial Listing

...
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("img:odd").mouseenter(function(e) {
           jQuery(this).css("opacity", 0.5);
        }).mouseout(function(e) {
           jQuery(this).css("opacity", 1.0);
        });
    });
</script>
...

Listing 1-2 is a subsequent listing from Chapter 5. You can see that just the script element appears, and I have highlighted a number of statements. This is how I draw your attention to the part of the example that shows the jQuery feature I am using. In a partial listing like this, only the element I show has changed from the complete document shown at the start of the chapter.

I have kept the examples in this book very focused on individual features. This is to give you the best coverage of how jQuery operates. But in doing this, you can lose sight of how different features fit together, so at the end of each part of the book, there is a short chapter in which I refactor the example document to incorporate all of the topics in the previous chapters and present a joined-up view of what’s possible.

Where Can I Get the Example Code?

You can download all the examples for all the chapters in this book in the Source Code/Download area of the Apress web site (www.apress.com). The download is available without charge and includes all of the supporting resources that are required to re-create the examples without having to type them in (including images, JavaScript libraries, and CSS style sheets). You don’t have to download the code, but it is the easiest way of experimenting with the examples and cutting and pasting techniques into your own projects.

What Software Do I Need for This Book?

To follow the examples in this book, you will need various pieces of software, as described in the following sections.

var http = require('http'),
var url = require('url'),
  
http.createServer(function (req, res) {
    console.log("Request: " + req.method + " to " + req.url);
      
    res.writeHead(200, "OK");
    res.write("<h1>Hello</h1>Node.js is working");
    res.end();
      
}).listen(80);
console.log("Ready on port 80");

node NodeTest.js

Image Attribution

Throughout this book, I use a set of images in the examples. Thanks to the following people for kind permission to use their photographs: Horia Varlan, David Short, Geishaboy500, Tanaka Juuyoh, Mervi Eskelinen, Fancy Speed Queen, Alan “craigie3000” Craigie, notsogood, and melalouise.

Summary

In this chapter, I outlined the content and structure of this book and set out the software that is required for jQuery web development, all of which can be obtained free of charge. The next three chapters refresh your basic skills in HTML, CSS, and JavaScript. If you are familiar with these topics, then skip to Chapter 5 where I introduce jQuery.