怎样下载和安装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？
随着Web前端技术的不断发展，互联网上诞生了很多优秀的JavaScript框架，这些框架基本上都封装了JavaScript、DOM和Ajax等操作的功能，为开发人员提供了更加快捷、强大的开发方式。常见的JavaScript框架有jQuery、Prototype、ExtJS和等。
jQuery因其简洁的语法和跨浏览器的兼容性特点，极大地简化了开发人员对DOM对象、事件处理、动画效果和Ajax的操作，目前已经从其他框架中脱颖而出，成为Web开发人员的最佳选择。
jQuery框架的特点可以归纳为以下几点：
· jQuery是一个轻量级的脚本，其代码非常小巧。
· 语法简洁易懂，学习速度快，文档丰富。
· 支持CSS1~css3定义的属性和选择器。
· 跨浏览器，支持的浏览器包括IE、FireFox、Chrome等。
· 实现了JavaScript脚本和HTML代码的分离，便于后期编辑和维护。
· 插件丰富，可以通过插件扩展更多功能。
jQuery的官方网站提供了jQuery框架最新版本的下载，如下图所示。
从上图中可以看出，目前的jQuery最新版本是v3.5.1。由于jQuery在2.x版本以后就不再支持1E6/7/8浏览器，可以使用IE浏览器通过访问地址code.jquery.com/jquery-3.5.1.min.js下载此版本。如果需要下载其他版本的jQuery，只需要更改上述地址中的版本号，并使用IE浏览器即可快速下载。
jQuery的使用非常简单，只要在HTML(或JSP)中引入一个外部JavaScript文件即可，其引入代码如下所示：
上述代码表示引入当前目录下的“jquery-3.5.1.min.js”文件。将jQuery文件引入之后，就可以使用jQuery的各种功能了，下面通过简单的案例演示jQuery的使用。
1.创建项目
在Eclipse中创建一个名称为chapterl5的Web项目，在项目的WebContent目录下创建一个名称为js的文件夹，并将下载的jquery-1.11.3.min.js文件放置在文件夹中。
2.创建hello.jsp文件
在WebContent目录下创建一个名称为hell.jsp的文件，在该文件的<head>标记中引入jQuery类库文件，并使用jQuery编写一个弹出对话框，其代码如下所示：
在上述代码中，$(document).ready(function(){……})表示页面加载完成后执行匿名函数function()，相当于JavaScript中的windows.onload函数。这里还可以简写成$().ready(function(){……})或$(function(){……})这样的形式。
3.运行程序并查看结果
发布项目并启动服务器，在浏览器的地址栏中输入http://localhost:8080/chapter15/hello.jsp访问hello.jsp，浏览器的显示“Hello World!”。因为hello.jsp页面文件载入后自动弹出了“ Hello World!”对话框，这说明 jQuery已经可以正常使用。
在jQuery中，符号$的使用最为频繁。$本质上是一个函数，该函数根据其参数的不同可以实现不同的功能，如作为选择器使用、作为功能函数的前缀、创建页面的DOM节点等。此外，还可以使用 jQuery代替$，例如$(document)可以写成jQuery(document)。$实际上是 jQuery的简写形式。
想要学习jQuery，可以点击“了解更多”获取免费的学习教程哦！
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 。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
