jQuery 快速入门教程_H5之家 - 中国HTML5教程资源分享第一站

内容目录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。

<script src="//code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>  <script type="text/javascript"> // 以下代码将把id为username的元素的value值改为"Hello CodePlayer!"。 jQuery("#username").val("Hello CodePlayer!"); </script>

运行代码

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

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

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

国内许多知名厂商都提供了jQuery库文件的CDN加速服务，你可以在页面中直接引入对应的链接，就可以直接使用其提供的jQuery库，而无需将jQuery库文件放在自己的服务器上再引入。

以下是常用的几个jQuery CDN(均提供多个版本的jQuery库，你可以自行更改版本号的部分，或去掉".min"以使用源代码版本)：

谷歌：https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
微软：
百度(推荐)：或
360：

jQuery的运行原理

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

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

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

此外，为了尽可能地减少代码量，jQuery库还为函数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() 准备就绪时执行代码

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

$(document).ready(function(){ // 在这里编写我们希望在DOM准备就绪后执行的代码 });

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

// $( function ) 是 $(document).ready( function ) 的简写形式 $( function(){ // 在这里编写我们希望在DOM准备就绪后执行的代码 } );

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

js文件和内嵌的js代码一般不建议放在<head>标签中，而应该放在内容主体的结束标签</body>之前。从而让浏览器先加载页面内容，然后再加载并解析执行js代码。这样可以让网速较慢的用户能够更快地看到页面的展示内容，提高用户体验。
jQuery 核心：选取元素

上面我们介绍了jQuery的一些基本知识，现在我们来详细了解一下如何真正上手jQuery。

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

在JS原生DOM中，我们想要对DOM元素进行操作，首先得获取到对应的元素(getElementById()、 getElementsByTagName()等)，然后再对这些元素进行操作。

同样的，jQuery也需要先选取所需的DOM元素，然后再针对这些元素进行操作。我们先来看看jQuery如何获取所需的元素。