1 Introducing jQuery 1 1.jQuery 简介
1.1 Why jQuery? 2 为啥要用jquery
1.2 Unobtrusive JavaScript 3 初涉jquery
1.3 jQuery fundamentals 5 jquery 基础
The jQuery wrapper 6（包） ■ Utility functions（公共函数） 8 ■ The document
ready handler（$()函数） 9 ■ Making DOM elements（DOM元素处理） 11 ■ Extending
jQuery（jQuery 扩展） 12 ■ Using jQuery with other libraries（jquery 舍我其谁） 14
1.4 Summary（小结） 14
1.1 Why jQuery?
If you’ve spent any time at all trying to add dynamic functionality to your pages,
you’ve found that you’re constantly following a pattern of selecting an element or
group of elements and operating upon those elements in some fashion. You
could be hiding or revealing the elements, adding a CSS class to them, animating
them, or modifying their attributes.
如果你随时花时间为你的页面动态添加函数，你会发现你经常选中一个或多个元素并且操作他们，隐藏或启用元素，添加css，动画，修改属性
Using raw JavaScript can result in dozens of lines of code for each of these
tasks. The creators of jQuery specifically created the library to make common
tasks trivial. For example, designers will use JavaScript to “zebra-stripe” tables—
highlighting every other row in a table with a contrasting color—taking up to 10
lines of code or more. Here’s how we accomplish it using jQuery:
如果用原来Javascript随便实现功能都需要，几十行代码。jQuery作者很明确就是要使普通的应用简单化，举例说明：如果要实现表格斑马纹需要10行以上的代码，但是jQuery只要如下的代码
$("table tr:nth-child(even)").addClass("striped");
Don’t worry if that looks a bit cryptic to you right now. In short order, you’ll understand
how it works, and you’ll be whipping out your own terse—but powerful—
不用担心现在看起来对你有点神秘，马上你就会理解，简介但是很强大
jQuery statements to make your pages come alive. Let’s briefly examine how this
code snippet works.
jQuery使你的页面变活了，简单的分析一下这个代码段
We identify every even row (<tr> element) in all of the tables on the page and
add the CSS class striped to each of those rows. By applying the desired background
color to these rows via a CSS rule for class striped, a single line of
Script can improve the aesthetics of the entire page.
我们认为每个偶数行在表格所在的页面中添加斑马纹样式，通过应用期望的背景颜色，javascript能改善整个页面的美感
When applied to a sample table, the effect could be as shown in figure 1.1.
The real power in this jQuery statement comes from the selector, an expression
for identifying target elements on a page that allows us to easily identify and grab
the elements we need; in this case, every even <tr> element in all tables. You’ll
find the full source for this page in the downloadable source code for this book in
file chapter1/zebra.stripes.html.
效果如上图所示，jQuery的真正力量在选择器，一个表达式确认页面中的元素，方便我们抓取我们你需要的元素，这个例子中是全部的偶数行。你能在下载下来的文件中找到这个例子chapter1/zebra.stripes.html.
We’ll study how to easily create these selectors; but first, let’s examine how the
inventors of jQuery think JavaScript can be most effectively used in our pages.
我们将学习如何轻松的创建这些选择器，首先让我们看看作者的想法对我们会更有用
1.2 Unobtrusive JavaScript（初设javascript）
Remember the bad old days before CSS when we were forced to mix stylistic
markup with the document structure markup in our HTML pages?
记得css之前我们被迫使用最少的样式在文档结构中。
Anyone who’s been authoring pages for any amount of time surely does and,
perhaps,（@@@） with more than a little shudder. The addition of CSS to our web development
toolkits allows us to separate stylistic information from the document
structure and give travesties like the <font> tag the well-deserved boot.
有点不寒而栗，样式独立于HTML文档，就不会出现一些像<font>比较可笑的哦标记
Not only does the separation of style from structure make our documents easier to manage, but it also gives us the versatility to completely change the stylistic rendering
of a page by swapping out different stylesheets.
Few of us would voluntarily regress back to the days of applying style with
HTML elements; yet markup such as the following is still all too common:
样式独立于文档结构除了管理法方便，对样式的呈现也可以通过换样式文件改变显示。没有人愿意回到以前样式与文档结构一起的时候。然而下面的的处理方式还是普遍存在。
<button
type="button"
onclick="document.getElementById('xyz').style.color='red';">
Click Me
</button>
We can easily see that the style of this button element, including the font of its
caption, is not applied via the use of the <font> tag and other deprecated style oriented
markup, but is determined by CSS rules in effect on the page.
在按钮的标题上应用了字体，但是不是由<font>等样式标签来实现的，坚决用css规则来作用于页面。
But although this declaration doesn’t mix style markup with structure, it does mix
behavior with structure by including the JavaScript to be executed when the button is
clicked as part of the markup of the button element (which in this case turns some
Document Object Model [DOM] element named xyz red upon a click of the button).
For all the same reasons that it’s desirable to segregate style from structure
within an HTML document, it’s as beneficial (if not more so) to separate the behavior
from the structure.
尽管这种声明不是最小的样式标签对于文档结构，但是这是最小的行为对于这个结构，通过包含javascript来执行按钮的点击事件。种种原因，大家都希望从文档中分离样式，有利于分离行为。
This movement is known as Unobtrusive JavaScript, and the inventors of jQuery
have focused that library on helping page authors easily achieve this separation
in their pages.
Jquery作者的把焦点放在了帮助我们达到分离js与页面的效果
Unobtrusive JavaScript, along with the legions of the jQuery-savvy,
considers any JavaScript expressions or statements embedded in the <body> of
HTML pages,
沿着智能理解jauqry表达式和嵌入式jquery。
either as attributes of HTML elements (such as onclick) or in script
blocks placed within the body of the page, to be incorrect.
“But how would I instrument the button without the onclick attribute?”
把标签或者脚本块放在页面中是不合理的，但是我们如何接收单击事件没有单击属性呢？
You might ask. Consider the following change to the button element:
你也许会思考改编成下面的方式
<button type="button" id="testButton">Click Me</button>
Much simpler! But now, you’ll note, the button doesn’t do anything.
Rather than embedding the button’s behavior in its markup, we’ll move it to a
script block in the <head> section of the page, outside the scope of the document
body, as follows:
这么简单，但是现在请注意，按钮不做任何事情，而不是嵌入事件到标签中，而是要把脚本块放到<head>中，不要放在<body>中，如下：
<script type="text/javascript">
window.onload = function() {
document.getElementById('testButton').onclick = makeItRed;
};
function makeItRed() {
document.getElementById('xyz').style.color = 'red';
}
</script>
We place the script in the onload handler for the page to assign a function, make-
ItRed(), to the onclick attribute of the button element.
把函数makeItRed()放在onload中调用，应用于按钮的单击属性
We add this script in the onload handler (as opposed to inline) because we need to make sure that the button
element exists before we attempt to manipulate it.
把脚本添加到onload中，是为了确保在调用的时候，按钮已经加载进来，
(In section
If any of the code in this example looks odd to you, fear not! Appendix A provides
a look at the JavaScript concepts that you’ll need to use jQuery effectively.
如果你觉得这些代码对你来说有点困难，附录A提供了一些javascript的基本概念，说明如何让jquery能够正确运行
We’ll also be examining, in the remainder of this chapter, how jQuery makes writing
the previous code easier, shorter, and more versatile all at the same time.
我会注意在后面的章节中，把代码写的又容易理解，又简短，又通用
Unobtrusive JavaScript, though a powerful technique to further add to the
clear separation of responsibilities within a web application, doesn’t come without
its price.
这种强大的技术更加清楚了分离的智者，不用就体现不出它的价值了
You might already have noticed that it took a few more lines of script to
accomplish our goal than when we placed it into the button markup. Unobtrusive
JavaScript not only may increase the amount of script that needs to be written,
but also requires some discipline and the application of good coding patterns to
the client-side script.
可能你已经注意到，这种脚本块比放在按钮的标签中行数要多，原始的javascript不但有可能增加更多的脚本，还需要训练和好的模式
None of that is bad; anything that persuades us to write our client-side code
with the same level of care and respect usually allotted to server-side code is a
good thing! But it is extra work—without jQuery.
虽然这也不是啥坏事，这让我们把前台脚本和和后台代码放在了同样的地位上，也是好事，但是这就增加了工作如果不用jQuery
As mentioned earlier, the jQuery team` has specifically focused jQuery on the
task of making it easy and delightful for us to code our pages using Unobtrusive
JavaScript techniques, without paying a hefty price in terms of effort or code bulk
in order to do so.
像前面说的，jQuery小组专注于能简单的快乐的让我们既能达到目的，又不需要花大力气和很多的代码
We’ll find that making effective use of jQuery will enable us to
accomplish much more on our pages by writing less code.
有效的使用jQuery，实现同样的效果，使用很少的代码
Without further ado, let’s start taking a look at just how jQuery makes it so
easy for us to add rich functionality to our pages without the expected pain.
言归正传，看看jQuery如何简单的添加丰富多彩的功能却没有预料的那么痛苦
1.3 jQuery fundamentals
At its core, jQuery focuses on retrieving elements from our HTML pages and performing
operations upon them.
jQuery重点关注从页面获取和操作标签
If you’re familiar with CSS