内容目录

jQuery 入门

什么是jQuery

如何使用jQuery

jQuery的运行原理

如何选择jQuery版本

ready() 准备就绪时执行代码

jQuery 核心：选取元素

使用jQuery 选择器选取元素，并封装为jQuery对象

将现有的DOM元素封装为jQuery对象

将HTML字符串封装为jQuery对象

元素筛选

jQuery 核心：DOM操作的原则

切记混淆jQuery对象和Element对象的方法

Get and Set in One 原则

Get first Set all 原则

链式编程风格

智能DOM操作，静默容错

jQuery 核心：DOM操作

属性操作

文档处理

CSS操作

动画效果

jQuery 核心：事件处理

jQuery 核心：Ajax

jQuery 辅助工具方法

遍历方法

DOM元素和jQuery对象的相互转换

jQuery 核心：扩展jQuery对象的属性和方法

jQuery入门

什么是jQuery

在使用jQuery之前，我们必须先了解什么是jQuery，它能够干什么(不然我们为啥要用它)。

jQuery是一个非常流行的快速、小巧、功能强大的开源JavaScript库。就像官方所宣称的那样——”Write less，do more”，它使得我们常用的HTML文档遍历、DOM操作、事件处理、动画效果、Ajax、工具方法等功能代码的实现变得非常简单。更重要的是，它还为我们做了跨浏览器的兼容。绝大多数时候，妈妈再也不用担心我的JS兼容问题了(由于浏览器bug等因素，jQuery也无法100%地实现跨浏览器兼容，官方对这些少数API一般也作了特殊说明，而且这种情况极少遇到，因此可以忽略不计)。

一般而言，需要编写几十行甚至更多的原生JS代码才能实现的功能；使用jQuery，只需要简单的几行甚至一行代码就可以搞定。此外，jQuery还具有灵活的插件扩展机制，这允许第三方人员开发基于jQuery的插件，甚至你也可以快速地编写一个自己的插件。这极大地提高了前端开发人员的开发效率。因此，谷歌、微软、IBM、Facebook等全世界前10000名的网站中有65%以上都使用了jQuery，其它数以百万计的网站也都在使用jQuery。

如何使用jQuery

jQuery的使用非常简单，我们只需要引入jQuery库的js文件，然后直接使用即可。你可以前往官方网站下载jQuery库的js文件，你也可以直接如下在HTML页面中引入该文件的URI。

运行代码

jQuery库的js文件一般有两个版本：一个是jquery-version.js(这里的version表示具体版本号，下同)，一个是jquery-version.min.js。

前者是jQuery库的源代码版本，它带有注释信息，建议你在开发环境中使用该文件，以便于调试或阅读源代码。

后者是前者经过压缩处理后的版本，它去除了多余的注释、空白字符等信息，并缩短了变量的名称，以减小js文件的体积。建议你在生产环境中使用该文件，以便于用户浏览器能够更快地加载jQuery库。

国内许多知名厂商都提供了jQuery库文件的CDN加速服务，你可以在页面中直接引入对应的链接，就可以直接使用其提供的jQuery库，而无需将jQuery库文件放在自己的服务器上再引入。
以下是常用的几个jQuery CDN(均提供多个版本的jQuery库，你可以自行更改版本号的部分，或去掉”.min”以使用源代码版本)：
谷歌：https://ajax.proxy.ustclug.org/ajax/libs/jquery/1.11.1/jquery.min.js
微软：http://ajax.microsoft.com/ajax/jquery/jquery-1.11.1.min.js
百度(推荐)：http://libs.baidu.com/jquery/1.11.1/jquery.min.js 或 http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js
360： http://libs.useso.com/js/jquery/1.11.1/jquery.min.js

jQuery的运行原理

这里我们仅简单地介绍一下jQuery的运行原理。在jQuery库中实际上定义了一个jQuery()方法，它是jQuery库的核心。我们调用该方法并传入指定的参数，就可以返回一个jQuery实例对象，该对象中包含匹配的一个或多个DOM元素。接着，我们就可以使用jQuery对象上的方法来操作它所匹配的DOM元素。

jQuery对象上提供的方法足够我们进行几乎所有的DOM操作。

注意：既然获得的是jQuery对象，你就只能使用
jQuery对象的方法，而不能在jQuery对象上调用DOM元素(Element对象)自身的方法(比如
getElementById())，除非你已经通过某些方式将它转换成了DOM元素。

此外，为了尽可能地减少代码量，jQuery库还为函数jQuery定义了一个别名变量，它们是完全相同的(jQuery === )，因此我们也可以使用

// $是jQuery的别名，因为JS支持使用$作为变量名称，而且$更加简短、易于书写

$("#username").val("Hello CodePlayer!");

如何选择jQuery版本

自jQuery 1.0 发布以来，已经过多次更新，其中增加了许多新的属性和方法，同时也移除了少数过时的属性和方法。目前最新的 1.x 版本为 1.11.1。此外，jQuery还有 2.x 版本(当前最新版本为 2.1.1)，它的API与 1.x 相同，但jQuery 2.x 不再支持IE 6 ~ IE 8。如果你希望兼容IE 6 ~ IE 8，推荐使用 1.x。

一般建议使用最新版本的jQuery。如果你需要使用某个已经被移除的属性或方法，你可以使用包含该属性或方法的jQuery版本。

ready() 准备就绪时执行代码

如果我们在中引入jQuery库文件，并编写相应的jQuery代码来操作DOM元素。这很可能导致操作无法成功，因为此时内的元素可能还没有加载出来，也就获取不到对应的元素。因此，我们一般会将自己的jQuery代码写在ready()事件函数中。ready()函数的作用相当于window.onload，它用于在当前文档加载准备就绪后执行对应的函数。

$(document).ready(function(){

  

  

    // 在这里编写我们希望在DOM准备就绪后执行的代码

});

如果你觉得这种写法有点麻烦，你还可以使用下面这种简写的方法：

// $( function ) 是 $(document).ready( function ) 的简写形式

$( function(){

  

  

    // 在这里编写我们希望在DOM准备就绪后执行的代码

} );

jQuery的ready()函数可以重复调用，绑定的回调函数将在DOM准备就绪后按照绑定顺序依次执行。此外，ready()和window.onload并不兼容，因此不要混合使用。

js文件和内嵌的js代码一般不建议放在标签中，而应该放在内容主体的结束标签