web前端基础html,css,js,jquery

1 前端技术：

1.1 学习方法

1.1.1 前端要怎么学？

1.1.2 前端技术栈

1.2 HBuilderX

1.2.1 介绍

1.2.2 安装

1.2.3 主题

1.2.4 字体

1.2.5 去掉px转rem提示

1.2.6 备注字体颜色

1.2.7 项目结构

1.2.8 jQuery语法支持

1.3 Web概述

1.4 静态页面HTML

1.4.1 概念

1.4.2 结构

1.4.3 入门案例

1.4.4 语法

1.5 常用标签

1.5.1 标题标签

1.5.2 列表标签

1.5.3 图片标签

1.5.4 超链接标签

1.5.5 Input标签

1.5.6 表格标签

1.5.7 表单标签

1.5.8 其他标签

1.6 永和门店管理系统

1.7 H5播放视频

1.8 CSS技术

1.8.1 什么是CSS

1.8.2 CSS的用法

1.9 选择器

1.9.1 标签名选择器

1.9.2 class选择器

1.9.3 id选择器

1.9.4 分组选择器

1.9.5 属性选择器

1.10 盒子模型

1.10.1 margin（外边距）

1.10.2 border（边框）

1.10.3 padding（内边距）

1.11 元素类型的补充

1.11.1 块级元素

1.11.2 行内元素

1.11.3 行内块元素

1.12 永和门店系统

1.13 静态网页和动态网页

1.13.1 动态网页

1.13.2 网页是如何和后端交互的呢？

1.14 JS概述

1.14.1 什么是JS

1.14.2 名词解释

1.14.3 特点和优势

1.14.4 入门案例

1.15 HTML中引入JS

1.15.1 通过script标签引入JS代码

1.15.2 通过script标签引入外部的JS文件

1.16 JS语法

1.16.1 注释

1.16.2 基本数据类型

1.16.3 复杂数据类型

1.16.4 JS的变量

1.16.5 JS的运算符

1.17 JS语句

1.17.1 if…else语句

1.17.2 switch…case语句

1.17.3 循环语句

1.18 JS数组

1.18.1 JS数组的声明方式

1.18.2 数组需要注意的细节

1.18.3 数组的常见操作

1.19 JS函数

1.19.1 方式一：通过function关键字声明函数

1.19.2 方式二：通过函数直接量声明函数

1.20 JS对象

1.20.1 内置对象

1.20.2 自定义对象

1.21 DOM树的作用

1.21.1 组成

1.21.2 DOM树结构

1.21.3 dom.html

1.21.4 总结

1.22 console调试网页

1.22.1 Chrome

1.22.2 log

1.22.3 warn

1.22.4 table

1.23 异步请求局部刷新

1.23.1 架构

1.23.2 技术栈

1.23.3 执行过程

1.24 jQuery简介

1.24.1 什么是jQuery(了解)

1.24.2 jQuery的优势(了解)

1.24.3 jQuery有多简洁呢

1.24.4 jQuery引入

1.25 文档就绪函数

1.25.1 测试

1.25.2 问题

1.25.3 解决方式一

1.25.4 解决方式二

1.25.5 总结

1.26 jQuery事件绑定

1.26.1 什么是事件

1.26.2 方式1(js版)

1.26.3 方式2(js版)

1.26.4 方式3(jQuery版)

1.26.5 练习

1.27 jQuery选择器

1.27.1 基本选择器

1.27.2 练习

1.27.3 高级选择器-层级选择器

1.27.4 高级选择器-基本过滤选择器

1.27.5 其他选择器

1.28 json

1.28.1 概念

1.28.2 获取京东商品价格

1.28.3 格式化

1.28.4 转换

1.28.5 测试

1.28.6 jd-json.html

1.29 ajax

1.29.1 概念

1.29.2 格式

1.29.3 jd-ajax.html

1.30 扩展：

1.30.1 json和js对象的区别

1.31 NodeJS

1.31.1 简介

1.31.2 安装

1.31.3 查看安装路径

1.31.4 node-server.js

1.31.5 启动停止服务

1.31.6 测试

1 前端技术：
1.1 学习方法
1.1.1 前端要怎么学？
前端位于整个项目首要要开发的内容，直接和用户打交道，实现页面的展现和交互功能，所以在分类上俗称为前端。随着软件技术的日趋成熟，前端内容也呈现爆炸式的增长，和革命性的变革，前端借鉴后端的发展经验，也开始应用分层体系，也开始术有专攻，解决一个专项的问题，也开始变得庞大和臃肿。从简单单一功能向框架过渡。今天的前端技术已经变得不简单，不亚于后端开发，甚至难度超越了后端开发。

但从整体来看（前端占软件开发总量的百分之十左右，地位可见一斑）；从技术的含金量来看（如：业务功能是核心，远超UI的作用；分布式缓存redis的作用远超vue前端），从职业的发展路径来看（通向架构师之路，大都由后端工程师晋升的，前端几乎没有）；从薪资的天花板来看（随着年头的拉长，后端工程师的薪资是前端的几倍），后端优势远大于前端。所以对于大家而言，千万不要把重心放在前端技术上，会用，会查，会改才是正确的定位！

1.1.2 前端技术栈

l HTML超文本标记语言实现页面展现，形成静态网页

l CSS层叠样式表实现页面美化

l JS javascript脚本语言实现页面前端和后端的数据交互，形成动态网页

l React facebook出品前端、移动端JavaScript框架

l Angular google 出品基于TypeScript的开源 Web 应用框架

l Vue 国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发

l NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境

目前市场主流是ES6标准，但TypeScript可能会成为趋势，如Vue 3.0选用的语言则为TypeScript。TypeScript将带来JavaScript的华丽转身，迈入强语言行列，所以其发展趋势不容小觑。

Vue Element Admin 是通过Vue框架结合饿了吗的ElementUI，并在其基础上实现了后台管理的基本功能，企业在其基础上，直接二次开发，添加业务，实现敏捷编程。

说明: https://img1.tuicool.com/QbMj6nN.jpg!web

1.2 HBuilderX
1.2.1 介绍
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby，本身主体是由Java编写。

它基于Eclipse，所以顺其自然地兼容了Eclipse的插件，用过Eclipse的开发者使用HBuilder会非常顺手。形成HBuilderX开发前端内容，Eclipse/Idea开发后端内容的格局。

特点：快，是HBuilder的最大优势，通过完整的语法提示和代码块模板等，大幅提升HTML、js、css的开发效率。

1.2.2 安装
官网：https://www.dcloud.io/hbuilderx.html

安装app版本，整体下来近600m。

1.2.3 主题

1.2.4 字体
默认字体i和l分不清，换成Verdana字体。

1.2.5 去掉px转rem提示
在写手机端的时候，要把px转换为对应的rem单位，日常PC端开发时不需要。

1.2.6 备注字体颜色
默认灰色看不清晰，可以换成黑色，直接编辑Default.xml，修改下面3行的颜色，重新启动HBuilderX即可。

1.2.7 项目结构

1.2.8 jQuery语法支持
HBuilderX对javascript、html、css、vue支持很好，这些无需选择默认支持，同时也对jQuery有很好的支持，但需要单独选择。

1.3 Web概述

1.4 静态页面HTML
1.4.1 概念
HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。

HTML历史上有如下版本：

l HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布

l HTML 2.0：1995年11月作为RFC 1866发布

l HTML 3.2：1997年1月14日，W3C推荐标准

l HTML 4.0：1997年12月18日，W3C推荐标准

l HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准

l HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手

1.4.2 结构
Ø 文档声明，用来声明HTML文档所遵循的HTML规范。

Ø 头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。

Ø 体部分，用来存放网页要显示的数据。

Ø 声明网页标题

Ø 用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。

1.4.3 入门案例
<!doctype html>

<head><title>quickstart</title><!-- 防止中文乱码 --><meta charset="UTF-8"/></head><body>hello html ~你好呀<!--ctrl c / v 复制粘贴ctrl x / d 删除ctrl 上/下 箭头 调整位置--></body>

1.4.4 语法
Ø HTML标签

HTML是一门标记语言，标签分为开始标签和结束标签，如。

如果开始和结束中间没有内容，可以合并成一个自闭标签，如。

Ø HTML属性

HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来。

如：

Ø HTML注释

格式：

注意：不能交叉嵌套！

Ø 如何在网页中做空格和换行

换行：

空格：在HTML中，多个空格会被当成一个空格来显示。

1.5 常用标签
1.5.1 标题标签

<!doctype html>

<head><title>01</title><meta charset="utf-8"/></head><body><!-- 标题标签:包括:h1~h6--><h1 align=”center”>我是1号标题</h1><h2>我是2号标题</h2><h3>我是3号标题</h3><h4>我是4号标题</h4><h5>我是5号标题</h5><h6>我是6号标题</h6></body>

1.5.2 列表标签

<head><meta charset="utf-8"><title>标题标签</title></head><body><!-- 列表标签:ol + li 有序ul + li 无序type 定义列表符号,默认是 disc 小圆点--><ul type="circle"><li>中国</li><li>美国</li><li>小日本</li></ul><ul type="square"><li>中国</li><li>美国</li><li>小日本</li></ul><ul type="disc"><li>中国</li><li>美国</li><li>小日本</li></ul></body>

1.5.3 图片标签

<head><meta charset="utf-8"><title>标题标签</title></head><body><!--   图片标签:img向网页中引入图片 (相对路径/绝对路径)border:边框width:宽度height:高度--><img src="1.jpg" border="10px" width="50%" height="30%"></body>

1.5.4 超链接标签

<head><meta charset="utf-8"><title>标题标签</title></head><body><!-- 超链接标签href 指定要跳转的位置target 指定要打开的方式--><a href="http://www.baidu.com" target="_blank">点我</a><a name="_top">java从入门到精通</a><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><h6>你好java</h6><a href="#_top">回到顶部</a><!-- 获取_top的位置,像书签 --><br><br><br><br></body>

1.5.5 Input标签
普通文本框

密码

男单选框

数字值

日历

杨幂复选框

1.5.6 表格标签

说明: C:\Users\ADMINI~1\AppData\Local\Temp\1620565605(1).png

<head><meta charset="utf-8"><title>各种标签</title></head><body><!--table表格标签tr 表格里的行td 表格里的列border:表格的边框cellspacing:单元格的间距bgcolor:背景颜色width:宽度align:位置--><table border="1px" cellspacing="0" bgcolor="antiquewhite" width="30%" align="center"><tr><td colspan="2">11</td> <!-- colspan是列合并,合并2列--><!-- <td>12</td> --><td>13</td></tr><tr><td>21</td><td>22</td><td rowspan="2">23</td> <!-- rowspan是行合并,合并2行 --></tr><tr><td>31</td><td>32</td><!-- <td>33</td> --></tr></table></body>

1.5.7 表单标签

<head><meta charset="utf-8"><title>form表单</title></head><body>

   <!-- <form method="get"> --><!-- post提交安全不显示数据 --><form method="post"><table border="1px" bgcolor="bisque" cellspacing="0" width="35%" cellpadding="3"><th colspan="2">注册表单</th><tr><td>用户名:</td><td><input type="text" name="user"/></td></tr><tr><td>密码:</td><td><input type="password" name="pwd"/></td></tr><tr><td>确认密码:</td><td><input type="password" name="repwd"/></td></tr><tr><td>昵称:</td><td><input type="text" name="nick"/></td></tr><tr><td>邮箱:</td><td><input type="text" name="mail"/></td></tr><tr><td>性别:</td><td><!-- 不配name属性,性别是多选!!  sex属性的值按照1 2 提交-->

                 <input type="radio" name="sex" value="1"/>男<input type="radio" name="sex" value="2"/>女</td></tr><tr><td>爱好:</td><td><!-- name必须配,多选 ,提交的值就是1 2 3 --><input type="checkbox" name="like" value="1"/>篮球<input type="checkbox" name="like" value="2"/>足球<input type="checkbox" name="like" value="3"/>排球</td></tr><tr><td>城市:</td><td><select name="city"> <!-- 实现多选,按name提交数据 1 2--><option value="1">北京</option><option value="2">上海</option></select></td></tr><tr><td>头像:</td><td><input type="file" name="path"/></td></tr><tr><td colspan="2" align="center"><button type="submit">提交</button></td></tr></table></form></body>

1.5.8 其他标签

大家好

Nice

hello

1.6 永和门店管理系统
说明: 说明: D:\0909\project\11-训练营\01-永和豆浆门店系统\01-课前资料\02-界面原型\永和豆浆订单管理.jpg

永和大王账单

   <div>顾客联</div><div>请您留意取餐账单号</div><div>自取顾客联</div><div>永和大王（北三环西路店）</div><div>010-62112313</div><div>--结账单--</div><div>账单号：P000009</div><div>账单类型：食堂</div><div>人数：1</div><div>收银员：张静</div><div>开单时间：2018-04-17 07:24:11</div><div>结账时间：2018-04-17 07:24:22</div><hr style="border : 1px dashed ;" /><div><table><tr>

数量品项金额

            <tr><td>1</td>

油条豆浆套餐 7.00

            </tr><tr><td>&nbsp;</td>

1 X --非矾油条

            </tr><tr><td>&nbsp;</td>

1 X --现磨豆浆（热/甜）

            </tr></table></div><hr style="border : 1px dashed ;" /><div><table><tr><td width="140">支付宝花呗一元早餐</td>

1 -3.00

            </tr><tr><td>合计</td>

4.00

            </tr><tr><td>支付宝</td>

1.00

            </tr><tr><td>支付宝补贴</td>

3.00

            </tr></table></div><hr style="border : 1px dashed ;" /><div>打印时间：2018-04-17 07:24:23</div><hr style="border : 1px dashed ;" /><div>根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div><div><img src=""></div><div>官网：www.yonghe.com.cn</div><div>加盟热线：86-21-60769397 或 86-21-60799002</div><br/>

1.7 H5播放视频

<head><meta charset="utf-8"><title>H5网页技术</title></head><body><!-- 加载mp3音频注意::浏览器默认规定视频音频不会自动播放，因为自动播放会占用流量--><audio controls="controls"><source src="jay.mp3"></source></audio><!-- 加载mp4 视频

注意::不能按网站方式访问,无法打开视频,直接按本地文件打开方式可以正常播放

       http://127.0.0.1:8848/cgb/video.html--><video controls="controls"><source src="yibo.mp4"></source></video><img src="1.jpg"/><img src="D:/1.jpg"/></body>

1.8 CSS技术
1.8.1 什么是CSS
CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。

主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。

1.8.2 CSS的用法
需求::将单元格内文字居中显示

<head><meta charset="utf-8"><title>css的使用</title><!-- css方式4 实现css与HTML代码的分离，提高css代码的复用性--><link href="demo.css" rel="stylesheet"/><!-- css方式3 --><style>td{text-align: center;}</style></head><body><table border="1" cellspacing="0" width="30%"><tr align="center"><!-- css方式1 --><td >你好1</td><td >你好2</td></tr><tr style="text-align:center;"><!-- css方式2 --><td >你好3</td><td >你好4</td></tr></table></body>

1.9 选择器
所谓的选择器就是在HTML中帮助我们选中想要修饰的标签。

1.9.1 标签名选择器
选中网页中的所有元素

1.9.2 class选择器
给需要修饰的元素，加class属性，可以同时使用多个属性，之间用空格隔开。

123

1.9.3 id选择器
id属性的值在整个HTML中作为唯一标识的存在。

可以通过ID值选中指定的元素（#id值）

123

/* 使用id选中元素 */

#p1{

text-indent: 200px; /* 首行缩进*/

}

1.9.4 分组选择器
/* 分组选择器,将多个选择器选中的元素组合在一起，统一设置样式 */

.a,.b,#p1{

background-color: #000000;

}

1.9.5 属性选择器
根据属性条件选中符合条件的元素来设置样式（逗号隔开）

1.10 盒子模型
指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。

1.10.1 margin（外边距）
男

1.10.2 border（边框）
#div2{

border:10px solid yellow;/实线/

border:10px dashed yellow;/点状/

border:10px dotted yellow;/虚线/

}

1.10.3 padding（内边距）

用户名:

1.11 元素类型的补充
1.11.1 块级元素
默认情况下，块级元素独占一行（div , p，h1~h6）

可以设置宽和高。如果不设置宽和高，其中宽是默认填满父元素，而高是由内容

外边距、边框、内边距都可以设置

1.11.2 行内元素
默认情况下，多个行内元素处在同一行

不能设置宽和高

左右外边距、边框、内边距都可以设置，上下外边距设置无效

1.11.3 行内块元素
既具备行内元素的特征，还具备块级元素的特征

1.12 永和门店系统

<meta charset="UTF-8"><title>永和大王门店系统</title><!—引入外部的css文件

--><!--通过style标签插入 css代码用来修饰html网页效果 --><style>body{font-size:8px;width:280px;margin:5px;}.please{font-size:22px;}.me{padding-left:60px;}.doorName{font-size:10px;}.note{text-indent:20px;padding-top:5px;padding-bottom:5px;}</style>

<div>顾客联</div><div class="please">请您留意取餐账单号</div><div class="me">自取顾客联</div><div class="doorName">永和大王（北三环西路店）</div><div class="doorName">010-62112313</div><div class="me">--结账单--</div><div class="please">账单号：P000010</div><div>账单类型：堂食</div><div>人数：1</div><div>收银员：张静</div><div>开单时间：2018-04-17 07:24:29</div><div>结账时间：2018-04-17 07:24:38</div><hr style="border:1px dashed;"></hr><table border="1" cellspacing="0"><tr><td>数量</td><td>品项</td><td>金额</td></tr><tr><td>1</td><td>玉米肉松蛋饼2P <br> 1X --玉米肉松蛋饼<br /> 1X --现磨豆浆（热/甜）</td><td>8.00</td></tr></table>

<table border="1" cellspacing="0"><tr><td>合计</td><td>8.00</td></tr><tr><td>微支付</td><td>8.00</td></tr></table><hr style="border:1px dashed;"></hr><div>打印时间：2018-04-17 07:24:38</div><hr style="border:1px dashed;"></hr><div class="note">根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div><div>官网：www.yonghe.com.cn</div><div>加盟热线：86-21-60769397 或 86-21-60769002</div>

1.13 静态网页和动态网页
1.13.1 动态网页
我们有了html超文本标记语言实现了网站页面展现，展现文字、表格、图片、超链接等，有了css样式表实现了页面的美化，这些技术实现了静态网页。

日常展现是已经足够了，但是如果我们要做个注册功能呢？如论坛，我们注册个论坛来发文章，聊天。这就带来一个问题，信息如何根据不同的使用者，展现不同的内容呢？再如我注册登录和你注册登录，我们在网站上显示的登录名称就不同。这html+css就无能为力了，它们无法实现，那谁能办到呢？这时javascript就派上用场了。它能实现浏览器用户和后台服务器进行交互。注册、登录、添加商品到购物车、下订单对它而言都是小菜一碟。有了javascript的加入，实现页面和后台系统的交互，实现用户信息的注册，实现用户的登录，实现个性化的数据展现，功能强大不老少。业界把这样的网页称为动态网页，把这样的网站称为动态网站。

简而言之，静态网站只能看，不同浏览者看到内容一致不能变化；动态网站可以读写数据，内容根据不同浏览者展示不同的信息。

1.13.2 网页是如何和后端交互的呢？
动态网站的软件架构是怎样的呢？

用户访问页面，页面触发事件创建XHR对象，进行ajax请求，请求访问服务器端，请求被web中间件拦截并进行处理，由控制层框架springmvc中的controller进行接收，controller请求业务层spring框架的service服务，service请求持久层mybatis框架的mapper映射，mapper访问数据库。操作完数据库，返回结果，mybatis封装成java对象传回service，service把java对象传回controller，controller把java对象又转换为json字符串，然后传回浏览器，浏览器传回给调用者XHR，XHR调用回调方法callback，callback进行json字符串的解析，从中拿到要展现的数据，通过javascript处理，最终回显到页面上。

可以看到这个调用过程是非常复杂的，跨越网络，跨域多个服务器，很多技术应用其中，而这一切的始作俑者是谁呢？谁让这一切成为可能，它就是javascript，它实现了用户的请求和响应，实现了数据的动态展现，使早期静态的网站走向了动态的网站。

1.14 JS概述
1.14.1 什么是JS
JavaScript 是 web 前端开发者必学的三种语言之一：

l HTML 定义网页的内容 H5

l CSS 规定网页的布局 CSS3

l JavaScript 实现网站的交互 ES6

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它们根本没有关系，java是强语言几乎无所不能，而javascript是脚本语言，只局限于浏览器。

JavaScript遵循ECMA国际组织颁布的ECMAScript标准。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，简称为ES6。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。很多js相关技术都遵循这个标准，如目前最受欢迎的Vue。

微软出了符合规范类似javascript的称为js，但一般开发者忽略它们的差异，全称就习惯叫javascript，简称就习惯叫js。

全称JavaScript，是一种弱类型语言，同其他语言一样，有它自身的语法，数据类型，表达式，算术运算符等。

JS是一门基于对象和事件驱动的脚本语言，通常用来提高网页与用户的交互性。

1.14.2 名词解释
基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。

事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）

脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。

1.14.3 特点和优势
特点：

(1)JS是一门直译式的语言，直接执行的就是源代码.

是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.

(2)JS是一门弱类型的语言,没有严格的数据类型.

优势：

(1)良好的交互性

(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)

(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)

只要有浏览器的地方都能执行JS

1.14.4 入门案例

<title>hello</title><meta charset="utf-8"/><script>/* JS代码 */function fn(){alert("111");}</script>

   <a href="#" onclick="fn();">鼠标点击事件...</a>

1.15 HTML中引入JS
1.15.1 通过script标签引入JS代码

   <meta charset="utf-8"/><script>/* JS代码 */function fn(){alert("JS的第1种引入方式");}</script>

   <div id="div1" onclick="fn();">Hello JavaScript</div>

1.15.2 通过script标签引入外部的JS文件
创建1.js文件

function fn(){

   alert("JS的第2种引入方式");

}

在html中引入文件

   <meta charset="utf-8"/><script src="1.js"> </script>

   <div id="div1" onclick="fn();">Hello JavaScript</div>

注意：不要同时通过一个script标签引入JS代码和JS文件，会导致代码不会执行！比如：

1.16 JS语法
1.16.1 注释
单行注释： //注释内容

多行注释： /* 注释内容 */

1.16.2 基本数据类型
包括:number/string/boolean/null/undefined

(1) 数值类型-number

   在JS中，数值类型只有一种，就是浮点型。在JS中，需要时会自动的进行数据类型的转换，比如：在显示和处理的时候，浮点型和整型会自动的转换。2.4+3.6=6;Infinity ： 正无穷大-Infinity ： 负无穷大NaN : Not a Number 非数字， 和任何值都不相等，包括它本身

(2) 字符串类型-string

   在JS中，字符串是基本数据类型。在JS中，字符串直接量是通过单引号或者双引号引起来。var str1 = "Hello…";var str2 = 'CGB2103…';alert(str1);

(3) 布尔类型-boolean

   值为true或者是false；var s1 = false;console.log(s1);

(4) undefined

   值只有一个就是undefined。表示变量没有初始化值。比如：a) var num; alert(num);//声明了变量但是没有为变量赋值，该变量的值就是undefined。b) 或者访问一个对象上不存在的属性时，也是undefined。c) 或者访问数组中一个没有的元素的位置时，该位置处的值也是undefined.

(5) null

   值也只有一个，就是null。表示空值或者不存在的对象。

1.16.3 复杂数据类型
函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）

1.16.4 JS的变量
js是弱类型语言，所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。

javascript没有类似采用静态语言类型，如java的变量类型是编译期就确定的；而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型，这点比较灵活。这也是双刃剑，编译期就难以检查出其赋值的错误。

(1) 在JS中是通过 var 关键字来声明一个变量

   var a=1; alert(a);

var x=true; alert(x);

var y=10.8; alert(y);

(2) 在JS中声明的变量是不区分类型的，可以指向任意的数据类型。

   var a = 1;

a=true;

a=100;

alert(a);//100

1.16.5 JS的运算符
JS中的运算符和Java中的运算符大致相同

算术运算符: +，-，*，/，%，++，–

赋值运算符: =，+=，-=，*=，/=，%=

比较运算符: ，!=，=，!==，>，>=，<，<=

位运算符: & ， |

逻辑运算符: && ，||

前置逻辑运算符: ! (not)

三元运算符: ? :

```
常见运算符
```

var a = 3;

var b = 1;

console.log(a+b);//4

a+=4;

console.log(a+b);//8

//a+=4;

console.log(a==b); //true

console.log(a===“3”); //false 如果两边比较的值不是同一种数据类型，===直接返回false，如果是同一种数据类型，和=没有区别！

console.log(“1”==“1”); //true //由于JS中字符串是基本数据类型，比较字符串相等通过 == 进行！

alert(a>3?“x”:8);

typeof运算符: 用于返回变量或者表达式 的数据类型

var i = 3;

console.log(typeof i);//number

i=true;

console.log(typeof i);//boolean

i=“hello”;

console.log(typeof i);//string

console.log(typeof 123+“abc”);//numberabc

console.log(typeof (123+“abc”));//string

1.17 JS语句
JS中的语句和Java中的语句用法也大致相同

1.17.1 if…else语句
var i = 3;

if(i==4){

alert(“yes”);

}else{

alert(“no”);//no

}

例子: 接收用户输入的成绩，判断成绩所属的等级

80~100(包括80，也包括100) 优秀

60~80(包括60，但不包括80) 中等

0~60(包括0，但不包括60) 不及格

其他值输入有误

// prompt函数可以弹框提示用户输入成绩, 并返回用户输入的内容

var score = prompt(“请输入您的成绩：”);

console.log( score );

if( score >= 80 && score <=100 ){

alert("您的成绩属于：优秀！");

}else if( score >= 60 && score < 80 ){

alert("您的成绩属于：中等！");

}else if( score >= 0 && score < 60 ){

alert("您的成绩属于：不及格！");

}else{

alert("您输入的成绩不合法，请重新输入！");

}

1.17.2 switch…case语句
var day = 3;

switch( day ){

case 1:alert("今天是星期一");break;case 2:alert("今天是星期二");break;case 3:alert("今天是星期三");break;case 4:alert("今天是星期四");break;case 5:alert("今天是星期五");break;

}

1.17.3 循环语句
for(var i=0;i<5;i++){

alert( i );

console.log(i);

}

var i=0;

while(i<5){

alert(i);

i++;

}

var sum = 0;

for( var i=1; i<=100; i++ ){

sum += i; //sum = sum+i;

}

console.log(sum );

//没有增强for循环

注意： JS中的语句，判断条件可以不是boolean类型，因为JS中会自动进行数据类型的转换。

1.18 JS数组
JS数组用于在单个的变量中存储多个值(其实就是一个容器)。

JS中的数组可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等

1.18.1 JS数组的声明方式
方式一: 通过new Array构造函数声明数组

var arr1 = new Array();//声明一个空数组

var arr2 = new Array(“abc”, “hello”, true);//声明一个具有初始值的数组

alert(arr1.length);//3

方式二 : 通过数组直接量声明数组

var arr4 = [];//声明一个空数组

alert(arr4.length);//0

arr4 = [“abc”, “hello”, true];//声明一个具有初始值的数组

alert(arr4);

1.18.2 数组需要注意的细节
(1)JS数组中可以存放任意的数据类型

(2)JS中的数组长度可以被改变

var arr1 = [];//声明一个空数组

console.log( arr1.length ); //此时数组长度为 0

arr1.length = 10;

console.log( arr1.length ); //此时数组长度为 10

arr1[99] = “abc”;

console.log( arr1.length ); //此时数组长度为 100

arr1.length = 0;

console.log( arr1.length ); //此时数组长度为 0

1.18.3 数组的常见操作
length属性 – 获取数组的长度，还可以改变数组的长度

var a = [1,2,3];

alert(a.length);

var arr = [123, “abc”, false, new Object() ]

//for循环实现遍历数组

for( var i=0; i< arr.length; i++ ){

console.log( arr[i] );

}

1.19 JS函数
函数就是一个具有功能的代码块, 可以反复调用

函数就是包裹在花括号中的代码块，前面使用了关键词 function

1.19.1 方式一：通过function关键字声明函数
声明：function 函数名称([参数列表]){

          函数体}

调用: 函数名称([参数列表]);

案例：function fn1(name,age){alert(name+age);}

fn1(“wanght”,18);

1.19.2 方式二：通过函数直接量声明函数
声明：var 函数名称 = function 函数名{

          函数体}

调用: 函数名称([参数列表]);

案例：var fn2 = function fn1(name,age){alert(name+age);}

fn2(“zhangsz”,18);

fn2(“王海涛”);参数个数不匹配，王海涛undefined

注意: 在JS中调用函数时, 传递的参数个数如果与声明的参数个数不相同, 也不会报错。

但是最好按声明的个数来传递, 因为个数不符, 可能会引发一些问题！！！

1.20 JS对象
利用function关键字声明对象，用new关键字创建对象。

1.20.1 内置对象
Window对象–代表浏览器中一个打开的窗口,了解一下即可，很多被UI替代

window.onload() 在浏览器加载完整个html后立即执行!

window.alert(“text”) 提示信息会话框

window.confirm(“text”) 确认会话框

window.prompt(“text”) 键盘输入会话框

window.event 事件对象

window.document 文档对象

Document对象–代表整个HTML文档，可用来访问页面中的所有元素

document.write() 动态向页面写入内容

document.getElementById(id) 获得指定id值的元素

document.getElementsByName(name) 获得指定Name值的元素

学会简单使用，后期被jQuery封装，在后期被Vue框架封装

1.20.2 自定义对象
(1)方式一：

```
声明对象：function Person(){}
```
```
创建对象：var p1 = new Person();
```

设置属性：p1.name = "张飞";   p1.age = 18;

设置方法：p1.run = function(){ alert(this.name+" : "+this.age); }

```
访问p1对象：
```

/* 自定义对象*/

function Person(){ } /* 定义对象*/

var p1 = new Person(); /* 创建对象*/

p1.name=“张三”;

p1.age=20;

console.log(p1);

p1.say = function(){ /* 定义函数*/

console.log(“haha”);

}

p1.say(); /* 函数调用*/

上面展示了js的强大！js的牛掰之处就在于，它的属性可以边写边创建，非常灵活，而java不行，必须先定义。

(2)方式二:

var p2 = {

          "pname":"李四","page":100,"psay":function(){/* this使用p2里定义的 */console.log(this.pname+this.page);}}console.log(p2);p2.psay();  /* 函数调用*/

1.21 DOM树的作用
1.21.1 组成
l ECMAScript描述了javascript语言的语法和基本对象

l 文档对象模型DOM（Document Object Model）与HTML网页API接口

l 浏览器对象模型BOM（Browser Object Model），与浏览器进行交互的API接口

核心对象有：window浏览器窗口，navigator浏览器信息，location浏览器当前地址信息，history浏览器历史信息，screen用户屏幕信息。

DOM非常重要，实际开发更多通过js操作DOM对象实现对html页面的操作，BOM也用，比较少用。所以学习重点放在DOM上。

1.21.2 DOM树结构
DOM 是一项 W3C (World Wide Web Consortium) 标准，DOM（Document Object Model）文档对象模型为JS操作html文档所提供的一套API，通过这套API可以很方便的对html元素进行访问及增删改查操作。

1.21.3 dom.html

<head><meta charset="utf-8"><title>DOM树结构解析</title></head><body><h1 name="domname" id="domid" class="domclass">JavaScript 脚本语言之DOM树</h1><a href="http://www.taobao.com" target="_blank" id="tb">淘宝</a><a href="http://www.jd.com" target="_blank" id="jd">京东</a><a href="http://www.pinduoduo.com" target="_blank" id="pd">拼多多</a><br/><br/><button onclick="alert(document.title)">网页标题</button><button onclick="alert(document.getElementsByTagName('h1')[0].innerText)">1-H1标签 tag</button><button onclick="alert(document.getElementsByName('domname')[0].innerText)">2-H1标签 name</button><button onclick="alert(document.getElementsByClassName('domclass')[0].innerText)">3-H1标签 class</button><button onclick="alert(document.getElementById('domid').innerText)">4-H1标签 id</button><br/><br/><button onclick="alert(document.getElementsByTagName('a').length)">A标签数</button><button onclick="alert(document.getElementById('tb').href)">A链接-淘宝</button><button onclick="alert(document.getElementById('tb').innerText)">A链接-淘宝</button><button onclick="alert(document.getElementById('jd'))">A链接-京东</button><button onclick="alert(document.getElementById('jd').innerText)">A链接-京东</button><button onclick="alert(document.getElementById('pd'))">A链接-拼多多</button><button onclick="alert(document.getElementById('pd').innerText)">A链接-拼多多</button></body>

1.21.4 总结
获取页面元素的4种方式:

l getElementsByTagName 标签名称，得到数组

l getElementsByName name属性，得到数组

l getElementsByClassName class属性，得到数组

l getElementById id属性，单个值

注：dom树在描述标签时除id方式，其它都是以数组形式体现，哪怕是一个元素。

1.22 console调试网页
1.22.1 Chrome
专业人用专业的工具，浏览器调试谷歌、火狐最佳，使用F12打开调试窗口。也可以快捷键打开：ctrl+shift+i。

l 支持自动补全，提示下，按tab键补全

l 清除日志

l Console控制台菜单

1.22.2 log

1.22.3 warn

1.22.4 table
以表格形式展现：

说明: C:\Users\ADMINI~1\AppData\Local\Temp\1620393667.png

1.23 异步请求局部刷新
1.23.1 架构
主流方式：

1.23.2 技术栈
l JavaScript 形成交互

l jQuery 封装JavaScript，代码更加简洁高效

l ajax 异步请求

l json 数据传输

l Web中间件(tomcat) 处理请求和响应

l mysql数据库存取数据

1.23.3 执行过程
用户页面中触发ajax请求，访问后端服务器，Web中间件拦截用户请求，转发后端程序进行数据处理，一般还需访问数据库，然后逐层返回。数据库返回数据处理服务，数据处理服务返回Web中间件，Web中间件返回ajax调用，将数据封装到返回的js对象中，目前主流返回数据为json字符串。在回调callback的方法中解析json中的数据，最终回显到页面上。通常我们使用jquery封装过的ajax，写法更加简洁灵活。

1.24 jQuery简介
1.24.1 什么是jQuery(了解)
jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码

轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架

jQuery的核心思想：“写的更少，但做的更多”

jQuery库包含以下功能：

l HTML 元素选取

l HTML 元素操作

l CSS 操作

l HTML 事件函数

l JavaScript 特效和动画

l HTML DOM 遍历和修改

l AJAX

1.24.2 jQuery的优势(了解)
(1)可以极大的简化JS代码，例如：

JS获取元素：var d = document.getElementById(“demo1”);

jQuery获取元素：$("#demo1")

jQuery删除所有div元素：$(“div”).remove();

(2)可以像CSS选择器一样非常方便的获取元素

$(“div”) – 获取所有的div元素

$(".s1") – 获取所有class值为s1的元素

$("#div1") – 获取id值为div1的元素

$(“div span”) – 获取div内部的所有span元素

(3)可以通过修改css样式控制页面的效果

$(“div”).css(“background”, “red”);

$(“div”).css({

   "background" : "blue","border" : "2px solid red","font-size" : "30px"

});

(4)可以兼容常用的浏览器(谷歌/火狐/苹果/欧朋…)

…

1.24.3 jQuery有多简洁呢
JavaScript获取元素的4种方式：

var ele = document.getElementsByTagName(“p”); //标签

var ele = document.getElementsByName(“username”); //名称

var ele = document.getElementsByClassName(“info”); //样式

var ele = document.getElementById(“username”); //id属性

jQuery选择器获取元素的4种方式：

var ele = $(“p”); //访问标签

var ele = $(‘input[name=“username”]’); //访问名称

var ele = $(‘input[type=“text”]’); //访问text框

var ele = $(’:text’); //访问text框

var ele = $(".info"); //访问css的class样式

var ele = $("#username"); //访问id属性

可以看出jQuery本质其实就是简化了js的写法，用$替代了document.getXxx，代码简洁，清爽。

1.24.4 jQuery引入
jQuery函数库其实就是一个JS文件(这个文件中封装了很多的JS函数和少量的JS属性)

如果要实用这个文件中的函数或属性，需要在网页中通过script标签引入jQuery的函数库文件

在引入时，如果因为路径书写错误，导致jQuery引入失败，浏览器的控制台会报如下错误：

1.25 文档就绪函数
1.25.1 测试

文档就绪事件函数

   <h1 id="demo">演示文档就绪事件函数....</h1>

1.25.2 问题
上面的代码执行时，会报一个错误：

原因描述：在执行获取id为demo的元素时, h1元素还没有被浏览器加载到，所以获取不到h1元素。

oH1就是一个null，在下方再通过oH1调用属性，由于null不能调用属性或函数，因此代码会抛异常！

1.25.3 解决方式一
将script标签及其中的代码移到body内部，也可以h1元素的后面

这样浏览器在加载时，会先加载h1元素，在执行获取h1元素的代码，由于在获取h1元素之前，h1元素就已经被浏览器加载过了，所以后面再获取h1元素就能获取到。

文档就绪事件函数

   <h1 id="demo">演示文档就绪事件函数....</h1><script>//1.获取id为demo的h1元素var oH1 = document.getElementById("demo");//2.获取h1元素的内容alert( oH1.innerHTML );</script>

1.25.4 解决方式二
将获取元素的代码放在一个文档就绪事件函数中，因为文档就绪事件函数，会在浏览器加载完所有的html元素后立即执行。

此时整个html网页都被加载了，h1元素肯定也被加载了，此时再执行函数，执行获取h1元素的代码，一定能获取到！

   <h1 id="demo">演示文档就绪事件函数....</h1>

或者通过jQuery提供的文档就绪事件函数:

   <h1 id="demo">演示文档就绪事件函数....</h1>

1.25.5 总结
什么时候该使用文档就绪事件函数？

如果在获取元素时，获取元素的代码执行的时机（时间）比元素本身加载的时间还要早，如果元素还没有加载到就获取，必然是获取不到的！

将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载过了，再获取任何元素都能获取到！

jQuery提供的文档就绪事件函数（简写形式）：

其完整写法为：

JS也为我们提供了文档就绪事件函数，其写法为：

1.26 jQuery事件绑定
1.26.1 什么是事件
页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

以点击事件为例，为元素绑定点击事件的方式为:

1.26.2 方式1(js版)

   <input onclick="fn()" type="button" value="点我~!" />

1.26.3 方式2(js版)

   <input id="btn"  type="button" value="点我~!" />

1.26.4 方式3(jQuery版)

   <input id="btn"  type="button" value="点我~!" />

1.26.5 练习
Ø mouseenter() 当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

示例

鼠标指针进入此处，会看到弹窗。

Ø mouseleave() 当鼠标指针离开元素时，会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

示例

这是一个段落。

1.27 jQuery选择器
1.27.1 基本选择器
$(“div”) – 选中所有的div元素

$(“span”) – 选中所有的span元素

$(".mini") – 选中所有class值为mini的元素(class值为mini的元素可能是任何元素)

$(“span.mini”) – 选中所有class值为mini的span元素

$("#one") – 选中id为one的元素

$(“div,span,.mini,#one”) – 选中所有的div元素，以及所有的span元素，以及所有class值为mini的元素，以及id为one元素

1.27.2 练习
Ø 点击按钮,隐藏段落内容

示例

这是一个标题

这是一个段落。

这是另一个段落。

点我

Ø 点击按钮,隐藏指定id的内容

示例

这是一个标题

这是一个段落

这是另外一个段落

点我

Ø 点击按钮,隐藏指定class的内容

示例

这是一个标题

这是一个段落。

这是另外一个段落。

点我

1.27.3 高级选择器-层级选择器
$(“div span”) – 选中所有div元素内部的所有span元素

$("#one div") – 选中id为one的元素内部的所有div元素

1.27.4 高级选择器-基本过滤选择器
(1)选中第一个div元素

$(“div:first”)

$(“div:eq(0)”)

$(“div”).eq(0)

(2)选中最后一个div元素

$(“div:last”)

$(“div:eq(-1)”)

$(“div”).eq(-1)

Ø 实例：选取第一个

元素

示例

这是标题

这是一个段落。

这是另外一个段落。

点我

Ø 实例：选取当前 HTML 元素

示例

这是标题

这是一个段落。

这是另外一个段落。

点我

1.27.5 其他选择器
l 过滤选择器

$(“li:first”) //第一个li

$(“li:last”) //最后一个li

$(“li:even”) //挑选下标为偶数的li

$(“li:odd”) //挑选下标为奇数的li

$(“li:eq(4)”) //下标等于 4 的li(第五个 li 元素)

$(“li:gt(2)”) //下标大于 2 的li

$(“li:lt(2)”) //下标小于 2 的li

l 内容过滤选择器

$(“div:contains(‘Runob’)”) // 包含 Runob文本的元素

$(“td:empty”) //不包含子元素或者文本的空元素

l 可见性过滤选择器

$(“li:hidden”) //匹配所有不可见元素，或type为hidden的元素

$(“li:visible”) //匹配所有可见元素

l 属性过滤选择器

$(“div[id]”) //所有含有 id 属性的 div 元素

$(“div[id=‘123’]”) // id属性值为123的div 元素

$(“div[id!=‘123’]”) // id属性值不等于123的div 元素

l 状态过滤选择器

$(“input:enabled”) // 匹配可用的 input

$(“input:disabled”) // 匹配不可用的 input

$(“input:checked”) // 匹配选中的 input

$(“option:selected”) // 匹配选中的 option

l 表单选择器

$(":input") //匹配所有 input, textarea, select 和 button 元素

(":text")//所有的单行文本框，(":text") //所有的单行文本框，(":text")//所有的单行文本框，(":text") 等价于("[type=text]")，推荐使用("[type=text]")，推荐使用("[type=text]")，推荐使用(“input:text”)效率更高，下同

$(":password") //所有密码框

$(":radio") //所有单选按钮

$(":checkbox") //所有复选框

$(":submit") //所有提交按钮

$(":reset") //所有重置按钮

$(":button") //所有button按钮

$(":file") //所有文件域

1.28 json
1.28.1 概念
ajax往往要完整应用还会配合一个技术：JSON，那什么是JSON呢？

JSON(JavaScript Object Notation，JS 对象简谱) 起名不咋地，非常拗口，我们就记住它是一种轻量级的数据交换格式即可。它基于 ECMAScript (js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者，成为主流开发方式（ajax异步请求，json返回）。

1.28.2 获取京东商品价格
京东获取某个商品100003717483的价格

请求链接：

https://item.jd.com/100003717483.html 商品详情

https://p.3.cn/prices/mgets?skuIds=J_100003717483 商品价格

json字符串：

[{“cbf”:“0”,“id”:“J_100003717483”,“m”:“10000.00”,“op”:“2499.00”,“p”:“2099.00”}]

1.28.3 格式化
[

{

  "cbf":"0","id":"J_100003717483","m":"10000.00","op":"2499.00","p":"2099.00"

}

]

结构特点：

l 数组[]

l 一条记录{}，多条记录用逗号隔开 {},{}，最后一条没有逗号

l 键值对 “p”:“2099.00”，kv用双引号括，多个用逗号隔开

1.28.4 转换
JSON已经作为浏览器内置支持，所以我们可以直接使用JSON对象：

l json转obj JSON.parse(“json”)

l obj转json JSON.stringify(obj)

1.28.5 测试

1.28.6 jd-json.html

<head><meta charset="utf-8"><title>json字符串解析过程</title><script src="js/jquery.min.js"></script></head><body><div id="rtnData">返回数据：</div><div id="itemPrice">商品价格：</div><div id="itemId">商品编号：</div></body><script>//json字符串，最终替换从京东商城返回某个商品信息//先搞定json解析过程var jsonstr = '[{"p":"3999.00","op":"3999.00","cbf":"0","id":"J_100007851351","m":"4000.00"}]';//把json字符串变成javascript对象var data = JSON.parse(jsonstr);//回显获的数据，把js对象转json字符串//$("#rtnData").text(jsonstr);     //div.innerText 直接展示字符串$("#rtnData").text( "返回数据："+JSON.stringify(data) );     //把js对象转换json字符串//价格颜色变红色：div.innerHTML（javascript写法）.html （jQuery写法）$("#itemPrice").html(data[0].p );  //从data对象中解析出价格//substring(2)截取字符串，从第三个字符开始到最后$("#itemId").text(data[0].id.substring(2) );

//从data对象中解析出编号

</script>

1.29 ajax
1.29.1 概念
ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的技术。早期只有同步的方式，多个请求，只能顺序执行，只能等待执行。有了ajax异步技术，可以无需等待上一个请求执行完成，就可以直接发起请求。服务端返回后，ajax通过回调技术通知客户端程序，把响应的结果传递给用户事先写好的回调函数。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页进行局部更新，提升网页的效率，用户无需等待页面的刷新，嗖的一下内容就变化了。改变原有整个页面刷新，造成页面晃眼的现象。所以这项技术一出现，就得到业界的推崇。

关键字：异步、回调、局部刷新。

1.29.2 格式
七个参数：

       $.ajax({type:url:contentType:data:dataType:success: function(data){},error: function(data){}})

1.29.3 jd-ajax.html

<head><meta charset="utf-8"><title></title><script src="js/jquery.min.js"></script></head><body><div id="rtnData"></div><div id="itemId"></div><div id="itemPrice"></div></body><script>$().ready(function(){$.ajax({type: "POST",url: "https://p.3.cn/prices/mgets",contentType: "application/json;charset=utf-8",data: {       //拼接的参数"skuIds": "J_100003717483"},dataType: "jsonp",success: function(data) {   //返回的结果//[{"cbf":"0","id":"J_100003717483","m":"10000.00","op":"2499.00","p":"2099.00"}]$('#rtnData').text("返回数据：" + JSON.stringify(data));$('#itemId').text("商品编号：" + data[0].id);$('#itemPrice').html("商品价格： " + data[0].p);},error: function(data) {alert("提交失败" + JSON.stringify(data));}});});</script>

1.30 扩展：
1.30.1 json和js对象的区别
json字符串: { “id”:“100”,“name”:“tony”,“salary”:“30000” }

js对象：{ “id”:100,“name”:“tony”,“salary”:30000 }

可以看出js对象中value值如果是整数，小数，无需加双引号

l 含义不同，json是一种数据格式，js表示类的实例

l 传输：json用于跨平台、跨网络传输，速度快；js不能传输

l 展现：json键值对方式，值是字符串不能是对象方法函数；js值不一定加双引号，值可以是对象、函数、字符串等

l 转换：JSON.parse(jsonStr) JSON已经作为浏览器内置对象，eval(json)；JSON.stringify(obj)

1.31 NodeJS
1.31.1 简介

谷歌Chrome的V8引擎执行JavaScript的速度非常快，性能非常好。于是开始有人在其基础上构建系统。2009年2月，Ryan Dahl在博客上宣布准备基于V8创建一个轻量级的Web服务器并提供一套库。这就是著名的Node.js，它采用事件驱动，采用主流NIO非阻塞I/O 模型，从而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

1.31.2 安装
官网：

https://nodejs.org/en/

https://npm.taobao.org/mirrors/node/v10.0.0/ #淘宝镜像链接

暂时不要太高版本，已经发现和Vue兼容不好。

Windows下非常好安装，一路NEXT即可。注意：鼠标右键以管理员身份运行！

node-v8.11.3-x64.msi

1.31.3 查看安装路径
通过dos命令，查找nodejs安装的位置：

1.31.4 node-server.js
下面的代码是node的语法，这个无需练习，体验下即可，它已经涉及到web前端工程师的范畴。后端工程师会启动环境进行测试即可。

任意目录下执行node-server.js，创建并启动node某个实例

var http = require(‘http’);

var url = require(‘url’);

var path = require(‘path’);

//创建server

var server = http.createServer(function(req, res){

//获得请求路径var pathname = url.parse(req.url).pathname;res.writeHead(200, {'Content-Type':'application/json; charset=utf-8'});if(pathname === '/'){res.end(JSON.stringify({ "index":"欢迎" }));}else if(pathname === '/health.json'){res.end(JSON.stringify({ "status":"UP" }));}else{res.end("404");}

});

//创建监听，并打印日志

server.listen(8060, function(){

console.log('listening on localhost:8060');

});

注意：开发的Node.js应用，必须去实现一个健康检查接口，将来可以轻松和SpringCloud微服务架构进行整合，来让Sidecar可以把这个服务实例的健康状况报告给Eureka。

1.31.5 启动停止服务
安装完成nodejs，就可以在dos窗口中执行node命令，后面跟编写的node-server.js文件。

启动服务：

注意路径，按自己的实际安装路径书写

停止服务：

ctrl+c或者直接关闭窗口

可以看到nodejs为何会横空出世，迅速占领市场，天下武功为快不破，node正印证了这点，启动服务神速，一个web运行环境秒启，tomcat等望尘莫及啊!

1.31.6 测试
访问首页

访问监控检查

访问不存在页面