Skip to main content
main-content

Über dieses Buch

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.

Inhaltsverzeichnis

Frontmatter

Chapter 1. Putting jQuery in Context

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.

Adam Freeman

Chapter 2. HTML Primer

We are going to spend a lot of time in this book working on HTML documents. In this chapter, I set out the information you’ll need to understand what we are doing later in the book. This isn’t an HTML tutorial but rather a summary of the key characteristics of HTML that I rely on in later chapters.

Adam Freeman

Chapter 3. CSS Primer

Cascading Style Sheets (CSS) are the means by which you control the appearance (more properly known as

presentation

) of HTML elements. CSS has a special significance for jQuery for two reasons. The first is that you can use

CSS selectors

(which I describe in this chapter) to tell jQuery how to find elements in an HTML document. The second reason is that one of the most common tasks that jQuery is used for is to change the CSS styles that are applied to elements.

Adam Freeman

Chapter 4. JavaScript Primer

jQuery is a JavaScript library that you add to your HTML documents and that is executed by a browser. You employ the features of the jQuery library by adding your own code to the document as well – and this requires a basic understanding of how to write JavaScript. In this chapter, I provide a primer for the JavaScript language, focusing on the features that are most pertinent when working with jQuery.

Adam Freeman

Chapter 5. jQuery Basics

In this chapter, I will introduce you to your first jQuery script. The script is simple, but it demonstrates many of the most important characteristics of jQuery, including how you select elements in the document, how such selections are presented to you, and the nature of the relationship between jQuery and the built-in DOM API that is part of the HTML specification.

Adam Freeman

Chapter 6. Managing the Element Selection

Most of the time, the use of jQuery follows a distinctive two-step pattern. The first step is to select some elements, and the second step is to perform one or more operations on those elements. In this chapter, I focus on the first step, showing you how to take control of the jQuery selection and tailor it to your exact needs. I’ll also show you how to use jQuery to navigate the DOM. In both cases, you start with one selection and perform operations on it until it contains just the elements you require. As you’ll see, the correlation between the elements you start with and those you finish with can be as simple or as sophisticated as you like.

Adam Freeman

Chapter 7. Manipulating the DOM

In the previous chapter, I showed you how to select elements. One of the most powerful things you can do with the selection is to change the structure of the HTML document itself, known as

manipulating the DOM

. In this chapter, I’ll show you the different ways in which you can alter the structure, including inserting elements as children, parents, or siblings of other elements. I’ll also show you how to create new elements, how to move elements from one part of the document to another, and how to remove elements entirely.

Adam Freeman

Chapter 8. Manipulating Elements

In this chapter, I show you how to use jQuery manipulate elements, including how to get and set attributes, how to use the jQuery convenience methods for working with classes and CSS properties, and how to get and set HTML and text content. I also show you a nice feature that allows you to associate data with elements.

Adam Freeman

Chapter 9. Working with Events

In this chapter, I describe the jQuery support for events. If you are unfamiliar with events, then I provided a brief overview of how they work and how they are propagated through the DOM (Domain Object Model) in Chapter 2. jQuery provides some useful event-related features, of which my favorite is the ability to automatically associate event handler functions with elements as they are added to the DOM.

Adam Freeman

Chapter 10. Using jQuery Effects

For the most part, jQuery UI contains the user interface (UI) functionality associated with jQuery, but the core library includes some basic effects and animations, and these are the topic of this chapter. Although I describe them as basic, they can be used to achieve some pretty sophisticated effects. The main focus is on animating the visibility of elements, but you can use these features to animate a range of CSS properties in a number of ways.

Adam Freeman

Chapter 11. Refactoring the Example: Part I

In the previous chapters, I showed you each functional area in isolation: how to deal with events, how to manipulate the DOM (Domain Object Model), and so on. The real power and flexibility of jQuery arise when you combine these features, and in this chapter, I am going to demonstrate the combination by refactoring the flower shop example document.

Adam Freeman

Chapter 12. Using Data Templates

In the previous edition of this book, I introduced data templates using the

jQuery Templates

plug-in. This history of this plug-in was rather odd. Microsoft and the jQuery team announced that three plug-ins developed by Microsoft had been accepted as “official” plug-ins, a status that had not been accorded to any other plug-in. A while later, the jQuery team announced that the plug-ins were deprecated, that the official status was removed, and that there were plans to replace them with other functionality. A replacement for the template plug-in would be created as part of jQuery UI (which I describe in Part IV of this book).

Adam Freeman

Chapter 13. Working with Forms

In this chapter, I will show you the jQuery support for working with HTML forms. In part, I will recap the form-related events and the jQuery methods you can use to manage them, but most of this chapter is dedicated to a plug-in that provides a great mechanism for validating the values that users enter into a form before it is submitted to a server. If you have written any kind of form-based web application, you will have realized that users will enter all sorts of data into a form, so validation is an important process.

Adam Freeman

Chapter 14. Using Ajax: Part I

Ajax

stands for Asynchronous JavaScript and XML but is generally a word in its own right these days. Ajax allows you to make requests to the server asynchronously, meaning, in short, that your request happens in the background and doesn’t prevent the user from interacting with the content in your HTML document. The most common use for Ajax is to submit data from a

form

element. The advantage of doing this is that the browser doesn’t have to load a new document to display the server’s response and you can use the standard jQuery functions to display the data within the document seamlessly.

Adam Freeman

Chapter 15. Using Ajax: Part II

In this chapter, I show you how to use the low-level jQuery Ajax API (application programming interface). The term

low level

implies rooting around in the guts of the request, but that really isn’t the case. The methods I describe in this chapter are not as convenient as those in Chapter 14, but with a little more effort you can configure the fine detail of the request when the configuration used by the shorthand and convenience methods doesn’t quite do the job.

Adam Freeman

Chapter 16. Refactoring the Example: Part II

I introduced some rich features in this part of the book, and as I did in before in Chapter 11, I want to bring them together to give a broader view of jQuery.

Adam Freeman

Chapter 17. Setting Up jQuery UI

Downloading and installing jQuery UI is more complicated than for other JavaScript libraries. It is not burdensome, but it requires some explanation, which I provide in this chapter. You only need to get set up for development for this book, but I have also included details of how to install the minimized files that are suitable for production deployment and how to use jQuery UI through a content distribution network (CDN).

Adam Freeman

Chapter 18. Using the Button, Progress Bar, and Slider Widgets

Now that you have configured, downloaded, and installed jQuery UI, you can start to look at the widgets it contains. These are the major functional blocks of jQuery UI, and although there are other features (such as effects, which I describe in Chapter 35), jQuery UI is known for the widgets..

Adam Freeman

Chapter 19. Using the Autocomplete and Accordion Widgets

In this chapter, I describe the jQuery UI autocomplete and accordion widgets. They are more complex than the widgets I showed you in Chapter 18, but they follow the same pattern of settings, methods, and events. These are highly configurable, flexible, and clever user interface controls, and used wisely they can significantly enhance the appearance and usability of your documents and web applications.

Adam Freeman

Chapter 20. Using the Tabs Widget

The tabs widget is superficially similar to the accordion that I described in Chapter 19 but offers more functionality and opportunities for customization. In common with the earlier widget chapters, I start with details of how to create the widget and then show you the settings, methods, and events that the widgets support. I finish this chapter with an example of how you can use the tabs widget to present forms to users in sections, which is a useful technique for dealing with long forms that require a lot of data input.

Adam Freeman

Chapter 21. Using the Datepicker Widget

This chapter focuses on the jQuery UI datepicker widget, which provides a convenient mechanism for helping users select dates. Getting date information from users is notoriously problematic because of the wide range of formats in which dates can be expressed. The datepicker widget can make it easier for the user to select a date in a way that is more consistent and less prone to errors and using a regular text

input

element.

Adam Freeman

Chapter 22. Using the Dialog and Spinner Widgets

In this chapter, I describe the jQuery UI dialog and spinner widgets.

Table 22-1

provides the summary for this chapter.

Adam Freeman

Chapter 23. Using the Menu and Tooltip Widgets

In this chapter, I describe the jQuery UI menu and tooltip widgets.

Table 23-1

provides the summary for this chapter.

Adam Freeman

Chapter 24. Using the Drag-and-Drop Interactions

In addition to the widgets I showed you in

Chapters 18

23

, jQuery UI includes a set of

interactions

. These are lower-level building blocks that allow you to add functionality to your web application interface. In this chapter, I describe the

draggable

and

droppable

interactions, which you can use to add drag and drop to an HTML document.

Adam Freeman

Chapter 25. Using the Other Interactions

In this chapter, I describe the three remaining jQuery UI interactions:

sortable

,

selectable

, and

resizable

. These interactions are less used (and less useful) than

draggable

and

droppable

, which I described in Chapter 24. The interactions in this chapter can be useful, but they use models that are hard to highlight to the user. Because of that, they perform best as supplements to other, more conventional, approaches.

Adam Freeman

Chapter 26. Refactoring the Example: Part III

In this part of the book, I introduced you to the jQuery UI widgets and interactions. These allow you to create rich web applications that are consistently themed and that can be endlessly configured and tweaked to meet your needs. In this chapter, I’ll add some of these features to the example to demonstrate how they can fit together.

Adam Freeman

Chapter 27. Getting Started with jQuery Mobile

In this chapter, I show you how to obtain jQuery Mobile and add it to an HTML document. I also explain that jQuery Mobile takes a different approach to creating widgets and how you must adapt to accommodate this approach. Touch-enabled devices provide some unique challenges for web application developers, and I explain some of the core features that jQuery Mobile provides to help simplify the process and set out some general guidance for the development and testing of mobile web apps.

Adam Freeman

Chapter 28. Pages, Themes & Layouts

In this chapter, I describe one of the key building blocks for jQuery Mobile applications:

pages

. I touched on pages in Chapter 27, but now I’ll go into the detail and show how to define, configure, and navigate between pages. I'll also show you two useful jQuery Mobile features for styling and structuring the content in pages: themes and grid layouts.

Adam Freeman

Chapter 29. The Dialog & Popup Widgets

In this chapter, I introduce the first two jQuery Mobile widgets: the dialog and popup. jQuery Mobile widgets behave slightly differently from those in jQuery UI, but – as you'll learn – there is a common approach that underpins both libraries.

Adam Freeman

Chapter 30. Buttons and Collapsible Blocks

In this chapter, I describe two additional jQuery Mobile widgets:

buttons

and

collapsible blocks

. The jQuery Mobile button widget works in a similar way to the jQuery UI buttons you saw earlier in the book, with the exception that you can create and use simple buttons without using any custom JavaScript code at all, relying instead on

data

attributes.

Adam Freeman

Chapter 31. Using jQuery Mobile Forms

There are particular difficulties when presenting a form on a mobile device. There is little enough screen real estate available to start with, and you need to give the user form elements that are easy to manipulate by touch without creating a page that requires endless scrolling to complete. In this chapter, I show you how jQuery Mobile enhances form elements so that they are consistent with other widgets and can be readily used on a touch screen.

Adam Freeman

Chapter 32. Using Lists and Panels

In this chapter, I describe the jQuery Mobile list and panel widgets. Lists are an important tool in building mobile web applications, and they often provide simple and obvious navigation around the different functional areas of a web application. The beauty of lists is that they are compact, even when the individual list items are large enough to be selected by touch. They are also extremely well understood by users. Simply placing an arrow icon at the right edge of a list item (which jQuery Mobile does by default) makes it clear to most users that selecting the item will cause some kind of selection or navigation to occur.

Adam Freeman

Chapter 33. Refactoring the Example: Part IV

In prior chapters in this part of the book, I introduced you to jQuery Mobile. In this chapter, I’ll build a more complete example that uses the jQuery Mobile functionality. By its nature, jQuery Mobile is a lot simpler than jQuery UI, and there are a lot fewer design choices available. Your development efforts with jQuery Mobile are further constrained by the unique issues that face mobile device development.

Adam Freeman

Chapter 34. Using the jQuery Utility Methods

jQuery includes a number of utility methods that perform advanced operations on jQuery objects or which supplement the JavaScript language to provide features that are usually present in programing languages. You may never need any of these methods, but they are used internally by jQuery, and making them publicly available means that you can save time and effort when you come across an odd problem that the jQuery team has already solved.

Adam Freeman

Chapter 35. The jQuery UI Effects & CSS Framework

In this chapter I describe two utility features that jQuery UI provides. The first is a set of enhancements to existing jQuery methods that can animate colors, changes in element visibility, and the application of CSS classes. The other feature is a set of CSS classes that to apply a jQuery UI theme to the rest of our HTML documents in order to create a consistent look across an entire web application.

Adam Freeman

Chapter 36. Using Deferred Objects

Throughout this book, you have seen examples that relied on

callbacks

– you provide a function that is executed when something occurs. A good example is the way events are handled, using a method such as

click

, passing in a function as an argument. The code statements in the function are not performed until the user triggers the event – until that point our function is dormant.

Adam Freeman

Backmatter

Weitere Informationen

Premium Partner

Neuer Inhalt

BranchenIndex Online

Die B2B-Firmensuche für Industrie und Wirtschaft: Kostenfrei in Firmenprofilen nach Lieferanten, Herstellern, Dienstleistern und Händlern recherchieren.

Whitepaper

- ANZEIGE -

Product Lifecycle Management im Konzernumfeld – Herausforderungen, Lösungsansätze und Handlungsempfehlungen

Für produzierende Unternehmen hat sich Product Lifecycle Management in den letzten Jahrzehnten in wachsendem Maße zu einem strategisch wichtigen Ansatz entwickelt. Forciert durch steigende Effektivitäts- und Effizienzanforderungen stellen viele Unternehmen ihre Product Lifecycle Management-Prozesse und -Informationssysteme auf den Prüfstand. Der vorliegende Beitrag beschreibt entlang eines etablierten Analyseframeworks Herausforderungen und Lösungsansätze im Product Lifecycle Management im Konzernumfeld.
Jetzt gratis downloaden!

Bildnachweise