1.2　使用jQuery

jQuery项目主要包括jQuery Core（核心库）、jQuery UI（界面库）、Sizzle（CSS选择器）、jQueryMobile （jQuery移动版）和QUnit（测试套件）五个部分，参考网址如表1.1所示。

表1.1　jQuery参考网址

1.2.1　下载jQuery

访问jQuery官方网站（http://jquery.com/），下载最新版本的jQuery库文件，在网站首页单击“Download jQuery v3.3.1”图标，进入下载页面，如图1.2所示。目前最新版本是3.3.1，本书主要根据3.1.1版本进行讲解。

图1.2　下载jQuery最新版本

在下载页面，如果选择“Download the compressed, production jQuery 3.3.1”选项，则可以下载代码压缩版本，此时jQuery框架源代码被压缩到85KB，下载的文件为jquery-3.3.1.min.js。

如果选择“Download the uncompressed, development jQuery 3.3.1”选项，则可以下载包含注释的未被压缩的版本，大小为266KB，下载的文件为jquery-3.3.1.js。

也可以访问下面网址进行下载。

　https://github.com/jquery/jquery

　https://code.jquery.com/

提示：jQuery全部版本下载网址：http://code.jquery.com/jquery/。

1.2.2　安装jQuery

jQuery库不需要复杂的安装，只需要把下载的库文件放到站点中，然后导入页面中即可。

【示例】导入jQuery库文件可以使用相对路径，也可以使用绝对路径，具体情况根据存放jQuery库文件的位置而定。

     <!doctype html>
     <html>
     <head>
     <meta charset="utf-8">
     <script src="jquery/jquery-3.1.1.js" type="text/javascript"></script>
     <script type="text/javascript">
          //在这里用户就可以使用jQuery编程了!!
     </script>
     <title></title>
     </head>
     <body>
     </body>
     </html>

提示：除了使用上述方法将jQuery库导入页面中，还可以使用jQuery在线提供的库文件，在大多数环境下，推荐使用在线提供的jQuery代码，因为使用在线存储的jQuery更加稳定、高速。

       <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

或者使用Google提供的API进行导入：

       <script type="text/javascript" src="http://www.google.com/jsapi"></script>
       <script type="text/javascript">
       google.load("jquery","3.2.1",{uncompressed:true});
       </script>

google.load()函数包含3个参数，第一个参数为JS库的名称，如jquery、extjs等；第二个参数为该库的版本号，如3.2.1；第三个参数设定是否使用压缩版本的库文件，使用未压缩版本格式为{uncompressed:true} ；前两个参数必选，第三个参数为可选参数。

注意：Google Ajax Libraries API是Google的一个项目，它提供当前流行的各种JavaScript库的快速引用方式，并承诺永久可用。但是，考虑到国内禁用Google大部分服务，目前在国内还无法正常使用。

1.2.3　测试jQuery

引入jQuery库文件之后，就可以在页面中进行jQuery开发了。开发的步骤很简单，在导入jQuery库文件的<script>标签行下面重新使用<script>标签定义一个JavaScript代码段，然后就可以在<script>标签内调用jQuery方法，编写JavaScript脚本。

【示例】在页面初始化完毕后，调用JavaScript的alert()方法与浏览者打个招呼。

     <!doctype html>
     <html>
     <head>
     <meta charset="utf-8">
     <script src="jquery/jquery-3.1.1.js" type="text/javascript"></script>
     <script type="text/javascript">
     $(function(){
         alert("Hi,您好!");
     })
     </script>
     <title></title>
     </head>
     <body>
     </body>
     </html>

在浏览器中预览，可以看到在当前窗口中会弹出一个提示对话框，如图1.3所示。

图1.3　测试jQuery代码

在jQuery代码中，$是jQuery的别名，如$()等效于jQuery()。jQuery()函数是jQuery库文件的接口函数，所有jQuery操作都必须从该接口函数切入。jQuery()函数相当于页面初始化事件处理函数，当页面加载完毕，会执行jQuery()函数包含的函数，所以在浏览该页面时会执行“alert("Hi,您好!");”代码，看到弹出的信息提示对话框。

注意：如果使用jQuery操作DOM文档，则必须确保在DOM载入完毕后开始执行，应该使用ready事件作为处理HTML文档的开始。

         $(document).ready(function() {
             //JavaScript或者jQuery代码
         });

上面代码的语义是，匹配文档中的document节点，然后为该节点绑定ready事件处理函数。它类似于JavaScript的window.onload事件处理函数，不过jQuery的ready事件要先于onload事件被激活。

         window.onload = function(){
             //JavaScript或者jQuery代码
         };

为了方便开发，jQuery框架进一步简化了$(document).ready()方法的写法，直接使用$()方法来表示。

         $( function() {
               //JavaScript或者jQuery代码
         });

考虑到页面加载需要一个过程，所有jQuery代码建议都包含在$()函数中，当然也可以不被包含在$()函数中，这与JavaScript代码应该放在window.onload事件处理函数中的道理是一样的。

上一章目录下一章