哈尔滨理工大学学士学位论文
参考文献
1 Jeremy Keith．Javascript DOM programing art．人民邮电出版社，2007：
25~87
2 Nicholas C．Zakas．Professional JavaScript for Web Developers．人民邮电出
版社，2006：85~135
3 李刚．疯狂Ajax讲义．电子工业出版社，2009：325~368
4 Dori Smith，Tom Negrino．Javascript&Ajax Sixth Edition，2007：28~95 5 单东林，张晓菲．锋利的JQuery．人民邮电出版社，2009：1~347 6 曾顺．精通JavaScript+jQuery．人民邮电出版社，2008：168~211 7 柯林森．CSS基础教程．人民邮电出版社，2007：145~187
8 Dave Carane．Ajax in praclice．人民邮电出版社，2008：135~185 9 Jonathan Chaffer．Learning JQuery．人民邮电出版社，2009：1~64
10 陈湘．ASP.NET与网站开发编程实战．清华大学出版社，2004：46~157 11 胡本峰，赵辉．ASP 动态网站开发从基础到实践．电子工业出版社，
2007：10~102
12 胡艳洁．HTML 标准教程．中国青年出版社，2004：1~112
13 Elizabeth Castro．HTML，XHTML，and CSS，Sixth Edition．Peachpit
Press，2007：56~128
14 何翠平．HTML从入门到精通．人民邮电出版社，2007：1~85
15 陆玉柱．中文版Dreamweaver CS3网页制作宝典．电子工业出版社，
2008：18~135
- 39 -
哈尔滨理工大学学士学位论文
附 录
附录A 英文原文 Getting Started
Today's World Wide Web is a dynamic environment, and its users set a high bar for both style and function of sites. To build interesting, interactive sites, developers are turning to JavaScript libraries such as jQuery to automate common tasks and simplify complicated ones. One reason the jQuery library is a popular choice is its ability to assist in a wide range of tasks.
Because jQuery does perform so many different functions, it can seem challenging to know where to begin. Yet, there is a coherence and symmetry to the design of the library; most of its concepts are borrowed from the structure of HTML and Cascading Style Sheets (CSS). Because many web developers have more experience with these technologies than with JavaScript, the library's design lends itself to a quick start for designers with little programming experience. In fact, in this opening chapter we'll write a functioning jQuery program in just three lines of code. On the other hand, experienced programmers will also be aided by this conceptual consistency, as we'll see in the later, more advanced chapters.
But before we illustrate the operation of the library with an example, we should discuss why we might need it in the first place. What jQuery Does
The jQuery library provides a general-purpose abstraction layer for common web scripting, and is therefore useful in almost every scripting situation. Its extensible nature means that we could never cover all possible uses and functions in a single book, as plug-ins are constantly being developed to add new abilities. The core features, though, address the following needs:
Access parts of a page. Without a JavaScript library, many lines of code must be written to traverse the Document Object Model (DOM) tree, and locate specific portions of an HTML document's structure. jQuery offers a robust and efficient selector mechanism for retrieving exactly the piece of the document that is to be inspected or manipulated.
Modify the appearance of a page. CSS offers a powerful method of influencing the way a document is rendered; but it falls short when web browsers do not all support the same standards. jQuery can bridge this gap, providing the same standards support across all browsers. In addition, jQuery can change the classes or individual style properties applied to a portion of the document even after the page has been rendered.
Alter the content of a page. Not limited to mere cosmetic changes, jQuery can modify the content of a document itself with a few keystrokes. Text can be changed,
- 40 -
哈尔滨理工大学学士学位论文
images can be inserted or swapped, lists can be reordered, or the entire structure of the HTML can be rewritten and extended—all with a single easy-to-use API.
Respond to a user's interaction with a page. Even the most elaborate and powerful behaviors are not useful if we can't control when they take place. The jQuery library offers an elegant way to intercept a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers. At the same time, its event-handling API removes browser inconsistencies that often plague web developers.
Add animation to a page. To effectively implement such interactive behaviors, a designer must also provide visual feedback to the user. The jQuery library facilitates this by providing an array of effects such as fades and wipes, as well as a toolkit for crafting new ones.
Retrieve information from a server without refreshing a page. This code pattern has become known as Asynchronous JavaScript and XML (AJAX), and assists web developers in crafting a responsive, feature-rich site. The jQuery library removes the browser-specific complexity from this process, allowing developers to focus on the server-end functionality.
Simplify common JavaScript tasks. In addition to all of the document-specific features of jQuery, the library provides enhancements to basic JavaScript constructs such as iteration and array manipulation.
Why jQuery Works Well
With the recent resurgence of interest in dynamic HTML comes a proliferation of JavaScript frameworks. Some are specialized, focusing on just one or two of the above tasks. Others attempt to catalog every possible behavior and animation, and serve these all up pre-packaged. To maintain the wide range of features outlined above while remaining compact, jQuery employs several strategies:
Leverage knowledge of CSS. By basing the mechanism for locating page elements on CSS selectors, jQuery inherits a terse yet legible way of expressing a document's structure. Because a prerequisite for doing professional web development is knowledge of CSS syntax, jQuery becomes an entry point for designers who want to add behavior to their pages.
Support extensions. In order to avoid feature creep, jQuery relegates special-case uses to plug-ins. The method for creating new plug-ins is simple and well-documented, which has spurred the development of a wide variety of inventive and useful modules. Even most of the features in the basic jQuery download are internally realized through the plug-in architecture, and can be removed if desired, yielding an even smaller library.
Abstract away browser quirks. An unfortunate reality of web development is that each browser has its own set of deviations from published standards. A significant portion of any web application can be relegated to handling features differently on each platform. While the ever-evolving browser landscape makes a perfectly browser-neutral code base impossible for some advanced features, jQuery adds an abstraction layer that normalizes the common tasks, reducing the size of code, and tremendously
- 41 -
哈尔滨理工大学学士学位论文
simplifying it.
Always work with sets. When we instruct jQuery, Find all elements with the class 'collapsible' and hide them, there is no need to loop through each returned element. Instead, methods such as .hide() are designed to automatically work on sets of objects instead of individual ones. This technique, called implicit iteration, means that many looping constructs become unnecessary, shortening code considerably.
Allow multiple actions in one line. To avoid overuse of temporary variables or wasteful repetition, jQuery employs a programming pattern called chaining for the majority of its methods. This means that the result of most operations on an object is the object itself, ready for the next action to be applied to it.
These strategies have kept the jQuery package slim—roughly 20KB compressed—while at the same time providing techniques for keeping our custom code that uses the library compact, as well. Finding the Poem Text
The fundamental operation in jQuery is selecting a part of the document. This is done with the $() construct. Typically, it takes a string as a parameter, which can contain any CSS selector expression. In this case, we wish to find all parts of the document that have the poem-stanza class applied to them; so the selector is very simple, but we will cover much more sophisticated options through the course of the book. We will step through the different ways of locating parts of a document in Chapter 2.
The $() function is actually a factory for the jQuery object, which is the basic building block we will be working with from now on. The jQuery object encapsulates zero or more DOM elements, and allows us to interact with them in many different ways. In this case, we wish to modify the appearance of these parts of the page, and we will accomplish this by changing the classes applied to the poem text. Injecting the New Class
The .addClass() method is fairly self-explanatory; it applies a CSS class to the part of the page that we have selected. Its only parameter is the name of the class to add. This method, and its counterpart, .removeClass(), will allow us to easily observe jQuery in action as we explore the different selector expressions available to us. For now, our example simply adds the emphasized class, which our stylesheet has defined as italicized text with a border.
Note that no iteration is necessary to add the class to all the poem stanzas. As we discussed, jQuery uses implicit iteration within methods such as .addClass(), so a single function call is all it takes to alter all of the selected parts of the document. Executing the Code
Taken together, $() and .addClass() are enough for us to accomplish our goal of changing the appearance of the poem text. However, if this line of code is inserted alone in the document header, it will have no effect. JavaScript code is generally run as soon as it is encountered in the browser, and at the time the header is being processed, no HTML is yet present to style. We need to delay the execution of the code until after the DOM is available for our use.
- 42 -
哈尔滨理工大学学士学位论文
The traditional mechanism for controlling when JavaScript code is run is to call the code from within event handlers. Many handlers are available for user-initiated events, such as mouse clicks and key presses. If we did not have jQuery available for our use, we would need to rely on the onload handler, which fires after the page (along with all of its images) has been rendered. To trigger our code from the onload event, we would place the code inside a function:
function emphasizePoemStanzas() { $('.poem-stanza').addClass('emphasized'); }
Then we would attach the function to the event by modifying the HTML
tag to reference it:This causes our code to run after the page is completely loaded.
There are drawbacks to this approach, though. We altered the HTML itself to effect this behavior change. This tight coupling of structure and function clutters the code, possibly requiring the same function calls to be repeated over many different pages, or in the case of other events such as mouse clicks, over every instance of an element on a page. Adding new behaviors would then require alterations in two different places, increasing the opportunity for error and complicating parallel workflows for designers and programmers.
To avoid this pitfall, jQuery allows us to schedule function calls for firing once the DOM is loaded—without waiting for images—with the $(document).ready() construct. With our function defined as above, we can write:
$(document).ready(emphasizePoemStanzas);
This technique does not require any HTML modifications. Instead, the behavior is attached entirely from within the JavaScript file. We will learn how to respond to other types of user actions, divorcing their effects from the HTML structure as well, in Chapter 3.
This incarnation is still slightly wasteful, though, because the function emphasizePoemStanzas() is defined only to be used immediately, and exactly once. This means that we have used an identifier in the global namespace of functions that we have to remember not to use again, and for little gain. JavaScript, like some other programming languages, has a way around this inefficiency called anonymous functions (sometimes also called lambda functions). We arrive back at the code as originally presented:
$(document).ready(function() {
$('.poem-stanza').addClass('emphasized'); }); By using the function keyword without a function name, we define a function exactly where it is needed, and not before. This removes clutter and brings us back down to three lines of JavaScript. This idiom is extremely convenient in jQuery code, as many methods take a function as an argument and such functions are rarely reusable.
- 43 -