对于刚接触 web 开发的同学来说，已经注意到 web 项目主要包括三部分

• html: 控制页面的结构
• css: 决定页面的样式
• JavaScript: 主要是和页面相关的逻辑

这三者里，可能 js 部分更加抽象一些

当我们想使用 js 直接去获取服务器数据或者修改页面展示的时候，需要写大量的代码

jQuery 这个JS库，把 js 中最为常用的一些功能进行了封装，使得我们可以通过 jQuery 的一些方法轻松实现我们的功能

引入 jQuery

引入的方式有多种

1. 下载到本地，写到 script 的 src 属性下
2. 也可以将其 CDN地址放到 script 的 src 属性
3. 通过 npm 命令行工具装载到项目中

**CDN（内容分发网络）将 jQuery 放在分布于全国甚至全球的服务器中，这样一来就可以快速地到达用户的浏览器。使用 CDN 还有一个好处是，如果其它网站和你使用了相同的 CDN ，那它们会在用户浏览器中留下一份缓存，这样你的网站就不必重复加载。

使用 jQuery

1
2
3
4
5

$(document).ready(function() {

  // Your code

});

引入了 jQuery 之后，我们就可以在上面这个方法内写我们的 jQuery 代码了。

$(document).ready是说在文档就绪之后才开始运行 jQuery 代码。为什么这么做呢，是因为我们写的 jQuery 代码里可能会有针对文档内容的操作，这就要需要保证在对文档操作时我们的操作目标是存在的，否则会出错

接下来我们就可以利用 jQuery 实现想要的功能了

DOM 操作

1
2

// 将类名为 continue 的 button 里的内容设置为 Next Step...
$( "button.continue" ).html( "Next Step..." )

事件处理

1
2
3
4
5

// 点击 id 为 button-container 下的 button 时，将 id 为 banner-message 的元素显示出来
var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
  hiddenBox.show();
});

Ajax

1
2
3
4
5
6
7
8
9
10

// 向 /api/getWeather 这个接口发送请求，请求成功后将结果显示到页面上
$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( result ) {
    $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );
  }
});

想要实现更丰富的功能，可以看 jQuery 的文档

DOM 操作、动画、事件处理、Ajax…… jQuery 在多个方面便利了我们的开发工作。除此之外，我们还有大量的基于 jQuery 的插件可用。