第1章 认识JavaScript语言和jQuery

1.1 JavaScript 概述

• 1995 年，JavaScript 问世。当时，它的主要用途是代替 Perl 等服务器端语言处理输入验证。在此之前，要验证某个必填字段是否已填写，或者某个输入的值是否有效，需要与服务器的一次往返通信。网景公司希望通过在其 Navigator 浏览器中加入 JavaScript 来改变这个局面。在那个普遍通过电话拨号上网的年代，由客户端处理某些基本的验证是让人兴奋的新功能。缓慢的网速让页面每次刷新都考验着人们的耐心。

• 从那时起，JavaScript 逐渐成为市面上所有主流浏览器的标配。如今，JavaScript 的应用也不再局限于数据验证，而是渗透到浏览器窗口及其内容的方方面面。JavaScript 已被公认为主流的编程语言，能够实现复杂的计算与交互，包括闭包、匿名（lambda）函数，甚至元编程等特性。不仅是桌面浏览器，手机浏览器和屏幕阅读器也支持 JavaScript，其重要性可见一斑。就连拥有自家客户端脚本语言 VBScript的微软公司，也在其 Internet Explorer（以下简称 IE）浏览器最初的版本中包含了自己的 JavaScript 实现。

从简单的输入验证脚本到强大的编程语言，JavaScript 的崛起没有任何人预测到。它很简单，学会用只要几分钟；它又很复杂，掌握它要很多年。要真正学好用好 JavaScript，理解其本质、历史及局限性是非常重要的。

1.1.1 JavaScript的历史

• 随着 Web 日益流行，对客户端脚本语言的需求也越来越强烈。当时，大多数用户使用 28.8kbit/s 的调制解调器上网，但网页变得越来越大、越来越复杂。为验证简单的表单而需要大量与服务器的往返通信成为用户的痛点。想象一下，你填写完表单，单击“提交”按钮，等 30 秒处理，然后看到一条消息，告诉你有一个必填字段没填。网景在当时是引领技术革新的公司，它将开发一个客户端脚本语言来处理这种简单的数据验证提上了日程。

• 1995 年，网景公司一位名叫 Brendan Eich 的工程师，开始为即将发布的 Netscape Navigator 2 开发一个叫 Mocha（后来改名为 LiveScript）的脚本语言。当时的计划是在客户端和服务器端都使用它，它在服务器端叫 LiveWire。为了赶上发布时间，网景与 Sun 公司结为开发联盟，共同完成 LiveScript 的开发。就在 Netscape Navigator 2 正式发布前，网景把 LiveScript 改名为 JavaScript，以便搭上媒体当时热烈炒作 Java 的顺风车。

• 微软的 JavaScript 实现意味着出现了两个版本的 JavaScript：Netscape Navigator 中的 JavaScript，以及 IE 中的 JScript。与 C 语言以及很多其他编程语言不同，JavaScript 还没有规范其语法或特性的标准，两个版本并存让这个问题更加突出了。随着业界担忧日甚，JavaScript 终于踏上了标准化的征程。

• 1997 年，JavaScript 1.1 作为提案被提交给欧洲计算机制造商协会（Ecma）。第 39 技术委员会（TC39）承担了“标准化一门通用、跨平台、厂商中立的脚本语言的语法和语义”的任务（参见 TC39-ECMAScript）。TC39 委员会由来自网景、Sun、微软、Borland、Nombas 和其他对这门脚本语言有兴趣的公司的工程师。

• 组成。他们花了数月时间打造出 ECMA-262，也就是 ECMAScript（发音为“ek-ma-script”）这个新的脚本语言标准。

• 1998 年，国际标准化组织（ISO）和国际电工委员会（IEC）也将 ECMAScript 采纳为标准（ISO/ IEC-16262）。自此以后，各家浏览器均以 ECMAScript 作为自己 JavaScript 实现的依据，虽然具体实现各有不同。

1.1.2 JavaScript 开发工具

1. Visual Studio Code

Visual Studio Code（简称VS Code）是由微软开发的免费、开源的现代化代码编辑器。它支持多种编程语言和框架，包括JavaScript、TypeScript、Node.js、React、Angular、Vue.js等等。VS Code拥有强大的代码智能提示和自动补全功能，同时还具备调试、版本控制、代码重构等高级功能，可通过插件系统轻松扩展功能。VS Code的界面简洁、易于使用，并且支持多平台，可以在Windows、macOS和Linux上使用。

特点：

• 内置Git：VS Code提供内置的Git支持，可以轻松地管理代码库和版本控制。
• 快速调试：VS Code支持快速调试，并提供了多种调试器，如Python、Node.js等。
• 丰富的扩展：VS Code拥有丰富的扩展插件，可以为开发者提供更多的功能和工具。
• 轻量级：VS Code是一个轻量级的编辑器，启动速度快，占用内存较少。
• 跨平台：VS Code可以在Windows、MacOS和Linux等多个平台上使用。

​ VS Code是一个功能强大、易于使用、跨平台的代码编辑器，适用于各种类型的开发人员。

2. Sublime Text

   

​ Sublime Text 是一个文本编辑器（收费软件，可以无限期试用），它提供了丰富的功能和优秀的用户界面，适用于多种编程语言和技术。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。

主要特点：

1. 多重选择：Sublime Text 允许你同时编辑多个选定的区域，这在重复编辑或者修改多处代码时非常方便。
2. 快速导航：它具有强大的搜索和导航功能，可以快速定位到代码中的特定位置。
3. 插件生态系统：Sublime Text 支持丰富的插件集成，你可以根据自己的需求安装各种插件来增强编辑器的功能。
4. 自定义性强：你可以通过修改配置文件和设置来定制 Sublime Text 的外观和行为。
5. 跨平台支持：Sublime Text 可以在 Windows、Mac 和 Linux 操作系统上运行，方便开发者在不同平台上保持一致的工作环境。

总体来说，Sublime Text 是一个强大而灵活的文本编辑器，它的速度快、易于使用，并且具有丰富的功能和可扩展性，适用于各种编程和开发任务。

3. HBuilder

​ HBuilder是一款由DCloud开发的跨平台开发工具，主要用于移动应用开发。它集成了HTML、CSS、JavaScript等前端技术，可以快速创建移动应用，并支持一键打包发布到多个平台，如iOS、Android等。HBuilder支持使用Vue、React等主流框架进行开发，并提供了丰富的插件和模板，方便开发者进行快速开发和调试。同时，HBuilder还拥有强大的调试和测试工具，可以帮助开发者快速定位和修复问题。总的来说，HBuilder是一款强大的移动应用开发工具，适用于开发各种类型的移动应用程序。

4. Adobe Dreamweaver

   

​ Adobe Dreamweaver是一款由Adobe Systems开发的网页设计和开发工具。它提供了一个直观的可视化界面，使用户能够轻松地创建和编辑网页。Dreamweaver支持多种网页技术，包括HTML、CSS、JavaScript和PHP等。

• Dreamweaver具有强大的功能和工具，使用户能够快速构建专业水平的网页。它提供了一个所见即所得（WYSIWYG）编辑器，允许用户在设计视图中直接进行页面布局和样式设置。同时，Dreamweaver还提供了代码视图，使用户可以直接编辑HTML、CSS和其他代码。

• 除了基本的网页设计功能，Dreamweaver还集成了一些高级特性，如响应式设计工具和网站管理功能。响应式设计工具可以帮助用户创建适应不同设备和屏幕尺寸的网页，而网站管理功能可以帮助用户组织和管理大型网站项目。

• 总的来说，Adobe Dreamweaver是一个功能强大且易于使用的网页设计和开发工具，适用于初学者和专业人士。它提供了丰富的功能和灵活的工作流程，使用户能够创建出令人印象深刻的网页。

5. WebStorm

WebStorm是一款由JetBrains开发的集成开发环境（IDE），专门用于Web开发。它提供了丰富的功能和工具，使开发者能够更高效地进行前端和后端开发。

• WebStorm支持多种主流编程语言，包括HTML、CSS、JavaScript、TypeScript等。它具有强大的代码编辑和导航功能，能够自动完成代码、检查语法错误，并提供实时的代码重构建议。此外，它还支持调试和测试功能，能够帮助开发者更轻松地进行代码调试和单元测试。

• WebStorm还内置了大量的工具和插件，用于项目管理、版本控制、构建和部署等。它与各种流行的前端框架（如React、Angular、Vue.js）以及后端技术（如Node.js）集成良好，提供了专门的开发工具和模板，方便开发者进行项目开发。

• 总之，WebStorm是一个功能强大且易于使用的IDE，为Web开发者提供了一套完整的工具和环境，帮助他们提高开发效率，并编写出高质量的代码。

1.1.3 JavaScript实现第一个案例

JavaScript 程序是由语句组成,标记、操作符和标识符以一种对解释器有意义的顺序放在一起就组成了语句,而大部分 web 浏览器都包含这种解释器。下面通过一个简单的JavaScript 程序,来认识 JavaScript,了解 JavaScript 的组成。

1.任务描述

实现功能:单击页面中的缩进图片,实现页面左侧栏收缩效果。

2.实现思路

创建一个html页面,JavaScripl 语句放在

3.任务实现步骤

(1)启动网页编辑工具 WebStorm,新建项目project，新建目录day01，新建HTML网页(我这里HTML的名称为my)。

(2)在标签内嵌入标签

(3)具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试边栏</title>
    <script language="JavaScript" type="text/javascript">
        function HideShow() {
            if (document.all("leftFrame").style.display =="none") {
            document.all("leftFrame").style.display = "";
        }else
            document.all("leftFrame").style.display="none";

        }

    </script>

</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%"  style="height:100%">
    <tr>
        <td  width="170px" valign="top" id="leftFrame">我是左边栏</td>
        <td bgcolor="#9933FF" width="10px" style="font-size: 11px">点我看看
        <img src="fclose.jpg" id="switchPoint" οnclick="HideShow()" style="cursor:hand;"/> </td>
        <td align="left" valign="top" height="620px">我是右边栏
            <iframe id="righrFrame" name="main" frameborder="0" scrolling="yes" height="100%" width="100%"></iframe>
        </td>

    </tr>

</table>
</body>
</html>

右键运行my.html

结果如下：

加了图片的：

fclose.jpg

小结

JavaScript 是一门用来与网页交互的脚本语言，包含以下三个组成部分。

• ECMAScript：由 ECMA-262 定义并提供核心功能。
• 文档对象模型（DOM）：提供与网页内容交互的方法和接口。
• 浏览器对象模型（BOM）：提供与浏览器交互的方法和接口。

​ JavaScript 的这三个部分得到了五大 Web 浏览器（IE、Firefox、Chrome、Safari 和 Opera）不同程度

的支持。所有浏览器基本上对 ES5（ECMAScript 5）提供了完善的支持，而对 ES6（ECMAScript 6）和

ES7（ECMAScript 7）的支持度也在不断提升。这些浏览器对 DOM 的支持各不相同，但对 Level 3 的支

持日益趋于规范。HTML5 中收录的 BOM 会因浏览器而异，不过开发者仍然可以假定存在很大一部分

公共特性。

1.2 jQuery 简介

1.2.1 概念

官方概念：

jQuery 是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。

**个人理解：**jQuery是一个流行的JavaScript库，它简化了处理HTML文档、处理事件、执行动画和处理AJAX等常见任务的操作。它提供了简洁的API，使得开发者能够更高效地操作网页元素、处理DOM操作、处理事件响应以及执行动画效果等。通过使用jQuery，开发者可以更快速、更简洁地开发交互式的网页应用程序。

jQuery设计的宗旨是"Write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.2.2 jquery的发展历史

jQuery的发展历史如下：

1. 创建和初始版本：jQuery由John Resig于2006年创建，并于同年发布了初始版本。最初的目标是提供一种简化JavaScript开发的方法，使开发者能够轻松地编写跨浏览器兼容的代码。

2. 版本1.x系列：在接下来的几年里，jQuery逐渐发展壮大并获得了广泛的认可和使用。1.x系列是经典的版本系列，包含了许多常用的功能和特性，并在跨浏览器兼容性方面做出了很多工作。

3. 版本2.x系列：随着移动设备的普及，jQuery 2.x系列发布于2013年。这个系列的主要目标是提供一个更轻量级、更精简的库，以适应移动端环境。

4. 版本3.x系列：2016年发布的jQuery 3.x系列进一步改进了性能和稳定性，并增加了一些新特性。这个系列继续支持现代浏览器，并且在遗留代码方面也做了一些改进。

5. 社区和生态系统：除了核心库之外，jQuery还拥有丰富的插件和扩展，这些由社区贡献的内容为开发者提供了更多的选择和功能。jQuery UI和jQuery Mobile是两个知名的插件集，分别用于构建用户界面和移动应用。

总体而言，jQuery的发展历程与Web开发的进展紧密相连。它推动了JavaScript在浏览器端的应用，为开发者提供了便利和效率，成为了Web开发中不可或缺的一部分。

1.2.3 jquery的特点

jQuery具有以下特点：

1. 简化DOM操作：jQuery提供了简洁的API，可以方便地选取、操作和遍历HTML元素，大大简化了DOM操作的复杂性和冗长的代码。

2. 跨浏览器兼容性：jQuery封装了浏览器之间的差异性，使得开发人员无需关心不同浏览器的兼容性问题，代码在各种现代浏览器上都能正常运行。

3. 强大的选择器：jQuery内置了强大的选择器，可以使用CSS选择器、基于元素、属性、内容等方式来选取元素，使得操作DOM变得非常便捷。

4. 丰富的插件生态系统：jQuery拥有庞大的插件生态系统，开发人员可以方便地引入各种插件来扩展功能和实现复杂的交互效果。

5. 链式调用：jQuery的方法支持链式调用，可以通过一条语句实现多个操作，使得代码更加简洁易读。

6. 提供丰富的事件处理功能：jQuery提供了丰富的事件处理方法，可以轻松地绑定、解绑和触发各种事件，实现交互效果和用户响应。

7. AJAX支持：jQuery提供了简洁易用的AJAX方法，可以轻松地实现异步数据交互，无需手动编写繁琐的XMLHttpRequest代码。

总之，jQuery的特点在于简化了JavaScript开发，提供了丰富的功能和简洁的API，使得开发人员能够更高效地开发出优秀的交互效果和用户体验。

1.2.4 jquery的环境配置

配置 jQuery 的环境，可以按照以下步骤进行操作：

==注意：==jQuery 无需安装,只需要将 jQuery 放在网站的公共位置,想在某个页面上使用jQuery时.在该页面相关 HTML 文档中引入该库文件即可。

1. 下载 jQuery：可以从 jQuery 官方网站 (https://jquery.com/) 下载最新版本的 jQuery。

1. 创建项目文件夹：在的计算机上选择一个合适的位置，创建一个新的文件夹来存储的项目。

2. 在项目文件夹中创建 HTML 文件：使用任何文本编辑器（如 Notepad++、Sublime Text 等），创建一个新的 HTML 文件，并将其保存在项目文件夹中。

3. 引入 jQuery 库：在 HTML 文件中，使用 <script> 标签来引入 jQuery 库。可以将以下代码复制粘贴到 HTML 文件中：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<script>
// 在这里编写 jQuery 代码
</script>

</body>
</html>

以上代码将从 Google 的 CDN（内容分发网络）引入 jQuery 库。

5. 编写 jQuery 代码：在 <script> 标签内，可以编写jQuery 代码。例如，以下代码将在页面加载完成后，在控制台打印 “Hello, jQuery!”：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<script>
$(document).ready(function() {
    console.log("Hello, jQuery!");
});
</script>

</body>
</html>

6. 在浏览器中打开 HTML 文件：将 HTML 文件保存，并用浏览器打开它。在浏览器的开发工具中，将看到 “Hello, jQuery!” 作为输出。

**推荐一个下载jquery的所有版本网站（实时更新）**https://www.jq22.com/jquery-info122

1.2.5 一个简单的jQuery实例

JQuery 程序的具体开发可以分为三大步:

安装 jQuery,编写 jQuery 代码,优化相关程序使其能够更加流畅地运行。前边已经说过 jQuery 无需安装,只要将使用的文件导入到HTML页面中,那么首先使用 Dreamweaver 创建一个 HTML 页面在页面

1. 新建HTML文件，命名为test

2.代码如下：

<html>
<head>
  <meta charset="UTF-8">
  <title>第一个简单的jquery程序</title>
  <!--
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js">
  </script>
  -->
  <script src="jquery-1.11.3.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      alert("你好，欢迎来到Jquery世界！");
    })
  </script>
</head>

<body>

</body>
</html>

运行结果如下：

小结

本章介绍了 JavaScript 的发展历史,并通过一个实际例子,学习了 JavaScript 的设计、编写和如何将代码整合到网页中,同时也简单介绍了 jQuery 这个轻量级的 JavaScript 类库,并讲述了关于iOuerv 的第一个应用例子的具体开发过程.