今天，努力

Suppose that we wanted to be able to hide our style switcher when it is not needed. One convenient way to hide advanced features is to make them collapsible. We will allow one click on the label to hi

了解过jquery对选择器的扩展吗？这篇文章介绍一下jquery独有的定制选择器，比如:eq(1)，虽然不常用，但是在某些时候会方便我们查找一些元素

Let's say we want to have different styles for different types of links. We first define the styles in our stylesheet, as follows:a { color: #00c; }a.mailto { background: url(images/mail.png) no-rep

$(document).ready()结构事实上是调用了我们从一个DOM元素创建的jquery对象的.ready()方法。由于这些相同的任务，$()函数为我们提供了一个快捷方式。当我们把一个函数作为参数传递进去的时候，jquery会隐式调用.ready()方法。

window.onload事件只能使用一次，当我们为.onload绑定两个事件以后，第二个将会覆盖掉第一个，有没有想过jquery是怎么处理.onload事件触发两个事件的情况？这一章节就主要讲如何处理页面上多个脚本被触发的情况。

关于jquery的属性选择器，可以使用简单的正则，&=,^=,*= 这些你在使用jquery的属性选择器的时候用过么？

Let's suppose that we want the top-level items, and only the top-level items, to be arranged horizontally. We can start by defining a horizontalclass in the stylesheet:.horizontal {float: left;list-

我们来好好讲一下window.onload和$(document).ready()的区别window.onload事件在文档完全被加载到浏览器的时候执行。这意味着网页上每一个元素已经可以被js操纵了。这对我们写有特色的代码而不用担心加载顺序这一点是一个福利。另一方面，使用$(document).ready()注册的方法在DOM结构完全可以使用的时候被调用。这也意味着所有的元素可以通过我们的脚本来接触到，但是这不意味着所有相关的文件已经被下载下来了。一旦HTML已经被加载而且被解析成DOM树的时候，这段代

j s有几个内置的方法对用户的操作和其他事件作出反应。为了让一个网页是动态的，而且可响应我们需要驾驭这种能力，以便于我们可以在恰当的时间使用我们目前学到的jquery基数和一会学到的其他技巧。尽管我们可以通过js来做这些事情，jquery扩展增强了基本事件的处理能力，提供了更加优雅的语法，同时让他变的更加强大。

我们已经看到了如何让jquery为加载网页做出反应。$(document).ready()事件处理器可以被用来启动一段代码的函数作用，但是这里还有有一些东西需要讲一下。

渐进增强有责任感的jquery开发者应该总是应用渐进增强和优雅降级的概念到自己代码中，确保这个网页将会精确的渲染，即使在js被禁用后不是像启用js后的那么漂亮。我们将在整本书中继续探索这个概念

One of the most powerful aspects of jQuery is its ability to make selecting elements in the DOM easy. The Document Object Model serves as the interface between JavaScript and a web page; it provides a

无论我们想在jquery中使用哪种类型的选择器，我们总是使用相同的函数$()开头。这个函数典型的接受一个css选择器作为他的基础的元素，然后作为一个工厂放回一个指向网页上相应元素的的新的jquery对象。任何能被样式表使用的东西都可以作为字符串传递给这个方法，允许我们把jquery方法应用到匹配的元素上。

To complete these exercises, you will need the index.htmlfile for this chapter, as well as the finished JavaScript code as found in complete.js. These files can be downloaded from the Packt Publishing

这一章，我们讲讲jquery的定制选择器，比如:nth-child(),:contains(),原来jquery的选择器这么强大，使用:contains()就可以直接获取到包含某一个文本的DOM节点，不用什么遍历去判断了

我们可能想到.next() .nextAll()方法有着类似的东东：.prev() .prevAll()。另外，.siblings()选择了所有的在同一DOM层级的其他的元素，而不管他们是出现在之前选择的元素的前面还是后面。

大部分jquery事件处理方法和原生的DOM方法相对应。然而少数的一般处理器被添加进来了，用来提供便利和跨浏览器的兼容性。我们曾经很细节的讨论过的.ready()就是其中之一的方法。另外，括.mouseenter(),.mouseleave(),focusin()和focusout()方法，规范化IE的同名事件。两个一般jquery处理器，.toggle()和.hover()被用来当作复合事件处理器，因为他们拦截了用户的连续事件，同时使用多个函数做出反应。

我们刚刚完成的代码优化是一个代码重构的例子——修改已经存在的代码，让他们以一种更加高效更加强大的方式实现相同的任务。为了更深入的研究重构的可能，我们看一下绑定到每一个按钮的行为。.removeClass()的参数是可选的，当被省略后，它将移除这个元素的所有的类。我们可以通过这个特点来让我们的代码更加高效，。

We now have a Large Printbutton that works as advertised, but we need to apply similar handling to the other two buttons (Defaultand Narrow Column) to make them perform their tasks. This is straightfo

当事件处理器被触发以后，关键词this会指向行为被附加的DOM元素。之前，我们说过，$()可以使用DOM元素作为他的参数，这就是这种能力可以使用的关键因素之一。通过在事件处理器中书写$(this)，我们创建了一个相应的jquery对象，然后可以像我们使用css选择器定位了他一样来在上面添加行为。

给一个事件绑定处理器，比如click事件，是一个相当常见的任务，因此jquery提供了一个更加简洁的方法来实现。事件处理快捷方式按照在bind方法中相同的方法工作，但是却可以少输入一些字母。

渐进增强在真实世界中，一个好的we b开发者将使用渐进增强的原则。在js不可用的时候风格切换器应该被隐藏，或者仍然可以通过链接到不同版本的网页来生效。为了这个教学的目的，我们假定所有用户的js功能都被开启了。样式切换器的html标记如下：

拥有了本章我们讲过的知识后，我们现在可以通过很多方法定位网页上的一串元素。特别的，我们学会了使用基础的css选择器在嵌套的结构中去定位顶部和子级的元素，学会了使用属性选择器为不同类型的链接加上不同的样式，使用定制选择器:odd和:even或者高级选择器:nth-child()给一个表加上交替的条纹，使用链状jquery方法为特定的表格块高亮文本。

每一个选择器表达式和大部分的jquery方法返回了一个jquery对象。至几乎总是我们想要的，因为它提供了隐式迭代和链锁所用。然而在我们的代码中还有有一些地方我们想要接触到DOM元素。比如，我们可能想让一系列元素可以让其他的js库使用。另外，我们可能需要接触到一个元素的名字，使用DOM元素的属性可以做到这一点。对这些公认很少出现的场景，jquery提供了.get()方法可以由jquery对象引用。我们将使用.get(0)。如果DOM元素是在一个循环中被需要的，我们将使用.get(index)。

我们探索过的遍历方法范例展示了jquery的链状能力。使用jquery，我们可以选择很多元素组合，然后在他们身上做很多事情，而这只需要一行代码。战中链锁不仅仅让jquery代码变得简洁，而且还能提高在我们重新选择元素时脚本选择元素的性能。

尤其是.filter()方法有着巨大的魔力，因为他可以把一个函数作为参数。这个函数允许我们创建一个复杂的测试用来判断元素是否应该被存放在集合中。比如，让我们假设，我们想要给所有的外部链接添加一个类。jquery对这种场景并没有一个选择器。在没有一个过滤方法的情况下，我们将强迫显式循环遍历每一个元素，分开测试每一个元素。然而通过使用下面的过滤函数，我们仍然依靠jqueyr的隐式迭代，让我们的代码很紧凑：

The capabilities of custom selectors are not limited to locating elements based on their position. For example, when working with forms, jQuery's custom selectors and complementary CSS3 selectors can

有很多时候，我们想绑定一些事件，而不仅仅是在加载网页的时候触发。正如js允许我们使用<body onload=''>和window.onload监听网页加载事件，他也提供了相似的拦截器用来对用户事件作出反应，比如鼠标的点击事件（onclick），表单元素被修改（onchange）和窗口大小被修改（onresize）。当我们直接绑定到DOM中的元素上的时候，这些拦截器和之前我们描述过的onload有着相似的缺点。因此，jquery对这些方法也提供了高级的处理方法。

在某些场景下，在一个网页上不仅仅使用一个js库可能是很有用的。由于很多库使用＄标示符（因为他很短而且很方便），我们需要阻止这些库的冲突。

The topic of selectors and traversal methods will be explored in more detail in Chapter 9. A complete list of jQuery's selectors and traversal methods is available in Appendix Cof this book, in jQuery

到此，Learning jQuery第一章：入门指南 翻译结束，这里是最后的总结。从头开始重新审视jquery，感觉jquery真是一个好东西啊，虽然移动端前端开发库选择很多，但是不得不说PC端，还是首选jQuery

jquery是如何实现那么多功能的同时，还保持相对的简单呢？下面这一章节介绍了jquery优雅实现这么多功能而使用的策略

这是一个jquery入门的小小的范例，讲解了jquery的引入，方法的注入，和方法的执行。对jquery的基本的使用做了一个入门式的指引。

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.在这本书中，你将发现

jquery背后的承诺——提供简单的查找和操控元素的方法——自这个项目发展以来没有改变过，但是一些语法细节和特点修改过。下面的历史概览描述了一个个版本最重要的改变，对使用旧版本和想升级的人可能有所帮助

This book is for web designers who want to create interactive elements for their designs, and for developers who want to create the best user interface for their web applications. Basic JavaScript pro

In Chapter 1, Getting Started, you'll get your feet wet with the jQuery JavaScript library. The chapter begins with a description of jQuery and what it can do for you. It then walks you through downlo

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 librar

I feel honored knowing that Karl Swedberg and Jonathan Chaffer undertook the task of writing Learning jQuery. As the first book about jQuery, it set the standard that other jQuery—and, really, other J

Kaiser Ahmedis a professional web developer. He has gained his Bachelor's Degree from Khulna University of Engineering and Technology (KUET). He is also a co-founder of fully outsourcing company Cyber