jquery怎么安装(jquery下载教程) 收藏 0

jQuery 安装

本节我们学习 jQuery 的安装，我们在实际项目中，如果要使用 jQuery，则需要先下载 jQuery 库，然后把它引入到要使用的网页中。

jQuery 有下面几种使用方法：

• 从官网下载 jQuery 库，然后引入到页面中。
• 使用命令安装 jQuery，例如 npm、bower 命令。
• 从 CDN 中载入 jQuery， 比如从 Google 中加载 jQuery。

我们 可以在 jQuery 的官网下载 jQuery，下载地址为：https://jquery.com/download/。

有两个版本的 jQuery 可供下载：

• 生产版本：用于实际网站中，已被精简和压缩。
• 开发版本：用于测试和开发，未压缩，是可读代码。

我们根据需要下载相应的版本，例如我下载的是 jquery-3.5.1.min.js 文件，然后可以把下载好文件放到与网页相同的目录中，这样更方便使用。

接着就可以在页面中引入 jquery 文件啦，引入格式如下所示：

jQuery 在 npm 上注册为软件包，所以我们可以使用 npm CLI 命令安装最新版本的 jQuery：

或者使用 Yarn 命令安装也可以：

使用这两种方式安装 jQuery，我们可以在 node_modules/jquery/dist/ 中找到一个未压缩的发行版，一个压缩的发行版和一个映射文件。

除了 npm，jQuery 还通过 Bower 注册为软件包，所以我们也可以使用 bower 命令安装最新版本的 jQuery：

使用这种方式，会将 jQuery 安装到 Bower 的安装目录，默认为 bower_components。我们可以在 bower_components/jquery/dist/ 目录下找到一个未压缩的发行版，一个压缩的发行版和一个映射文件。

如果我们不希望下载并存放 jQuery 的话，我们也可以从 CDN（内容分发网络）引用它。

CDN 是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

比如谷歌和微软服务器都存有 jQuery，如果我们需要引用的话，可以像下面这样：

• Google 引用 jQuery：<script src=\”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\”></script>
• Microsoft 引用 jQuery：<script src=\”https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js\”></script>

上面我们讲到了 jQuery 的几种安装方式，在后面的学习章节中，我们会采用直接在官网下载 jQuery 库，然后在页面中引用的方式来使用 jQuery 。

怎样下载和安装HBuilder软件？【附HBuilder快捷键】

HBuilder是一款深度集成Eelipse的IDE编辑器，但其主要集中在Web前端的开发，不能进行Java等后台开发。HBuilder提供了对JavaScrijpt、jQuery、HTML5+、MUI等语法的提示功能，同时包含很多快捷键，让前端开发更加便捷。

访问HBuilder官方网站(http://www.dcloud.io),下载最新版的HBuilder,如下图所示。

在图上图中单击“下载”按钮，会出现下载提示框，如下所示。

在图片中可以看到HBuilder的当前版本、历史版本以及各平台的不同版本，读者在下载时根据自己的设备选择适合的版本即可。

HBuilder下载完成，解压到指定的路径后，双击启动文件HBuilder.exe,会出现一个启动页面，完成用户注册并登录后，便可开始使用HBuilder。HBuilder开发界面如图所示。

在上图中，左侧项目管理器中会出现一个名称为HelloHBuilder的示例项目，右侧会出现一个HBuilder入门的窗口，该窗口中显示的内容是HBuilder官方的使用教程，提供了HBuilder的详细使用方法。

下面以新建项目、新建文件以及运行文件为例简单讲解HBuilder的使用。

首先，在C盘下创建jQuery目录用于保存项目文件。然后选择“文件”一“新建”→“Web项目”命令，打开“创建Web项目”对话框，如下所示。

在上图中，填写项目名称(如chapter01ln,选择项目的保存位置(如C：\\jQuery)，单击“完成”按钮创建Web项目。

最后，编写项目中默认的文件index.html,利用HBuilder提供的工具完成文件的运行，页面效果如下。

在上图中，单击方框内的图标，即可在浏览器运行此文件，页面效果如下所示。

HBuilder中有很多快捷键，开发者使用这些快捷键，可以更加高效地工作。HBuilder常用快捷键如表所示。

HBuilder 常用快捷键

jQuery基础回顾——jQuery与Ajax应用

Ajax全称为“Asynchronous JavaScript XML”(异步javaScript和XML)，它并不是指一种单一的技术，而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。

• 不需要插件的支持

Ajax不需要任何浏览器插件，就可以被绝大多数主流浏览器所支持，用户只需要允许javaScript在浏览器上执行即可。

• 优秀的用户体验

这是Ajax技术的最大优点，能在不刷新整个页面的前提下更新数据，这使得Web应用程序能更为迅速地回应用户的操作。

• 提高Web程序的性能

与传统模式相比，Ajax模式在性能上的最大区别就在于传输数据的方式，在传统模式中，数据提交时通过表单(Form)来实现的，而数据获取是靠全页面刷新来重新获取整页的内容，Ajax模式只是通过XMLHttpRequest对象向服务器提交希望提交的数据，即按需发送。

• 减轻服务器和宽带的负担

Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化，它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和宽带的负担。

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。XMLHttpRequest对象最早是在Microsoft Internet Explorer 5.0 ActiveX组件中被引入的，之后各大浏览器厂商都以javaScript内置对象的方式来实现XMLHttpRequest对象，虽然大家对它的实现方式有所区别，但是绝大多数浏览器都提供了类似的属性和方法，而且在实际脚本编写方法上的区别也不大，实现的到的效果也基本相同。

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。

1、load()方法

• 远程载入HTML文件

load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入到DOM中，它的结构为：

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。

等DOM元素加载完毕后，通过单击id为“send”的按钮来调用load()方法，然后将test.html的内容加载到id为“resText”的元素里。

显然，load()方法完成了原本很繁琐的工作，开发人员只需要使用jQuery选择器为HTML片段指定目标位置，然后将要要加载的文件的URL作为参数传递给load()方法即可，当单击按钮后，test.html页面的HTML内容就会被加载并插入对应元素中。

• 筛选载入的HTML文件

上个例子是将test.html页面中的内容都加载到id为“resText”的元素里，如果只需要加载test.html页面内的某些元素，那么可以使用load()方法的URL参数来达到目的，通过为URL参数指定选择符，就可以很方便地从加载过来的HTML文档里筛选出所需要的内容。

load()方法的URL参数的语法结构为“url selector”,注意，URL和选择器之间有一个空格，例如只需要加载test.html页面中class为“para”的内容，可以使用如下代码来完成：

• 传递方式

load()方法的传递方式根据参数data来自动指定，如果没有参数传递，则采用GET方式，反之，则会自动转换为POST方式。

• 回调参数

对于必须在加载完成后才能继续的操作，load()方法提供了回调函数（callback），该函数有3个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象，jQuery代码如下：

2、$.get()方法和$.post()方法

load()方法通常用来从Web服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值，在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()或者$.post()方法（或$.ajax()方法）。

• $.get()

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

示例代码如下：

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

• $.post()

它与$.get()方法的结构和使用方式都相同，不过它们之间仍然有以下区别。

1. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器，当然，在Ajax请求中，这种区别对用户是不可见的。
2. GET方式对传输的数据有大小限制（通常不能大于2KB），而是用POST方式传递的数据量要比GET方式大得多（理论上不会受限制）。
3. GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等，在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说就可以避免这些问题。
4. GET方式和POST方式传递的数据在服务器端的获取也不相同，在jsp中，GET方式的数据可以用Request.QueryString获取，而POST方式可以用Request.Form获取。

上面使用load()、$.get()和$.post()方法完成了一些常规的Ajax程序，如果还需要编写一些复杂的Ajax程序，那么就要用到jQuery中的$.ajax()方法，$.ajax()方法不仅能实现与load()、$.get()和$.post()方法同样的功能，而且还可以设beforeSend(提交前回调函数)、error(请求失败后处理)、success(请求成功后处理)以及complete(请求完成后处理)回调函数，通过这些回调函数，可以给用户更多的Ajax提示信息，另外，还有一些参数，可以设置Ajax请求的超时时间状态等。

3、$.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现，它的结构为：

url:一个用来包含发送请求的URL字符串。

settings:AJAX 请求设置。所有选项都是可选的。

settings选项1

settings选项2

若感觉对您有用，可以关注并转发，您的关注是对我莫大的支持！

上一节：

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com