Author: Adam Freeman
Pub Date: 2013
Size: 26 Mb
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
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.
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.
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
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).