Pro jQuery 2.0, 2nd Edition

Pro jQuery 2.0, 2nd EditionReviews
Author: Adam Freeman
Pub Date: 2013
ISBN: 978-1-4302-6388-3
Pages: 1044
Language: English
Format: PDF
Size: 26 Mb

Download

jQuery 2.0 is the latest version of the jQuery framework. Suitable for modern web browsers it provides a robust API for web application development. It is fast becoming the tool of choice for web developers the world over and sets the standard for simplicity,flexibility and extensibility in website design.
In Pro jQuery 2.0 seasoned author, Adam Freeman, demonstrates how to get the most from jQuery 2.0 by focussing on the practical features of the technology and how they can be applied to solving real-world problems. In this comprehensive reference he goes in depth to give you the practical knowledge that you need.
Each topic is covered clearly and concisely, and is packed with the details you’ll need to learn to be truly effective. The most important features are given a no-nonsense, in-depth treatment, and chapters contain examples that demonstrate both the power and the subtlety of jQuery.
What you’ll learn :
Understand the capabilities of jQuery and why it is special
Use the core of jQuery to enrich HTML5, including tables, forms and data displays
Use jQuery UI to create rich and fluid user experiences
Use rich interactions such as drag and drop, sortable data and touch sensitivity
Use jQuery Mobile to create touch-enabled interfaces for mobile devices and tablets
Extend jQuery by creating custom plugins and widgets

+

Understanding the Document Object Model

When the browser loads and processes an HTML document, it creates the Document Object Model(DOM). The DOM is a model where JavaScript objects are used to represent each element in the document, and the DOM is the mechanism by which you can programmatically engage with the content of an HTML document.

Note ■ in principle, the DOM can be used with any programming language that the browser cares to implement. in practice, JavaScript dominates the mainstream browsers, so iam not going to differentiate between the DOM as an abstract idea and the DOM as a collection of related JavaScript objects.

One of the reasons you should care about the relationship between elements that I described in the previous section is that they are preserved in the DOM. As a consequence, you can use JavaScript to traverse the network of objects to learn about the nature and structure of the document that has been represented.

Tip ■ Using the DOM means using JavaScript. if you require a refresher in the basics of the JavaScript language, then see Chapter 4.

In this part of the chapter, I demonstrate some of the basic features of the DOM. For the rest of the book, I focus on using jQuery to access the DOM, but in this section I show you some of the built-in support, in part, to emphasize how much more elegant the jQuery approach can be.

Getting Started with CSS

When the browser displays an element on the screen, it uses a set of properties, known as CSS properties, to work out how the element should be presented. Listing 3-1 shows a simple HTML document.

Understanding CSS Selectors

Notice that there are different kinds of selectors in the flower shop style sheet: some are element names (such as h1 and input), others start with a period (such as .dtableand .row), and yet others start with a pound (#butonDivand #oblock). If you are particularly observant, you will notice that one of the selectors has multiple components: .dcell > *. Each CSS selector selects elements in the document, and the different kinds of selector tell the browser to look for elements in different ways. In this section, I describe the different kinds of selectors that are defined by CSS, starting with the core selectors, which Table 3-3summarizes.

jQuery Basics

Once you have selected the jQuery line that you will be using (the 1.x or 2.x line, as described in Chapter 3), you will have the choice of two files from jquery.com– one with a .jsfile extension and the other with .min.js. For version of the 2.x line that is current as I write this, the files are called jquery-2.0.2.jsand jquery-2.0.2.min.js. The jquery-2.0.2.jsfile is the one generally used during the development of a web site or application. This file is around 240KB and standard JavaScript code. You can open and read the file to learn about how jQuery implements its features and use the browser debugger to figure out what is going wrong if you encounter problems in your code.

Tip ■ jQuery is actively developed, and so by the time you read this a later version will almost certainly have been released. But don’t worry – despite all of the talk of deprecated methods and split development lines, the jQuery apiis incredibly stable, and all of the techniques that ishow you in this book will continue to work as jQuery 1.x and 2.x continue to mature.

The other file, jquery.2.0.2.min.js, is intended for use when you deploy your site or web application to users. It contains the same JavaScript code but has been minified, meaning that all of the whitespace characters have been removed, and the meaningful variable names have been replaced with single-character names to save space. The minified script is almost impossible to read for the purposes of debugging, but it is much smaller. The minification process reduces the size of the file to about 82KB and if you are serving up a lot of pages that rely on jQuery, then this difference can save you significant amounts of bandwidth.

Tip ■ you can download a source map (which has the .min.mapextension) from jquery.com. source maps allow minified code to be more easily debugged. they are a new idea and are not that widely implemented as iwrite this. you can see a simple demonstration at www.html5rocks.com/en/tutorials/developertools/sourcemaps.

Dealing with DOM Objects

jQuery doesn’t replace the DOM; it just makes it a lot easier to work with. The HTMLElementobjects (which I introduced in Chapter 2) are still used, and the jQuery library makes it easy to switch between jQueryobjects and DOM objects. The ease with which you can move from the traditional DOM to jQuery and back is part of the elegance of jQuery and helps you maintain compatibility with non-jQuery scripts and libraries.

Creating jQuery Objects from DOM Objects

You can create jQueryobjects by passing an HTMLElementobject or an array of HTMLElementobjects as the argument to the $function. This can be useful when dealing with JavaScript code that isn’t written in jQuery or in situations where jQuery exposes the underlying DOM objects, such as event processing. Listing 5-14 contains an example. Listing 5-14. Creating jQuery Objects from DOM Objects

In this example, I select the imgelements in the document using the document.getElementsByTagNamemethod, rather than using jQuery directly with a selector. I pass the results of this method (which is a collection of HTMLElement objects) to the $function, which returns a regular jQueryobject that I can use just as in the previous examples. This script also demonstrates how you can create a jQuery object from a single HTMLElementobject:

When you are handling events, jQuery sets the value of the thisvariable to the HTMLElementthat is processing the event. I describe the jQuery event support in Chapter 9, so I don’t want to get into the subject in this chapter (although I do mention the functions that contain these statements again a little later in this chapter).