sober30
sober30

前端基础学习笔记

文章目录

  • 什么是前端
    • 前端的应用场景：
    • web前端开发的核心：
    • 软件开发的基本流程
  • 环境搭建
    • 学习网站
    • 工具的准备
  • HTML
    • HTML概念：HyperText Markup Language 超文本标记语言
    • HTML的基本结构
      • 代码注释
    • 常用的标签
      • div：可以看做是一个布局的容器，默认独占一行的，高度由内容撑开
      • 超链接和图片
        • 超链接
        • 图片
      • 文本标签
        • h系列：表示网页中的标题
        • p标签：表示一个段落
        • span标签：用来包裹简短的文字信息
        • input标签：文本输入框标签
      • 列表标签级
        • 清除列表的默认样式
      • 表单元素
        • 概念：
        • form标签
        • 文本框
        • 密码框
        • 单选框
        • 多选框（复选框）
        • 下拉菜单
        • 多行文本
        • 表单的其他特殊属性
      • 表格标签
        • 专属样式
        • 表格的合并
    • 标签的类型
      • 块级元素
      • 行级元素
      • 标签类型可以相互切换:display
  • CSS
    • 概念：Cascading Style Sheets 层叠样式表
    • 样式的语法
      • 内嵌样式
      • 内部样式
      • 外部样式
    • 样式来源
      • 样式来源的优先级
    • CSS选择器
      • 选择器的分类
        • id选择器
        • class选择器（类选择器）
        • 标签选择器
      • 其他选择器
        • 伪类选择器
        • 组合选择器
          • 关系选择器
          • 二级菜单（基础版）
        • 属性选择器
          • 通配符
        • 伪元素选择器
        • 结构选择器(伪类)
          • 其他用法：
      • 选择器权重计算
        • 加法运算
        • 4个0
      • !important
    • CSS基础样式
      • 宽高
      • 边框
      • 字体样式
      • 文本样式
      • 输入框修改提示文字的样式
      • 背景样式
    • CSS盒模型
      • 知识点:
      • 标准盒模型（w3c）
        • margin
          • margin的使用技巧
          • margin带来的影响：margin的传递性
        • border：边框
        • padding：内边距
        • 盒模型的大小计算：
      • 怪异盒模型（ie）
        • 区别：计算宽度大小的时候不同
      • 盒模型之间的切换：box-sizing
    • CSS浮动
      • 概念：
      • 浮动的特点
      • 语法
      • 浮动元素对非浮动元素的影响
    • 字体图标技术
      • 拓展：字体引入技术
    • 弹性布局
      • 概念
      • 弹性容器：
        • 弹性容器的结构
      • 弹性布局的css属性
        • `flex-wrap`：设置弹性项目是否换行
        • flex-direction：切换主侧轴的方向
        • 富余空间：弹性同期里除了弹性项目以外的空间
          • `justify-content`：处理主轴上的富余空间
          • 侧轴上富余空间的处理
      • 弹性项目相关的css属性
        • align-self：单独给弹性项目设置对方式
        • order：改变弹性项目的顺序，数字越大，弹性项目越靠后(可以是负数)
      • 弹性因子
      • 收缩因子
      • flex-basis：设置弹性项目的默认宽度
      • flex：flex-grow flex-shrink flex-basis 的复合属性
    • 定位
      • 概念
      • position
        • 静态定位：所有元素的默认值，默认的定位方式
        • 固定定位：fixed
        • 绝对定位：absolute
        • 相对定位：relative
      • `定位的层级`
  • SASS
      • 概念：
      • 为什么要使用SASS
      • 基本使用
    • 基本语法：
  • CSS3
    • 圆角
    • 盒子阴影
    • 文字阴影
    • 不透明度
      • opacity:
      • rgba
    • 渐变背景
      • 线性渐变
        • 渐变方向
        • 色标
        • 滤镜
      • 径向渐变
    • 背景的复合属性
    • 过渡
      • 设置要过渡的属性名：transition-property
      • 设置过渡时间：transition-duration
      • 设置过渡速率
      • 设置延迟时间
      • 复合属性
      • 注意：
    • 2D转换
      • 2d：平面图形，在几何上讲是由二维坐标系构成
      • 转换
          • 一般情况：2d转换会搭配hover和transition使用
        • 位移：
        • 旋转：
        • 缩放:
        • 拉伸
        • 转换的基点
        • 复合属性：
    • 总结：
  • Bootstrap
    • 响应式布局
    • 媒体查询
  • JS
    • JS概述
      • JavaScript
      • js代码位置
      • 注释
      • 变量
      • 输出
      • 字符串类型
      • web动态字符串案例
      • 数组
      • 对象（字典）
      • 条件语句
      • 函数
    • Js学习内容
    • js的发展
      • 编程语言
        • 机器语言：以二进制的编码对计算机硬件发出指令，是最原始，也是最高效的语言
        • 汇编语言：以英文的单词缩写对二进制代码进行了一层封装，也不太容易阅读，实现一个简单的功能都需要大量的逻辑代码，开发麻烦。也能直接对计算机发出指令，效率也不错。
        • 高级语言：以人类的语言作为基础，对汇编又再次封装，更容易被人理解。高级语言的执行效率低于汇编及机器语言。
      • JavaScript概念
      • JavaScript发展
      • js的核心组成
    • js的运行环境
      • nodejs：不支持 DOM语法 和 BOM语法
      • 浏览器环境：支持DOM、BOM 比如 document.write（）
      • js代码在html位置
    • Js输入输出
      • 输出
        • document.write()：将内容输出在页面上
        • console.log()：将内容输出在控制台里
        • alert()：将内容输出在一个警告提示框里
      • process.stdout.write()不换行打印
      • 输入
    • Js变量
    • Js基础运算符
      • 分类
      • 算术运算符：完成数学计算
      • 赋值运算符：可以给变量赋值或者修改变量
      • 比较运算符：数据与数据之间进行比较，得到一个布尔值（true false）
      • 逻辑运算符：用于对多个条件的判断
    • 控制结构
      • 分支结构：根据不同的条件执行不同的代码块
        • if分支
        • if else分支
        • if else if else
      • switch分支
      • 循环结构
        • while循环
        • do while循环
        • for循环
        • break、continue
        • 练习题
    • 数据类型
      • js中数据类型分为了两大类
      • 字符串 string
      • 数字类型 number
      • 布尔值 boolean
      • 未定义 undefined
      • 空 null
      • typeof 判读数据类型,只能检测基本数据类型
      • 对象：
    • 数据类型的转换
      • 强制转换
        • 转字符串
        • 转数字类型
        • 转布尔值
      • 隐式转换
        • 转字符串
        • 转数字
        • 转布尔值
    • 数组
      • 概念：
      • 定义数组
        • 数组的下标：
        • 数组的长度：length
      • 数据的处理
        • 查询数据
        • 新增数据
        • 修改数据
        • 删除数据
      • 遍历数组
      • 二维数组（多维数组）
    • 数组的api
      • api ： application programming interface 用户编程接口
      • 数组的api：
        • 关于数组增删改的api
        • 数组的查询api：查询数组中，是否存在这个数据，还有查询数据的位置
        • 数组的排序api：
        • 数组的遍历api
        • 数组的拼接和截取
        • 数组转字符串
        • 判断是不是数组 Array.isArray()
    • 函数
      • 创建函数
        • 函数声明式
        • 函数表达式
        • 区别：
      • 调用函数：可以在后续调用多次
      • 函数的参数：
      • 函数的返回值
      • arguments
      • 作用域：变量的活动范围
      • 箭头函数：ES6的新特性，通过`=>`取代了`function`关键字
      • this：代表函数的执行环境
    • 对象object
      • 概念：
      • 创建对象
      • 对象中的数据
      • 操作对象
        • 数据的增删查改
        • 通过`[]`去访问对象
        • 对象的属性和方法
        • 遍历对象(了解)
        • 对象的简写 ES6提供的方式
      • 对象中的this（了解）
    • 对象的分类
      • 对象分类：
        • 宿主对象 host object：
        • 原生对象：
      • Array：数组对象、通过数组对象上的属性和方法操作数组
        • 数组属性
        • 数组方法
      • String：字符串对象
      • Math：数学对象
      • Date：日期对象
      • RegExp：正则对象
    • BOM和DOM
      • 概念：
    • DOM
      • DOM树
      • Document对象
        • 属性
        • 方法
      • element对象
        • 属性
        • 方法
    • 事件
      • 概念：
        • 事件的三要素
      • 事件处理程序
        • HTML事件处理程序（非标准DOM0）
        • DOM0级事件处理程序
        • DOM2级事件处理程序
        • 移除事件监听
        • 案例：计数器
      • 事件类型
        • UI事件
        • 鼠标事件
        • 键盘事件
        • 表单事件
      • 事件流
        • 冒泡流：事件冒泡（IE事件流）
        • 捕获流：事件捕获
        • DOM事件流：同时包含冒泡和捕获
      • this：事件中的this,指的是实际绑定事件的元素节点
      • 事件对象：event对象
        • 属性
        • 方法
      • 事件委托:
    • 数据驱动
    • 正则表达式
      • 概念：正则对象，Regular Expression regExp
      • 创建正则对象
        • 字面量法
        • 构造函数法
      • 正则的验证：`test()`
      • 正则的规则：
        • `[]`包含中括号中的任意一个字符即可
        • 元字符
        • 量词
        • 开始与结束
        • 其他符号
      • 修饰符
    • BOM
      • window对象
        • 属性
        • 方法
      • window四大内置对象
        • location ：url地址栏对象
        • history：历史记录对象
        • 属性
        • 方法
        • screen：屏幕对象
        • navigator：浏览器信息对象
  • H5实战
    • 移动端开发（？）
      • 屏幕尺寸
      • 视口viewport
      • 移动端的尺寸适配方案
      • JS适配代码
      • 移动端的编程技巧
    • 移动端页面搭建（？）
      • 阿里icon
        • 引入需要字体图标的页面
        • 字体图标相关设置
      • 移动端事件
    • jquery（？）
      • jquery 概念
        • jquery引入
        • jquery基础
          • 如何选择标签
          • 修改标签
          • 修改属性
          • 标签操作
          • css操作
          • jquery遍历
          • jquer与js之间的转换
          • jquery获取嵌套或者同级标签
          • jquery 事件
          • jquery动画
    • canvas（？）
      • 概念
      • 基本使用
        • 创建画布
        • 创建画笔
        • 绘制直线
        • 填充与描边
        • 图形样式
    • 原生对象（？）
      • Math
    • 百度地图（？）
    • 首页应用（？）
    • H5应用（？）
    • 页面功能（？）
    • JS高级（？）
    • ES6特性（？）
    • 面向对象（？）
  • Webpack实战
    • Git版本管理
      • 基本使用
      • 初始化配置
    • webpack
      • 配置webpack
        • 准备工作
        • 项目初始化
        • 生产环境和开发环境配置
          • 一、配置文件
          • 二、合并公共配置
          • 三、配置项目启动
          • 四、配置项目启动
        • 基础配置
        • 配置babel
        • 配置scss
        • 静态文件配置
        • 全局配置Jquery
        • source map（开发模式）
        • 清除无用文件（生产模式）
      • 前端模块化
        • 一、设置JS模块
        • 二、在js文件中导入js文件
        • 三、暴露和引入
      • 前后端分离(?)
      • 补充内容

什么是前端

  • web前端：实现与用户交互的界面
  • World Wide Web：www就指的是它的缩写
  • 互联网之父：蒂姆·伯纳斯·李
    • 第一个网页，1991年由蒂姆·伯纳斯·李 开发出来的
    • http://info.cern.ch/hypertext/WWW/TheProject.html

前端的应用场景：

  1. 网页（pc端网页、移动端网页）
  2. app(跨端)
  3. 小程序（国内独有）
  4. 其他应用场景：nodejs（后端开发）、桌面应用（electron，基于html+css+js）、鸿蒙、vr、ar

web前端开发的核心：

  • HTML：网页的骨架
  • CSS：用于网页的样式、美化网页
  • JavaScript：网页的动态脚本，动态交互，数据渲染

软件开发的基本流程

  1. 产品经理：拿到需求——》整理需求——》编写需求文档——》设计出原型图

  2. UI设计师：根据原型图设计出高保真的psd设计原稿

  3. 开发人员：前端、后端、测试人员，架构设计、任务分配等。一般都会同时进行开发

    1. 测试：负责编写测试用例，编写自动化测试的脚本，反复对项目的bug和性能进行测试——》回归测试…
    2. 后端：负责业务逻辑，对数据的处理，并给前端人员提供数据渲染的接口…
    3. 前端：根据UI的设计图设计出网页的基本内容，实现网页的动态交互，根据后端提供的接口动态渲染数据…

  4. 运维人员：网络搭建，服务器环境配置，项目的上线…

环境搭建

学习网站

  1. https://www.w3school.com.cn/

工具的准备

  • 浏览器：谷歌（推荐）、火狐firefox、edge(前身IE)

  • 笔记工具：typora

  1. 是一款markdown的一个编辑器

  2. markdown：https://markdown.com.cn/

  3. 借助typora提供的快捷键来进行编写

  • 像素大厨：pxcook

  • 开发工具：vscode（推荐）、hbuilder、webstorm、sublime

  • vscode推荐的插件：
    代码编辑器，小巧，自定义插件，性能好

  • Chinese (Simplified):汉化vs code

  • HTML CSS Support:在HTML中支持css提示

  • Image preview：在代码中将引入的图片显示它的缩略图

  • open in browser：在浏览器中打开网页，可以是默认浏览器，也可以是其他浏览器

  • VS Color Picker：颜色选择器

  • Code Spell Checker：代词拼写检查

  • Auto Rename Tag：自动修改对应的标签名

  • Live Server：将vscode作为服务器打开页面

按下!感叹号 （英文）+ tab键: 生成

HTML

HTML概念：HyperText Markup Language 超文本标记语言

  • HTML就是一种创建网页的标准语言，你通过浏览器访问的所有主流网页，包括：百度、淘宝、京东、腾讯、凡云网校都是基于HTML创建的

  • 超文本：不仅仅是文本，还包括了，超链接、图片、音视频等其他资源

    • 通过超链接的形式，将以上各种资源整合（链接）在一起，形成了一个网状的结构

  • 标记：就是组成网页的标签（代码），html代码就是以标签的形式存在的，HTML标签通常也称为html元素

    • 标签的基本语法：<标签名>内容 | <标签名 />

    • 例子：

      <a href="https://www.fanyunedu.com">欢迎来到凡云网校a>

  • 语言：人与计算机之间的沟通语言，计算机语言

HTML的基本结构

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <a href="https://www.fanyunedu.com">欢迎来到凡云网校a>
body>
html>

  • :声明我们当前html文档以什么方式去解析：以html5的方式呈现我们看见的网页

    • 不区分大小写
    DOCTYPE html>
doctype HTML>

  • ：网页的根标签，每个网页都有这个标签，有且只有一个

  • ：网页的头部，主要是用来配置网页的信息

    • title：网页的标题

    • meta：用于配置网页的元（meta）信息：

      • 如设置网页的字符编码为utf-8

      • <meta name="description" content="《王者荣耀》是腾讯天美工作室" />
<meta name="keywords" content="王者荣耀,王者荣耀下载,王者荣耀电脑版" />
        • description：网页的描述
        • keywords：网页的关键字
        • 用于SEO，搜索引擎优化

  • ：用于包裹网页的主题内容

代码注释
  • vscode可以通过快捷键快捷注释 ctrl+/
  • 注释的代码不会显示到网页内容中

常用的标签

div：可以看做是一个布局的容器，默认独占一行的，高度由内容撑开

<div>
    内容（可以是文字，也可以是其他的标签）
div>
  • div是我们网页中最常见的布局标签，它可以包裹其他的元素，形成一个独立的区域。父div会别子div撑开，在不写height的情况下。

超链接和图片

超链接

<a href="http://www.baidu.com" target="_self">百度一下a>
  • href：链接的路径
    • 可以是网络路径
    • 也可以是本地路径
  • target：控制页面的打开方式
    • _blank：在新窗口中打开页面
    • _self：在当前窗口打开页面（默认值）

图片

<img src="./image/banner.jpg" alt="" title="">

  • src：链接图片资源的路径

    • 可以是网络路径

      就是以http或https开头的就是网络路径

    • 也可以是本地路径

      绝对路径：以file或盘符开头的路径就是绝对路径

      相对路径：从当前文件夹出发来查找资源

      • ./：当前目录
      • …/：返回上一级目录
      • …/…/：返回上一级的上一级

  • alt：图片加载失败时显示的提示性文字

  • title：鼠标悬停在标签上的提示性文字

    • title在其他标签也可以使用

文本标签

h系列：表示网页中的标题

<h1>这是一个标题h1>
<h2>这是一个标题h2>
<h3>这是一个标题h3>
<h4>这是一个标题h4>
<h5>这是一个标题h5>
<h6>这是一个标题h6>
  • 数字越大 字号越小
  • 注意：h系列上下有默认margin
  • h系列标签是独占一行

p标签：表示一个段落

<p>
    《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为艺术创作，并非正史。
p>
  • p标签是包裹段落性的文字，如果一行排列不下，文字会自动换行。
  • p标签独占一行的
  • 注意：在文字代码中通过编辑器换行，不会有换行的效果，只会渲染成一个空格符

span标签：用来包裹简短的文字信息

<span>这是王者荣耀首页span>
  • span标签同行显示

input标签：文本输入框标签

<input type="text" placeholder = "热门搜索：干花搜索">
  • input标签同行显示

列表标签级

  • 无序列表
<ul>
    <li>1li>
    <li>2li>
    <li>3li>
    ...
ul>

li：代表无序类表里的每一项

  • 有序列表
<ol>
    <li>1li>
    <li>2li>
    <li>3li>
    ...
ol>

  • ul、ol、li都是块级元素

  • 自定义列表

<dl>
    <dt>学生dt>
        <dd>学生列表dd>
        <dd>新增学生dd>
    <dt>教师dt>
        <dd>教师列表dd>
        <dd>新增教师dd>      
dl>

清除列表的默认样式

ul,ol,li{
    list-style:none;
    margin:0;
    padding:0
}

表单元素

概念：

表单元素通常都用来前端后端的数据交互

表单其实是一片允许用户输入数据的一个区域

通过form来定义一个表单区域(所有元素标签在form区域内才有效)

在form标签里面必须有一个submit标签！！！！！！！！！！！！！！！

form标签

<form action="提交地址" method="提交表单元素的方式">
    
form>

  • method:

    • get：通过url地址进行传递数据（明文传输）
    • post：不会在url地址上显示

  • form用来包裹一些表单元素的：文本框、密码框、单选框、多选款（复选框）、下拉菜单、按钮

文本框

<input type="text" name="文本框的名字" value="文本框的默认值" placeholder="文本框的提示语句">

密码框

<input type="password"  name="文本框的名字" value="文本框的默认值" placeholder="文本框的提示语句">

单选框

<input type="radio" name="给单选框分类" value="要提交给后端的具体值" checked>

name:类名需要相同
checked：默认选中这个选框

多选框（复选框）

<input type="checkbox" name="多选框的名字" value="要提交给后端的具体值" checked>

checked：默认选中这个选框

下拉菜单

<select name="下拉菜单的名字">
    <option value="要提交给后端的具体值1" selected>选项1option>
    <option value="要提交给后端的具体值2">选项2option>
    <option value="要提交给后端的具体值3">选项3option>
    <option value="要提交给后端的具体值4">选项4option>
select>

selected：默认选中的选项

多行文本

表单的其他特殊属性

  • readonly：只能作用给输入框的表单元素
  • disabled：禁用表单元素，并且禁用的没有办法提交给后端

表格标签

姓名 年龄 性别
张三 18 男
李四 20 女
王五 22 男 
<table>
    <thead>
        <tr>
            <th>姓名th>
            <th>年龄th>
            <th>性别th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>张三td>
            <td>18td>
            <td>男td>
        tr>
        <tr>
            <td>李四td>
            <td>20td>
            <td>女td>
        tr>
        <tr>
            <td>王五td>
            <td>22td>
            <td>女td>
        tr>
    tbody>
table>
  • table :定义一个表格区域
  • thead：定义一个表头的区域
  • tbody：定义个表身的区域
    • tr：定义表格的一行
    • td：定义表格的一行中的每一项

专属样式

 /* 表格专用样式：合并单元格的边框，去除表格默认多余边框 */
border-collapse: collapse;

表格的合并

在td上有两个属性可以合并单元格

  • colspan=“n” 跨列合并n列
  • rowspan=“n” 跨行合并n行

标签的类型

  • 块级元素

    • 独占一行
    • 支持修改宽高
    • 例如：div、h系列、p标签

  • 行级元素

    • 同行显示
    • 不支持修改宽高
    • 例子：a、span、img、input

    行级元素中还有一些特殊的标签：行内块元素，例如img、input

    行内块元素 又可以同行显示，又可以支持修改宽高

  • 标签类型可以相互切换:display

    display: block;
display: inline-block;
display: inline;
    • block：块级元素
    • inline-block：行内块元素
    • inline：行级元素（行内元素）

CSS

概念：Cascading Style Sheets 层叠样式表

  • css是一种样式表语言，它用来描述html文档里的元素应该如何呈现
  • 在网页中，css就是用来给html元素添加样式的：字体大小、颜色、宽高、间距等…以及添加动画等装饰性的特征。
  • 层叠：css样式可以存在于多个地方，这些样式都可以作用在同一个标签上，相同的样式会作用优先级更高的，不同的样式会累计都作用在该标签上，样式会层叠作用。
  • 样式表：用户自己编写的样式，所有样式集合在一起就是样式表：内嵌样式表、内部样式表、外部样式表

样式的语法

  1. 内嵌样式

<标签名 style="样式名1：样式值1；样式名2：样式值2；....">标签名>
  • 内嵌样式表只会作用在当前标签上

  1. 内部样式

<head>
	<style>
        选择器{
            样式名1：样式值1；
            样式名2：样式值2；
            ...
        }
    style>
head>
  • 内部样式表会做用在指定的一组标签上

  1. 外部样式

    1. 需要在外部定义一个以.css后缀结尾的css文件
    2. 在head标签中通过link引入
    <head>
	 <link rel="stylesheet" href="css文件的路径">
head>

    以下是css文件里的语法：

    选择器{
    样式名1：样式值1；
    样式名2：样式值2；
    ...
}

样式来源

  1. 用户自己编写的样式：
    1. 内嵌样式表
    2. 内部样式表
    3. 外部样式表
  2. 浏览器赋予的样式
    1. 浏览器默认样式
    2. 浏览器用户自定义样式

样式来源的优先级

内嵌样式表 > 内部样式表 ≈ 外部样式表（内部和外部采用就近原则）

CSS选择器

选择器的分类

id选择器

<style>
#id名{
    想要给对应标签设置的样式
}
style>
<div id="id名">div>
  • 注意：id在一个页面中只能出现一次，有且只有一个。

class选择器（类选择器）

<style>
    .class名1{
        想要给对应标签设置的样式
    }
    .class名2{
        想要给对应标签设置的样式
    }
style>
<div class="class名1 class名2">div>
  • 注意：同一个class可以作用给多个标签，一个标签上可以有多个class
  • 命名规范：
    1. 可以包含数字、英文、_ 、-
    2. 不能以数字开头
    3. 不能包含其他的特殊符号：#、.、@、&
    4. 推荐命名：
      1. 语义化，见词知意，
      2. 有多个单词来命名可以用-隔开

标签选择器

标签名{
	想要给对应标签设置的样式
}
  • 作用范围：页面上所有的指定标签

其他选择器

伪类选择器

选择器 描述
:link 向未被访问的超链接添加样式
:visited 向访问过的超链接添加样式
:hover 向鼠标悬停的标签添加样式
:active 向被激活的标签添加样式
:focus 向获取到焦点的标签添加样式
  • 超链接样式：link visited、hover（常用）、active
    • 超链接样式的顺序问题：L V H A

组合选择器

关系选择器

  • 后代选择器：找到所有满足条件的后代，选择器之间通过空格隔开

    父选择器 后代选择器｛
    针对当前父选择器里的后代来设置，不会影响其他标签里的样式
｝
.box li｛

｝

  • 父子选择器（子元素选择器）：找到满足条件的儿子标签，之间通过 > 隔开

    父选择器 > 儿子选择器{
    要作用给儿子选择器的样式
}

  • 兄弟选择器：找到满足条件的（后续）兄弟选择器，之间通过 + 隔开

    选择器a + 选择器b｛
    作用给a后续的兄弟b的样式
｝

  • 选择器分组：找到所有指定的标签，中间通过逗号，隔开

    div,h1,p,body,ul,li{
    这里的样式就会作用给上述所有标签
}
二级菜单（基础版）
<style>
    .two{
        /* 隐藏元素 */
        display: none;
    }
    .web:hover .two{
        display: block;
    }
style>
<body>
    <ul>
        <li class="web">学前端
            <ul class="two">
                <li>HTMLli>
                <li>CSSli>
                <li>JSli>
            ul>
        li>
        <li class="web">学java
            <ul class="two">
                <li>HTMLli>
                <li>CSSli>
                <li>JSli>
            ul>
        li>
        <li class="web">学测试
            <ul class="two">
                <li>HTMLli>
                <li>CSSli>
                <li>JSli>
            ul>
        li>
    ul>
body>

属性选择器

选择器 例子 例子描述
[属性名] [class] 选择带有 class 属性的所有元素。
[属性名=属性值] [class=box] 选择带有 class=“box” 属性的所有元素。精准匹配
[属性名~=属性值] [class~=box] 选择带有包含 “box” 一词的 class 属性的所有元素。必须为单独的完整单词
[属性名|=属性值] [class|=box] 选择带有以 “box” 开头的 class 属性的所有元素。必须为完整单词或加连字符
[属性名^=属性值] [class^=box] 选择其 class 属性值以 “box” 开头的所有元素。不必为完整单词
[属性名$=属性值] [class$=box] 选择其 class 属性值以 “box” 结尾的所有元素。不必为完整单词
[属性名*=属性值] [class*=box] 选择其 class 属性值包含 “box” 的所有元素。不必为完整单词，模糊匹配
通配符
  • 找到页面中的所有标签
  • 不建议使用，性能开销太大
* {
    /*list-style:none*/
    /*padding:0 */
    css样式
}

伪元素选择器

  • ::after:在标签内容之后添加一个渲染区域
  • ::before：在标签内容之前添加一个渲染区域

注意：它们都需要搭配content来使用

.box::after{
    /* 固定搭配 */
    content: "1";
    display: inline-block;
    width: 20px;
    height: 20px;

    /* 倒圆角 */
    border-radius: 50%;
    background-color: red;
    color: #fff;
    font-weight: bold;

    /* 绝对定位 */
    position: absolute;
    top: -10px;
    right: -10px;
}

.box::before{
/* 固定搭配 */
content: "";
}

注意：如果需要给微元素设置宽高，那么需要把标签类型修改为块级元素inline-block、block

结构选择器(伪类)

  • first-child：找到当前结构的第一个标签，并且这个标签需要是指定的标签，样式才能应用
  • last-child：找到当前结构的最后一个标签，并且这个标签需要是指定的标签，样式才能应用
p:first-child{
    color: red;
}
p:last-child{
    color: blue;
}

  • nth-child(数字):找到当前结构正数对应数字的标签，并且这个标签就是指定的标签

  • nth-last-child(数字):找到当前结构倒数对应数字的标签，并且这个标签就是指定的标签

p:nth-child(2){
    color: purple;
}
p:nth-last-child(2){
    color: purple;
}
  • nth-of-type(数字)：找指定类型的正数第几个标签，并且该标签就是该类型的第几个
  • nth-last-of-type（数字）:找指定类型的到数第几个标签，并且该标签就是该类型的第几个
p:nth-of-type(2){
    color: tomato;
}
p:nth-last-of-type(2){
    color: green;
}
其他用法：

偶数：even / 2n

奇数：odd / 2n-1

隔两个选一个 / 3n

选中前面的x个 / -n + x

选择器权重计算

  • 加法运算

    1. 内嵌样式 ：1000
    2. id ： 100
    3. class、属性选择器、伪类 ：10
    4. 标签、伪元素 ：1
    5. 通配符、继承样式 ：0

注意：加法运算，不满足10进1的标准

  • 4个0

    1. 内嵌样式 （1，0，0，0）
    2. id （0，1，0，0）
    3. class、属性选择器、伪类 （0，0，1，0）
    4. 标签、伪元素 （0，0，0，1）
    5. 通配符、继承样式 （0，0，0，0）

从左往右依次比较，只要发现某一个0比其他的大，那么它的权重就更高

100个class都没有1个id权重高

!important

将权重提高到最高，内嵌都没有!important高

#demo{
    color: blue;
}

.demo1.demo2.demo3.demo4.demo5.demo6.demo7.demo8.demo9.demo10.demo11{
    color: red !important;   这个的权重更高
}

不建议大量使用！important，破坏css的权重结构。

CSS基础样式

宽高

width: 宽度
height: 高度
  • 属性值：
    • px像素为单位
    • 百分比为单位

边框

border: 边框的粗细 边框的样式 边框的颜色
  • 粗细：以px为单位，例如：5px
  • 样式：
    • solid：实线
    • dashed：虚线
    • dotted：点线
    • double：双边线
  • 颜色：英文单词、16进制颜色的、rgb色

字体样式

/* 设置文字字号大小 */
font-size: 30px;
/* 设置字体的类型 */
font-family: "微软雅黑";
/* 设置字体的粗细 */
font-weight: bold;
/* 设置字体风格。italic代表斜体字 */
font-style: italic;

文本样式

/* 设置文本的对齐方式，只对文本和行级元素有效 */
text-align: center;
text-align: left;

/* 设置文本的整体效果 */
/* 下划线 */
text-decoration: underline;
/* 上划线 */
text-decoration: overline;
/* 贯穿线 */
text-decoration: line-through;
/* 清除a标签默认的下划线 */
text-decoration: none;

/* 设置文本的颜色 */
color: #ff00ff;

/* 设置行高
使用技巧：设置的字体行高等于父盒子的高度，实现文本垂直居中（只对一行的文本有效）
*/
line-height: 300px;

输入框修改提示文字的样式

/* 修改输入框里的提示文字 */
.user-box input::placeholder{
    /* color: red; */
    font-size:14px;
}

背景样式

/* 背景颜色 */
background-color: pink;

background-image: url(./image/logo.png);
/* 取消背景的重复铺设 */
background-repeat: no-repeat;
/* 设置背景图的定位 */
background-position: 50% 50%;
/* 设置背景图的大小 */
/* background-size: 100px 100px; */
background-size: contain;
  • background-position：left top
    • 可以设置英文单词：left right center top bottom
    • 第一个值是x轴的位置，第二个值是y轴的位置
  • background-size：
    • 可以使px像素，也可以使百分比
    • contain：图片的长边撑满盒子，等比例缩放
    • cover：图片的短边撑满盒子，等比例缩放

CSS盒模型

知识点:

  • 概念

  • 盒模型相关的css属性

    • 尺寸
      1. width
      2. height
      3. padding（内边距）
      4. border（边框）
    • 间距
      1. margin（外边距）

  • 概念：所有html元素都可以看做是一些大大小小的盒子，这些盒子组合起来就能形成整个布局

标准盒模型（w3c）

  • content：内容

    • width和height就决定了内容的宽度和高度

  • padding：内边距

    • 内容与盒子边框之间的距离

  • border：边框

  • margin：外边距

    • 盒子与盒子之间的距离，盒子与盒子可以是兄弟关系，也可以是父子关系

margin

margin-bottom: 50px;
margin-top: 50px;
margin-left: 30px;
margin-right: 100px;
/* margin复合属性 一个值：  上下左右 */
margin:50px;
/* margin复合属性 2个值：  上下   左右 */
margin:50px 100px
/* margin复合属性 3个值：  上   左右    下 */
margin: 30px 100px 50px;
/* margin复合属性 4个值：  上   右   下    左   顺时针结构*/
margin: 20px 30px 50px 80px;

作用：盒子与盒子之间的距离，盒子与盒子可以是兄弟关系，也可以是父子关系

注意：margin会撑大盒模型的占位大小

margin的使用技巧

  1. 盒子水平居中：margin：0 auto

    注意：垂直方向的auto是没有效果的

  2. 盒子实现垂直居中：

    1. 水平居中
    2. 计算高度：（父盒子的高度 - 子盒子的高度）/ 2
    margin: 0 auto;
/* margin-top: 200px; */
/* 可以利用calc()的函数来实现计算,css3提供的计算方法 */
margin-top: calc((666px - 79px) / 2);

  3. margin为负值

margin-top:-100px
  • 向上走100个像素，可以实现重叠的效果
margin带来的影响：margin的传递性
  • 概念：margin-top会传递给没有边界（边框）的父元素
  • 解决：通过overflow:hidden解决，原理是触发了一个bfc区域
.out{
    width: 500px;
    height: 300px;
    background-color: pink;
    /* 固定办法，解决margin的传递性，触发了一个bfc区域 */
    overflow: hidden;
}
.in{
    width: 200px;
    height: 200px;
    background-color: tomato;
    margin-top: 50px;
}

border：边框

  • 边框会撑大盒模型的大小

padding：内边距

padding-top: 50px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding: 50px;
padding: 50px 100px;
padding: 50px 100px 80px;
padding: 50px 100px 80px 30px;
  • 注意padding也会撑大盒模型

盒模型的大小计算：

宽度：width （content）+ padding * 2 + border * 2 + margin * 2

怪异盒模型（ie）

前端基础学习笔记_第1张图片

区别：计算宽度大小的时候不同

宽度：width（包含content + padding * 2 + border * 2）+ margin * 2

盒模型之间的切换：box-sizing

  • border-box：怪异盒模型
  • content-box：标准盒模型（默认值）

补充：页面中绝大部分都是标准盒模型，还有一小部分默认采用的是怪异盒模型

CSS浮动

概念：

  1. 浮动的设计初衷是为了实现文字环绕图片的效果
  2. 我们通常利用浮动的特点实现布局效果——同行显示

浮动的特点

  1. 浮动元素会和其他浮动元素同行显示

  2. 左浮动：依次靠左排列；右浮动：会依次靠右排列，右浮动要注意代码结构顺序

  3. 父元素宽度不足以容纳下浮动元素时，浮动元素会自动换行

  4. 行级元素浮动之后会转换成块级元素，支持宽高的设置

  5. 浮动元素会脱离文档流

    1. 标准文档流：网页默认呈现的方式，块级元素从上往下排列，行级元素从左往右排列（排列不下会自动换行），这种排列的方式就是标准文档流
    2. 脱离文档流：不按照标准文档流的方式排列，按照自己的方式显示，脱离文档流的元素浮于标准文档流之上，这些元素之前所占的空间就不存在了，后续在标准文档流之中的元素会递补到该空间

  6. 浮动元素之下不能有文字存在，会被挤开

语法

float: left | right | none（默认值，不浮动）

浮动元素对非浮动元素的影响

  1. 后续的非浮动元素会被浮动元素遮住——浮动元素脱离了文档流

    • 解决：清除浮动带来的影响，给受影响的元素设置属性：clear:both
    .box{
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 左浮动 */
    float: left;
    /* float: right; */
}
.ot{
    width: 200px;
    height: 200px;
    background-color: blue;
    /* 清除浮动带来的影响 */
    clear: both;
}

  2. 子元素浮动之后，没有设置高度的父盒子的高度会塌陷，

    • 解决1：overflow:hidden触发bfc，让里面的浮动元素高度参与计算

    • 解决2：在父盒子最后面创建一个空div，取一个class=clearfix，再给这个盒子设置清除浮动属性

    .clearfix{
    clear: both;
}
    • 解决3：利用伪元素清除浮动
    .clearfix::after{
    content: "";
    display: block;
    clear: both;
}

后续只需要在 受影响的父元素的class里添加 clearfix名就行了

字体图标技术

官网：https://fontawesome.dashgame.com/
一套绝佳的图标字体库和CSS框架

引入：下载静态文件解压，通过link标签引入css文件

注意：

  1. 文件目录结构不能动
  2. 引入css文件和fonts文件

拓展：字体引入技术

@font-face{
    font-family: 'myFont';
    src: url(./fonts/徐静蕾字体.ttf),url(./fonts/徐静蕾字体.woff);
}

div{
    font-family: 'myFont';
}

弹性布局

概念

传统的布局方式：浮动、margin、vertical-align、padding…技术来完成页面

  • 为了元素同行显示：浮动——影响:清除浮动
  • 各种元素的对齐问题

弹性布局：css3提出的一个新的布局概念，以弹性容器为核心来进行页面设计，可以快捷、响应式的完成页面布局。

弹性容器：

设置弹性容器需要给父盒子设置display:flex的属性

弹性容器的特点：

  1. 弹性容器里的子元素会同行显示

  2. 弹性容器里的子元素默认不会换行

  3. 弹性容器里的子元素会被修改为块级元素，并且同行显示，

  4. 如果子元素没有设置宽高，宽度由内容决定，高度默认沾满整个弹性容器

  5. 弹性容器只对直接子元素有效果，对孙子元素没有效果

  6. 弹性容器对兄弟元素没有影响，弹性容器在兄弟眼里就是一个普通的块级元素

弹性容器的结构

前端基础学习笔记_第2张图片

弹性容器（flex container）：设置了display：flex属性的标签

弹性项目(flex item)：弹性容器里的每一个子元素

主轴侧轴(main axis / cross axis)：决定了方向，可以通过代码把主轴和侧轴进行交换

起点和终点(main start / main end )：决定元素的排列方向

弹性布局的css属性

flex-wrap：设置弹性项目是否换行

  • wrap：换行

flex-direction：切换主侧轴的方向

  • row：水平方向从左往右排布
  • row-reverse：水平方向从右往左排布
  • column：垂直方向，从上往下排布
  • column-reverse：垂直方向，从下往上排布

富余空间：弹性同期里除了弹性项目以外的空间

分配富余空间的css属性

justify-content：处理主轴上的富余空间
  • flex-start：将富余空间放在所有弹性项目之后（默认值）
  • flex-end：将富余空间放在所有弹性项目之前（默认值）
  • center：让所有弹性项目居中
  • space-between：将富裕空间放在每一个弹性项目之间，左右两边的项目是贴在容器边上的
  • space-around：将富裕空间放在每一个项目的两侧，会出现两边窄，中间宽的效果
  • space-evenly：每一个富余空间的宽度都相等
侧轴上富余空间的处理

  • align-items:处理弹性项目所在的那一行的富余空间

    • flex-start：将富余空间放在所有弹性项目之后（默认值）
    • flex-end：将富余空间放在所有弹性项目之前（默认值）
    • center：让所有弹性项目居中
    • stretch：如果弹性项目没有设置高度时的默认值

  • align-content：处理弹性项目在整个容器里侧轴的富余空间(只针对多行元素)

    • flex-start：将富余空间放在所有弹性项目之后（默认值）

    • flex-end：将富余空间放在所有弹性项目之前（默认值）

    • center：让所有弹性项目居中

    • space-between: 将富裕空间放在每一个弹性项目之间，左右两边的项目是贴在容器边上的

    • space-around: 将富裕空间放在每一个项目的两侧，会出现两边窄，中间宽的效果

弹性项目相关的css属性

align-self：单独给弹性项目设置对方式

  • flex-start：将富余空间放在所有弹性项目之后（默认值）

  • flex-end：将富余空间放在所有弹性项目之前（默认值）

  • center：让所有弹性项目居中

order：改变弹性项目的顺序，数字越大，弹性项目越靠后(可以是负数)

.item2{
    /* order: 3; */
}
.item3{
    /* order 数字越大，顺序越靠后,默认值就是0 */
    /* order: 2; */
}
.item4{
    /* order: 0; */
    order: -1;
}
.item1{
    /* order: 1; */
}

弹性因子

概念：用来设置每一个弹性项目的增长量，这个增长量是富裕空间给的。

语法:

flex-grow：数字

数字越大，这个弹性项目所分配的空间占比越多，

每一个弹性项目所分配得到的空间：弹性空间

计算公式：

富余空间 = 弹性容器的大小 -  所有弹性项目宽度的总和
弹性空间 = 富余空间 / 弹性因子的总和 * 对应的弹性因子
弹性项目的最后宽度 = 弹性空间 + 弹性项目原本的宽度

flex-grow默认值为0

收缩因子

概念：当弹性容器宽度不够时，去设置每一个弹性项目的收缩量

语法：

flex-shrink：数字

flex-shrink默认值为1

数字越大，收缩的越多

每一个弹性项目的收缩的空间（收缩空间）

计算公式：

总收缩空间 = 弹性项目的宽度总和 - 弹性容器的宽度
每个弹性项目的收缩空间 =  总收缩空间 / 收缩因子 * 对于弹性项目的收缩因子
弹性项目的最后宽度 = 弹性项目原本的宽度 - 收缩空间

flex-basis：设置弹性项目的默认宽度

优先级：flex-basis > width

语法：

flex-basis: 500px

flex：flex-grow flex-shrink flex-basis 的复合属性

默认值：0 1 auto

  • flex：1: 代表flex-grow：1、flex-shrink：1、flex-basis：0%（auto）

定位

概念

  1. css提供了一个属性position，用来控制元素的在页面中的显示位置
  2. 应用场景：侧边栏、头部固定、二级菜单、重叠元素…
  3. 定位的方式：
    • 静态定位
    • 固定定位
    • 绝对定位
    • 相对定位

position

静态定位：所有元素的默认值，默认的定位方式

postion：static

固定定位：fixed

  • 特点：

    1. 会在当前位置脱离文档流

    2. 如果设置了偏移量，会参考整个文档（document）进行定位偏移

    3. 会固定显示在文档区域，不会随着滚动条而滚动

  • 语法：

    position:fixed；
/* 偏移量*/
/*left：0；
top:0;*/
right:0;
bottom:0

  • 偏移量：

    left：距离文档左边为多少距离

    right：右边

    top：上边

    bottom：下边

    注意：同时设施了top和bottom、right和left，left和top的优先级更高

  • 应用场景：
    头部固定、侧边栏固定…

  • 使用技巧：盒子居中

    .aside{
    width: 120px;
    height: 280px;
    background-color: pink;
    position: fixed;
    /* margin: auto auto;  利用margin的特点实现左右上下自动分配*/
    margin: auto; 
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

绝对定位：absolute

  • 特点：

    1. 设置了绝对定位会在当前位置脱离文档流
    2. 设置了偏移量默认情况是参考文档进行定位，但是滚动条滚动时会一起滑动
    3. 绝对定位如果有定位父级，会参考定位父级来进行偏移，没有则参考文档

  • 语法：

    position:absolute
/* left: 0;
right: 0px;*/
top: 0px;
bottom: 0;

  • 偏移量：

    left：距离最近的定位父级左边为多少距离（如果没有才参考文档）

    right：右边

    top：上边

    bottom：下边

    注意：同时设施了top和bottom、right和left，left和top的优先级更高

  • 应用场景：二级菜单，元素重叠

  • 使用技巧：盒子居中

    .aside{
    width: 120px;
    height: 280px;
    background-color: pink;
    position: absolute;
    /* margin: auto auto;  利用margin的特点实现左右上下自动分配*/
    margin: auto; 
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

绝对定位通常来说是搭配 相对定位来使用的：子绝父相

相对定位：relative

特点：

  1. 不会脱离文档流，还是处于标准文档流之中
  2. 设置了偏移量会参考它原本的位置进行偏移

语法：

position: relative;
/* left: 200px;
top: 200px; */
right: -50px;
bottom: -50px;

偏移量：

left：距离原本的位置向右移动

right：向左移动

top：向下移动

bottom：向上移动

注意：同时设施了top和bottom、right和left，left和top的优先级更高

应用场景：

  1. 给绝对定位充当定位父级，因为相对定位不会脱离文档流
  2. 如果使用了margin负值，显示层级有问题，可以给这个元素设置相对定位，就可以再设置z-index

定位的层级

z-index:数字

数字越大，显示层级越高

必须设置给有定位的元素（除了static）

SASS

概念：

  • SASS是一个CSS预处理器，有助于减少CSS的重复使用，节省时间。它是更稳定和强大的CSS扩展语言，描述文档的样式更简洁。
    • css预处理器：sass、less，sass的社区比less更大，less相对小众，而且已经很久没有更新维护了。

为什么要使用SASS

  • 原生CSS开发十分繁琐，不能样式复用，权重也不好控制
    • SASS为CSS提供缩进语法：嵌套。
    • SASS提供了一些语法让我们更高效的开发和代码的维护：变量、混合等，实现样式复用和属性值的复用，达到一处改处处改的效果。
    • SASS是超集的CSS，这意味着它包含CSS的所有功能。

基本使用

  • 官网：https://www.sass.hk/

  • VS Code中使用

    • 安装easy sass插件

    • 配置easy sass输出目录

      前端基础学习笔记_第3张图片

    • 新建名字以.scss为后缀的文件，在里面书写css代码

      • 老版本后缀为.sass
      • 新版为.scss（使用新版后缀）

    • 保存时，插件会自动将sass文件编译成css文件，并输出到指定位置

基本语法：

  1. 嵌套使用

    .one {
    > li{
        &:first-child{
            border: 1px solid red;
            .two{
                li{
                    &:first-child{
                        background-color: pink;
                    }
                }
            }
        }
    }
}

    &：代表当前标签本身

  2. 变量：保存数据的容器

    $变量名：数据;

选择器{
    属性名：$变量名
}

CSS3

圆角

border-radius:10px    4个角为10px
border-radius:50%	  4个角刚好是边长一半

border-top-left-radius: 30px;    左上
border-top-right-radius: 50px;    右上
border-bottom-right-radius: 80px;   右下
border-bottom-left-radius: 100px;   左下

border-radius: 50px;         4个角为50px
border-radius: 100px 50px;      左上/右下     右上/左下
border-radius:20px  100px 50px;     左上   右上/左下   右下
border-radius:20px  100px 50px 80px;   左上  右上  右下  左下

border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;  8个值 以椭圆去切割 
 左上x  右上x   右下x  左下x  /    左上y  右上y   右下y  左下y

盒子阴影

box-shadow: x轴的偏移量 y轴的偏移量 模糊程度 阴影大小 颜色 inset(内阴影);
案例：
.box{
    width: 300px;
    height: 300px;
    background-color: pink;
    margin: 100px auto;
    /* box-shadow: 10px 10px 0px 0px blue; */
    transition: box-shadow 0.6s;
}
.box:hover{
    box-shadow: 0px 3px 5px 0px #888;
}
.box:active{
    box-shadow: none;
}

文字阴影

text-shadow:x轴的偏移量 y轴的偏移量 模糊程度 颜色

不透明度

opacity:

opacity:0.5      值：0-1之间

将当前盒子和盒子里所包含的所有元素都一起给透明了

rgba

color: rgba(128, 0, 128, 0.3);      值：0-1之间
background-color: rgba(255, 155, 205, 0.3);

指针对我指定的颜色来调整不透明度，不会影响到其他的元素

渐变背景

  1. 径向渐变
  2. 线性渐变

线性渐变

background-image: linear-gradient(渐变方向，颜色1，颜色2，...)

渐变方向

前端基础学习笔记_第4张图片

to bottom 180deg （默认值）

to top 0deg

to left 270deg (-90deg)

to right 90deg

to left top 315deg (-45deg)

to right top 45deg

to right bottom 135deg

to left bottom 225deg

色标

background-image: linear-gradient(180deg,red ,green 10%,red 20%,green 30%);

可以是百分比也可以是px像素

重复铺设：

 /* 重复铺设 */
background-image: repeating-linear-gradient(45deg,
                           rgba(255,0,0,0.3) 0px ,
                           rgba(255,0,0,0.3) 10px,
                           rgba(0,255,0,0.3) 10px, 
                           rgba(0,255,0,0.3) 20px), 
                  repeating-linear-gradient(135deg,
                           rgba(255,0,0,0.3) 0px ,
                           rgba(255,0,0,0.3) 10px,
                           rgba(0,255,0,0.3) 10px, 
                           rgba(0,255,0,0.3) 20px);

可以通过逗号隔开，设置多个渐变重叠

滤镜

background-image: 
            linear-gradient(rgba(255,0,0,0.1),rgba(255,0,0,0.1)),
            url(./image/banner.jpg);

径向渐变

background-image: radial-gradient(形状 范围 at 位置,颜色1,颜色2,...);
  • 形状:
  1. circle 正圆形渐变
  2. ellipse 椭圆渐变（默认值）
  • 范围：
  1. 最远的角：farthest-corner
  2. 最近的角：closest-corner
  3. 最远的边：farthest-side
  4. 最近的边：closest-side
  • 重复铺设：
background-image: repeating-radial-gradient(形状 范围 at 位置,颜色1,颜色2,...);

背景的复合属性

background: color  url(图片路径)  repeat  x轴的位置  y轴的位置 / x轴的大小  y轴的大小

过渡

当元素从一种样式转变为另一种样式时，使之间的变化平滑过渡

一般情况都是搭配hover来使用的

transition：复合属性

设置要过渡的属性名：transition-property

设置过渡时间：transition-duration

/* 1.设置要过渡的属性 */
transition-property: width,height,background-color;
/* 2.过渡的总时间 */
transition-duration: 1s , 5s , 3s;

设置过渡速率

/* 3.过渡的速率 ease（默认值） 低速开始  中间加速  结尾低速*/
transition-timing-function: ease;
/* linear 匀速 */
transition-timing-function: linear
/* ease-in 以低速开始 */
transition-timing-function: ease-in
/* ease-out 以低速结束 */
transition-timing-function: ease-out;
/* ease-in-out 以低速开始 以低速结束  中间匀速*/
transition-timing-function: ease-in-out;
/*贝塞尔曲线*/
transition-timing-function: cubic-bezier(.39,-0.99,1,-0.06)

贝塞尔曲线：https://cubic-bezier.com/#.17,.67,.83,.67

设置延迟时间

 /* 设置延迟时间 */
transition-delay:3s

复合属性

transition: 过渡的属性1 过渡时间 过渡速率 延迟时间，过渡的属性2 过渡时间 过渡速率 延迟时间

注意：

transition: all 3s

  • all 尽量不要使用，开销比较大。

  • 不是所有的属性都能过渡：

    1. 能过渡的属性：带有数值变化的属性——width、height、color、margin、padding、border、box-shadow、left、top、2d转换…
    2. 不能过渡的：display属性、overflow…

  • 场景：二级菜单高度变化

2D转换

2d：平面图形，在几何上讲是由二维坐标系构成

分为了x轴和y轴

x轴：从左到右

y轴：从上到下

转换

CSS3提供的控制元素变化的属性：transform

  1. 位移
  2. 旋转
  3. 缩放
  4. 拉伸

转换的效果不会影响到其他的元素

一般情况：2d转换会搭配hover和transition使用

位移：

transform: translateX(300px);
transform: translateY(-100px);
transform: translate(300px,100px);

旋转：

transform: rotate(360deg);
transform: rotateX(90deg);
transform: rotateY(135deg);

deg:代表角度

缩放:

transform: scaleX(2);
transform: scaleY(0.5);
transform: scale(2);

缩放的值是以倍数计算的

拉伸

transform: skewX(30deg);
transform: skewY(-45deg);
transform: skew(45deg,45deg);

转换的基点

transform-origin:x轴  y轴

英文：left top center right bottom

百分比：50% 50%

px像素：100px 100px

复合属性：

 transform: translateX(300px)  rotate(90deg)  scale(2);

可以同时设置多个转换效果，旋转和拉伸会改变坐标轴的方向，注意书写顺序

总结：

css3有哪些新特性：

  1. 圆角

  2. 盒子阴影

  3. 文本阴影

  4. 不透明度 ：opacity 、rgba

  5. 渐变背景 ：线性渐变、径向渐变

  6. 背景属性：backgroud-size、background-clip（拓展）

  7. 结构选择器：first-child()…

  8. 伪元素新写法 :before ::before(css3) 为了和:hover之类的伪类选择器作区分

  9. 弹性盒子：flex

  10. 转换：2D转换、3D转换（拓展）

  11. 过渡：一般搭配hover使用

  12. animation动画（拓展）

  13. 媒体查询

Bootstrap

https://www.bootcss.com/

https://v4.bootcss.com/

利用 Bootstrap 构建快速、响应式的网站

Bootstrap 是全球最受欢迎的前端开源工具库

响应式布局

传统布局方式：

  1. 静态布局：一般以固定宽度配合margin：auto来时居中布局页面。这种布局一般只使用在pc端
    • 好处：布局简单
    • 坏处：不适配移动设备，浏览器缩小会出现横向滚动条
  2. 流式布局：全部以百分比来时设置宽度
    • 好处：有一定的适应性
    • 坏处：屏幕过小，内容会导致无法正常查看
  3. 响应式布局
    • 概念：利用了媒体查询的技术，来适配各种屏幕大小和设备的情况，采用不同的css代码来编写样式。一套html采用 多套css代码来使用，让不同的屏幕尺寸，达到不同的效果。
    • 好处：完全适配所有的屏幕大小，用户有更好的体验感
    • 坏处：针对不同的屏幕写多套css样式，开发工作量很大，代码难以维护

媒体查询

利用@media去适配不同大小的屏幕和设备

设备：

值 设备类型
All 所有设备，默认值
Print 打印设备
Screen 电脑显示器，彩色屏幕
Braille 盲人用点字法触觉回馈设备
Embossed 盲文打印机
Handhelp 便携设备
Projection 投影设备
Speech 语音或者音频合成器
Tv 电视类型设备
Try 电传打印机或者终端

设备尺寸：

值 描述
width 网页显示区域完全等于设备的宽度
height 网页显示区域完全等于设备的高度
max-width 网页显示区域小于等于设备宽度
max-height 网页显示区域小于等于设备高度
min-width 网页显示区域大于等于设备的宽度
min-height 网页显示区域大于等于设备的高度
orientation portrait (竖屏模式) | landscape (横屏模式)

语法：

@media screen and (width:1200px){
     /* 浏览器宽度等于1200像素时 会作用的样式 */
    .box{
        background-color: pink;
    }
} 
@media screen and (max-width:1200px){ */
    /* 浏览器宽度小于1200或等于1200像素时 会作用的样式 */
    .box{
        background-color: pink;
    }
}
@media screen and (min-width:1200px){
    /* 浏览器宽度大于1200或等于1200像素时 会作用的样式 */
    .box{
        background-color: pink;
    }
}

JS

JS概述

JavaScript

编程语言，浏览器就是JavaScript语言的解释器
让程序实现动态效果

js代码位置

1.在后面，css代码前
<script type="text/javascript"> 编写的JavaScript代码</script>
导入：<script src="/static/my.js"></script>
2.在</body>前面的最尾部（推荐）
<script type="text/javascript"> 编写的JavaScript代码</script>
导入：<script src="/static/my.js"></script>
</code></pre> 
  <h3>注释</h3> 
  <pre><code>1.html： <!--注释内容 -->   
2.css: /*注释内容*/         只能放在style代码块
3.javascript:               只能放在script代码块
//注释内容
/*注释内容*/
</code></pre> 
  <h3>变量</h3> 
  <pre><code>var name="俞琦";
</code></pre> 
  <h3>输出</h3> 
  <pre><code>console.log(name)
</code></pre> 
  <h3>字符串类型</h3> 
  <pre><code>//声明
var name=" 俞琦"：
var name=String("俞琦");
//常见功能
var v1=name.lenth();
var v2=name[0]; name.charAt(3)
var v3=name.trim();去除空白
var v4=name.substring(0,2);前取后不取
</code></pre> 
  <h3>web动态字符串案例</h3> 
  <pre><code><span id="txt">杭州欢迎您的到来</span>
<script type="text/javascript">
    function show(){
        // 1.去html中找到某个标签并获取他的内容 （DOM）
        var tag = document.getElementById("txt");
        var dataString =tag.innerText;
        console.log(dataString);
        // 2.动态起来，把文本中的第一个字符放在字符串的最后面
        var firstChar =dataString[0];
        var otherString =dataString.substring(1,dataString.lenth);
        var newText= otherString+firstChar;
        console.log(newText);
        // 3.在html标签中更新内容
        tag.innerText=newText;
    }
    //js中的定时器,如：每1s执行一次show函数。
    setInterval(show,1000);
</script>
</code></pre> 
  <h3>数组</h3> 
  <pre><code>//定义
var v1=[11,22,33,44];
var v2=array([11,22,33]);

//操作
增
    v1[0]="俞琦";
    v1.push("俞琦");在尾部追加
    v1.unshift("俞琦");头部追加
    v1.splice(索引,0,元素);  v1.splice(1,0,"俞琦")  [11,俞琦，22，33，44]
删
    v1.pop() 尾部删除
    v1.shift() 头部删除
    v1.splice(索引位置,1)   v1.splice(2,1) 索引为2的元素删除[11,22,44];
循环
    for(var item in v1){
        //item=0/1/2/3  data=v1[item]
    }循环的是索引
    for(var i=0;i<v1.length>;i++){

    }
</code></pre> 
  <h3>对象（字典）</h3> 
  <pre><code>info={
    "name":"俞琦",
    "age":18
}
info={
    name:"俞琦",
    age:18
}
info["name"]="哈哈" 对应加引号的key
info.name="哈哈" 对应不加引号的key
循环
    for(var key in info){
        data=info[key]
    }循环的是key
</code></pre> 
  <h3>条件语句</h3> 
  <pre><code>与c一致
</code></pre> 
  <h3>函数</h3> 
  <pre><code>function func(){
    ...
}
func()

DOM和BOM:内置模块
jQuery：第三方模块
</code></pre> 
  <h2>Js学习内容</h2> 
  <p>1、js的基础概念（js的发展）和基础语法</p> 
  <p>2、ATM取款机的程序</p> 
  <p>3、家居网实战：DOM（对页面上html标签、属性、样式的操作）、js事件</p> 
  <p>4、表单的操作（验证、数据传递）</p> 
  <p>5、页面样式的修改</p> 
  <p>6、数据动态渲染</p> 
  <p>7、BOM（操作浏览器、跳转页面、历史记录、浏览器版本型号判断）</p> 
  <h2>js的发展</h2> 
  <h3>编程语言</h3> 
  <p>概念：人与计算机沟通的语言，包括了：机器语言、汇编语言、高级语言</p> 
  <h4>机器语言：以二进制的编码对计算机硬件发出指令，是最原始，也是最高效的语言</h4> <a href="http://img.e-com-net.com/image/info8/50c5174a233d476999fd8f3db21c13de.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/50c5174a233d476999fd8f3db21c13de.jpg" alt="前端基础学习笔记_第5张图片" width="640" height="396" style="border:1px solid black;"></a> 
  <h4>汇编语言：以英文的单词缩写对二进制代码进行了一层封装，也不太容易阅读，实现一个简单的功能都需要大量的逻辑代码，开发麻烦。也能直接对计算机发出指令，效率也不错。</h4> <a href="http://img.e-com-net.com/image/info8/d5184ddfad62436b814f92d4a73eaf6e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d5184ddfad62436b814f92d4a73eaf6e.jpg" width="650" height="488" alt="前端基础学习笔记_第6张图片" style="border:1px solid black;"></a> 
  <h4>高级语言：以人类的语言作为基础，对汇编又再次封装，更容易被人理解。高级语言的执行效率低于汇编及机器语言。</h4> 
  <p>常见的高级语言：C、C++、C#、java、php、python、go、javaScript…</p> 
  <h3>JavaScript概念</h3> 
  <ul> 
   <li>javascript(简称js),是一种轻量级的解释性语言，也叫脚本语言。js是作为web网页开发而出名的，js是可以运行在浏览器环境中，现在也可以运行在其他环境：nodejs（后端环境）、adobe环境…</li> 
  </ul> 
  <h3>JavaScript发展</h3> 
  <ol> 
   <li>1995年js 诞生了，由网景公司的内部员工（布兰登-艾奇）花了10天时间就设计出了第一版js,当时叫做LiveScript、后期网景公司为了寻求发展，与SUN公司（java的研发公司）合作，改名JavaScript。</li> 
   <li>1996微软为了抢市场，也开发出了一个脚本语言Jscript。</li> 
   <li>网景公司后期把js交给了一个计算机协会：欧洲计算机制造协会（ECMA）—— ECMAScript。</li> 
   <li>欧洲计算机制造协会ECMA为了前端脚本语言的统一组织：网景和微软的研发人员来开会，形成了一个第一版统一的js标准：ECMA-262</li> 
   <li>1999年 ECMA推出了第三版js、包含了绝大部分的编程核心语法——ECMAScript 3 ，简称ES3</li> 
   <li>2009年才推出了ECMAScript 5，简称ES5，也是目前市场上使用度最高的版本，2012年到现在位置所有浏览器都支持这个版本</li> 
   <li>2015年 ECMAScript 2015，简称 ES6，更新了许多新的特性，IE全系不支持。</li> 
   <li>2015年之后，每一年都会发布一个版本，2016——ES7 … 2022年——ES13。ES14（草案中）</li> 
  </ol> 
  <h3>js的核心组成</h3> 
  <p>一个完整的js的语法是由三部分组成：ECMA核心语法、BOM、DOM</p> 
  <ol> 
   <li> <p>ECMA核心语法：主要包含了输入、输出、变量、数据类型、控制结构、数组、函数等…</p> </li> 
   <li> <p>浏览器专属：</p> 
    <ol> 
     <li>BOM：负责与浏览器窗口进行交互的，比如：新建窗口、关闭页面、页面跳转、刷新、定时器等…</li> 
     <li>DOM：负责与页面里的标签、样式进行交互，比如：新建标签，修改样式等…</li> 
    </ol> </li> 
  </ol> 
  <h2>js的运行环境</h2> 
  <h3>nodejs：不支持 DOM语法 和 BOM语法</h3> 
  <p>https://nodejs.org/en</p> 
  <ul> 
   <li> <p>服务器环境，可以单独运行js代码：</p> </li> 
   <li> <p>需要安装node.js：</p> 
    <ol> 
     <li>检查nodejs是否安装好：cmd——》node -v</li> 
    </ol> </li> 
   <li> <p>运行：</p> 
    <ol> 
     <li> <p>cmd 找到对应的文件目录 node ./文件名.js</p> </li> 
     <li> <p>借助vscode里面的终端去允许 node ./文件名.js</p> </li> 
     <li> <p>借助插件运行，code runner 插件 在代码编辑区右键 run code</p> </li> 
    </ol> </li> 
  </ul> 
  <pre><code class="prism language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello world'</span><span class="token punctuation">)</span>
</code></pre> 
  <h3>浏览器环境：支持DOM、BOM 比如 document.write（）</h3> 
  <h3>js代码在html位置</h3> 
  <ol> 
   <li>在body的结尾标签之上去编写一个 <code><script></script></code>标签，在这个标签里就可以编写js代码</li> 
  </ol> 
  <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
    <span class="token comment"><!-- html代码 --></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello world'</span><span class="token punctuation">)</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</code></pre> 
  <ol start="2"> 
   <li> <p>通过script标签在外部引用js文件</p> 
    <ol> 
     <li>创建js后缀结尾的文件，例如：index.js</li> 
    </ol> <pre><code class="prism language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello world2'</span><span class="token punctuation">)</span>
</code></pre> 
    <ol start="2"> 
     <li>在body结尾标签上方去引入js文</li> 
    </ol> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
    <span class="token comment"><!-- html代码 --></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./js/js基础.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</code></pre> </li> 
  </ol> 
  <h2>Js输入输出</h2> 
  <h3>输出</h3> 
  <p>js的三种输出方式</p> 
  <h4>document.write()：将内容输出在页面上</h4> 
  <pre><code class="prism language-js">document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'hello "lol"'</span><span class="token punctuation">)</span>
</code></pre> 
  <p>注意：</p> 
  <pre><code>1.文字内容需要引号来包裹，可以是单引号也可以是双引号。
1.如果引号需要互相嵌套使用，外层是单（双）引号，里面必须双（单）引号，否则相反。
</code></pre> 
  <p>运用：还可以在页面中输出一个标签</p> 
  <pre><code class="prism language-js">document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'<a href="https://www.baidu.com">百度一下</a>'</span><span class="token punctuation">)</span>
</code></pre> 
  <h4>console.log()：将内容输出在控制台里</h4> 
  <pre><code class="prism language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello world'</span><span class="token punctuation">)</span>
</code></pre> 
  <ol> 
   <li>可以识别多个空格符</li> 
   <li>如果输出纯数字，可以不需要引号包裹</li> 
  </ol> 
  <h4>alert()：将内容输出在一个警告提示框里</h4> 
  <pre><code class="prism language-js"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span>
</code></pre> 
  <h3>process.stdout.write()不换行打印</h3> 
  <pre><code class="prism language-js"> process<span class="token punctuation">.</span>stdout<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token punctuation">(</span>i<span class="token operator">+</span><span class="token string">"*"</span><span class="token operator">+</span>j <span class="token operator">+</span> <span class="token string">"="</span> <span class="token operator">+</span>i<span class="token operator">*</span>j <span class="token operator">+</span> <span class="token string">" "</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> 
  <h3>输入</h3> 
  <pre><code class="prism language-js"><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token string">'提示性文字'</span><span class="token punctuation">)</span>
</code></pre> 
  <p>输出输入的内容到页面上</p> 
  <pre><code class="prism language-js">document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token string">'提示性文字'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> 
  <h2>Js变量</h2> 
  <p>一个保存数据的容器，方便后续重复使用</p> 
  <ul> 
   <li>声明变量：</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> 变量名；
变量名 <span class="token operator">=</span> 数据<span class="token punctuation">;</span>

<span class="token keyword">var</span> 变量名 <span class="token operator">=</span> 数据<span class="token punctuation">;</span>
</code></pre> 
  <ul> 
   <li>使用变量：</li> 
  </ul> 
  <pre><code class="prism language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>变量名<span class="token punctuation">)</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>变量名<span class="token punctuation">)</span>
</code></pre> 
  <ul> 
   <li>修改变量：直接给变量重新赋值就行</li> 
  </ul> 
  <pre><code class="prism language-js">变量名 <span class="token operator">=</span> 新的内容
</code></pre> 
  <ul> 
   <li>变量名的规范：</li> 
  </ul> 
  <ol> 
   <li> <p>可以包含字母、数字、_、美元符号$</p> </li> 
   <li> <p>不能以数字开头</p> </li> 
   <li> <p>名字对大小写敏感（username和userName 是不同的变量）</p> </li> 
   <li> <p>js的保留关键字不能用作变量名：for、var、if、class、name…</p> </li> 
   <li> <p>建议的命名方式：语义化命名</p> 
    <ol> 
     <li>单个单词和缩写：user、password、data、num…</li> 
     <li>多个单词组合（小驼峰命名）：userData、userAgeList…</li> 
     <li>大驼峰命名（多用在穿件类名上）：UserData、UserAgeList…</li> 
    </ol> </li> 
  </ol> 
  <h2>Js基础运算符</h2> 
  <h3>分类</h3> 
  <ul> 
   <li>算术运算符</li> 
   <li>赋值运算符</li> 
   <li>比较运算符</li> 
   <li>逻辑运算符</li> 
  </ul> 
  <h3>算术运算符：完成数学计算</h3> 
  <ul> 
   <li> <p>加 +</p> </li> 
   <li> <p>减 -</p> </li> 
   <li> <p>乘 *</p> </li> 
   <li> <p>除 /</p> </li> 
   <li> <p>余（取模） % ：得到两数相除的余数</p> </li> 
   <li> <p>自增 ++</p> </li> 
   <li> <p>自减 –</p> </li> 
  </ul> 
  <h3>赋值运算符：可以给变量赋值或者修改变量</h3> 
  <ul> 
   <li><code>=</code>：把右边的结果赋值给左边的变量</li> 
   <li><code>+=</code></li> 
   <li><code>-=</code></li> 
   <li><code>*=</code></li> 
   <li><code>/=</code></li> 
   <li><code>%=</code></li> 
  </ul> 
  <h3>比较运算符：数据与数据之间进行比较，得到一个布尔值（true false）</h3> 
  <ul> 
   <li> <p><code>==</code>：判断两个内容是否相等，不考虑数据类型（5==‘5’ true）</p> </li> 
   <li> <p><code>===</code>：全等于，判断两个内容是否相等，要考虑数据类型（5===‘5’ false）</p> </li> 
   <li> <p><code><</code>：判断前面的值是否小于后面的值</p> </li> 
   <li> <p><code><=</code>：判断前面的值是否小于等于后面的值</p> </li> 
   <li> <p><code>></code>：判断前面的值是否大于后面的值</p> </li> 
   <li> <p><code>>=</code>：判断前面的值是否大于等于后面的值</p> </li> 
   <li> <p><code>!=</code>：判断两个内容是否不等于，如果不等于返回true，等于false</p> </li> 
   <li> <p><code>!==</code>：不全等于,考虑数据类型</p> </li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">5</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token string">'5'</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> <span class="token number">6</span>
<span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token number">5</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> a <span class="token operator">==</span> b <span class="token punctuation">)</span>  <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> a <span class="token operator">===</span> b <span class="token punctuation">)</span>  <span class="token comment">//false</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> a <span class="token operator"><</span> c <span class="token punctuation">)</span> <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> a <span class="token operator">></span> c <span class="token punctuation">)</span> <span class="token comment">//false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> a <span class="token operator"><=</span> c <span class="token punctuation">)</span> <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> a <span class="token operator">>=</span> c <span class="token punctuation">)</span> <span class="token comment">//false</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token operator">!=</span> c<span class="token punctuation">)</span> <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token operator">!==</span> d<span class="token punctuation">)</span> <span class="token comment">//false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a <span class="token operator">!==</span> b<span class="token punctuation">)</span> <span class="token comment">//true</span>
</code></pre> 
  <h3>逻辑运算符：用于对多个条件的判断</h3> 
  <ul> 
   <li><code>&&</code>：与运算，并且的意思，既要满足前面的条件又要满足后面的条件，才会返回true，只要有一个条件不满足就会返回false</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token keyword">var</span>  num <span class="token operator">=</span> <span class="token number">5</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num <span class="token operator">>=</span> <span class="token number">5</span> <span class="token operator">&&</span> num <span class="token operator">==</span> <span class="token number">5</span>  <span class="token operator">&&</span> num <span class="token operator"><=</span> <span class="token number">5</span> <span class="token operator">&&</span> num <span class="token operator">===</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num <span class="token operator">>=</span> <span class="token number">5</span> <span class="token operator">&&</span> num <span class="token operator">===</span> <span class="token string">'5'</span><span class="token punctuation">)</span> <span class="token comment">//false</span>
</code></pre> 
  <p>短路运算：</p> 
  <ul> 
   <li><code>||</code>：或运算，或者的意思，只要满足条件中的任意一个即可，就会返回true，每个条件都不满足才会返回false</li> 
  </ul> 
  <pre><code class="prism language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> num <span class="token operator">></span> <span class="token number">5</span> <span class="token operator">||</span> num <span class="token operator">==</span> <span class="token number">5</span><span class="token punctuation">)</span>  <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> num <span class="token operator">></span> <span class="token number">5</span> <span class="token operator">||</span> num <span class="token operator"><</span> <span class="token number">5</span> <span class="token punctuation">)</span>  <span class="token comment">//false</span>
</code></pre> 
  <p>短路运算：</p> 
  <h2>控制结构</h2> <a href="http://img.e-com-net.com/image/info8/ba996babdd9a4d6e9835654035a71aeb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ba996babdd9a4d6e9835654035a71aeb.jpg" alt="前端基础学习笔记_第7张图片" width="650" height="259" style="border:1px solid black;"></a> 
  <h3>分支结构：根据不同的条件执行不同的代码块</h3> 
  <h4>if分支</h4> 
  <pre><code class="prism language-js"><span class="token keyword">if</span><span class="token punctuation">(</span>条件<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//满足条件要执行的代码</span>
<span class="token punctuation">}</span>

<span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token number">18</span><span class="token punctuation">;</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>age <span class="token operator">>=</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'已成年，可以蹦迪了'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h4>if else分支</h4> 
  <pre><code class="prism language-js"><span class="token keyword">if</span><span class="token punctuation">(</span>条件<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//满足条件要执行的代码</span>
<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
    <span class="token comment">//不满足条件要执行的代码</span>
<span class="token punctuation">}</span>

<span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token number">16</span><span class="token punctuation">;</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>age <span class="token operator">>=</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'已成年，可以蹦迪了'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'未成年，回家吧'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h4>if else if else</h4> 
  <pre><code class="prism language-js"><span class="token comment">//  6岁  上小学   12岁 上初中   15岁 上高中  18岁 蹦迪</span>

<span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>

<span class="token keyword">if</span><span class="token punctuation">(</span>age <span class="token operator">>=</span> <span class="token number">6</span> <span class="token operator">&&</span> age <span class="token operator"><</span> <span class="token number">12</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'上小学'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>age <span class="token operator">>=</span> <span class="token number">12</span> <span class="token operator">&&</span> age <span class="token operator"><</span> <span class="token number">15</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'上初中'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>age <span class="token operator">>=</span> <span class="token number">15</span> <span class="token operator">&&</span> age <span class="token operator"><</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'上高中'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>age <span class="token operator">>=</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'蹦迪'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'上幼儿园'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h3>switch分支</h3> 
  <ul> 
   <li>主要判断某一个条件是否全等于，需要考虑数据类型，而且这个条件是一个固定的值</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token comment">// 输入今天星期几数字 提示今天星期几</span>
<span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token function">prompt</span><span class="token punctuation">(</span><span class="token string">'提示今天星期几'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span>

<span class="token keyword">switch</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">case</span> <span class="token string">'1'</span><span class="token operator">:</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'今天星期1'</span><span class="token punctuation">)</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">'2'</span><span class="token operator">:</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'今天星期2'</span><span class="token punctuation">)</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">'3'</span><span class="token operator">:</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'今天星期3'</span><span class="token punctuation">)</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">'4'</span><span class="token operator">:</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'今天星期4'</span><span class="token punctuation">)</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">'5'</span><span class="token operator">:</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'今天星期5'</span><span class="token punctuation">)</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">'6'</span><span class="token operator">:</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'今天星期6'</span><span class="token punctuation">)</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">'7'</span><span class="token operator">:</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'今天星期7'</span><span class="token punctuation">)</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token keyword">default</span><span class="token operator">:</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'输入有误，再见'</span><span class="token punctuation">)</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
  <ul> 
   <li> <p>该分支只能用于判断固定选项，如果条件是一个范围switch不适用</p> </li> 
   <li> <p>break：用于阻断代码继续向下执行</p> </li> 
  </ul> 
  <h3>循环结构</h3> <a href="http://img.e-com-net.com/image/info8/ba996babdd9a4d6e9835654035a71aeb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ba996babdd9a4d6e9835654035a71aeb.jpg" alt="前端基础学习笔记_第8张图片" width="650" height="259" style="border:1px solid black;"></a> 
  <h4>while循环</h4> 
  <pre><code class="prism language-js"><span class="token keyword">while</span><span class="token punctuation">(</span>循环继续的条件<span class="token punctuation">)</span><span class="token punctuation">{</span>
    当条件为<span class="token boolean">true</span>时，会执行的代码
<span class="token punctuation">}</span>

<span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">1000</span>

<span class="token keyword">while</span><span class="token punctuation">(</span>num <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//满足上面条件会执行的代码</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span>  <span class="token comment">//输出1000 - 1 之间所有的数字</span>
    num <span class="token operator">=</span> num <span class="token operator">-</span> <span class="token number">1</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h4>do while循环</h4> 
  <p>和while的区别：会先执行一次do里面的代码</p> 
  <pre><code class="prism language-js"><span class="token keyword">do</span><span class="token punctuation">{</span>
    会先执行一次的代码，满足条件会再次循环执行
<span class="token punctuation">}</span><span class="token keyword">while</span><span class="token punctuation">(</span>循环继续的条件<span class="token punctuation">)</span>

<span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">5</span>
<span class="token keyword">do</span><span class="token punctuation">{</span>
   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span>
   num <span class="token operator">=</span> num <span class="token operator">-</span> <span class="token number">1</span>
<span class="token punctuation">}</span><span class="token keyword">while</span><span class="token punctuation">(</span>num <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span>
</code></pre> 
  <h4>for循环</h4> 
  <pre><code class="prism language-js"><span class="token comment">// for('循环的初始条件';'决定是否循环的条件';'循环的次数操作'){</span>
<span class="token comment">//     //循环的主体代码</span>
<span class="token comment">//     console.log(1)</span>
<span class="token comment">// }</span>

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> <span class="token number">5</span> <span class="token punctuation">;</span> i <span class="token operator">=</span> i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//循环的主体代码</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <a href="http://img.e-com-net.com/image/info8/20631a31e91c4abcb3464be6a7c93255.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/20631a31e91c4abcb3464be6a7c93255.jpg" alt="前端基础学习笔记_第9张图片" width="650" height="650" style="border:1px solid black;"></a> 
  <h4>break、continue</h4> 
  <p>break：跳出整个循环，循环不再继续向下执行</p> 
  <p>continue：跳出当前这一次循环的后续代码，但是会继续执行后续的循环</p> 
  <pre><code class="prism language-js"><span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">;</span> i <span class="token operator"><=</span> <span class="token number">5</span> <span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>  <span class="token comment">//  1  ,  2   ,  3</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>i <span class="token operator">==</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token comment">//不再继续循环下去   </span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">;</span> i <span class="token operator"><=</span> <span class="token number">5</span> <span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>i <span class="token operator">==</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">continue</span> <span class="token comment">//跳出这一次的循环主体代码，然后会继续下一次循环</span>
    <span class="token punctuation">}</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>  <span class="token comment">//  1,  2,  4,  5</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h4>练习题</h4> 
  <pre><code class="prism language-txt">1.求1-100所有数字的和 
2.找出1-100之间的偶数和奇数   
3.找出100-999以内的水仙花数，特点：水仙花数是一种特殊的三位数，它的特点就是，每个数位的立方和，等于它本身。
4.鸡兔同笼:一共有20个头，64只脚，请问有几只鸡，几只脚 【讲】
5.小球落体问题：小球从初始100m高的地方下落，每次从地面弹起的高度为下落高度的一半，求第十次弹起的高度和第十次落地的总路程【拓展】
6.找到1-100之间的所有质数 质数：只能被1和自身整除的数字【拓展】
7.控制台输出99乘法表【讲】
8.1 2 3 4 能组成哪些不重复的三位数，总共有多少个？【拓展】
</code></pre> 
  <pre><code class="prism language-js">
<span class="token keyword">function</span> <span class="token function">sum1_to_100</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> num<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> sum <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">while</span> <span class="token punctuation">(</span>num<span class="token operator"><</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        sum <span class="token operator">+=</span> num<span class="token punctuation">;</span>
        num <span class="token operator">++</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> sum<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">find_odd_even</span><span class="token punctuation">(</span><span class="token parameter">number</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    odd<span class="token operator">=</span> <span class="token function">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    even <span class="token operator">=</span> <span class="token function">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">while</span> <span class="token punctuation">(</span>num<span class="token operator"><</span>number<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>num<span class="token operator">%</span><span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
            even<span class="token punctuation">[</span>even<span class="token punctuation">.</span>length<span class="token punctuation">]</span> <span class="token operator">=</span> num<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
            odd<span class="token punctuation">[</span>even<span class="token punctuation">.</span>length<span class="token punctuation">]</span> <span class="token operator">=</span> num<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        num<span class="token operator">++</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>odd<span class="token punctuation">,</span>even<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">water_flower</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    flower_array <span class="token operator">=</span> <span class="token function">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">100</span><span class="token punctuation">;</span>i<span class="token operator"><=</span><span class="token number">999</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">var</span> ge <span class="token operator">=</span> i <span class="token operator">%</span> <span class="token number">10</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> shi <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function">parseInt</span><span class="token punctuation">(</span>i <span class="token operator">/</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">%</span> <span class="token number">10</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> bai <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>i <span class="token operator">/</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span>ge<span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span>shi<span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span>bai<span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token operator">===</span> i<span class="token punctuation">)</span><span class="token punctuation">{</span>
            flower_array<span class="token punctuation">[</span>flower_array<span class="token punctuation">.</span>length<span class="token punctuation">]</span> <span class="token operator">=</span> i<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> flower_array<span class="token punctuation">;</span>
<span class="token punctuation">}</span>


<span class="token keyword">function</span> <span class="token function">chicken_rabbit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> foot <span class="token operator">=</span> <span class="token number">64</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> chicken<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">while</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>chicken<span class="token operator">*</span><span class="token number">2</span> <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token number">20</span><span class="token operator">-</span>chicken<span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">4</span> <span class="token operator">===</span> <span class="token number">64</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">return</span> chicken<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
            chicken <span class="token operator">++</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">ball</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> height <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> sum <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>i<span class="token operator"><</span><span class="token number">11</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        sum  <span class="token operator">=</span> sum <span class="token operator">+</span> height <span class="token operator">+</span> height<span class="token operator">/</span><span class="token number">2</span>
        height <span class="token operator">/=</span><span class="token number">2</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>height<span class="token punctuation">,</span>sum<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">prime_number</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    prime <span class="token operator">=</span> <span class="token function">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>i<span class="token operator"><=</span><span class="token number">100</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        flag <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> j <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>j<span class="token operator"><</span>i<span class="token punctuation">;</span>j<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>i<span class="token operator">%</span>j <span class="token operator">===</span> <span class="token number">0</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                flag <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>flag<span class="token punctuation">)</span><span class="token punctuation">{</span>
            prime<span class="token punctuation">[</span>prime<span class="token punctuation">.</span>length<span class="token punctuation">]</span> <span class="token operator">=</span> i<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> prime
<span class="token punctuation">}</span> 


<span class="token keyword">function</span> <span class="token function">nine_plus_nine</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>i<span class="token operator"><</span><span class="token number">10</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> j <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>j<span class="token operator"><=</span>i<span class="token punctuation">;</span>j<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            process<span class="token punctuation">.</span>stdout<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token punctuation">(</span>i<span class="token operator">+</span><span class="token string">"*"</span><span class="token operator">+</span>j <span class="token operator">+</span> <span class="token string">"="</span> <span class="token operator">+</span>i<span class="token operator">*</span>j <span class="token operator">+</span> <span class="token string">" "</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"\n"</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>


<span class="token keyword">function</span> <span class="token function">no_repeat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> sum <span class="token operator">=</span> <span class="token number">0</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span><span class="token number">1</span> <span class="token punctuation">;</span>i <span class="token operator"><</span><span class="token number">5</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> j <span class="token operator">=</span><span class="token number">1</span> <span class="token punctuation">;</span>j <span class="token operator"><</span><span class="token number">5</span><span class="token punctuation">;</span>j<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> k <span class="token operator">=</span><span class="token number">1</span> <span class="token punctuation">;</span>k <span class="token operator"><</span><span class="token number">5</span><span class="token punctuation">;</span>k<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span>i<span class="token operator">!=</span>j <span class="token operator">&&</span> i <span class="token operator">!=</span>k <span class="token operator">&&</span> j<span class="token operator">!=</span>k<span class="token punctuation">)</span><span class="token punctuation">{</span>
                    sum <span class="token operator">++</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> sum<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">ball</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

</code></pre> 
  <h2>数据类型</h2> 
  <h3>js中数据类型分为了两大类</h3> 
  <ol> 
   <li>基本（基础、简单）数据类型 
    <ol> 
     <li>字符串 string</li> 
     <li>数字 number</li> 
     <li>布尔值 boolean</li> 
     <li>未定义 undefined</li> 
     <li>空 null</li> 
     <li>唯一值 symbol ES6新增 （了解）</li> 
     <li>超大数 bigInt ES10新增（了解）</li> 
    </ol> </li> 
   <li>引用（复杂）数据类型 
    <ol> 
     <li>对象 object 
      <ul> 
       <li>原生对象 object 、数组 Array、函数Function…</li> 
      </ul> </li> 
    </ol> </li> 
  </ol> 
  <h3>字符串 string</h3> 
  <p>所有用引号包裹的都是字符串类型</p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">'hello'</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">'123'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>
</code></pre> 
  <p>转义符：</p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">'我叫"提莫"'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">"我叫\"提莫\""</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">"我叫\\提莫\\"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">"我叫\\\\提莫\\\\"</span><span class="token punctuation">;</span>
</code></pre> 
  <p>换行符：</p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">"我叫\n提莫"</span>
</code></pre> 
  <p>字符串拼接： <code>+</code></p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> str1 <span class="token operator">=</span> <span class="token string">"hello"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> str2 <span class="token operator">=</span> <span class="token string">"world"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str1 <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> str2<span class="token punctuation">)</span>
</code></pre> 
  <p>注意：如果一个数字和字符串相加，会得到另一个字符串</p> 
  <h3>数字类型 number</h3> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">10</span>
<span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">10.1</span> <span class="token comment">//浮点数</span>
<span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">1.23e5</span>  <span class="token comment">//  eX  10的X次方</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0.3</span><span class="token operator">-</span><span class="token number">0.2</span> <span class="token operator">==</span> <span class="token number">0.2</span><span class="token operator">-</span><span class="token number">0.1</span><span class="token punctuation">)</span>  <span class="token comment">//false</span>
<span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">12345e1000</span>  <span class="token comment">//-Infinity无穷小   Infinity无穷大</span>
</code></pre> 
  <h3>布尔值 boolean</h3> 
  <p>只有两个值 ：true false</p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> boo <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token keyword">var</span> boo <span class="token operator">=</span> <span class="token boolean">false</span>
</code></pre> 
  <h3>未定义 undefined</h3> 
  <p>只有一个值 undefined，声明了一个变量，没有赋值会得到一个undefined</p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> str<span class="token punctuation">;</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
</code></pre> 
  <h3>空 null</h3> 
  <p>只有一个值，就是null ，一般表示为空</p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">null</span> <span class="token operator">==</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">null</span> <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token comment">//false</span>
</code></pre> 
  <h3>typeof 判读数据类型,只能检测基本数据类型</h3> 
  <pre><code class="prism language-js"><span class="token keyword">typeof</span> <span class="token string">"123"</span>  <span class="token comment">//string</span>
<span class="token keyword">typeof</span> <span class="token number">123</span>    <span class="token comment">//number</span>
<span class="token keyword">typeof</span> <span class="token boolean">true</span>   <span class="token comment">//number</span>
<span class="token keyword">typeof</span> <span class="token keyword">undefined</span>   <span class="token comment">//undefined</span>
<span class="token keyword">typeof</span> <span class="token keyword">null</span>   <span class="token comment">//object</span>
</code></pre> 
  <h3>对象：</h3> 
  <ul> 
   <li>原生对象 ｛｝</li> 
   <li>数组 []</li> 
   <li>函数 function(){}</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token keyword">typeof</span> obj<span class="token punctuation">)</span>  <span class="token comment">//object</span>

<span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">,</span> <span class="token keyword">typeof</span> arr<span class="token punctuation">)</span> <span class="token comment">//object</span>

<span class="token keyword">var</span> <span class="token function-variable function">func</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">dir</span><span class="token punctuation">(</span>func<span class="token punctuation">,</span> <span class="token keyword">typeof</span> func<span class="token punctuation">)</span> <span class="token comment">//function   prototype——object</span>
</code></pre> 
  <h2>数据类型的转换</h2> 
  <h3>强制转换</h3> 
  <p>通过一些方法（函数），强制让数据类型变化</p> 
  <h4>转字符串</h4> 
  <ul> 
   <li>toString()</li> 
   <li>String()</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> str <span class="token operator">=</span>  num<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// console.log(window)</span>
<span class="token comment">// window.String()</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token function">String</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str <span class="token punctuation">,</span><span class="token keyword">typeof</span> str<span class="token punctuation">)</span>
</code></pre> 
  <p>区别：</p> 
  <p><code>toString()</code>这个方不能转换<code>null</code>和<code>undefined</code></p> 
  <p><code>String()</code>可以转换任意类型为字符串</p> 
  <h4>转数字类型</h4> 
  <ul> 
   <li>Number() 转为数字类型</li> 
   <li>parseInt() 取整，并且转为数字类型</li> 
   <li>parseFloat() 保留浮点数，并且转为数字类型</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token comment">// var str = '10.1'      10.1    10    10.1</span>
<span class="token comment">// var str = '10.1a'     NaN    10    10.1</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">'a10.1'</span>	<span class="token comment">//   NaN     NaN    NaN</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseInt</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">parseFloat</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
  <p>NaN：not a number</p> 
  <h4>转布尔值</h4> 
  <ul> 
   <li>Boolean()</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">1</span>   <span class="token comment">//true</span>
<span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">0</span>   <span class="token comment">//false</span>

<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">'abc'</span>  <span class="token comment">//true</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">''</span>  <span class="token comment">//false</span>

<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token keyword">undefined</span>  <span class="token comment">//false</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token keyword">null</span>  <span class="token comment">//false</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">0</span>  <span class="token comment">//false</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token boolean">true</span>

<span class="token keyword">var</span> boo <span class="token operator">=</span> <span class="token function">Boolean</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span>
<span class="token keyword">var</span> boo <span class="token operator">=</span> <span class="token function">Boolean</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
<span class="token keyword">var</span> boo <span class="token operator">=</span> <span class="token function">Boolean</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span>
</code></pre> 
  <p>除了 0、-0、“”、undefined、false、null、NaN ，这7种转布尔值都是false； 除了这7种以外转成布尔值 都是 true。</p> 
  <h3>隐式转换</h3> 
  <p>通过运算符和其他的方式，隐式转换</p> 
  <h4>转字符串</h4> 
  <pre><code class="prism language-js"><span class="token comment">// var num = 10</span>
<span class="token comment">// var boo = true</span>
<span class="token comment">// boo = boo + ""</span>
<span class="token keyword">var</span> boo <span class="token operator">=</span> <span class="token keyword">null</span>
boo <span class="token operator">=</span> boo <span class="token operator">+</span> <span class="token string">""</span>

<span class="token comment">// console.log(typeof (num + "") ) //string</span>
<span class="token comment">// console.log(typeof boo, boo) //string</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> boo<span class="token punctuation">,</span> boo<span class="token punctuation">)</span> <span class="token comment">//string</span>
</code></pre> 
  <ul> 
   <li>任何类型只要 通过 <code>+</code>号，拼接了一个空的字符串，那都会转成字符串类型</li> 
  </ul> 
  <h4>转数字</h4> 
  <pre><code class="prism language-js"><span class="token comment">// var str = '10a'</span>
<span class="token comment">// var str = undefined</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str <span class="token operator">-</span> <span class="token number">0</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str <span class="token operator">*</span> <span class="token number">1</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str <span class="token operator">/</span> <span class="token number">1</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token operator">~</span><span class="token operator">~</span>str <span class="token punctuation">)</span>  <span class="token comment">//具体转为多少不知道</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token operator">+</span>str <span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span> <span class="token punctuation">)</span>
</code></pre> 
  <h4>转布尔值</h4> 
  <p>取反：！,任意类型要取反时 都会转成布尔值再去取反</p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">0</span> 
<span class="token operator">!</span>num 	<span class="token comment">//  true</span>
<span class="token operator">!</span><span class="token operator">!</span>num   <span class="token comment">// false</span>

<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">""</span>
<span class="token operator">!</span>str  	<span class="token comment">//true</span>
<span class="token operator">!</span><span class="token operator">!</span>str 	<span class="token comment">//false</span>
</code></pre> 
  <h2>数组</h2> 
  <h3>概念：</h3> 
  <p>数组，是一些有序数据的集合，即数组能保存多个数据，并且保持一定的顺序</p> 
  <h3>定义数组</h3> 
  <ol> 
   <li>构造函数法</li> 
  </ol> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span>数据<span class="token number">1</span><span class="token punctuation">,</span>数据<span class="token number">2</span><span class="token punctuation">,</span>数据<span class="token number">3</span><span class="token punctuation">,</span><span class="token operator">...</span><span class="token punctuation">)</span>
</code></pre> 
  <ol start="2"> 
   <li>字面量法</li> 
  </ol> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span>数据<span class="token number">1</span><span class="token punctuation">,</span>数据<span class="token number">2</span><span class="token punctuation">,</span>数据<span class="token number">3</span><span class="token punctuation">,</span><span class="token operator">...</span><span class="token punctuation">]</span>
</code></pre> 
  <ul> 
   <li>数组的特点： 
    <ol> 
     <li>数组可以储存任意数据类型的数据</li> 
     <li>数组里可以通过一些手段名，对数组进行：增、删、改、查</li> 
    </ol> </li> 
  </ul> 
  <h4>数组的下标：</h4> 
  <ul> 
   <li>表示存放数据的位置，通过数字来表示，0代表第一条数据，第3条数据下标就是2</li> 
   <li>最后一条数据，就是数组的长度length - 1</li> 
  </ul> 
  <h4>数组的长度：length</h4> 
  <ul> 
   <li>数据有多少，length就是多少。</li> 
  </ul> 
  <h3>数据的处理</h3> 
  <h4>查询数据</h4> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token string">'2'</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token keyword">undefined</span><span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">,</span><span class="token number">NaN</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">]</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">)</span>  <span class="token comment">//7</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>   <span class="token comment">// '2'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span>  <span class="token comment">// [1,2,3]--->1</span>
</code></pre> 
  <p>查询数组中没有的数据时，会返回undefined</p> 
  <h4>新增数据</h4> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token string">'2'</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token keyword">undefined</span><span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">,</span><span class="token number">NaN</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'hello'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>  <span class="token comment">//[1,'2',true,undefined,null,NaN,[1,2,3],'hello']</span>
</code></pre> 
  <h4>修改数据</h4> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token string">'2'</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token keyword">undefined</span><span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">,</span><span class="token number">NaN</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">9</span>
arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'ABC'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span>  <span class="token comment">//9</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>  <span class="token comment">//'ABC'</span>
</code></pre> 
  <h4>删除数据</h4> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token string">'2'</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token keyword">undefined</span><span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">,</span><span class="token number">NaN</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
arr<span class="token punctuation">.</span>length <span class="token operator">=</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span>
arr<span class="token punctuation">.</span>length<span class="token operator">--</span>
<span class="token operator">--</span>arr<span class="token punctuation">.</span>length

<span class="token keyword">delete</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>  <span class="token comment">//删除对应下表的数据</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">//undefined</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span> <span class="token comment">//[空白,'2',true,undefined]</span>
</code></pre> 
  <h3>遍历数组</h3> 
  <ul> 
   <li>通过循环，依次查询数组里的每一条数据</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">9</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">]</span>

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//console.log(arr[i]) </span>
    <span class="token comment">//的到为7的数字</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i <span class="token punctuation">,</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h3>二维数组（多维数组）</h3> 
  <ul> 
   <li>一层数组下的数据又是一层数组</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
</code></pre> 
  <ul> 
   <li>遍历二维数组</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token keyword">var</span>  arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">]</span>

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> arr<span class="token punctuation">.</span>length <span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// console.log(arr[i])</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator"><</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h2>数组的api</h2> 
  <h3>api ： application programming interface 用户编程接口</h3> 
  <p>每一个api就是一个函数（方法），是由程序内部提供的，每一个api就对应了一个功能：alert()、parseInt()、toString()…</p> 
  <h3>数组的api：</h3> 
  <h4>关于数组增删改的api</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方 法</th> 
     <th align="center">语 法</th> 
     <th align="center">说 明</th> 
     <th align="center">改变原数组</th> 
     <th align="center">返回值</th> 
     <th align="center">js版本</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>push()</code></td> 
     <td align="center"><code>array.push(item1, item2, ..., itemX)</code></td> 
     <td align="center">向数组末尾添加新元素</td> 
     <td align="center">true</td> 
     <td align="center">array.length</td> 
     <td align="center">ECMAScript 1</td> 
    </tr> 
    <tr> 
     <td align="center"><code>unshift()</code></td> 
     <td align="center"><code>array.unshift(item1, item2, ..., itemX)</code></td> 
     <td align="center">向数组开头添加新元素</td> 
     <td align="center">true</td> 
     <td align="center">array.length</td> 
     <td align="center">ECMAScript 1</td> 
    </tr> 
    <tr> 
     <td align="center"><code>pop()</code></td> 
     <td align="center"><code>array.pop()</code></td> 
     <td align="center">删除数组的最后一个元素</td> 
     <td align="center">true</td> 
     <td align="center">删除的元素</td> 
     <td align="center">ECMAScript 1</td> 
    </tr> 
    <tr> 
     <td align="center"><code>shift()</code></td> 
     <td align="center"><code>array.shift()</code></td> 
     <td align="center">删除数组的第一个元素</td> 
     <td align="center">true</td> 
     <td align="center">删除的元素</td> 
     <td align="center">ECMAScript 1</td> 
    </tr> 
    <tr> 
     <td align="center"><code>splice()</code></td> 
     <td align="center"><code>array.splice(开始下标（包含）, 删除元素的个数, 新增元素1, ....., 新增元素n)</code></td> 
     <td align="center">1.只有一个参数会将指定下标元素和之后的元素删除； 2.有两个参数时可以删除指定位置的元素 3.多个参数时可以修改任意位置的元素</td> 
     <td align="center">true</td> 
     <td align="center">删除的元素</td> 
     <td align="center">ECMAScript 1</td> 
    </tr> 
   </tbody> 
  </table> 
  <p>案例：</p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'提莫'</span><span class="token punctuation">,</span><span class="token string">'亚索'</span><span class="token punctuation">,</span><span class="token string">'德玛西亚'</span><span class="token punctuation">,</span><span class="token string">'贾克斯'</span><span class="token punctuation">,</span><span class="token string">'男枪'</span><span class="token punctuation">]</span>

<span class="token comment">//向数组的最后一位添加一个英雄名字</span>
arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'女枪'</span><span class="token punctuation">)</span>
<span class="token comment">//向数组的开头添加一个数据</span>
arr<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token string">'艾瑞莉娅'</span><span class="token punctuation">)</span>
<span class="token comment">//push和unshift的返回值都是改变后的数组长度</span>

<span class="token comment">//删除数组中最后一条数据</span>
arr<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">//删除数组中第一条数据</span>
arr<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">//pop和shift的返回都是被删除的具体数据</span>

<span class="token comment">//1.删除、新增、修改数组中的数据</span>
<span class="token comment">// arr.splice(2,2)</span>
<span class="token comment">// arr.splice(1)</span>
<span class="token comment">// arr.splice(2,2,'伊泽瑞尔','光辉')</span>
<span class="token comment">// arr.splice(2,0,'伊泽瑞尔','光辉')</span>

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span>i<span class="token operator"><</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token string">'德玛西亚'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>i<span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// console.log(res)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>
</code></pre> 
  <h4>数组的查询api：查询数组中，是否存在这个数据，还有查询数据的位置</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方 法</th> 
     <th align="center">语 法</th> 
     <th align="center">说 明</th> 
     <th align="center">改变原数组</th> 
     <th align="center">返回值</th> 
     <th align="center">js版本</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>indexOf()</code></td> 
     <td align="center"><code>array.indexOf(item)</code></td> 
     <td align="center">查询元素在数组中第一次出现的下标</td> 
     <td align="center">false</td> 
     <td align="center">index（下标）、没找到返回-1</td> 
     <td align="center">ECMAScript 5</td> 
    </tr> 
    <tr> 
     <td align="center"><code>lastIndexOf()</code></td> 
     <td align="center"><code>array.lastIndexOf(item)</code></td> 
     <td align="center">查询元素在数组中最后一次出现的下标</td> 
     <td align="center">false</td> 
     <td align="center">index（下标） 、没找到返回-1</td> 
     <td align="center">ECMAScript 5</td> 
    </tr> 
    <tr> 
     <td align="center"><code>includes()</code></td> 
     <td align="center"><code>array.includes(element)</code></td> 
     <td align="center">查询元素在数组中是否存在</td> 
     <td align="center">false</td> 
     <td align="center">true/false</td> 
     <td align="center">ECMAScript 7</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'提莫'</span><span class="token punctuation">,</span><span class="token string">'亚索'</span><span class="token punctuation">,</span><span class="token string">'德玛西亚'</span><span class="token punctuation">,</span><span class="token string">'贾克斯'</span><span class="token punctuation">,</span><span class="token string">'男枪'</span><span class="token punctuation">,</span><span class="token string">'德玛西亚'</span><span class="token punctuation">]</span>

<span class="token keyword">var</span> res1 <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'德玛西亚'</span><span class="token punctuation">)</span>      <span class="token comment">// 2</span>
<span class="token keyword">var</span> res <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'皇子'</span><span class="token punctuation">)</span>          <span class="token comment">// -1</span>
<span class="token keyword">var</span> res2 <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">'德玛西亚'</span><span class="token punctuation">)</span>  <span class="token comment">// 5</span>

<span class="token keyword">var</span> res <span class="token operator">=</span>  arr<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'皇子'</span><span class="token punctuation">)</span> <span class="token comment">//false</span>
</code></pre> 
  <h4>数组的排序api：</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方 法</th> 
     <th align="center">语 法</th> 
     <th align="center">说 明</th> 
     <th align="center">改变原数组</th> 
     <th align="center">返回值</th> 
     <th align="center">js版本</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>reverse()</code></td> 
     <td align="center"><code>array.reverse()</code></td> 
     <td align="center">反转数组中元素的顺序</td> 
     <td align="center">true</td> 
     <td align="center">反转后的数组</td> 
     <td align="center">ECMAScript 1</td> 
    </tr> 
    <tr> 
     <td align="center"><code>sort()</code></td> 
     <td align="center"><code>array.sort()</code></td> 
     <td align="center"><code>array.sort(function(a, b){return a-b})</code></td> 
     <td align="center"><code>array.sort(function(a, b){return b-a})</code></td> 
     <td align="center">1.适用于全小写或全大写的字母排序 2. <code>a - b</code> 从小到大排序 3. <code>b - a</code> 从大到小排序</td> 
     <td align="center">true</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="prism language-txt">练习：
var arr = [12,33,28,99,45,50]
1.数组中找最大值和最小值； for循环
2.数组的倒叙输出;  for循环
3.数组的拼接;  var arr1 = [3,4,5]   var arr2 = [7,8,9]   newArr
4.找数组中重复的值;  for循环
5.数组的排序;  for循环  冒泡排序  选择排序
</code></pre> 
  <p>https://www.runoob.com/w3cnote/selection-sort.html</p> 
  <h4>数组的遍历api</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方 法</th> 
     <th align="center">语 法</th> 
     <th align="center">说 明</th> 
     <th align="center">改变原数组</th> 
     <th align="center">返回值</th> 
     <th align="center">js版本</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>for循环</code></td> 
     <td align="center"><code>for(var i = 0; i < array.length; i++) {console.log(arr[i]);}</code></td> 
     <td align="center"></td> 
     <td align="center"></td> 
     <td align="center">/</td> 
     <td align="center"></td> 
    </tr> 
    <tr> 
     <td align="center"><code>for of</code></td> 
     <td align="center"><code>for (var item of array) {console.log(item);}</code></td> 
     <td align="center">其中 <code>item</code> 是数组中的每一个元素，<code>arr</code> 是要遍历的数组名。</td> 
     <td align="center">false</td> 
     <td align="center">/</td> 
     <td align="center">ECMAScript 6</td> 
    </tr> 
    <tr> 
     <td align="center"><code>forEach()</code></td> 
     <td align="center"><code>array.forEach(function (item, index) {console.log(item，index);})</code></td> 
     <td align="center">其中 <code>item</code> 是数组中的每一个元素名，<code>index</code> 是对应元素的下标。</td> 
     <td align="center">false</td> 
     <td align="center">undefined</td> 
     <td align="center">ECMAScript 5</td> 
    </tr> 
    <tr> 
     <td align="center"><code>map()</code></td> 
     <td align="center"><code>array.forEach(function (item, index) {console.log(item，index); return item})</code></td> 
     <td align="center">其中 <code>item</code> 是数组中的每一个元素名，<code>index</code> 是对应元素的下标。返回一个长度一致的新数组</td> 
     <td align="center">false</td> 
     <td align="center">new array</td> 
     <td align="center">ECMAScript 5</td> 
    </tr> 
    <tr> 
     <td align="center"><code>filter()</code></td> 
     <td align="center"><code>array.filter(function (item, index) {console.log(item，index); return 筛选条件})</code></td> 
     <td align="center">其中 <code>item</code> 是数组中的每一个元素名，<code>index</code> 是对应元素的下标。返回一个筛选过后的新数组</td> 
     <td align="center">false</td> 
     <td align="center">new array</td> 
     <td align="center">ECMAScript 5</td> 
    </tr> 
    <tr> 
     <td align="center"><code>every()</code></td> 
     <td align="center"><code>array.every(function (item, index) {console.log(item，index); return 判断条件})</code></td> 
     <td align="center">其中 <code>item</code> 是数组中的每一个元素名，<code>index</code> 是对应元素的下标。根据判断条件返回真假，一假则假</td> 
     <td align="center">false</td> 
     <td align="center">boolean</td> 
     <td align="center">ECMAScript 5</td> 
    </tr> 
    <tr> 
     <td align="center"><code>some()</code></td> 
     <td align="center"><code>array.some(function (item, index) {console.log(item，index); return 判断条件})</code></td> 
     <td align="center">其中 <code>item</code> 是数组中的每一个元素名，<code>index</code> 是对应元素的下标。根据判断条件返回真假，一真则真</td> 
     <td align="center">false</td> 
     <td align="center">boolean</td> 
     <td align="center">ECMAScript 5</td> 
    </tr> 
    <tr> 
     <td align="center"><code>find()</code></td> 
     <td align="center"><code>array.find(function(item, index){console.log(item，index); return 判断条件}})</code></td> 
     <td align="center">其中 <code>item</code> 是数组中的每一个元素名，<code>index</code> 是对应元素的下标。根据判断条件返回第一个满足条件的item</td> 
     <td align="center">false</td> 
     <td align="center">返回第一个满足条件的item，没有符合的返回 undefined</td> 
     <td align="center">ECMAScript 6</td> 
    </tr> 
    <tr> 
     <td align="center"><code>reduce()</code></td> 
     <td align="center"><code>array.reduce(function(total, item, index), 初始值)</code></td> 
     <td align="center">其中 <code>item</code> 是数组中的每一个元素名，<code>index</code> 是对应元素的下标。<code>total</code>为初始值或先前返回的值</td> 
     <td align="center">false</td> 
     <td align="center">遍历完最后一次的返回结果</td> 
     <td align="center">ECMAScript 5</td> 
    </tr> 
   </tbody> 
  </table> 
  <h4>数组的拼接和截取</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方 法</th> 
     <th align="center">语 法</th> 
     <th align="center">说 明</th> 
     <th align="center">改变原数组</th> 
     <th align="center">返回值</th> 
     <th align="center">js版本</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>concat()</code></td> 
     <td align="center"><code>array1.concat(array2, array3, ..., arrayX)</code></td> 
     <td align="center">方法用于拼接两个或多个数组。</td> 
     <td align="center">false</td> 
     <td align="center">合并后的新数组</td> 
     <td align="center">ECMAScript 1</td> 
    </tr> 
    <tr> 
     <td align="center"><code>slice()</code></td> 
     <td align="center"><code>array.slice(开始下标（包含）, 结束下标（不包含）)</code></td> 
     <td align="center">根据对应下标（可以是负数），截取数组中的某一个部分</td> 
     <td align="center">false</td> 
     <td align="center">截取后的新数组</td> 
     <td align="center">ECMAScript 1</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="prism language-js"><span class="token comment">//1. 拼接数组</span>
<span class="token keyword">var</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> arr3 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">9</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> newArr <span class="token operator">=</span> arr1<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>arr2<span class="token punctuation">,</span>arr3<span class="token punctuation">,</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//扩展运算符    浅拷贝   ES6新增</span>
<span class="token keyword">var</span> newArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr1<span class="token punctuation">,</span><span class="token operator">...</span>arr2<span class="token punctuation">,</span><span class="token operator">...</span>arr3<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">//2.数组的截取</span>
<span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">9</span><span class="token punctuation">]</span>

<span class="token keyword">var</span> newArr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> newArr2 <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newArr<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newArr2<span class="token punctuation">)</span>
</code></pre> 
  <h4>数组转字符串</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方 法</th> 
     <th align="center">语 法</th> 
     <th align="center">说 明</th> 
     <th align="center">改变原数组</th> 
     <th align="center">返回值</th> 
     <th align="center">js版本</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>join()</code></td> 
     <td align="center"><code>array.join(分隔符（默认逗号）)</code></td> 
     <td align="center">将数组里的元素按照指定字符拼接成一个字符串</td> 
     <td align="center">false</td> 
     <td align="center">string</td> 
     <td align="center">ECMAScript 1</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="prism language-js"><span class="token comment">//3.数组转字符串</span>
<span class="token comment">// var str = arr.toString()  //1,2,3,4,5</span>
<span class="token comment">// var str = String(arr) //1,2,3,4,5</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span> <span class="token comment">//12345</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
</code></pre> 
  <h4>判断是不是数组 Array.isArray()</h4> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">9</span><span class="token punctuation">]</span>
<span class="token comment">//var arr = 1234</span>

<span class="token comment">// typeof arr //object</span>
<span class="token keyword">var</span> res <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span> 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token comment">//true</span>
</code></pre> 
  <h2>函数</h2> 
  <p>作用：</p> 
  <ol> 
   <li>当代码量庞大时，我们可以针对其中一些核心逻辑，提取出来封装成函数。</li> 
   <li>当我们在使用不断重复的代码时，通过函数将这些代码包装起来，后续只需要调用即可</li> 
  </ol> 
  <h3>创建函数</h3> 
  <h4>函数声明式</h4> 
  <pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">函数名</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
<span class="token punctuation">}</span>

<span class="token function">函数名</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> 
  <h4>函数表达式</h4> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> <span class="token function-variable function">变量</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
<span class="token punctuation">}</span>

<span class="token function">变量</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> 
  <h4>区别：</h4> 
  <ol> 
   <li>函数声明式有函数声明提升，在代码的<code>最顶部</code>，声明了这个函数，这个函数可以在当前<code>作用域</code>的任意位置调用</li> 
   <li>函数表达式：把一个匿名函数交给了一个变量，会将这个变量提升到代码的<code>最顶部</code>，并且赋给这个变量为<code>undefined</code>,这种情况在函数表达式之前去调用函数时就会报错，<code>not a function</code>不是一个函数</li> 
  </ol> 
  <h3>调用函数：可以在后续调用多次</h3> 
  <h3>函数的参数：</h3> 
  <p>对数据进行传递，外部的数据可以传递个给函数内部。</p> 
  <p>作用：当创建一个函数后，希望里面的某些数据是动态变化的。这个时候就可以利用函数的参数来解决。</p> 
  <p>语法：</p> 
  <pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">函数名</span><span class="token punctuation">(</span><span class="token parameter">形参<span class="token number">1</span><span class="token punctuation">,</span>形参<span class="token number">1</span><span class="token punctuation">,</span>形参<span class="token number">1</span><span class="token punctuation">,</span><span class="token operator">...</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>形参<span class="token number">1</span><span class="token punctuation">,</span>形参<span class="token number">1</span><span class="token punctuation">,</span>形参<span class="token number">1</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">函数名</span><span class="token punctuation">(</span>实参<span class="token number">1</span><span class="token punctuation">,</span>实参<span class="token number">2</span><span class="token punctuation">,</span>实参<span class="token number">3</span><span class="token punctuation">,</span><span class="token operator">...</span><span class="token punctuation">)</span>
</code></pre> 
  <p>注意:</p> 
  <pre><code>1. 从语法上来讲，函数的参数数量可以不一致
1. 函数的参数可以是任意类型的数据
</code></pre> 
  <h3>函数的返回值</h3> 
  <p>在函数外部使用函数内部的数据时，可以通过<code>return</code>关键字将数据返回出来</p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> s <span class="token operator">=</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">)</span>

<span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span>num2</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> total <span class="token operator">=</span> num1 <span class="token operator">+</span> num2
    <span class="token keyword">return</span> total
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span>
</code></pre> 
  <p>注意：</p> 
  <ol> 
   <li>return可以打断函数里的代码继续向下执行</li> 
   <li>一个函数如果没有return真正的数据除去，外部得到的返回值是一个undefined</li> 
   <li>可以返回多个值return {sum,total}</li> 
  </ol> 
  <h3>arguments</h3> 
  <pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p>arguments是一个类数组对象，你传进来的所有参数都会被这个arguments所接收。</p> 
  <h3>作用域：变量的活动范围</h3> 
  <p>当一个函数创建成功时，该函数就会把函数的内部和外部分为两个区域，就是分为了两个作用域：</p> 
  <p>函数外部：全局作用域，变量在任意位置都可以使用，包括另一个局部作用域里</p> 
  <p>函数内部：局部作用域（函数作用域），内部的变量只能在这个作用域内部使用</p> 
  <h3>箭头函数：ES6的新特性，通过<code>=></code>取代了<code>function</code>关键字</h3> 
  <p>箭头函数的声明：函数表达式的方式来声明</p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> <span class="token function-variable function">func</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello '</span> <span class="token operator">+</span> str<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> <span class="token function-variable function">func</span> <span class="token operator">=</span> <span class="token parameter">str</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello '</span> <span class="token operator">+</span> str<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> <span class="token function-variable function">func</span> <span class="token operator">=</span> <span class="token parameter">str</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello '</span> <span class="token operator">+</span> str<span class="token punctuation">)</span>
<span class="token keyword">var</span> <span class="token function-variable function">func</span> <span class="token operator">=</span> <span class="token parameter">str</span> <span class="token operator">=></span> <span class="token string">'hello '</span> <span class="token operator">+</span> str  <span class="token comment">//省略掉了return</span>
<span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span>  <span class="token comment">//'hello ' + str</span>
</code></pre> 
  <h3>this：代表函数的执行环境</h3> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">func1</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">func2</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

obj<span class="token punctuation">.</span><span class="token function">func1</span><span class="token punctuation">(</span><span class="token punctuation">)</span>  <span class="token comment">//obj这个对象</span>
obj<span class="token punctuation">.</span><span class="token function">func2</span><span class="token punctuation">(</span><span class="token punctuation">)</span>  <span class="token comment">//obj的作用域——>全局对象</span>
</code></pre> 
  <h2>对象object</h2> 
  <h3>概念：</h3> 
  <p>数组：储存简单数据的，只能通过遍历和下表查找，再复杂的数据操作就会比较麻烦。<code>[ ]</code></p> 
  <p>对象：可以储存相对复杂的数据，<code>｛｝</code></p> 
  <p>对象中每一条数据都有自己的名字，称为 <code>键</code>，数据本身称为<code>值</code>，在对象中保存的数据都是以<code>键值对</code>的方式来保存的，对象中的数据时无序的。</p> 
  <h3>创建对象</h3> 
  <ol> 
   <li>字面量法（常用）</li> 
  </ol> 
  <pre><code class="prism language-js"><span class="token comment">//字面量法</span>
<span class="token keyword">var</span> student <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token string-property property">'name'</span><span class="token operator">:</span> <span class="token string">'kunkun'</span><span class="token punctuation">,</span>
    <span class="token string-property property">'age'</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
    <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">'man'</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>student<span class="token punctuation">)</span>
</code></pre> 
  <ol start="2"> 
   <li>构造函数法</li> 
  </ol> 
  <pre><code class="prism language-js"><span class="token comment">//构造函数法</span>
<span class="token keyword">var</span> obj  <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
obj<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'lisi'</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
</code></pre> 
  <h3>对象中的数据</h3> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> stu <span class="token operator">=</span> <span class="token punctuation">{</span>
    键<span class="token number">1</span><span class="token operator">:</span>值<span class="token number">1</span>，
    键<span class="token number">2</span><span class="token operator">:</span>值<span class="token number">2</span>，
    键<span class="token number">3</span><span class="token operator">:</span>值<span class="token number">3</span>，
    <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p>注意：</p> 
  <ol> 
   <li>对象的键 是一个字符串类型，但是在js对象中可以省去这个引号</li> 
   <li>js对象的值 可以是任意类型的数据类型</li> 
  </ol> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> student <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token string-property property">'name'</span><span class="token operator">:</span> <span class="token string">'kunkun'</span><span class="token punctuation">,</span>
    <span class="token string-property property">'age'</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
    <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">'man'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">hobby</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'唱'</span><span class="token punctuation">,</span><span class="token string">'跳'</span><span class="token punctuation">,</span><span class="token string">'rap'</span><span class="token punctuation">,</span><span class="token string">'ball'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">isTrue</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h3>操作对象</h3> 
  <h4>数据的增删查改</h4> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> student <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token string-property property">'name'</span><span class="token operator">:</span> <span class="token string">'kunkun'</span><span class="token punctuation">,</span>
    <span class="token string-property property">'age'</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
    <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">'man'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">hobby</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'唱'</span><span class="token punctuation">,</span><span class="token string">'跳'</span><span class="token punctuation">,</span><span class="token string">'rap'</span><span class="token punctuation">,</span><span class="token string">'ball'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">isTrue</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token comment">//点运算</span>

<span class="token comment">//访问对象数据</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>student<span class="token punctuation">.</span>name<span class="token punctuation">)</span>
<span class="token comment">// console.log(student.age)</span>

<span class="token comment">//修改对象数据</span>
student<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">25</span>
<span class="token comment">// console.log(student)</span>

<span class="token comment">//新增</span>
student<span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token number">1</span>
<span class="token comment">// console.log(student)</span>

<span class="token comment">//删除</span>
<span class="token keyword">delete</span> student<span class="token punctuation">.</span>isTrue
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>student<span class="token punctuation">)</span>
</code></pre> 
  <h4>通过<code>[]</code>去访问对象</h4> 
  <p>基础语法：</p> 
  <pre><code class="prism language-js">student<span class="token punctuation">[</span><span class="token string">'键名'</span><span class="token punctuation">]</span>
</code></pre> 
  <p>通常来说，如果访问的键名是一个变量来保存的，这时候才使用<code>[]</code></p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">'name'</span>
student<span class="token punctuation">[</span>str<span class="token punctuation">]</span>

<span class="token comment">//通过变量去设置键名</span>
<span class="token keyword">var</span> str2 <span class="token operator">=</span> <span class="token string">'sex'</span>

<span class="token keyword">var</span> student2 <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token string-property property">'name'</span><span class="token operator">:</span> <span class="token string">'kunkun'</span><span class="token punctuation">,</span>
    <span class="token string-property property">'age'</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span>str2<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'man'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">hobby</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'唱'</span><span class="token punctuation">,</span><span class="token string">'跳'</span><span class="token punctuation">,</span><span class="token string">'rap'</span><span class="token punctuation">,</span><span class="token string">'ball'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">isTrue</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>student2<span class="token punctuation">)</span>
</code></pre> 
  <h4>对象的属性和方法</h4> 
  <p>因为对象中可以保存任意数据类型，所以也可以是一个函数，我们就可以根据数据是不是函数来决定，数据的分类：</p> 
  <ol> 
   <li>对象的属性</li> 
   <li>对象的方法</li> 
  </ol> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> student <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token string-property property">'name'</span><span class="token operator">:</span> <span class="token string">'kunkun'</span><span class="token punctuation">,</span>
    <span class="token string-property property">'age'</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
    <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">'man'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">hobby</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'唱'</span><span class="token punctuation">,</span><span class="token string">'跳'</span><span class="token punctuation">,</span><span class="token string">'rap'</span><span class="token punctuation">,</span><span class="token string">'ball'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">isTrue</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token function-variable function">study</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'来凡云上网课'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">sleep</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> str <span class="token operator">+</span> <span class="token string">'睡'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

student<span class="token punctuation">.</span><span class="token function">study</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
student<span class="token punctuation">.</span><span class="token function">sleep</span><span class="token punctuation">(</span><span class="token string">'上班'</span><span class="token punctuation">)</span>
</code></pre> 
  <h4>遍历对象(了解)</h4> 
  <ol> 
   <li><code>for in</code></li> 
  </ol> 
  <pre><code class="prism language-js"><span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> key <span class="token keyword">in</span> student<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// console.log(key)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>student<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
  <ol start="2"> 
   <li><code>Object.keys()</code></li> 
  </ol> 
  <pre><code class="prism language-js">Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>student<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span>student<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
  <h4>对象的简写 ES6提供的方式</h4> 
  <ol> 
   <li>对象中属性的简写</li> 
  </ol> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> stuName <span class="token operator">=</span> <span class="token string">'kunkun'</span>
<span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token number">18</span>
<span class="token keyword">var</span> gender <span class="token operator">=</span> <span class="token string">'man'</span>

<span class="token keyword">var</span> student <span class="token operator">=</span> <span class="token punctuation">{</span>
    stuName<span class="token punctuation">,</span>
    age<span class="token punctuation">,</span>
    gender<span class="token punctuation">,</span>
    <span class="token literal-property property">hobby</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'唱'</span><span class="token punctuation">,</span><span class="token string">'跳'</span><span class="token punctuation">,</span><span class="token string">'rap'</span><span class="token punctuation">,</span><span class="token string">'ball'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">isTrue</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>student<span class="token punctuation">)</span>
</code></pre> 
  <ol start="2"> 
   <li>对象中方法的简写：</li> 
  </ol> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> student <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function">study</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'来凡云上网课'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">sleep</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> str <span class="token operator">+</span> <span class="token string">'睡'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
student<span class="token punctuation">.</span><span class="token function">study</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
student<span class="token punctuation">.</span><span class="token function">sleep</span><span class="token punctuation">(</span><span class="token string">'放学'</span><span class="token punctuation">)</span>
</code></pre> 
  <h3>对象中的this（了解）</h3> 
  <p>this是存在于函数中的动态指针，指代当前调用的对象，this的目的是在函数内部指代这个函数的运行环境</p> 
  <ul> 
   <li>在自己创建的对象中的方法如果是使用了this，this就指向这个创建的对象</li> 
   <li>在全局作用域中创建的函数，这里的this就指向window</li> 
  </ul> 
  <p>特殊：箭头函数没有this，如果非得在箭头函数中使用this，这个this指向所在父级的作用域上，就指向window</p> 
  <h2>对象的分类</h2> 
  <p>JS中万物皆对象。</p> 
  <h3>对象分类：</h3> 
  <h4>宿主对象 host object：</h4> 
  <ul> 
   <li>js的运行环境决定了js的宿主对象是谁。浏览器提供：<code>window对象</code>。</li> 
  </ul> 
  <h4>原生对象：</h4> 
  <ul> 
   <li>自定义对象：js运行的时候创建的对象——自己编写的。</li> 
   <li>内部对象：由js语言规范（ECMA）提供的对象，不是宿主对象，也不是自己写的 
    <ul> 
     <li>本地对象 native object：通过new创建的对象：Array、Object、Date、RegExp…</li> 
     <li>内置对象 build-in object：不需要new：Math、JSON、Global…</li> 
    </ul> </li> 
  </ul> 
  <h3>Array：数组对象、通过数组对象上的属性和方法操作数组</h3> 
  <h4>数组属性</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="left">属性</th> 
     <th align="left">描述</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="left">length</td> 
     <td align="left">设置或返回数组元素的个数。</td> 
    </tr> 
   </tbody> 
  </table> 
  <h4>数组方法</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="left">方法</th> 
     <th align="left">描述</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="left">concat()</td> 
     <td align="left">连接两个或更多的数组，并返回结果。</td> 
    </tr> 
    <tr> 
     <td align="left">every()</td> 
     <td align="left">检测数值元素的每个元素是否都符合条件。</td> 
    </tr> 
    <tr> 
     <td align="left">filter()</td> 
     <td align="left">检测数值元素，并返回符合条件所有元素的数组。</td> 
    </tr> 
    <tr> 
     <td align="left">find()</td> 
     <td align="left">返回符合传入测试（函数）条件的数组元素。</td> 
    </tr> 
    <tr> 
     <td align="left">findIndex()</td> 
     <td align="left">返回符合传入测试（函数）条件的数组元素索引。</td> 
    </tr> 
    <tr> 
     <td align="left">forEach()</td> 
     <td align="left">数组每个元素都执行一次回调函数。</td> 
    </tr> 
    <tr> 
     <td align="left">includes()</td> 
     <td align="left">判断一个数组是否包含一个指定的值。</td> 
    </tr> 
    <tr> 
     <td align="left">indexOf()</td> 
     <td align="left">搜索数组中的元素，并返回它所在的位置。</td> 
    </tr> 
    <tr> 
     <td align="left">isArray()</td> 
     <td align="left">判断对象是否为数组。</td> 
    </tr> 
    <tr> 
     <td align="left">join()</td> 
     <td align="left">把数组的所有元素放入一个字符串。</td> 
    </tr> 
    <tr> 
     <td align="left">keys()</td> 
     <td align="left">返回数组的可迭代对象，包含原始数组的键(key)。</td> 
    </tr> 
    <tr> 
     <td align="left">map()</td> 
     <td align="left">通过指定函数处理数组的每个元素，并返回处理后的数组。</td> 
    </tr> 
    <tr> 
     <td align="left">pop()</td> 
     <td align="left">删除数组的最后一个元素并返回删除的元素。</td> 
    </tr> 
    <tr> 
     <td align="left">push()</td> 
     <td align="left">向数组的末尾添加一个或更多元素，并返回新的长度。</td> 
    </tr> 
    <tr> 
     <td align="left">reduce()</td> 
     <td align="left">将数组元素计算为一个值（从左到右）。</td> 
    </tr> 
    <tr> 
     <td align="left">reverse()</td> 
     <td align="left">反转数组的元素顺序。</td> 
    </tr> 
    <tr> 
     <td align="left">shift()</td> 
     <td align="left">删除并返回数组的第一个元素。</td> 
    </tr> 
    <tr> 
     <td align="left">slice()</td> 
     <td align="left">选取数组的一部分，并返回一个新数组。</td> 
    </tr> 
    <tr> 
     <td align="left">some()</td> 
     <td align="left">检测数组元素中是否有元素符合指定条件。</td> 
    </tr> 
    <tr> 
     <td align="left">sort()</td> 
     <td align="left">对数组的元素进行排序。</td> 
    </tr> 
    <tr> 
     <td align="left">splice()</td> 
     <td align="left">从数组中添加或删除元素。</td> 
    </tr> 
    <tr> 
     <td align="left">toString()</td> 
     <td align="left">把数组转换为字符串，并返回结果。</td> 
    </tr> 
    <tr> 
     <td align="left">unshift()</td> 
     <td align="left">向数组的开头添加一个或更多元素，并返回新的长度。</td> 
    </tr> 
   </tbody> 
  </table> 
  <h3>String：字符串对象</h3> 
  <h3>Math：数学对象</h3> 
  <h3>Date：日期对象</h3> 
  <h3>RegExp：正则对象</h3> 
  <h2>BOM和DOM</h2> 
  <h3>概念：</h3> 
  <p>javascript的核心内容：</p> 
  <ol> 
   <li>ECMAScript规范语法；</li> 
   <li>BOM：（browser object model）浏览器对象模型，用来操作浏览器的</li> 
   <li>DOM：（document object model）文档对象模型，用来创造html文档的</li> 
  </ol> 
  <p><a href="http://img.e-com-net.com/image/info8/e521650cbb5f40878fed626b568c9e2f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e521650cbb5f40878fed626b568c9e2f.jpg" alt="前端基础学习笔记_第10张图片" width="650" height="247" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>window对象：浏览器窗口对象，js的宿主对象 
    <ul> 
     <li>location：浏览器URL地址对象</li> 
     <li>history：历史记录对象</li> 
     <li>screen：屏幕对象</li> 
     <li>navigator：浏览器信息对象</li> 
     <li>document：文档对象</li> 
    </ul> </li> 
  </ul> 
  <h2>DOM</h2> 
  <p>在DOM中提供了很多<code>属性</code>和<code>方法</code>来操作html标签、style样式、标签上的属性等…</p> 
  <h3>DOM树</h3> 
  <p><a href="http://img.e-com-net.com/image/info8/55b8e9be2df546e8b4b19aee9d8add37.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/55b8e9be2df546e8b4b19aee9d8add37.gif" alt="前端基础学习笔记_第11张图片" width="486" height="266" style="border:1px solid black;"></a></p> 
  <p>通过dom来操作html中的所有节点：增、删、查、改</p> 
  <p>在DOM中，节点包含了：html标签、标签上的属性、标签包裹的文本…node节点</p> 
  <h3>Document对象</h3> 
  <h4>属性</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">属性名</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>body</code></td> 
     <td align="center">获取body标签节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>title</code></td> 
     <td align="center">获取title标签里的文本节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>URL</code></td> 
     <td align="center">获取URL地址</td> 
    </tr> 
    <tr> 
     <td align="center"><code>documentElement</code></td> 
     <td align="center">获取html标签节点</td> 
    </tr> 
   </tbody> 
  </table> 
  <h4>方法</h4> 
  <p>获取html标签节点的方法</p> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方法名</th> 
     <th align="center">语法</th> 
     <th align="center">说明</th> 
     <th align="center">返回值</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>getElementById()</code></td> 
     <td align="center"><code>document.getElementById(id名)</code></td> 
     <td align="center">通过 id 获取元素</td> 
     <td align="center">元素节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>getElementsByClassName()</code></td> 
     <td align="center"><code>document.getElementsByClassName(class名)</code></td> 
     <td align="center">通过 class 获取元素</td> 
     <td align="center">数组（元素节点）</td> 
    </tr> 
    <tr> 
     <td align="center"><code>getElementsByTagName()</code></td> 
     <td align="center"><code>document.getElementsByTagName(标签名)</code></td> 
     <td align="center">通过标签名获取元素</td> 
     <td align="center">数组（元素节点）</td> 
    </tr> 
    <tr> 
     <td align="center"><code>querySelector()</code></td> 
     <td align="center"><code>document.querySelector(css选择器)</code></td> 
     <td align="center">通过 CSS 选择器获取到第一个匹配的元素</td> 
     <td align="center">元素节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>querySelectorAll()</code></td> 
     <td align="center"><code>document.querySelectorAll(css选择器)</code></td> 
     <td align="center">通过 CSS 选择器获取到所有匹配的元素</td> 
     <td align="center">数组（元素节点）</td> 
    </tr> 
    <tr> 
     <td align="center"><code>createElement()</code></td> 
     <td align="center"><code>document.createElement(标签名)</code></td> 
     <td align="center">创建html节点</td> 
     <td align="center">元素节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>createTextNode()</code></td> 
     <td align="center"><code>document.createTextNode(标签名)</code></td> 
     <td align="center">创建文本节点</td> 
     <td align="center">文本节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>write()</code></td> 
     <td align="center"><code>document.write(字符串)</code></td> 
     <td align="center">向页面输出内容，可以是一个html节点</td> 
     <td align="center">undefined</td> 
    </tr> 
   </tbody> 
  </table> 
  <h3>element对象</h3> 
  <h4>属性</h4> 
  <ul> 
   <li>获取关系节点的属性：</li> 
  </ul> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">属性名</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>parentElement</code></td> 
     <td align="center">获取父节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>firstElementChild</code></td> 
     <td align="center">获取第一个子节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>lastElementChild</code></td> 
     <td align="center">获取最后一个子节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>children</code></td> 
     <td align="center">获取所有的子节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>previousElementSibling</code></td> 
     <td align="center">获取前一个兄弟节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>nextElementSibling</code></td> 
     <td align="center">获取后一个兄弟节点</td> 
    </tr> 
   </tbody> 
  </table> 
  <ul> 
   <li>操作元素里的内容：</li> 
  </ul> 
  <table> 
   <thead> 
    <tr> 
     <th>属性名</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td><code>innerText</code></td> 
     <td>获取、新增、修改、删除（修改为空）指定标签里的文本节点</td> 
    </tr> 
    <tr> 
     <td><code>innerHTML</code></td> 
     <td>获取、新增、修改、删除（修改为空）指定标签里的标签及文本节点</td> 
    </tr> 
    <tr> 
     <td><code>value</code></td> 
     <td>获取、新增、修改、删除（修改为空）指定表单元素里的value值</td> 
    </tr> 
   </tbody> 
  </table> 
  <ul> 
   <li>操作元素上的属性节点</li> 
  </ul> 
  <table> 
   <thead> 
    <tr> 
     <th>属性名</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td><code>className</code></td> 
     <td>获取、新增、修改、删除（修改为空）指定元素的class属性</td> 
    </tr> 
    <tr> 
     <td><code>style</code></td> 
     <td>获取、新增、修改、删除（修改为空）指定元素的style样式属性</td> 
    </tr> 
    <tr> 
     <td><code>标签属性名</code></td> 
     <td>获取、新增、修改、删除（修改为空）指定元素的属性节点：<code>href、src、title、id、type....</code></td> 
    </tr> 
    <tr> 
     <td><code>checked</code></td> 
     <td>获取、修改 input选框 是否选中</td> 
    </tr> 
   </tbody> 
  </table> 
  <ul> 
   <li>元素盒模型相关的属性</li> 
  </ul> 
  <table> 
   <thead> 
    <tr> 
     <th>属性名</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td><code>clientWidth、clientHeight</code></td> 
     <td>盒子元素的宽高——只包含内边距和内容区</td> 
    </tr> 
    <tr> 
     <td><code>offsetWidth</code>、<code>offsetHeight</code></td> 
     <td>盒子元素的宽高——包含内边距、内容区、边框</td> 
    </tr> 
    <tr> 
     <td><code>offsetLeft、offsetTop</code></td> 
     <td>盒子距离整个html的左边和上边的间距</td> 
    </tr> 
    <tr> 
     <td><code>clientLeft、clientTop</code></td> 
     <td>盒子边框的宽度</td> 
    </tr> 
   </tbody> 
  </table> 
  <h4>方法</h4> 
  <ul> 
   <li>操作元素阶的方法：添加和删除</li> 
  </ul> 
  <table> 
   <thead> 
    <tr> 
     <th>方法名</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td><code>父节点.appendChild(子节点)</code></td> 
     <td>向父节点的最后添加新节点</td> 
    </tr> 
    <tr> 
     <td><code>父节点.insertBefore(新节点,旧节点)</code></td> 
     <td>向父节点中的某一个旧节点前添加新节点</td> 
    </tr> 
    <tr> 
     <td><code>父节点.removeChild(指定节点)</code></td> 
     <td>从父节点中删除一个指定节点</td> 
    </tr> 
   </tbody> 
  </table> 
  <ul> 
   <li>新方法：（ie全系不兼容）</li> 
  </ul> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方法名</th> 
     <th align="center">语法</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>append()</code></td> 
     <td align="center"><code>节点.append(子节点)</code></td> 
     <td align="center">往指定父节点的<code>末尾</code>添加一个子节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>prepend()</code></td> 
     <td align="center"><code>节点.prepend(子节点)</code></td> 
     <td align="center">往指定父节点的<code>开头</code>添加一个子节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>before()</code></td> 
     <td align="center"><code>节点.before(兄弟节点)</code></td> 
     <td align="center">往指定节点的前面添加一个兄弟节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>after()</code></td> 
     <td align="center"><code>节点.after(兄弟节点)</code></td> 
     <td align="center">往指定节点的后面添加一个兄弟节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>remove()</code></td> 
     <td align="center"><code>节点.remove()</code></td> 
     <td align="center">删除该节点</td> 
    </tr> 
    <tr> 
     <td align="center"><code>replaceWith()</code></td> 
     <td align="center"><code>节点.replaceWith(新节点)</code></td> 
     <td align="center">用新节点替换指定的节点</td> 
    </tr> 
   </tbody> 
  </table> 
  <ul> 
   <li>操作元素的属性节点：</li> 
  </ul> 
  <table> 
   <thead> 
    <tr> 
     <th>方法</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td><code>节点对象.getAttribute(属性名)</code></td> 
     <td>获取元素的指定属性的值</td> 
    </tr> 
    <tr> 
     <td><code>节点对象.setAttribute(属性名,属性值)</code></td> 
     <td>设置元素一个属性和属性值</td> 
    </tr> 
    <tr> 
     <td><code>节点对象.removeAttribute(属性名)</code></td> 
     <td>移出元素上的一个指定属性</td> 
    </tr> 
    <tr> 
     <td><code>节点对象.hasAttribute(属性名)</code></td> 
     <td>判断元素有没有该指定属性，返回布尔值</td> 
    </tr> 
   </tbody> 
  </table> 
  <h2>事件</h2> 
  <h3>概念：</h3> 
  <p>事件是指用户与页面之间交互做出的一系列反应，比如：点击元素、鼠标移入移出、滚轮滑动…</p> 
  <p>DOM中的事件，指的是给元素设置事件的监听。因为事件其实是一直存在的，只是后续没有监听和其他的操作。</p> 
  <p>其实添加事件监听的意思就是，监听用户做出的动作，然后对这个动作设置一些反应。</p> 
  <p>例如：</p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'btn'</span><span class="token punctuation">)</span>
btn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'btn被点击了'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p>上述的function不需要手动去设置调用，当浏览器检测到用户点击了这个按钮时，就会触发这个函数，执行函数里的代码</p> 
  <h4>事件的三要素</h4> 
  <ol> 
   <li>事件源：实际触发事件的元素</li> 
   <li>事件类型：点击、鼠标移入、键盘按下…</li> 
   <li>事件处理函数：事件发生后的一些操作</li> 
  </ol> 
  <p>—— 事件处理程序</p> 
  <h3>事件处理程序</h3> 
  <h4>HTML事件处理程序（非标准DOM0）</h4> 
  <pre><code class="prism language-js"><span class="token operator"><</span>button id<span class="token operator">=</span><span class="token string">"btn"</span> onclick<span class="token operator">=</span><span class="token string">"console.log('按钮被点击了')"</span><span class="token operator">></span>按钮<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
<span class="token operator"><</span>button id<span class="token operator">=</span><span class="token string">"btn"</span> onclick<span class="token operator">=</span><span class="token string">"clickBtn()"</span><span class="token operator">></span>按钮<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
<span class="token keyword">function</span> <span class="token function">clickBtn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'按钮被点击了'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p>缺点：html和js 代码没有分离，造成后期维护困难</p> 
  <h4>DOM0级事件处理程序</h4> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'btn'</span><span class="token punctuation">)</span>
btn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'按钮被点击了1'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p>优点：html、js代码分离；兼容好ie全系兼容</p> 
  <p>缺点：没有办法绑定多个相同事件的监听</p> 
  <h4>DOM2级事件处理程序</h4> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'btn'</span><span class="token punctuation">)</span>
btn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'按钮被点击了1'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
btn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'按钮被点击了2'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
  <p>优点：可以绑定多个相同时间监听，触发多个事件函数</p> 
  <p>缺点：ie8以下不兼容</p> 
  <h4>移除事件监听</h4> 
  <ul> 
   <li>DOM0：</li> 
  </ul> 
  <pre><code class="prism language-js">btn<span class="token punctuation">.</span>onclick <span class="token operator">=</span> <span class="token keyword">null</span>
</code></pre> 
  <ul> 
   <li>DOM2：移出事件监听需要用removeEventListener方法来移除，移除的这个事件执行函数必须保证是统一个函数</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> <span class="token function-variable function">clickBtn</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'按钮被点击了2'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
btn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span>clickBtn<span class="token punctuation">)</span>
btn<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span>clickBtn<span class="token punctuation">)</span>
</code></pre> 
  <h4>案例：计数器</h4> 
  <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sub<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>- <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>num_input<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>input</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>add<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>+ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
        <span class="token keyword">var</span> sub <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'sub'</span><span class="token punctuation">)</span>
        <span class="token keyword">var</span> num_input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'num_input'</span><span class="token punctuation">)</span>
        <span class="token keyword">var</span> add <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'add'</span><span class="token punctuation">)</span>
        <span class="token comment">// DOM0</span>
        <span class="token comment">// sub.onclick = function(){</span>
        <span class="token comment">//     num_input.value = Number(num_input.value)-1</span>
        <span class="token comment">// }</span>
        <span class="token comment">// add.onclick = function(){</span>
        <span class="token comment">//     num_input.value = Number(num_input.value)+1</span>
        <span class="token comment">// }</span>

        <span class="token comment">//DOM2</span>
        sub<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            num_input<span class="token punctuation">.</span>value<span class="token operator">--</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
        add<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            num_input<span class="token punctuation">.</span>value<span class="token operator">++</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre> 
  <h3>事件类型</h3> 
  <h4>UI事件</h4> 
  <table> 
   <thead> 
    <tr> 
     <th>事件类型</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td><code>load</code></td> 
     <td>当页面html标签全部加载完毕之后才去执行事件监听里面的代码</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="prism language-js">window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
  <h4>鼠标事件</h4> 
  <table> 
   <thead> 
    <tr> 
     <th>事件类型</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>click</td> 
     <td>鼠标单击事件</td> 
    </tr> 
    <tr> 
     <td>dblclick</td> 
     <td>鼠标双击事件</td> 
    </tr> 
    <tr> 
     <td>mousedown</td> 
     <td>鼠标按下时</td> 
    </tr> 
    <tr> 
     <td>mouseup</td> 
     <td>鼠标松开时</td> 
    </tr> 
    <tr> 
     <td>mouseenter</td> 
     <td>鼠标移入</td> 
    </tr> 
    <tr> 
     <td>mouseleave</td> 
     <td>鼠标移出</td> 
    </tr> 
    <tr> 
     <td>mousemove</td> 
     <td>鼠标移动</td> 
    </tr> 
   </tbody> 
  </table> 
  <h4>键盘事件</h4> 
  <table> 
   <thead> 
    <tr> 
     <th>事件类型</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>keydown</td> 
     <td>键盘中某个键被按下了</td> 
    </tr> 
    <tr> 
     <td>keyup</td> 
     <td>键盘中某个键被按松开了</td> 
    </tr> 
    <tr> 
     <td>keypress</td> 
     <td>键盘中某个键被按住了，按住后会一直触发</td> 
    </tr> 
   </tbody> 
  </table> 
  <h4>表单事件</h4> 
  <table> 
   <thead> 
    <tr> 
     <th>事件类型</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>focus</td> 
     <td>输入框获取到焦点的时候</td> 
    </tr> 
    <tr> 
     <td>blur</td> 
     <td>输入框失去焦点时</td> 
    </tr> 
    <tr> 
     <td>change</td> 
     <td>表单元素只要内容发生改变就可以触发事件</td> 
    </tr> 
    <tr> 
     <td>input</td> 
     <td>输入框内容在输入时会触发</td> 
    </tr> 
   </tbody> 
  </table> 
  <h3>事件流</h3> 
  <p>指的是事件的流向，分为了两种主要的事件流向：冒泡流、捕获流</p> 
  <h4>冒泡流：事件冒泡（IE事件流）</h4> 
  <p>事件会进行传递：从最具体的元素（div),一直向上进行冒泡传递，传递没有那么具体的元素（window），例如：</p> 
  <pre><code class="prism language-js"><span class="token operator"><</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">></span> 
<span class="token operator"><</span>html<span class="token operator">></span> 
    <span class="token operator"><</span>head<span class="token operator">></span> 
        <span class="token operator"><</span>title<span class="token operator">></span>事件流<span class="token operator"><</span><span class="token operator">/</span>title<span class="token operator">></span> 
    <span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span> 
    <span class="token operator"><</span>body<span class="token operator">></span> 
        <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"outer"</span><span class="token operator">></span>
            <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"inner"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
        <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> 
    <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span> 
<span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span>
</code></pre> 
  <p>从inner开始 ——》outer——》body——》html——》document——》window</p> <a href="http://img.e-com-net.com/image/info8/139fcd8dddb847ce83323e4027eef774.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/139fcd8dddb847ce83323e4027eef774.jpg" alt="前端基础学习笔记_第12张图片" width="650" height="420" style="border:1px solid black;"></a> 
  <h4>捕获流：事件捕获</h4> 
  <p>从没有那么具体的元素(window),依次传递到具体的元素上（div）</p> <a href="http://img.e-com-net.com/image/info8/73c9a756a69642409f8e66d5466d44b3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/73c9a756a69642409f8e66d5466d44b3.jpg" alt="前端基础学习笔记_第13张图片" width="650" height="456" style="border:1px solid black;"></a> 
  <h4>DOM事件流：同时包含冒泡和捕获</h4> 
  <p>DOM2event 规范提出，事件流包含了3个阶段：捕获、目标阶段、冒泡</p> 
  <p>事件捕获是最先发生，然后实际触发事件的元素才执行（目标阶段），最后此案时冒泡阶段</p> <a href="http://img.e-com-net.com/image/info8/a7e5f125997742b987f8f7438dbab47e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a7e5f125997742b987f8f7438dbab47e.jpg" alt="前端基础学习笔记_第14张图片" width="650" height="417" style="border:1px solid black;"></a> 
  <pre><code class="prism language-js">inner<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'inner被点击了'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span>
outer<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'outer被点击了'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'body被点击了'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'html被点击了'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'doc被点击了'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span>
window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'win被点击了'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span>
</code></pre> 
  <p>true：代表目标执行在捕获阶段执行的。（捕获）</p> 
  <p>false：代表目标执行在冒泡阶段执行的。（冒泡）</p> 
  <h3>this：事件中的this,指的是实际绑定事件的元素节点</h3> 
  <pre><code class="prism language-js">inner<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// console.log('inner被点击了')</span>
    <span class="token comment">// console.log(this)  //inner节点对象</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'blue'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
  <h3>事件对象：event对象</h3> 
  <h4>属性</h4> 
  <table> 
   <thead> 
    <tr> 
     <th>属性名</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>pageX、pageY</td> 
     <td>获取鼠标相对于页面的位置</td> 
    </tr> 
    <tr> 
     <td>clientX、clientY</td> 
     <td>获取鼠标相对于视口的位置</td> 
    </tr> 
    <tr> 
     <td>offsetX、offsetY</td> 
     <td>获取鼠标相对于实际触发事件元素（event.targer）的位置(不包含边框)</td> 
    </tr> 
    <tr> 
     <td>keyCode</td> 
     <td>获取键盘的对应的按键码</td> 
    </tr> 
    <tr> 
     <td>target</td> 
     <td>获取用户操作的节点(实际触发事件的元素)</td> 
    </tr> 
   </tbody> 
  </table> 
  <h4>方法</h4> 
  <table> 
   <thead> 
    <tr> 
     <th>方法</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>stopPropagation()</td> 
     <td>阻止事件流的传播</td> 
    </tr> 
    <tr> 
     <td>preventDefault()</td> 
     <td>阻止事件的默认行为</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>link<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.baidu.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>百度一下<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> link <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'link'</span><span class="token punctuation">)</span>
    link<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">//阻止事件的默认行为</span>
        event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>link<span class="token punctuation">.</span>href<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>


<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>outer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> inner <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'inner'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> outer <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'outer'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    inner<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'inner被点击了'</span><span class="token punctuation">)</span>
        <span class="token comment">// event.stopPropagation();</span>
    <span class="token punctuation">}</span>
    outer<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'outer被点击了'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'body被点击了'</span><span class="token punctuation">)</span>
        <span class="token comment">//阻止事件流的传播</span>
        event<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'html被点击了'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre> 
  <h3>事件委托:</h3> 
  <p>利用了事件冒泡的特点，将事件绑定委托给所有要触发事件的节点的父节点。将事件绑定在父节点上</p> 
  <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobby<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sing<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>我要唱歌<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dance<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>我要跳舞<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>我要rap<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ball<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>我要篮球<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
    <span class="token comment">//事件委托</span>
    <span class="token keyword">var</span> hobby <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'hobby'</span><span class="token punctuation">)</span>

    hobby<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>id<span class="token punctuation">,</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>innerText<span class="token punctuation">)</span>
        <span class="token keyword">switch</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">case</span> <span class="token string">'sing'</span><span class="token operator">:</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>innerText<span class="token punctuation">)</span>
                <span class="token keyword">break</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre> 
  <p>应用场景：</p> 
  <ol> 
   <li>当我们向将事件监听设置给<code>多个同样类型的元素</code>上时，就可以使用事件委托，委托给它们的父元素</li> 
   <li>当我们要将事件绑定给<code>动态渲染的元素</code>上时，就可以使用事件委托，委托给它们的已存在的父元素</li> 
  </ol> 
  <h2>数据驱动</h2> 
  <ul> 
   <li>页面交互以数据为核心，编写以处理数据为核心的业务逻辑（新增 Create、检索Retrieve、更新Update、删除Delete），处理完数据之后，再根据数据来渲染页面。</li> 
   <li>数据驱动：数据 ——》 业务代码 （封装函数） ——》 数据动态渲染 （封装函数）</li> 
  </ul> 
  <h2>正则表达式</h2> 
  <h3>概念：正则对象，Regular Expression regExp</h3> 
  <p>我们一般用这则对象来定义一个规则，可以用来对 字符串进行查找、验证、替换等操作</p> 
  <p>js通常用正则来进行表单<code>验证</code></p> 
  <h3>创建正则对象</h3> 
  <h4>字面量法</h4> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> reg <span class="token operator">=</span> <span class="token operator">/</span>规则<span class="token operator">/</span>修饰符
</code></pre> 
  <h4>构造函数法</h4> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> reg <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">'规则'</span><span class="token punctuation">,</span><span class="token string">'修饰符'</span><span class="token punctuation">)</span>
</code></pre> 
  <p>在正则中：规则是必须有的，修饰符是可选的</p> 
  <p>案例：</p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> reg <span class="token operator">=</span> <span class="token operator">/</span>a<span class="token operator">/</span>；  <span class="token comment">//某一个字符串中必须包含小写字母a</span>
</code></pre> 
  <h3>正则的验证：<code>test()</code></h3> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方法名</th> 
     <th align="center">参数</th> 
     <th align="center">说明</th> 
     <th align="center">返回值</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>test(字符串)</code></td> 
     <td align="center">字符串</td> 
     <td align="center">判断字符串是否匹配正则表达式</td> 
     <td align="center">布尔值</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">a</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span> <span class="token comment">//某一个字符串中必须包含小写字母a</span>

<span class="token keyword">var</span> str1 <span class="token operator">=</span> <span class="token string">'hello world'</span>
<span class="token keyword">var</span> str2 <span class="token operator">=</span> <span class="token string">'halo world'</span>

<span class="token keyword">var</span> res1 <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str1<span class="token punctuation">)</span>  
<span class="token keyword">var</span> res2 <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str2<span class="token punctuation">)</span>  
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res1<span class="token punctuation">)</span> <span class="token comment">//false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res2<span class="token punctuation">)</span> <span class="token comment">//true</span>
</code></pre> 
  <h3>正则的规则：</h3> 
  <h4><code>[]</code>包含中括号中的任意一个字符即可</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">表达式</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>/[abc]/</code></td> 
     <td align="center">包含a、b、c任意一个字母即可</td> 
    </tr> 
    <tr> 
     <td align="center"><code>/[0-9]/</code></td> 
     <td align="center">包含任意数字</td> 
    </tr> 
    <tr> 
     <td align="center"><code>/[a-z]/</code></td> 
     <td align="center">包含小写 a - z 之间的任意小写字母</td> 
    </tr> 
    <tr> 
     <td align="center"><code>/[A-Z]/</code></td> 
     <td align="center">包含大写 A - Z 之间的任意大写字母</td> 
    </tr> 
    <tr> 
     <td align="center"><code>/[a-zA-Z]/</code></td> 
     <td align="center">包含任意大小写字母</td> 
    </tr> 
    <tr> 
     <td align="center"><code>/[a-zA-Z0-9]/</code></td> 
     <td align="center">包含任意一个大小写字母或数字</td> 
    </tr> 
    <tr> 
     <td align="center"><code>/[0-9][0-9][0-9][0-9][0-9]/</code></td> 
     <td align="center">连续匹配5个数字</td> 
    </tr> 
    <tr> 
     <td align="center"><code>/[^abc]/</code></td> 
     <td align="center">包含除了a、b、c 中以外的其他任意字符(取反)</td> 
    </tr> 
   </tbody> 
  </table> 
  <h4>元字符</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">元字符</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>/\w/</code></td> 
     <td align="center">包含数字、字母、下划线中的任意字符。等同于 <code>/[0-9a-zA-Z_]/</code>。</td> 
    </tr> 
    <tr> 
     <td align="center"><code>/\W/</code></td> 
     <td align="center">包含除了数字、字母、下划线以外的其他任意字符。等同于 <code>/[^0-9a-zA-Z_]/</code>。</td> 
    </tr> 
    <tr> 
     <td align="center"><code>/\d/</code></td> 
     <td align="center">包含任意数字。等同于<code>/[0-9]/</code>。</td> 
    </tr> 
    <tr> 
     <td align="center"><code>/\D/</code></td> 
     <td align="center">包含除了数字以外的其他任意字符。等同于 <code>/[^0-9]/</code>。</td> 
    </tr> 
    <tr> 
     <td align="center"><code>/\s/</code></td> 
     <td align="center">包含空白字符（空格）。</td> 
    </tr> 
    <tr> 
     <td align="center"><code>/\S/</code></td> 
     <td align="center">包含除了空白字符以外的其他字符。</td> 
    </tr> 
   </tbody> 
  </table> 
  <h4>量词</h4> 
  <table> 
   <thead> 
    <tr> 
     <th>量词</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td><code>/n+/</code></td> 
     <td>至少包含一个指定字符， n >= 1</td> 
    </tr> 
    <tr> 
     <td><code>/n*/</code></td> 
     <td>指定字符可有可无， n >= 0</td> 
    </tr> 
    <tr> 
     <td><code>/n?/</code></td> 
     <td>指定字符出现0次或1次 ，n=0 || n=1</td> 
    </tr> 
    <tr> 
     <td><code>/n{x}/</code></td> 
     <td>指定字符连续出现x次 ，n = x</td> 
    </tr> 
    <tr> 
     <td><code>/n{x,}/</code></td> 
     <td>至少连续出现x次，n >= x</td> 
    </tr> 
    <tr> 
     <td><code>/n{x,y}/</code></td> 
     <td>至少连续出现x次，最多y次 <code>n >= x && n <= y</code></td> 
    </tr> 
   </tbody> 
  </table> 
  <h4>开始与结束</h4> 
  <p>当有了开始和结束符号的时候，我们的正则表达式才有了真正的意义</p> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">符号</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>^n</code></td> 
     <td align="center"><code>^[0-9]</code></td> 
    </tr> 
    <tr> 
     <td align="center"><code>n$</code></td> 
     <td align="center">表示以指定字符为结尾</td> 
    </tr> 
   </tbody> 
  </table> 
  <h4>其他符号</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">符号</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>.</code></td> 
     <td align="center">大体上可以将 <code>.</code> 看作是通配符（实际上不能匹配一些特殊符号，例如换行符 <code>\n</code>、回车符、制表符等）。</td> 
    </tr> 
    <tr> 
     <td align="center">`</td> 
     <td align="center">`</td> 
    </tr> 
    <tr> 
     <td align="center"><code>()</code></td> 
     <td align="center">对规则进行分组</td> 
    </tr> 
    <tr> 
     <td align="center"><code>\</code></td> 
     <td align="center">转义符d</td> 
    </tr> 
   </tbody> 
  </table> 
  <p>示例代码：</p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> regExp <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^(a|b)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regExp<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> 
  <h3>修饰符</h3> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">修饰符</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center">i</td> 
     <td align="center">不区分大小写。</td> 
    </tr> 
    <tr> 
     <td align="center">g</td> 
     <td align="center">对所有字符串进行匹配（而非在找到第一个匹配后停止）。</td> 
    </tr> 
    <tr> 
     <td align="center">m</td> 
     <td align="center">多行匹配（即在到达一行文本末位时还会继续查找下一行）。</td> 
    </tr> 
   </tbody> 
  </table> 
  <p>示例代码：</p> 
  <pre><code class="prism language-js"><span class="token keyword">var</span> regExp <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[a-z]{6,10}$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regExp<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'ABCDEFG'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// true</span>
</code></pre> 
  <p>https://c.runoob.com/front-end/854/</p> 
  <p>https://any86.github.io/any-rule/</p> 
  <h2>BOM</h2> 
  <p>浏览器对象模型</p> 
  <h3>window对象</h3> 
  <h4>属性</h4> 
  <table> 
   <thead> 
    <tr> 
     <th>属性名</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>innerWidth/innerHeight</td> 
     <td>浏览器视口（文档）宽高</td> 
    </tr> 
    <tr> 
     <td>outerWidth/outerHeight</td> 
     <td>整个浏览器外边框的宽高</td> 
    </tr> 
    <tr> 
     <td>screenLeft/screenTop</td> 
     <td>浏览器距离屏幕左边和上边的间距</td> 
    </tr> 
   </tbody> 
  </table> 
  <h4>方法</h4> 
  <table> 
   <thead> 
    <tr> 
     <th>方法名</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>alert()</td> 
     <td>打开一个警告弹框</td> 
    </tr> 
    <tr> 
     <td>prompt()</td> 
     <td>打开一个可输入的弹框</td> 
    </tr> 
    <tr> 
     <td>open()</td> 
     <td>跳转页面、默认就是打开新窗口、通过第二个参数可以控制打开方式</td> 
    </tr> 
   </tbody> 
  </table> 
  <h3>window四大内置对象</h3> 
  <h4>location ：url地址栏对象</h4> 
  <ul> 
   <li>属性：</li> 
  </ul> 
  <table> 
   <thead> 
    <tr> 
     <th>属性</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>href</td> 
     <td>获取到浏览器地址栏里的路径，对这个href重新赋值可以达到跳转页面的效果</td> 
    </tr> 
    <tr> 
     <td>search</td> 
     <td>获取url地址栏<code>?</code>后面的数据的</td> 
    </tr> 
   </tbody> 
  </table> 
  <ul> 
   <li>方法</li> 
  </ul> 
  <table> 
   <thead> 
    <tr> 
     <th>方法</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>assign()</td> 
     <td>跳转页面的方法，保留历史记录</td> 
    </tr> 
    <tr> 
     <td>replace()</td> 
     <td>跳转页面的方法，不保留历史记录</td> 
    </tr> 
    <tr> 
     <td>reload()</td> 
     <td>刷新页面</td> 
    </tr> 
   </tbody> 
  </table> 
  <h4>history：历史记录对象</h4> 
  <h4>属性</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">属性名</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>length</code></td> 
     <td align="center">获取当前浏览器窗口的历史记录条数</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="prism language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>history<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
  <h4>方法</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方法名</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center"><code>forward()</code></td> 
     <td align="center">前进一步</td> 
    </tr> 
    <tr> 
     <td align="center"><code>back()</code></td> 
     <td align="center">后退一步</td> 
    </tr> 
    <tr> 
     <td align="center"><code>go(n)</code></td> 
     <td align="center">传入的数字来决定是前进还是后退并指定步数</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="prism language-js">history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>前进<span class="token number">2</span>步
history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>后退一步
history<span class="token punctuation">.</span><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span>前进一步
history<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>后退一步
</code></pre> 
  <h4>screen：屏幕对象</h4> 
  <h4>navigator：浏览器信息对象</h4> 
  <table> 
   <thead> 
    <tr> 
     <th>属性</th> 
     <th>说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td><code>userAgent</code></td> 
     <td>获取浏览器版本信息</td> 
    </tr> 
   </tbody> 
  </table> 
  <h1>H5实战</h1> 
  <h2>移动端开发（？）</h2> 
  <h3>屏幕尺寸</h3> 
  <ul> 
   <li>屏幕对角线的长度</li> 
   <li>单位：英寸 1英寸约等于2.54厘米</li> 
   <li>常见的移动端设备信息https://uiiiuiii.com/screen/index.html</li> 
  </ul> 
  <p><a href="http://img.e-com-net.com/image/info8/a01e8a32ba42489b8de7b9981c8f2875.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a01e8a32ba42489b8de7b9981c8f2875.jpg" alt="前端基础学习笔记_第15张图片" width="650" height="446" style="border:1px solid black;"></a></p> 
  <ul> 
   <li> <p>像素</p> 
    <ul> 
     <li> <p>屏幕上的一个小方块，每个方块都有明确的位置和色彩值，每个小方块的位置和色彩值决定了屏幕呈现效果。</p> </li> 
     <li> <p>平时说的有多少像素就是指，有多少小方块。</p> </li> 
    </ul> </li> 
  </ul> <a href="http://img.e-com-net.com/image/info8/35273bddbc2d481690640f716bf340fd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/35273bddbc2d481690640f716bf340fd.jpg" alt="前端基础学习笔记_第16张图片" width="650" height="650" style="border:1px solid black;"></a> 
  <ul> 
   <li> <p>物理像素</p> 
    <ul> 
     <li>指屏幕真是的像素点个数，固定的。</li> 
     <li>例如iPhone 13 Pro Max 分辨率为 1284 x 2778 也就是说 在水平奉献上有1284个像素点</li> 
    </ul> </li> 
   <li> <p>像素密度</p> 
    <ul> 
     <li>在每英寸所能容纳的像素点个数，（像素点个数越多，画面越精细，反之越粗糙），这个英寸也是对角线</li> 
    </ul> </li> 
   <li> <p>逻辑像素（独立像素）</p> 
    <ul> 
     <li> <p>是一种物理测量单位，基于计算机控制的坐标系统和抽象像素（虚拟像素），由底层系统的程序使用，转换为物理像素应用。</p> </li> 
     <li> <p>保持密度独立性性很重要，因为如果没有此功能，UI设计的元素在低密度屏幕上看起来就会比较大。在高密度屏幕上看起来比较小。<code>保证在不同设备上让用户看到的元素大小一样的</code></p> </li> 
     <li> <p>设备独立像素本质上就是一个比例关系</p> </li> 
     <li> <p>css像素就属于独立像素（逻辑像素）</p> </li> 
    </ul> </li> 
  </ul> 
  <h3>视口viewport</h3> 
  <ul> 
   <li>视口就是浏览器显示页面内容的区域，在移动端有三种视口：布局视口、视觉视口、理想视口</li> 
   <li>布局视口 
    <ul> 
     <li>布局视口指网页的宽度，一般移动端浏览器默认设置了布局视口的宽度，根据不同设备，布局视口的默认宽度有可能是：768px，980px或1024px等，主要是围栏解决早期PC端在手机上显示问题。</li> 
    </ul> </li> 
  </ul> 
  <p><a href="http://img.e-com-net.com/image/info8/cee8ac527de84146b0db63ce57b11c43.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cee8ac527de84146b0db63ce57b11c43.jpg" alt="前端基础学习笔记_第17张图片" width="497" height="378" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>视觉视口 
    <ul> 
     <li>就是我们看到的网页区域。视觉视口的宽度等同于设备屏幕宽度</li> 
    </ul> </li> 
  </ul> 
  <p><a href="http://img.e-com-net.com/image/info8/19dc3055ba4141c69ef338a9ac2aa594.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/19dc3055ba4141c69ef338a9ac2aa594.jpg" alt="前端基础学习笔记_第18张图片" width="500" height="377" style="border:1px solid black;"></a></p> 
  <ul> 
   <li> <p>理想视口</p> 
    <ul> 
     <li>当布局视口与视觉视口一致时，我们就叫这个视口为理想视口</li> 
     <li>设置理想视口</li> 
    </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre> 
    <ul> 
     <li>name:配置名称</li> 
     <li>content：具体配置信息 
      <ul> 
       <li>width：定义布局视口的宽度，单位为像素，一般设置为<code>device-width</code>设备宽度，表示布局视口宽度等于视觉视口宽度。</li> 
       <li>initial-scale：定义初始化缩放比例，一般取值为<code>1.0</code></li> 
       <li>user-scalable：是否允许用户手动缩放网页 取值<code>yes/no</code></li> 
       <li>maximum-scale：最大缩放比例，设置为1表示不缩放</li> 
       <li>minimum-scale：最小缩放比例，设置为1表示不缩放</li> 
      </ul> </li> 
    </ul> </li> 
  </ul> 
  <h3>移动端的尺寸适配方案</h3> 
  <ul> 
   <li> <p>vh与vw</p> 
    <ul> 
     <li>vw是相对视口宽度单位，1vw = 1%视口宽度</li> 
     <li>vh是相对视口高度单位，1vh = 1%视口高度</li> 
    </ul> </li> 
   <li> <p>rem 与 em</p> 
    <ul> 
     <li> <p>em也是相对单位，相对的是当前元素的文本尺寸<code>font-size</code>，例如当前元素的font-size:16px，那么1em=16px;em 是相对于当前元素的font-size值进行转换的 不能自适应;em 更多的使用场景是，相对于当前元素大小进行放大缩小</p> </li> 
     <li> <p>rem相对于根元素文本尺寸<code>font-size</code> ，例如根元素的font-size:100px, 那么 1rem = 100px;</p> </li> 
    </ul> </li> 
  </ul> 
  <h3>JS适配代码</h3> 
  <pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">adapter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">let</span> dol <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement   <span class="token comment">//窗口元素</span>
        <span class="token keyword">let</span> _width <span class="token operator">=</span> dol<span class="token punctuation">.</span>clientWidth  <span class="token comment">//屏幕宽度</span>
        dol<span class="token punctuation">.</span>style<span class="token punctuation">.</span>fontSize <span class="token operator">=</span> _width <span class="token operator">/</span> <span class="token punctuation">(</span><span class="token number">375</span> <span class="token operator">/</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px'</span> <span class="token comment">//375 就是设计图尺寸  100为初始字体尺寸</span>
    	                         <span class="token comment">//_width * 100 / 750 + 'px'	</span>
    <span class="token punctuation">}</span>
    
    window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">adapter</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    window<span class="token punctuation">.</span><span class="token function-variable function">onresize</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">adapter</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
</code></pre> 
  <h3>移动端的编程技巧</h3> 
  <ul> 
   <li>布局多使用弹性盒子</li> 
   <li>全屏尺寸使用百分比或者 vw vh</li> 
   <li>字体尺寸也使用 rem 控制</li> 
   <li>元素尺寸 也是用rem</li> 
  </ul> 
  <h2>移动端页面搭建（？）</h2> 
  <h3>阿里icon</h3> 
  <ul> 
   <li>挑选图标</li> 
  </ul> <a href="http://img.e-com-net.com/image/info8/c6fb1844103a44e0aa556080c2949f28.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c6fb1844103a44e0aa556080c2949f28.jpg" width="650" height="327" alt="前端基础学习笔记_第19张图片" style="border:1px solid black;"></a> 
  <ul> 
   <li>加入项目</li> 
  </ul> <a href="http://img.e-com-net.com/image/info8/964565b15bf44e0c8158e9c9329a4ab9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/964565b15bf44e0c8158e9c9329a4ab9.jpg" width="331" height="991" alt="前端基础学习笔记_第20张图片" style="border:1px solid black;"></a> 
  <ul> 
   <li>生成在线样式或者下载本地文件</li> 
  </ul> <a href="http://img.e-com-net.com/image/info8/abdaab43d5924841ba6c5247df0ad7af.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/abdaab43d5924841ba6c5247df0ad7af.jpg" width="650" height="336" alt="前端基础学习笔记_第21张图片" style="border:1px solid black;"></a> 
  <h4>引入需要字体图标的页面</h4> 
  <ul> 
   <li>在线图标引入方式</li> 
  </ul> <a href="http://img.e-com-net.com/image/info8/fb8b8f850a694afabba3a51aa6ce9e93.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fb8b8f850a694afabba3a51aa6ce9e93.jpg" width="650" height="375" alt="前端基础学习笔记_第22张图片" style="border:1px solid black;"></a> 
  <ul> 
   <li>下载的本地图标引入方式</li> 
  </ul> <a href="http://img.e-com-net.com/image/info8/92423e97499745a99106ac61385b72cf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/92423e97499745a99106ac61385b72cf.jpg" width="650" height="349" alt="前端基础学习笔记_第23张图片" style="border:1px solid black;"></a> 
  <p>注意：本地引入使用iconfont方式引入图标需要保留<code>iconfont.woff</code>和<code>iconfont.woff2</code>文件</p> 
  <h4>字体图标相关设置</h4> 
  <ul> 
   <li>修改项目设置，增加彩色图标</li> 
  </ul> 
  <p><a href="http://img.e-com-net.com/image/info8/11e182c07e224de6bf30a48b39739e2f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/11e182c07e224de6bf30a48b39739e2f.jpg" width="650" height="611" alt="前端基础学习笔记_第24张图片" style="border:1px solid black;"></a><a href="http://img.e-com-net.com/image/info8/c43c7face81e47c3bc59bf6ff8fa6f1d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c43c7face81e47c3bc59bf6ff8fa6f1d.jpg" alt="前端基础学习笔记_第25张图片" width="650" height="433" style="border:1px solid black;"></a></p> 
  <p>注意：如果设置了彩色图标，我们就不能控制字体图标颜色。就只能通过设置每个图标的颜色来改变。</p> 
  <ul> 
   <li>设置图标</li> 
  </ul> <a href="http://img.e-com-net.com/image/info8/b34ffff2723942ed99062ce815676fe6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b34ffff2723942ed99062ce815676fe6.jpg" width="650" height="433" alt="前端基础学习笔记_第26张图片" style="border:1px solid black;"></a> 
  <p>我们可以修改图标引入名称，也可以修改图标颜色。</p> 
  <h3>移动端事件</h3> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">事件名称</th> 
     <th align="center">触发条件</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center">touchstart</td> 
     <td align="center">当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发</td> 
     <td align="center">类似鼠标事件 mousedown</td> 
    </tr> 
    <tr> 
     <td align="center">touchmove</td> 
     <td align="center">当手指在屏幕上滑动时连续地触发。</td> 
     <td align="center">类似鼠标事件 mousemove</td> 
    </tr> 
    <tr> 
     <td align="center">touchend</td> 
     <td align="center">当手指从屏幕上移开时触发</td> 
     <td align="center">类似鼠标事件 mouseup</td> 
    </tr> 
   </tbody> 
  </table> 
  <h2>jquery（？）</h2> 
  <p>https://jquery.com/</p> 
  <h3>jquery 概念</h3> 
  <ul> 
   <li>概念：jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 之类的事情变得更加简单，它具有易于使用的 API，可在多种浏览器中工作。</li> 
   <li>作用：优化dom部分代码，提高开发效率</li> 
   <li>特点 
    <ul> 
     <li>使用jquery完成dom操作，跟原生的dom操作是不兼容的。</li> 
    </ul> </li> 
  </ul> 
  <h4>jquery引入</h4> 
  <pre><code class="prism language-js"><span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"./jQuery v3.6.1.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre> 
  <p>在需要的页面引入对应的JS文件</p> 
  <h4>jquery基础</h4> 
  <h5>如何选择标签</h5> 
  <pre><code class="prism language-js"><span class="token keyword">let</span> 变量名 <span class="token operator">=</span> <span class="token function">jQuery</span><span class="token punctuation">(</span><span class="token string">'css选择器'</span><span class="token punctuation">)</span>
<span class="token comment">//$ 是 jQuery的简写</span>
<span class="token keyword">let</span> 变量名 <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'css选择器'</span><span class="token punctuation">)</span>
</code></pre> 
  <h5>修改标签</h5> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方法名</th> 
     <th align="center">参数</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center">html（）</td> 
     <td align="center">修改字符串</td> 
     <td align="center">不传入参数及获取内容</td> 
    </tr> 
    <tr> 
     <td align="center">text（）</td> 
     <td align="center">修改字符串</td> 
     <td align="center">不传入参数及获取内容</td> 
    </tr> 
    <tr> 
     <td align="center">val()</td> 
     <td align="center">修改字符串</td> 
     <td align="center">不传入参数及获取内容</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="prism language-js"><span class="token operator"><</span>body<span class="token operator">></span>
    <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"div"</span><span class="token operator">></span>
        <span class="token operator"><</span>p<span class="token operator">></span><span class="token number">123</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> value<span class="token operator">=</span><span class="token string">"李四"</span><span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
<span class="token operator"><</span>script<span class="token operator">></span>
    <span class="token keyword">let</span> div <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#div'</span><span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    
    <span class="token comment">// div.html(`<p>测试</p>`)  //innerHTML</span>
    div<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><p>测试</p></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
    <span class="token keyword">let</span> inp <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>inp<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     
    inp<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token string">'张三'</span><span class="token punctuation">)</span> <span class="token comment">//修改input内容</span>
</code></pre> 
  <h5>修改属性</h5> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方法名</th> 
     <th align="center">参数</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center">attr()</td> 
     <td align="center">属性名，属性值</td> 
     <td align="center">传入一个参数获取属性值，传入两个修改属性值</td> 
    </tr> 
    <tr> 
     <td align="center">removeAttr()</td> 
     <td align="center">属性名</td> 
     <td align="center">删除某个属性</td> 
    </tr> 
    <tr> 
     <td align="center">addClass()</td> 
     <td align="center">class名</td> 
     <td align="center">添加class</td> 
    </tr> 
    <tr> 
     <td align="center">removeClass()</td> 
     <td align="center">class名</td> 
     <td align="center">删除某个class</td> 
    </tr> 
    <tr> 
     <td align="center">toggleClass()</td> 
     <td align="center">class名</td> 
     <td align="center">切换某个class</td> 
    </tr> 
    <tr> 
     <td align="center">hasClass()</td> 
     <td align="center">class名</td> 
     <td align="center">返回值为布尔值，查询元素是否包含这个class</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="prism language-js"><span class="token operator"><</span>body<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> java<span class="token operator">-</span>id 自定义属性 用户自己设置的属性 <span class="token operator">--</span><span class="token operator">></span>
    <span class="token operator"><</span>botton<span class="token operator">></span>显示<span class="token operator"><</span><span class="token operator">/</span>botton<span class="token operator">></span>
    <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"box1"</span> java<span class="token operator">-</span>id<span class="token operator">=</span><span class="token string">"0001"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
   
<span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
<span class="token operator"><</span>script<span class="token operator">></span>
    <span class="token keyword">let</span> div <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'java-id'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// div.attr('class','box2')</span>
    div<span class="token punctuation">.</span><span class="token function">removeAttr</span><span class="token punctuation">(</span><span class="token string">'java-id'</span><span class="token punctuation">)</span>
    div<span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'box2'</span><span class="token punctuation">)</span>
    div<span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'box1'</span><span class="token punctuation">)</span>
   
    
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'botton'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        div<span class="token punctuation">.</span><span class="token function">toggleClass</span><span class="token punctuation">(</span><span class="token string">'show'</span><span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token function">hasClass</span><span class="token punctuation">(</span><span class="token string">'show'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre> 
  <h5>标签操作</h5> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方法名</th> 
     <th align="center">参数</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center">append()</td> 
     <td align="center">字符串或元素</td> 
     <td align="center">作为最后一个子标签加入父标签中</td> 
    </tr> 
    <tr> 
     <td align="center">before()</td> 
     <td align="center">字符串或元素</td> 
     <td align="center">追加到指定标签前面</td> 
    </tr> 
    <tr> 
     <td align="center">after（）</td> 
     <td align="center">字符串或元素</td> 
     <td align="center">追加到指定标签后面</td> 
    </tr> 
    <tr> 
     <td align="center">remove()</td> 
     <td align="center">没有参数</td> 
     <td align="center">谁调用删除谁</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="prism language-js"><span class="token operator"><</span>body<span class="token operator">></span>
    <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"box"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token operator"><</span>span<span class="token operator">></span>测试<span class="token number">2</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
    <span class="token operator"><</span>script<span class="token operator">></span>
        <span class="token keyword">let</span> box <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#box'</span><span class="token punctuation">)</span>
        box<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><p>测试</p></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
        <span class="token comment">// box.append($('span'))</span>
        box<span class="token punctuation">.</span><span class="token function">before</span><span class="token punctuation">(</span><span class="token string">'<a>before</a>'</span><span class="token punctuation">)</span>
        box<span class="token punctuation">.</span><span class="token function">after</span><span class="token punctuation">(</span><span class="token string">'<a>after</a>'</span><span class="token punctuation">)</span>
    <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre> 
  <h5>css操作</h5> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方法名</th> 
     <th align="center">参数</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center">css()</td> 
     <td align="center">属性名，值或者｛属性名：值｝</td> 
     <td align="center">一个参数为获取，两个参数为设置，多个样式修改用json</td> 
    </tr> 
    <tr> 
     <td align="center">width()</td> 
     <td align="center">值</td> 
     <td align="center">设置宽度</td> 
    </tr> 
    <tr> 
     <td align="center">height()</td> 
     <td align="center">值</td> 
     <td align="center">设置高度</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="prism language-js"><span class="token operator"><</span>body<span class="token operator">></span>
    <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"div2"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
<span class="token operator"><</span>script<span class="token operator">></span>
    <span class="token comment">// $('#div2').css('background','pink url("https://woniufile.oss-cn-hangzhou.aliyuncs.com/banner/class_time_home.png") center')</span>
    <span class="token comment">// $('#div2').css('backgroundSize','cover')</span>
    <span class="token comment">// json 数据格式 ｛键 ： 值，键 ： 值｝</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#div2'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token string-property property">'background'</span><span class="token operator">:</span><span class="token string">'pink url("https://woniufile.oss-cn-hangzhou.aliyuncs.com/banner/class_time_home.png") center'</span><span class="token punctuation">,</span>
        <span class="token string-property property">'backgroundSize'</span><span class="token operator">:</span><span class="token string">'cover'</span><span class="token punctuation">,</span>
        <span class="token string-property property">'width'</span><span class="token operator">:</span><span class="token string">'500'</span><span class="token punctuation">,</span>
        <span class="token string-property property">'height'</span><span class="token operator">:</span><span class="token string">'300'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">//  对象  ｛属性名：属性值，属性名：属性值｝</span>
    <span class="token comment">// {</span>
    <span class="token comment">//     name:'张三'</span>
    <span class="token comment">// }</span>
    <span class="token comment">// 获取样式</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#div2'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'width'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre> 
  <h5>jquery遍历</h5> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方法名</th> 
     <th align="center">参数</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center">each()</td> 
     <td align="center">回调函数（index,item）</td> 
     <td align="center">循环之后 item 为js对象</td> 
    </tr> 
    <tr> 
     <td align="center">eq()</td> 
     <td align="center">下标</td> 
     <td align="center">获取对应下标的元素</td> 
    </tr> 
    <tr> 
     <td align="center">first()</td> 
     <td align="center">无</td> 
     <td align="center">第一个元素</td> 
    </tr> 
    <tr> 
     <td align="center">last()</td> 
     <td align="center">无</td> 
     <td align="center">最后一个元素</td> 
    </tr> 
    <tr> 
     <td align="center">index()</td> 
     <td align="center">无</td> 
     <td align="center">获取元素对应的下标</td> 
    </tr> 
   </tbody> 
  </table> 
  <ul> 
   <li> <p>注意：jquery获取的元素可以直接设置全部样式，和添加全部事件，这个现象我们叫做隐式遍历。</p> <pre><code class="prism language-js"><span class="token comment">// jquery 隐式遍历</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'background'</span><span class="token punctuation">,</span><span class="token string">'pink'</span><span class="token punctuation">)</span>
</code></pre> </li> 
  </ul> 
  <pre><code class="prism language-js"> <span class="token comment">// jquer遍历</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">index<span class="token punctuation">,</span>item</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// console.log(item);</span>
        <span class="token comment">// 遍历后为JS对象</span>
        <span class="token comment">// item.style.background = 'pink'</span>
        <span class="token comment">// 转为JQ对象</span>
        <span class="token comment">// $(item).css('background','pink')</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">//获取对应下标的元素进行操作</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">eq</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'background'</span><span class="token punctuation">,</span><span class="token string">'pink'</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">first</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'background'</span><span class="token punctuation">,</span><span class="token string">'green'</span><span class="token punctuation">)</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">last</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'background'</span><span class="token punctuation">,</span><span class="token string">'blue'</span><span class="token punctuation">)</span>

</code></pre> 
  <h5>jquer与js之间的转换</h5> 
  <pre><code class="prism language-js"><span class="token comment">//js对象转JQ对象</span>
<span class="token function">$</span><span class="token punctuation">(</span>js对象<span class="token punctuation">)</span> 
<span class="token comment">//JQ对象转JS对象</span>
<span class="token constant">JQ</span>对象 <span class="token punctuation">.</span> <span class="token function">get</span><span class="token punctuation">(</span>下标<span class="token punctuation">)</span>
<span class="token constant">JQ</span>对象<span class="token punctuation">[</span> 下标 <span class="token punctuation">]</span>
</code></pre> 
  <pre><code class="prism language-js"><span class="token keyword">let</span> _div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span>
    <span class="token function">$</span><span class="token punctuation">(</span>_div<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">let</span> _div <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span>
    _div<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
  <h5>jquery获取嵌套或者同级标签</h5> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方法名</th> 
     <th align="center">参数</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center">parent（）</td> 
     <td align="center">无</td> 
     <td align="center">获取当前元素的父级</td> 
    </tr> 
    <tr> 
     <td align="center">parents（）</td> 
     <td align="center">选择器</td> 
     <td align="center">获取元素符合条件的祖先级</td> 
    </tr> 
    <tr> 
     <td align="center">children()</td> 
     <td align="center">无</td> 
     <td align="center">获取元素子级</td> 
    </tr> 
    <tr> 
     <td align="center">find()</td> 
     <td align="center">选择器</td> 
     <td align="center">找满足条件的子标签</td> 
    </tr> 
    <tr> 
     <td align="center">prev()</td> 
     <td align="center">无</td> 
     <td align="center">找上一个标签</td> 
    </tr> 
    <tr> 
     <td align="center">next()</td> 
     <td align="center">无</td> 
     <td align="center">找下一个标签</td> 
    </tr> 
    <tr> 
     <td align="center">sibilings()</td> 
     <td align="center">选择器</td> 
     <td align="center">找满足条件的兄弟标签</td> 
    </tr> 
   </tbody> 
  </table> 
  <p>找父级</p> 
  <pre><code class="prism language-js"><span class="token operator"><</span>body<span class="token operator">></span>
    <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"grand"</span><span class="token operator">></span>
        <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"grand"</span><span class="token operator">></span>
            <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"parent"</span><span class="token operator">></span>
                <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"child"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
        <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
    
<span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
<span class="token operator"><</span>script<span class="token operator">></span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.child'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'background'</span><span class="token punctuation">,</span><span class="token string">'pink'</span><span class="token punctuation">)</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.child'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'background'</span><span class="token punctuation">,</span><span class="token string">'green'</span><span class="token punctuation">)</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.child'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parents</span><span class="token punctuation">(</span><span class="token string">'.grand'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'background'</span><span class="token punctuation">,</span><span class="token string">'blue'</span><span class="token punctuation">)</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre> 
  <p>找子级</p> 
  <pre><code class="prism language-js"><span class="token operator"><</span>body<span class="token operator">></span>
 
        <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"grand"</span><span class="token operator">></span>
            <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"parent"</span><span class="token operator">></span>
                <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"child"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"parent"</span><span class="token operator">></span>
                <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"child"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"parent"</span><span class="token operator">></span>
                <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"child"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
        <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
   
    
<span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
<span class="token operator"><</span>script<span class="token operator">></span>
    <span class="token comment">// 找子级</span>
    <span class="token comment">// $('.grand').children().css('background','pink')</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.grand'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'.child'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'background'</span><span class="token punctuation">,</span><span class="token string">'pink'</span><span class="token punctuation">)</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre> 
  <p>找兄弟</p> 
  <pre><code class="prism language-js"><span class="token operator"><</span>body<span class="token operator">></span>
 
        <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"grand"</span><span class="token operator">></span>
            <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"parent box"</span><span class="token operator">></span>
                <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"child"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"parent box"</span><span class="token operator">></span>
                <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"child"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"div"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"parent"</span><span class="token operator">></span>
                <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"child"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"parent"</span><span class="token operator">></span>
                <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"child"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"parent"</span><span class="token operator">></span>
                <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"child"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"parent box"</span><span class="token operator">></span>
                <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"child"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
        <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
   
    
<span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
<span class="token operator"><</span>script<span class="token operator">></span>
    <span class="token comment">// $('#div').prev().css('background','pink')</span>
    <span class="token comment">// $('#div').next().css('background','pink')</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">siblings</span><span class="token punctuation">(</span><span class="token string">'.box'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'background'</span><span class="token punctuation">,</span><span class="token string">'pink'</span><span class="token punctuation">)</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre> 
  <h5>jquery 事件</h5> 
  <ul> 
   <li>on</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token comment">//事件绑定</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">//事件委托形式</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token string">'p'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
   
</code></pre> 
  <h5>jquery动画</h5> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方法名</th> 
     <th align="center">参数</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center">fadeIn()</td> 
     <td align="center">时间毫秒</td> 
     <td align="center">淡入</td> 
    </tr> 
    <tr> 
     <td align="center">fadeOut()</td> 
     <td align="center">时间毫秒</td> 
     <td align="center">淡出</td> 
    </tr> 
    <tr> 
     <td align="center">slideDown()</td> 
     <td align="center">时间毫秒</td> 
     <td align="center">下滑</td> 
    </tr> 
    <tr> 
     <td align="center">slideUp()</td> 
     <td align="center">时间毫秒</td> 
     <td align="center">上划</td> 
    </tr> 
    <tr> 
     <td align="center">animate()</td> 
     <td align="center">{},事件毫秒</td> 
     <td align="center">自定义动画</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="prism language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#hidden'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fadeOut</span><span class="token punctuation">(</span><span class="token number">500</span><span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#show'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fadeIn</span><span class="token punctuation">(</span><span class="token number">500</span><span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
  <pre><code class="prism language-js"><span class="token operator"><</span>body<span class="token operator">></span>
    <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"nav"</span><span class="token operator">></span>
        <span class="token operator"><</span>p<span class="token operator">></span>用户管理<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
        <span class="token operator"><</span>ul<span class="token operator">></span>
            <span class="token operator"><</span>li<span class="token operator">></span><span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
            <span class="token operator"><</span>li<span class="token operator">></span><span class="token number">2</span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
            <span class="token operator"><</span>li<span class="token operator">></span><span class="token number">3</span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
        <span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"nav"</span><span class="token operator">></span>
        <span class="token operator"><</span>p<span class="token operator">></span>商品管理<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
        <span class="token operator"><</span>ul<span class="token operator">></span>
            <span class="token operator"><</span>li<span class="token operator">></span><span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
            <span class="token operator"><</span>li<span class="token operator">></span><span class="token number">2</span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
            <span class="token operator"><</span>li<span class="token operator">></span><span class="token number">3</span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
        <span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
<span class="token operator"><</span>script<span class="token operator">></span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.nav'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">let</span> _ul <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'ul'</span><span class="token punctuation">)</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>_ul<span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'display'</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">'none'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            _ul<span class="token punctuation">.</span><span class="token function">slideDown</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
            _ul<span class="token punctuation">.</span><span class="token function">slideUp</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre> 
  <pre><code class="prism language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            <span class="token string-property property">'width'</span><span class="token operator">:</span><span class="token string">'300px'</span><span class="token punctuation">,</span>
            <span class="token string-property property">'height'</span><span class="token operator">:</span><span class="token string">'300px'</span><span class="token punctuation">,</span>
            <span class="token string-property property">'margin-top'</span><span class="token operator">:</span><span class="token string">'50px'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">2000</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
  <h2>canvas（？）</h2> 
  <h3>概念</h3> 
  <p>js本身很难绘制几何图形，在html5里新增了一个标签<code>canvas</code>，这个标签在页面上为我们提供了一块类似画布的东西，我们可以通过canvas对象绘制2d图 3d图。</p> 
  <h3>基本使用</h3> 
  <h4>创建画布</h4> 
  <ul> 
   <li>canvas本身是没有颜色的透明图片。</li> 
   <li>我们控制canvas大小通过标签中的属性进行控制，表示画布大小，如果通过css控制，表示放大缩小图像，图像可能会失真。</li> 
   <li>背景颜色可以通过css控制。</li> 
  </ul> 
  <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
            <span class="token selector"><!-- 消除默认样式 -->
            *</span> <span class="token punctuation">{</span>
                <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
                <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
                <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
                <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
                <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>

            <span class="token selector">body</span> <span class="token punctuation">{</span>
                <span class="token property">background</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>

            <span class="token selector">#myCan</span> <span class="token punctuation">{</span>
                <span class="token comment">/* 对canvas图像进行放大缩小 不建议使用 */</span>
                <span class="token comment">/* width: 800px;
                height: 800px; */</span>
                <span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
                <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
                <span class="token property">margin</span><span class="token punctuation">:</span> 50px auto<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
        <span class="token comment"><!-- 画布大小通过属性控制 --></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>canvas</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myCan<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>800<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>canvas</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre> 
  <h4>创建画笔</h4> 
  <pre><code class="prism language-html">    
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
    <span class="token comment">// 获取画布</span>
    <span class="token keyword">let</span> myCan <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#myCan'</span><span class="token punctuation">)</span>
    <span class="token comment">// 获取画笔</span>
    <span class="token keyword">let</span> pen <span class="token operator">=</span> myCan<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
    
</code></pre> 
  <h4>绘制直线</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方法名</th> 
     <th align="center">参数</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center">moveTo()</td> 
     <td align="center">横坐标，纵坐标</td> 
     <td align="center">将画笔移动到某个位置</td> 
    </tr> 
    <tr> 
     <td align="center">lineTo()</td> 
     <td align="center">横坐标，纵坐标</td> 
     <td align="center">将画笔链接到某个点</td> 
    </tr> 
   </tbody> 
  </table> 
  <p><em>注意：此时链接出来的只是路径，页面看不到效果，我们需要填充或者描边才能看到。</em></p> 
  <pre><code class="prism language-js"><span class="token comment">// 把画笔移动到某个位置</span>
pen<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span>
<span class="token comment">//链接到某个坐标点</span>
pen<span class="token punctuation">.</span><span class="token function">lineTo</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span><span class="token number">200</span><span class="token punctuation">)</span>
<span class="token comment">// 此时我们绘制的线条只是路径</span>
</code></pre> 
  <h4>填充与描边</h4> 
  <table> 
   <thead> 
    <tr> 
     <th align="center">方法名</th> 
     <th align="center">参数</th> 
     <th align="center">说明</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td align="center">stroke()</td> 
     <td align="center">无</td> 
     <td align="center">描边路径</td> 
    </tr> 
    <tr> 
     <td align="center">fill()</td> 
     <td align="center">无</td> 
     <td align="center">如果只是一条直线路径填充是没有效果的</td> 
    </tr> 
   </tbody> 
  </table> 
  <pre><code class="prism language-js"><span class="token comment">// 把画笔移动到某个位置</span>
pen<span class="token punctuation">.</span><span class="token function">moveTo</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span>
<span class="token comment">//链接到某个坐标点</span>
pen<span class="token punctuation">.</span><span class="token function">lineTo</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span><span class="token number">200</span><span class="token punctuation">)</span>
<span class="token comment">// 此时我们绘制的线条只是路径</span>
<span class="token comment">// pen.stroke()</span>
<span class="token comment">// 如果只是一条直线路径填充是没有效果的</span>
pen<span class="token punctuation">.</span><span class="token function">lineTo</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span><span class="token number">200</span><span class="token punctuation">)</span>
pen<span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> 
  <h4>图形样式</h4> 
  <h2>原生对象（？）</h2> 
  <h3>Math</h3> 
  <h2>百度地图（？）</h2> 
  <h2>首页应用（？）</h2> 
  <h2>H5应用（？）</h2> 
  <h2>页面功能（？）</h2> 
  <h2>JS高级（？）</h2> 
  <h2>ES6特性（？）</h2> 
  <h2>面向对象（？）</h2> 
  <h1>Webpack实战</h1> 
  <h2>Git版本管理</h2> 
  <h3>基本使用</h3> 
  <ul> 
   <li>优点 
    <ul> 
     <li>方便用户开发，自动筛选修改部分代码</li> 
     <li>版本管理，历史记录</li> 
    </ul> </li> 
   <li>基本工作流程<br> 本地工作区–》本地暂存区–》本地仓库–》远程仓库</li> 
  </ul> 
  <h3>初始化配置</h3> 
  <h2>webpack</h2> 
  <h3>配置webpack</h3> 
  <h4>准备工作</h4> 
  <ul> 
   <li>1.Node.js<br> 在终端中任意路径输入node -v 可以获取到版本号表示安装成功</li> 
  </ul> 
  <pre><code>node -v
</code></pre> 
  <ul> 
   <li>2.npm<br> 电脑中按照Node之后，同时会自动安装一个npm工具。在终端中任意路径输入<code>npm -v</code>可以获取到版本号表示安装成功。</li> 
  </ul> 
  <pre><code>npm -v
</code></pre> 
  <p>npm的全称是node package manager，是一个nodejs包管理和分发工具，已经成为了非官方的发布node模块（包）的标准。</p> 
  <h4>项目初始化</h4> 
  <p>创建一个文件夹，或者gitee创建一个项目管理。<br> 在项目根目录中打开终端执行以下代码。</p> 
  <pre><code>npm init -y
</code></pre> 
  <p>该命令执行完成后，会在项目根目录生成一个<code>package.json</code>文件。该文件中记录相关项目的相关信息，例如项目名称、项目版本等。</p> 
  <ul> 
   <li> <p>1.下载webpack<br> 在项目根目录中打开终端下载webpack的依赖包</p> <pre><code>npm i webpack webpack-cli -D
</code></pre> 
    <ul> 
     <li>i:install</li> 
     <li>-D 开发环境依赖</li> 
     <li>-g 全局模式</li> 
     <li>-S 生产环境</li> 
    </ul> </li> 
  </ul> 
  <p>下载成功后，在package.json中可以查看对应的版本记录。<code>"devDependencies":{}</code></p> 
  <h4>生产环境和开发环境配置</h4> 
  <ul> 
   <li>development：指的就是我们项目开放过程中需要做的一些配置，主要方便开发人员调试。</li> 
   <li>production：指的就是项目经过测试后，没有明显的异常，准备发布上线相关的配置，主要优化用户体验。</li> 
  </ul> 
  <h5>一、配置文件</h5> 
  <p>新建文件</p> 
  <pre><code>webpack.base.config.js // 公共配置文件
webpack.prod.config.js //生产环境配置文件
webpack.dev.configs.js //开发环境配置文件
</code></pre> 
  <h5>二、合并公共配置</h5> 
  <ul> 
   <li>1.下载配置</li> 
   <li></li> 
  </ul> 
  <p>下载成功后，在package.json中可以查看对应的"webpack-merge"版本记录。<code>"devDependencies":{}</code></p> 
  <pre><code>npm i webpack-merge -D
</code></pre> 
  <ul> 
   <li>2.添加配置<br> 在webpack.base.config.js中添加以下代码</li> 
  </ul> 
  <pre><code>module.exports = {

}
</code></pre> 
  <ul> 
   <li>3.合并公共配置<br> 在webpack.prod.config.js 和webpack.dev.configs.js中添加代码</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token comment">// require node.js 后台引入方式</span>
<span class="token comment">// 引入合并插件</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span>merge<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack-merge'</span><span class="token punctuation">)</span>
<span class="token comment">// 公共配置</span>
<span class="token keyword">const</span> base <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./webpack.base.config'</span><span class="token punctuation">)</span>

<span class="token comment">// 合并公共配置</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>base<span class="token punctuation">,</span><span class="token punctuation">{</span>

<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
  <h5>三、配置项目启动</h5> 
  <ul> 
   <li>在webpack.dev.config.js中添加代码</li> 
  </ul> 
  <pre><code class="prism language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>base<span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token literal-property property">mode</span><span class="token operator">:</span><span class="token string">"development"</span> <span class="token comment">//表明开发环境</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
  <ul> 
   <li>在webpack.prod.configs中添加代码</li> 
  </ul> 
  <pre><code class="prism language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>base<span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token literal-property property">mode</span><span class="token operator">:</span><span class="token string">"production"</span> <span class="token comment">//表明生产环境</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
  <h5>四、配置项目启动</h5> 
  <p>需要用过webpack去启动webpack。启动过程中webpack会自动根据配置对代码进行编译处理，最后编译的代码在浏览器中打开。</p> 
  <ul> 
   <li>1.配置生产环境启动:npm run build<br> 因为webpack的启动命令很长，所以考虑到方便使用我们会通常在package.json文件中，将启动命令进行配置。</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token string-property property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string-property property">"test"</span><span class="token operator">:</span> <span class="token string">"echo \"Error: no test specified\" && exit 1"</span><span class="token punctuation">,</span>
    <span class="token string-property property">"build"</span><span class="token operator">:</span><span class="token string">"webpack --config webpack.prod.config.js --mode production"</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> 
  <ul> 
   <li>2.配置开发环境启动:npm run dev<br> 在开发环境中，我们需要随时可以编译并查看。所以需要下载开发服务器插件。 
    <ol> 
     <li> <p>下载插件</p> <pre><code>npm i webpack-dev-server -D
</code></pre> </li> 
     <li> <p>配置服务器</p> <pre><code>module.exports = merge(base,{
    mode:"development", //表明开发环境
    devServer:{
        port:"8080", //端口号
        // open:"index.html" //启动后默认打开页面
    }
})
</code></pre> </li> 
     <li> <p>配置启动命令<br> 在package.json文件中添加代码</p> <pre><code>"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.config.js --mode production",
    "dev":"webpack-dev-server --hot --config webpack.dev.config.js --mode development"
},

</code></pre> </li> 
    </ol> </li> 
  </ul> 
  <h4>基础配置</h4> 
  <p>所有基础配置都是dev和prod都需要用到的，所以都在公共配置文件中进行配置。</p> 
  <ul> 
   <li> <p>entry入口配置<br> 因为每一个html文件都需要一个入口的js文件，所以我们需要在webpack中将这些入口js文件的名字和路径全都进行配置</p> </li> 
   <li> <p>output出口配置<br> webpack在对我们的项目代码进行编译后，会得到一个新的代码，</p> </li> 
   <li> <p>配置html<br> webpack默认只能处理js文件，所以如果需要处理html，需要下载插件</p> 
    <ul> 
     <li> <p>1.下载插件</p> <pre><code>npm i html-webpack-plugin -D
</code></pre> </li> 
     <li> <p>2.添加配置</p> </li> 
     <li> <p>3.npm run build的时候就有压缩的html文件了。</p> </li> 
    </ul> </li> 
   <li> <p>优化HTML和JS的配置</p> </li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token comment">//node.js自带的路径插件</span>
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span>
<span class="token comment">// 引入HTML解析插件</span>
<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'html-webpack-plugin'</span><span class="token punctuation">)</span>

<span class="token comment">// 设置一个数组拿来存放我们有的页面</span>
<span class="token keyword">const</span> pages <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'index'</span><span class="token punctuation">,</span><span class="token string">'login'</span><span class="token punctuation">]</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">// 入口配置</span>
    <span class="token literal-property property">entry</span><span class="token operator">:</span><span class="token punctuation">{</span>
        <span class="token comment">// index:"./src/js/index.js",</span>
        <span class="token comment">// login:"./src/js/login.js",</span>

        <span class="token comment">// ...setEn(pages) //方法一：自定义函数处理</span>

        <span class="token operator">...</span>pages<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span>item</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token operator">...</span>value<span class="token punctuation">,</span>
                <span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token operator">:</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">./src/js/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.js</span><span class="token template-punctuation string">`</span></span>
             <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>

    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 出口配置</span>
    <span class="token literal-property property">output</span><span class="token operator">:</span><span class="token punctuation">{</span>
        <span class="token literal-property property">path</span><span class="token operator">:</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span><span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token literal-property property">filename</span><span class="token operator">:</span><span class="token string">"js/[name].js"</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 配置插件</span>
    <span class="token literal-property property">plugins</span><span class="token operator">:</span><span class="token punctuation">[</span>
        <span class="token comment">// new HtmlWebpackPlugin({</span>
        <span class="token comment">//     template:"./src/index.html", // 设置需要编译文件的路径</span>
        <span class="token comment">//     filename:"index.html", // 告诉weboack编译后的文件名字</span>
        <span class="token comment">//     chunks:["index"] // 配置当前HTML中需要引入的JS文件名 一般用一个入口文件即可(import)</span>
        <span class="token comment">// }),</span>
        <span class="token comment">// new HtmlWebpackPlugin({</span>
        <span class="token comment">//     template:"./src/login.html", // 设置需要编译文件的路径</span>
        <span class="token comment">//     filename:"login.html", // 告诉weboack编译后的文件名字</span>
        <span class="token comment">//     chunks:["login"] // 配置当前HTML中需要引入的JS文件名 一般用一个入口文件即可(import)</span>
        <span class="token comment">// }),</span>
        <span class="token operator">...</span>pages<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token operator">=></span><span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">./src/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.html</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
                <span class="token literal-property property">filename</span><span class="token operator">:</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.html</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
                <span class="token literal-property property">chunks</span><span class="token operator">:</span><span class="token punctuation">[</span>item<span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token comment">// 方法一 ：自定义函数</span>
<span class="token comment">// function setEn(arr){</span>
<span class="token comment">//     let obj = {}</span>
<span class="token comment">//     for(let item of arr){</span>
<span class="token comment">//         obj[item] = `./src/js/${item}.js`</span>
<span class="token comment">//     }</span>
<span class="token comment">//     return obj</span>
<span class="token comment">// }</span>
</code></pre> 
  <h4>配置babel</h4> 
  <p>将js文件中使用的ES6及以上语法编译为ES5版本，使低版本浏览器可以使用。</p> 
  <ul> 
   <li>1.下载插件<pre><code>npm i babel-loader @babel/core @babel/preset-env -D
</code></pre> </li> 
   <li>2.配置插件</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token literal-property property">module</span><span class="token operator">:</span><span class="token punctuation">{</span>
        <span class="token literal-property property">rules</span><span class="token operator">:</span><span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                <span class="token literal-property property">test</span><span class="token operator">:</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$i</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
                <span class="token literal-property property">use</span><span class="token operator">:</span><span class="token punctuation">{</span>
                    <span class="token literal-property property">loader</span><span class="token operator">:</span><span class="token string">"babel-loader"</span><span class="token punctuation">,</span>
                    <span class="token literal-property property">options</span><span class="token operator">:</span><span class="token punctuation">{</span>
                        <span class="token literal-property property">presets</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'@babel/preset-env'</span><span class="token punctuation">]</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
</code></pre> 
  <h4>配置scss</h4> 
  <ul> 
   <li> <p>1.js中引入scss<br> 如果我们需要使用webpack处理scss文件，那么我们所有的scss文件都应该在页面对应的js文件中引入。</p> <pre><code>import "../scss/index.scss"
</code></pre> </li> 
   <li> <p>2.下载插件</p> <pre><code>npm i node-sass sass-loader css-loader mini-css-extract-plugin -D
</code></pre> </li> 
   <li> <p>3.配置scss</p> <pre><code>//引入配置scss插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

    new MiniCssExtractPlugin({
        filename:"css/[name].css"
    })
    。。。。
    {
    test:/\.scss$/i,
    exclude:/node_modules/, //node_modules中的文件
    use:[
        MiniCssExtractPlugin.loader,
        "css-loader",
        "sass-loader",
    ]
}
</code></pre> </li> 
  </ul> 
  <h4>静态文件配置</h4> 
  <p>在项目中有一些文件不需要webpack处理，直接复制到编译后的目录即可。</p> 
  <ul> 
   <li>1.下载插件</li> 
  </ul> 
  <pre><code>npm i copy-webpack-plugin -D
</code></pre> 
  <ul> 
   <li> <p>2.配置插件</p> <pre><code>// 引入拷贝不需要webpack处理的文件
const CopyPlugin = require("copy-webpack-plugin")

new CopyPlugin({
        patterns:[
            {from:"./src/static",to:"./static"}
        ]
    })
</code></pre> </li> 
  </ul> 
  <h4>全局配置Jquery</h4> 
  <ul> 
   <li>1.下载插件</li> 
  </ul> 
  <pre><code>npm i jquery
</code></pre> 
  <ul> 
   <li>2.配置插件</li> 
  </ul> 
  <pre><code>// 引入webpack用于加载全局事件
const  Webpack = require('webpack')
.....
new Webpack.ProvidePlugin({
            "$":'jquery',
        })
</code></pre> 
  <h4>source map（开发模式）</h4> 
  <p>由于浏览器运行的都是webpack编译后的代码，所以报错显示的位置就不正确，所以添加一配置方便我们定位错误。<br> 在<code>webpack.dev.config.js</code>中配置：</p> 
  <pre><code>module.exports = merge(base,{
    mode:"development", //表明开发环境
    devServer:{
        port:"8080", //端口号
        open:"index.html" //启动后默认打开页面
    },
    devtool:"inline-source-map"
})
</code></pre> 
  <h4>清除无用文件（生产模式）</h4> 
  <ul> 
   <li>1.下载插件</li> 
  </ul> 
  <pre><code>npm i clean-webpack-plugin -D
</code></pre> 
  <ul> 
   <li>2.配置插件</li> 
  </ul> 
  <pre><code>// 引入清除无用文件插件
const { CleanPlugin } = require('webpack')

// 合并公共配置
module.exports = merge(base,{
    mode:"production", //表明生产环境
    plugins:[
        new CleanPlugin
    ]
})
</code></pre> 
  <h3>前端模块化</h3> 
  <p>模块化，指的是将每一个js文件都变成一个独立的模块，每一个js文件都拥有自己的作用域。默认情况下模块与模块之间不能进行数据访问。</p> 
  <h4>一、设置JS模块</h4> 
  <pre><code class="prism language-js"><span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"./index.js"</span> type<span class="token operator">=</span><span class="token string">"module"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
</code></pre> 
  <h4>二、在js文件中导入js文件</h4> 
  <p>在实际开发中。通常一个html中只需要引入一个入口js即可，剩下的js文件，都可以在入口js中进行引入。</p> 
  <pre><code class="prism language-js"><span class="token keyword">import</span> <span class="token string">"./a.js"</span>
<span class="token keyword">import</span> <span class="token string">"./b.js"</span>
<span class="token keyword">import</span> <span class="token string">"./c.js"</span>
</code></pre> 
  <p>注意：同目录之中的js文件都需要以<code>./</code>开头</p> 
  <h4>三、暴露和引入</h4> 
  <p>默认情况下，模块与模块之间不能进行数据互相访问，但是我们可以通过暴露和引入的方式，来实现部分数据的共享。<br> - 暴露：指的就是可以当前模块中，通过暴露方式，将私有的数据共享给其他JS模块使用。<br> - 引入：指的就是可以在当前模块中，通过引入的方式，将其他JS的私有数据拿来使用。</p> 
  <ul> 
   <li>1、暴露<br> 一个文件中分两个情况： 
    <ul> 
     <li>整个文件需要暴露多个数据<code>export</code></li> 
     <li>整个文件只暴露一个数据<code>export default</code></li> 
    </ul> </li> 
  </ul> 
  <p>暴露多条数据</p> 
  <pre><code class="prism language-js"><span class="token keyword">export</span> <span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token number">5</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">"hello"</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"bbbb"</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> 
  <p>只暴露一条数据</p> 
  <pre><code class="prism language-js"><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">showA</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"bbbb"</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> showA
</code></pre> 
  <ul> 
   <li>2、引入<br> 引入暴露多条数据的：</li> 
  </ul> 
  <pre><code class="prism language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>b<span class="token punctuation">,</span>show<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./b.js"</span>
</code></pre> 
  <p>引入只暴露一条数据的：</p> 
  <pre><code class="prism language-js"><span class="token keyword">import</span> 变量名 <span class="token keyword">from</span> <span class="token string">"./b.js"</span>
</code></pre> 
  <p>一般来说，变量名等于暴露的名字。<br> <em>注意如果引入的两个变量名有重名可以通过as来重命名</em></p> 
  <pre><code class="prism language-js"><span class="token keyword">import</span> show <span class="token keyword">from</span> <span class="token string">"./a.js"</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>b<span class="token punctuation">,</span>show <span class="token keyword">as</span> show2<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./b.js"</span> 
</code></pre> 
  <h3>前后端分离(?)</h3> 
  <h3>补充内容</h3> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1691276284014964736"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(学习笔记,前端,学习,笔记)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1894581924060524544.htm"
                           title="笔记工具--MD-Markdown的语法技巧" target="_blank">笔记工具--MD-Markdown的语法技巧</a>
                        <span class="text-muted">忆源</span>
<a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                        <div>MD格式，全称为Markdown格式，是一种轻量级标记语言文件，主要用于创建格式化文本。以下是对MD格式的详细解释：一、定义与特点定义：MD文件是一种纯文本格式的文件，使用简单的符号或语法来标记标题、列表、链接、图片等元素，从而实现对文本的格式化。特点：易读易写：MD文件的语法简洁明了，使得作者能够快速上手并编写出结构清晰的文档。兼容性强：MD文件可以在不同的平台和设备上打开和编辑，如文本编辑器、</div>
                    </li>
                    <li><a href="/article/1894581292821966848.htm"
                           title="深入解析 Python 的 __str__() 方法重写" target="_blank">深入解析 Python 的 __str__() 方法重写</a>
                        <span class="text-muted">web安全工具库</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>各类资料学习下载合集https://pan.quark.cn/s/8c91ccb5a474在Python中，__str__()是一个特殊的方法，用于定义对象的“非正式”字符串表示。重写__str__()方法可以让我们定制类的实例在打印或转换成字符串时的表现。本文将详细讲解__str__()方法的作用、如何重写它，以及具体的代码示例和运行结果。一、什么是__str__()方法__str__()方法是</div>
                    </li>
                    <li><a href="/article/1894580534953177088.htm"
                           title="前端解决跨域问题的三种方法" target="_blank">前端解决跨域问题的三种方法</a>
                        <span class="text-muted">web13638179351</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a>
                        <div>一、cors后端程序员提供的解决跨域访问的方法，和前端程序员没有关系，定义后端程序代码让所有的前端程序都可以访问后端的数据，后端程序告诉服务器这个后端程序的数据任何前端请求都可以访问，服务器就不再执行跨域访问拦截数据的操作。因为博主目前主攻前端对后端并不熟悉，因此这种方法暂不详细解答。二、服务器代理proxy2.1步骤（1）修改Nginx或者Apache服务器文件，目前博主使用的是Nginx代理（</div>
                    </li>
                    <li><a href="/article/1894580031104020480.htm"
                           title="设计模式-建造者模式" target="_blank">设计模式-建造者模式</a>
                        <span class="text-muted">老菜鸟的每一天</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%BB%BA%E9%80%A0%E8%80%85%E6%A8%A1%E5%BC%8F/1.htm">建造者模式</a>
                        <div>解释生活中有着很多的Builder的例子，个人觉得大学生活就是一个Builder模式的最好体验：要完成大学教育，一般将大学教育过程分成4个学期进行，因此没有学习可以看作是构建完整大学教育的一个部分构建过程，每个人经过这4年的（4个阶段）构建过程得到的最后的结果不一样，因为可能在四个阶段的构建中引入了很多的参数（每个人的机会和际遇不完全相同）。Builder模式要解决的也正是这样的问题：当我们要创建</div>
                    </li>
                    <li><a href="/article/1894579021514076160.htm"
                           title="Kafka 基础教程 — 可靠的数据传递" target="_blank">Kafka 基础教程 — 可靠的数据传递</a>
                        <span class="text-muted">码炫课堂-码哥</span>
<a class="tag" taget="_blank" href="/search/kafka%E4%B8%93%E9%A2%98/1.htm">kafka专题</a><a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a><a class="tag" taget="_blank" href="/search/%E6%B6%88%E6%81%AF%E9%98%9F%E5%88%97/1.htm">消息队列</a>
                        <div>作者简介：大家好，我是码炫码哥，前中兴通讯、美团架构师，现任某互联网公司CTO，兼职码炫课堂主讲源码系列专题代表作：《jdk源码&多线程&高并发》，《深入tomcat源码解析》，《深入netty源码解析》，《深入dubbo源码解析》，《深入springboot源码解析》，《深入spring源码解析》，《深入redis源码解析》等联系qq：184480602，加我进群，大家一起学习，一起进步，一起对</div>
                    </li>
                    <li><a href="/article/1894577761981362176.htm"
                           title="数据库的 DDL、DML、DQL、DCL 分别是什么？下面谈谈这四者的概念。" target="_blank">数据库的 DDL、DML、DQL、DCL 分别是什么？下面谈谈这四者的概念。</a>
                        <span class="text-muted">雪碧聊技术</span>
<a class="tag" taget="_blank" href="/search/MySQL/1.htm">MySQL</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%9B%9B%E7%A7%8D%E6%93%8D%E4%BD%9C%E8%AF%AD%E5%8F%A5/1.htm">四种操作语句</a><a class="tag" taget="_blank" href="/search/MySQL/1.htm">MySQL</a><a class="tag" taget="_blank" href="/search/SQL/1.htm">SQL</a>
                        <div>欢迎来到“雪碧聊技术”CSDN博客！在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与</div>
                    </li>
                    <li><a href="/article/1894576123199680512.htm"
                           title="MySQL知识点思维导图" target="_blank">MySQL知识点思维导图</a>
                        <span class="text-muted">Java小白白又白</span>
<a class="tag" taget="_blank" href="/search/%E5%90%84%E7%A7%8D%E6%8A%80%E6%9C%AF%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE%E5%90%88%E9%9B%86/1.htm">各种技术思维导图合集</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                        <div>MySQL知识点思维导图，文章里是PNG格式，可能不是很清晰，文末附上PDF和xmind工程文件链接，需要的小伙伴自取，都只需要1个币（设置成0个币还需要啥下载码）。如有错误的地方欢迎大家批评指正。MySQL知识点思维导图PDFMySQL知识点思维导图PDF-MySQL文档类资源-CSDN下载MySQL知识点思维导图PDF更多下载资源、学习资料请访问CSDN下载频道.https://downloa</div>
                    </li>
                    <li><a href="/article/1894575114930941952.htm"
                           title="深度学习-133-LangGraph之应用实例(二)使用面向过程和面向对象的两种编程方式构建带记忆的聊天机器人" target="_blank">深度学习-133-LangGraph之应用实例(二)使用面向过程和面向对象的两种编程方式构建带记忆的聊天机器人</a>
                        <span class="text-muted">皮皮冰燃</span>
<a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/LangGraph/1.htm">LangGraph</a>
                        <div>文章目录1通用配置1.1大语言模型ChatOllama1.2函数trim_messages1.2.1函数概述1.2.2函数参数1.2.3测试应用2面向过程编程2.1不裁剪历史信息2.1.1创建图2.1.2调用图2.2裁剪历史信息2.2.1创建图2.2.2调用图3面向对象编程3.1定义类MyState3.2定义类AIChat3.3应用4附录4.1问题及解决tokenizer4.2参考附录1通用配置L</div>
                    </li>
                    <li><a href="/article/1894573349565165568.htm"
                           title="软件工程应试复习（考试折磨版）" target="_blank">软件工程应试复习（考试折磨版）</a>
                        <span class="text-muted">愚戏师</span>
<a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E5%B7%A5%E7%A8%8B/1.htm">软件工程</a>
                        <div>针对学校软件工程考试，参考教材《软件工程导论（第6版）》1-8章学习的艺术：不断地尝试，我一定会找到高效用的方法，让学习变成一门艺术，从应试备考中解救出我的时间同胞们。好嘞！既然时间紧迫，咱们就用「闪电战」学习法，把知识点当零食一样快速吞下（但记得消化哦）！上攻略三步速成秘籍(测试版）：应试求生指南！1.开挂第一步：「抓大放小」狙击战！锁定BOSS级考点：翻开目录，用荧光笔把老师敲黑板的内容（PP</div>
                    </li>
                    <li><a href="/article/1894572088254066688.htm"
                           title="前端开发中的最佳实践与技巧" target="_blank">前端开发中的最佳实践与技巧</a>
                        <span class="text-muted">lina_mua</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
                        <div>1.引言1.1前端开发的重要性在当今的互联网时代，前端开发已经成为构建用户友好、高效、安全的Web应用程序的关键。前端不仅仅是用户与应用程序交互的界面，它还直接影响用户体验、性能和安全性。1.2本文的目标本文旨在分享前端开发中的最佳实践与技巧，帮助开发者提高代码质量、优化性能、增强安全性，并掌握最新的前端技术趋势。2.HTML最佳实践2.1语义化标签的使用语义化HTML不仅有助于SEO，还能提高代</div>
                    </li>
                    <li><a href="/article/1894571332788613120.htm"
                           title="数据挖掘中特征发现与特征提取的数学原理" target="_blank">数据挖掘中特征发现与特征提取的数学原理</a>
                        <span class="text-muted">调皮的芋头</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/AIGC/1.htm">AIGC</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%A7%86%E8%A7%89/1.htm">计算机视觉</a>
                        <div>好的，我将深入研究数据挖掘中特征发现与特征提取的数学原理，涵盖统计学基础、特征工程的数学方法、以及在机器学习和深度学习中的应用。我会整理相关数学公式和理论，包括主成分分析（PCA）、独立成分分析（ICA）、线性判别分析（LDA）、信息增益、互信息、方差分析等统计方法，并结合金融量化交易的实际应用，确保内容既有理论深度，又能落地实践。完成后，我会通知您！1.统计学基础：描述性统计、方差分析、相关性与</div>
                    </li>
                    <li><a href="/article/1894569566718193664.htm"
                           title="深入探索Spark MLlib：大数据时代的机器学习利器" target="_blank">深入探索Spark MLlib：大数据时代的机器学习利器</a>
                        <span class="text-muted">concisedistinct</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/mllib/1.htm">mllib</a><a class="tag" taget="_blank" href="/search/spark-ml/1.htm">spark-ml</a><a class="tag" taget="_blank" href="/search/Spark/1.htm">Spark</a><a class="tag" taget="_blank" href="/search/MLlib/1.htm">MLlib</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a>
                        <div>随着大数据技术的迅猛发展，机器学习在各行各业的应用日益广泛。ApacheSpark作为大数据处理的利器，其内置的机器学习库MLlib（MachineLearningLibrary）提供了一套高效、易用的工具，用于处理和分析海量数据。本文将深入探讨SparkMLlib，介绍其核心功能和应用场景，并通过实例展示如何在实际项目中应用这些工具。一、SparkMLlib概述1.什么是SparkMLlib？S</div>
                    </li>
                    <li><a href="/article/1894566417844465664.htm"
                           title="前端开发岗模拟面试题套卷A答案及解析（一）技术面部分" target="_blank">前端开发岗模拟面试题套卷A答案及解析（一）技术面部分</a>
                        <span class="text-muted">向贤</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>前端开发岗模拟面试题套卷A答案及解析（一）技术面部分（一）技术面一、JavaScript核心技术（ES6+）1-1、实现防抖函数functiondebounce(fn,delay){lettimer=null;returnfunction(...args){clearTimeout(timer);//清除已有定时器timer=setTimeout(()=>{fn.apply(this,args);</div>
                    </li>
                    <li><a href="/article/1894564778815320064.htm"
                           title="【TVM教程】为 NVIDIA GPU 自动调度神经网络" target="_blank">【TVM教程】为 NVIDIA GPU 自动调度神经网络</a>
                        <span class="text-muted">HyperAI超神经</span>
<a class="tag" taget="_blank" href="/search/TVM/1.htm">TVM</a><a class="tag" taget="_blank" href="/search/%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C/1.htm">神经网络</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/TVM/1.htm">TVM</a><a class="tag" taget="_blank" href="/search/GPU/1.htm">GPU</a><a class="tag" taget="_blank" href="/search/NVIDIA/1.htm">NVIDIA</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a>
                        <div>ApacheTVM是一个深度的深度学习编译框架，适用于CPU、GPU和各种机器学习加速芯片。更多TVM中文文档可访问→https://tvm.hyper.ai/作者：LianminZheng针对特定设备和工作负载的自动调优对于获得最佳性能至关重要。本文介绍如何使用auto-scheduler为NVIDIAGPU调优整个神经网络。为自动调优神经网络，需要将网络划分为小的子图并独立调优。每个子图被视为</div>
                    </li>
                    <li><a href="/article/1894563771632906240.htm"
                           title="AI人工智能机器学习之监督线性模型" target="_blank">AI人工智能机器学习之监督线性模型</a>
                        <span class="text-muted">rockfeng0</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/sklearn/1.htm">sklearn</a>
                        <div>1、概要  本篇学习AI人工智能机器监督学习框架下的线性模型，以LinearRegression线性回归和LogisticRegression逻辑回归为示例，从代码层面测试和讲述监督学习中的线性模型。2、监督学习之线性模型-简介监督学习和线性模型是的两个重要概念。监督学习是一种机器学习任务，其中模型在已标记的数据集上进行训练。线性模型是一类通过线性组合输入特征来进行预测的模型。线性模型的基本形式可</div>
                    </li>
                    <li><a href="/article/1894562308030525440.htm"
                           title="The Rust Programming Language 学习" target="_blank">The Rust Programming Language 学习</a>
                        <span class="text-muted"></span>

                        <div>说明关于参考的教程TheRustProgrammingLanguage是英文版本的由于本人英语水平相当的有限,所以我们这里直接去看翻译好的版本Rust程序设计语言.下面我们将两个地址全部都贴出来.TheRustProgrammingLanguageRust程序设计语言Rust官方文档中文教程教程中提到的一些前置翻译已参照最新的Rust1.58.0版及开发版进行调整，这是目前网上最新的中文版本，最后</div>
                    </li>
                    <li><a href="/article/1894560494698688512.htm"
                           title="大数据模型：技术赋能，引领未来" target="_blank">大数据模型：技术赋能，引领未来</a>
                        <span class="text-muted">大模型教程</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">AI大模型</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a>
                        <div>随着互联网、物联网、人工智能等技术的飞速发展，我们正身处一个数据爆炸的时代。数据，已经成为这个时代最为宝贵的资源之一。而如何挖掘和利用这些海量数据，为企业和社会创造价值，正是大数据模型所追求的目标。本文将从以下几个方面对大数据模型进行探讨：概述、技术原理、应用场景、挑战与发展趋势。一、概述大数据模型是一种基于数据挖掘和机器学习技术的分析方法，通过对海量数据进行处理和分析，挖掘出有价值的信息和知识，</div>
                    </li>
                    <li><a href="/article/1894553560817922048.htm"
                           title="Selenium入门，最近看到的都师一些小白想学测试，今天就分享入门吧~" target="_blank">Selenium入门，最近看到的都师一些小白想学测试，今天就分享入门吧~</a>
                        <span class="text-muted">程序员-小枫</span>
<a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">自动化测试</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a>
                        <div>Selenium入门（自动右键保存图片到本机上）前言入职测开一段时间，基本就是熟悉需求，熟悉业务，熟悉这熟悉那，再跟着需求做各种各样的测试和联调，趁着业余时间，也是学习了一下Selenium，在之前Selenium是我作为爬虫的工具，不过之后就用来做写一些自动化测试脚本啦~~（这里使用Python中的Selenium库进行Coding~~1、什么是SeleniumSelenium是一个用于Web应</div>
                    </li>
                    <li><a href="/article/1894552167646294016.htm"
                           title="rabbitmq 同步策略_数据同步解决方案-canal与rabbitmq" target="_blank">rabbitmq 同步策略_数据同步解决方案-canal与rabbitmq</a>
                        <span class="text-muted">weixin_39996739</span>
<a class="tag" taget="_blank" href="/search/rabbitmq/1.htm">rabbitmq</a><a class="tag" taget="_blank" href="/search/%E5%90%8C%E6%AD%A5%E7%AD%96%E7%95%A5/1.htm">同步策略</a>
                        <div>学习目标能够完成canal环境的搭建与数据监控微服务的开发能够完成首页广告缓存更新的功能，掌握OkHttpClient的基本使用方法能够完成商品上架索引库导入数据功能，能够画出流程图和说出实现思路能够完成商品下架索引库删除数据功能，能够画出流程图和说出实现思路该工程使用lua+nginx+rabbitmq+redis等技术的第一个主要目的是实现轮播图的读取，具体图解：其中nginx的作用包括了从数</div>
                    </li>
                    <li><a href="/article/1894552038533033984.htm"
                           title="【深度学习】PYTORCH框架中采用训练数据“CIFAR-10”实现RESNET50" target="_blank">【深度学习】PYTORCH框架中采用训练数据“CIFAR-10”实现RESNET50</a>
                        <span class="text-muted">别出BUG求求了</span>
<a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</a><a class="tag" taget="_blank" href="/search/cifar-10/1.htm">cifar-10</a><a class="tag" taget="_blank" href="/search/resnet50/1.htm">resnet50</a><a class="tag" taget="_blank" href="/search/%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C/1.htm">神经网络</a>
                        <div>一、ResNet网络结构二、基本块三、RESNET50代码实现resnet50.pyimporttorchimporttorch.nnasnnfromtorch.nnimportfunctionalasFclassResNet50BasicBlock(nn.Module):def__init__(self,in_channel,outs,kernerl_size,stride,padding):s</div>
                    </li>
                    <li><a href="/article/1894551281683460096.htm"
                           title="人工智能深度学习系列—深入探索KL散度：度量概率分布差异的关键工具" target="_blank">人工智能深度学习系列—深入探索KL散度：度量概率分布差异的关键工具</a>
                        <span class="text-muted">学步_技术</span>
<a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E9%A9%BE%E9%A9%B6/1.htm">自动驾驶</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E9%A9%BE%E9%A9%B6/1.htm">自动驾驶</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a>
                        <div>人工智能深度学习系列—深度解析：交叉熵损失（Cross-EntropyLoss）在分类问题中的应用人工智能深度学习系列—深入解析：均方误差损失（MSELoss）在深度学习中的应用与实践人工智能深度学习系列—深入探索KL散度：度量概率分布差异的关键工具人工智能深度学习系列—探索余弦相似度损失：深度学习中的相似性度量神器人工智能深度学习系列—深度学习中的边界框回归新贵：GHM（GeneralizedH</div>
                    </li>
                    <li><a href="/article/1894551155237777408.htm"
                           title="Qt——Qt控件之输入窗口-QTextEdit文本编辑框控件的使用总结（例程：文本编辑输入）" target="_blank">Qt——Qt控件之输入窗口-QTextEdit文本编辑框控件的使用总结（例程：文本编辑输入）</a>
                        <span class="text-muted">Winter_world</span>
<a class="tag" taget="_blank" href="/search/QT%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/1.htm">QT开发实战</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/QTextEdit%E6%8E%A7%E4%BB%B6/1.htm">QTextEdit控件</a><a class="tag" taget="_blank" href="/search/Qt%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E6%8E%A7%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8/1.htm">Qt文本编辑控件的使用</a>
                        <div>【系列专栏】：博主结合工作实践输出的，解决实际问题的专栏，朋友们看过来！《项目案例分享》《极客DIY开源分享》《嵌入式通用开发实战》《C++语言开发基础总结》《从0到1学习嵌入式Linux开发》《QT开发实战》《Android开发实战》《实用硬件方案设计》《结构建模设计》《数据库开发总结》《JAVA入门基础》《JavaWeb开发实战》长期持续带来更多案例与技术文章分享；欢迎商业项目咨询，10年+软</div>
                    </li>
                    <li><a href="/article/1894549893016514560.htm"
                           title="数据采集技术：selenium/正则匹配/xpath/beautifulsoup爬虫实例" target="_blank">数据采集技术：selenium/正则匹配/xpath/beautifulsoup爬虫实例</a>
                        <span class="text-muted">写代码的中青年</span>
<a class="tag" taget="_blank" href="/search/3%E5%A4%A9%E5%85%A5%E9%97%A8%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">3天入门机器学习</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/beautifulsoup/1.htm">beautifulsoup</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/xpath/1.htm">xpath</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a>
                        <div>专栏介绍1.专栏面向零基础或基础较差的机器学习入门的读者朋友，旨在利用实际代码案例和通俗化文字说明，使读者朋友快速上手机器学习及其相关知识体系。2.专栏内容上包括数据采集、数据读写、数据预处理、分类\回归\聚类算法、可视化等技术。3.需要强调的是，专栏仅介绍主流、初阶知识，每一技术模块都是AI研究的细分领域，同更多技术有所交叠，此处不进行讨论和分享。数据采集技术：selenium/正则匹配/xpa</div>
                    </li>
                    <li><a href="/article/1894549008551047168.htm"
                           title="BCPD++(非刚性配准) 算法原理详解" target="_blank">BCPD++(非刚性配准) 算法原理详解</a>
                        <span class="text-muted">点云SLAM</span>
<a class="tag" taget="_blank" href="/search/%E7%82%B9%E4%BA%91%E6%95%B0%E6%8D%AE%E5%A4%84%E7%90%86%E6%8A%80%E6%9C%AF/1.htm">点云数据处理技术</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/BCPD%2B%2B/1.htm">BCPD++</a><a class="tag" taget="_blank" href="/search/%E9%9D%9E%E5%88%9A%E6%80%A7%E6%8B%BC%E6%8E%A5/1.htm">非刚性拼接</a><a class="tag" taget="_blank" href="/search/%E7%82%B9%E4%BA%91%E6%95%B0%E6%8D%AE%E5%A4%84%E7%90%86/1.htm">点云数据处理</a><a class="tag" taget="_blank" href="/search/%E8%B4%9D%E5%8F%B6%E6%96%AF%E6%A8%A1%E5%9E%8B/1.htm">贝叶斯模型</a>
                        <div>BCPD++算法原理详解一、算法概述BCPD++（BayesianCoherentPointDrift++）是BCPD（BayesianCoherentPointDrift）的增强版本，专为非刚性点云配准设计。它基于贝叶斯概率框架，结合变分推断与高效优化策略，显著提升了配准精度、鲁棒性与计算效率。BCPD++的核心创新在于：分层贝叶斯模型：自适应学习超参数，减少人工调参需求。变分贝叶斯推断：替代传</div>
                    </li>
                    <li><a href="/article/1894548880524111872.htm"
                           title="点云配准（点云拼接）论文综述" target="_blank">点云配准（点云拼接）论文综述</a>
                        <span class="text-muted">点云SLAM</span>
<a class="tag" taget="_blank" href="/search/%E7%82%B9%E4%BA%91%E6%95%B0%E6%8D%AE%E5%A4%84%E7%90%86%E6%8A%80%E6%9C%AF/1.htm">点云数据处理技术</a><a class="tag" taget="_blank" href="/search/%E7%82%B9%E4%BA%91%E6%95%B0%E6%8D%AE%E5%A4%84%E7%90%86/1.htm">点云数据处理</a><a class="tag" taget="_blank" href="/search/%E7%82%B9%E4%BA%91%E9%85%8D%E5%87%86/1.htm">点云配准</a><a class="tag" taget="_blank" href="/search/DeepICP/1.htm">DeepICP</a><a class="tag" taget="_blank" href="/search/ICP/1.htm">ICP</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0%E9%85%8D%E5%87%86%E6%96%B9%E6%B3%95/1.htm">深度学习配准方法</a><a class="tag" taget="_blank" href="/search/%E7%89%B9%E5%BE%81%E5%8C%B9%E9%85%8D/1.htm">特征匹配</a>
                        <div>点云配准（点云拼接）论文综述1.引言点云配准（PointCloudRegistration）是三维计算机视觉与机器人感知领域的核心任务，其目标是通过几何变换将多个点云对齐至统一坐标系，形成完整的场景表示。该技术广泛应用于自动驾驶、增强现实、工业检测、医学影像等领域。随着传感器技术（如LiDAR、RGB-D相机）的进步与深度学习的发展，点云配准方法经历了从传统优化算法到数据驱动模型的演变。本文系统综</div>
                    </li>
                    <li><a href="/article/1894548878519234560.htm"
                           title="React 开发全面指南：核心 API、方法函数及属性详解" target="_blank">React 开发全面指南：核心 API、方法函数及属性详解</a>
                        <span class="text-muted">北辰alk</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
                        <div>React作为当前最流行的前端框架之一，凭借其组件化、声明式编程和高效的虚拟DOM机制，成为构建复杂用户界面的首选工具。本文将深入解析React的核心API、方法函数及属性，覆盖从基础到高级的各个方面，助你全面掌握React开发技巧。文章目录1.React核心概念1.1组件化开发1.2JSX语法1.3虚拟DOM2.组件生命周期方法（类组件）2.1挂载阶段（Mounting）2.2更新阶段（Upda</div>
                    </li>
                    <li><a href="/article/1894548879068688384.htm"
                           title="Vue 与 React 深度对比：从代码到原理的全方位解析" target="_blank">Vue 与 React 深度对比：从代码到原理的全方位解析</a>
                        <span class="text-muted">北辰alk</span>
<a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Vue和React作为当前最主流的前端框架，各自凭借独特的理念和设计哲学赢得了大量开发者的青睐。Vue以“渐进式框架”和易上手著称，React则以“声明式UI”和灵活性见长。本文将从代码风格、底层原理、API设计、性能优化、生态系统等多个维度，对两者进行深度对比，助你在技术选型时做出明智决策。文章目录1.核心设计理念对比1.1Vue：渐进式框架1.2React：声明式UI库1.3哲学差异总结2.模</div>
                    </li>
                    <li><a href="/article/1894547618588061696.htm"
                           title="java题库app有什么,Java面试题库" target="_blank">java题库app有什么,Java面试题库</a>
                        <span class="text-muted">m0_74824091</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>Java面试题库是一个学习刷题类软件，主要针对Java从业者设计，整合了众多基础的题目资源，涵盖面试中可能会遇到的各种出题内容；软件使用功能非常简单，上面就设置了题库和搜索等中心，打开软件就能看到其中各种不同的题目划分栏目，马上就能从推荐栏目找到需要练习的题目并打开练习学习，里面每个题目都提供相应的详细解释和对应的知识点击内容，让用户能高效的掌握该问题考察的考点信息；这里的题库资源丰富，还按照多种</div>
                    </li>
                    <li><a href="/article/1894546485119348736.htm"
                           title="详细介绍人工智能学习框架" target="_blank">详细介绍人工智能学习框架</a>
                        <span class="text-muted">日记成书</span>
<a class="tag" taget="_blank" href="/search/%E5%8F%8D%E6%AD%A3%E7%9C%8B%E4%B8%8D%E6%87%82%E7%B3%BB%E5%88%97/1.htm">反正看不懂系列</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
                        <div>人工智能学习框架是开发者用于构建、训练和部署机器学习模型的核心工具。以下从框架分类、核心框架介绍、学习方法三个维度展开详解：一、主流人工智能框架全景图（一）基础框架层TensorFlow（Google）核心优势：工业级部署能力，支持移动端（TFLite）、浏览器（TF.js）、服务器（TFServing）特色功能：SavedModel格式跨平台兼容，XLA编译器优化计算图适用场景：生产环境部署、大</div>
                    </li>
                    <li><a href="/article/1894537539373559808.htm"
                           title="二叉树-左叶子之和" target="_blank">二叉树-左叶子之和</a>
                        <span class="text-muted">Hasno.</span>
<a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E4%BC%98%E5%85%88/1.htm">深度优先</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
                        <div>代码随想录-刷题笔记404.左叶子之和-力扣（LeetCode）内容：该题仅作为搜索，但是其中的规则让人摸不着头脑，看起来似乎很头疼但是仔细一思考，能发现左叶子无非是这样的定义当发现一个节点的左孩子不为null,并且左孩子的左右孩子都为null(叶子结点)那么可以知道，找到了左叶子OK，接下来就是常规的搜索,只要搜索到满足这样的节点，直接加到一个全局变量就OK了/***Definitionfora</div>
                    </li>
                                <li><a href="/article/69.htm"
                                       title="对股票分析时要注意哪些主要因素？" target="_blank">对股票分析时要注意哪些主要因素？</a>
                                    <span class="text-muted">会飞的奇葩猪</span>
<a class="tag" taget="_blank" href="/search/%E8%82%A1%E7%A5%A8+%E5%88%86%E6%9E%90+%E4%BA%91%E6%8E%8C%E8%82%A1%E5%90%A7/1.htm">股票 分析 云掌股吧</a>
                                    <div> 
　　众所周知，对散户投资者来说，股票技术分析是应战股市的核心武器，想学好股票的技术分析一定要知道哪些是重点学习的，其实非常简单，我们只要记住三个要素：成交量、价格趋势、振荡指标。 
 
    一、成交量 
 
　　大盘的成交量状态。成交量大说明市场的获利机会较多，成交量小说明市场的获利机会较少。当沪市的成交量超过150亿时是强市市场状态，运用技术找综合买点较准；</div>
                                </li>
                                <li><a href="/article/196.htm"
                                       title="【Scala十八】视图界定与上下文界定" target="_blank">【Scala十八】视图界定与上下文界定</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a>
                                    <div>Context Bound，上下文界定，是Scala为隐式参数引入的一种语法糖，使得隐式转换的编码更加简洁。 
  
隐式参数 
首先引入一个泛型函数max，用于取a和b的最大值 
  def max[T](a: T, b: T) = {
    if (a > b) a else b
  } 
 因为T是未知类型，只有运行时才会代入真正的类型，因此调用a > </div>
                                </li>
                                <li><a href="/article/323.htm"
                                       title="C语言的分支——Object-C程序设计阅读有感" target="_blank">C语言的分支——Object-C程序设计阅读有感</a>
                                    <span class="text-muted">darkblue086</span>
<a class="tag" taget="_blank" href="/search/apple/1.htm">apple</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/cocoa/1.htm">cocoa</a>
                                    <div>自从1972年贝尔实验室Dennis Ritchie开发了C语言，C语言已经有了很多版本和实现，从Borland到microsoft还是GNU、Apple都提供了不同时代的多种选择，我们知道C语言是基于Thompson开发的B语言的，Object-C是以SmallTalk-80为基础的。和C++不同的是，Object C并不是C的超集，因为有很多特性与C是不同的。 
Object-C程序设计这本书</div>
                                </li>
                                <li><a href="/article/450.htm"
                                       title="去除浏览器对表单值的记忆" target="_blank">去除浏览器对表单值的记忆</a>
                                    <span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E8%AE%B0%E5%BF%86/1.htm">记忆</a><a class="tag" taget="_blank" href="/search/autocomplete/1.htm">autocomplete</a><a class="tag" taget="_blank" href="/search/form/1.htm">form</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88/1.htm">浏览</a>
                                    <div>  
                                   &n</div>
                                </li>
                                <li><a href="/article/577.htm"
                                       title="java的树形通讯录" target="_blank">java的树形通讯录</a>
                                    <span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>最近用到企业通讯录，虽然以前也开发过，但是用的是jsf，拼成的树形，及其笨重和难维护。后来就想到直接生成json格式字符串，页面上也好展现。 
	// 首先取出每个部门的联系人
			for (int i = 0; i < depList.size(); i++) {
				List<Contacts> list = getContactList(depList.get(i</div>
                                </li>
                                <li><a href="/article/704.htm"
                                       title="Nginx安装部署" target="_blank">Nginx安装部署</a>
                                    <span class="text-muted">510888780</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源</div>
                                </li>
                                <li><a href="/article/831.htm"
                                       title="java servelet异步处理请求" target="_blank">java servelet异步处理请求</a>
                                    <span class="text-muted">墙头上一根草</span>
<a class="tag" taget="_blank" href="/search/%EF%BD%8A%EF%BD%81%EF%BD%96%EF%BD%81/1.htm">ｊａｖａ</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E6%AD%A5%E8%BF%94%E5%9B%9E/1.htm">异步返回</a><a class="tag" taget="_blank" href="/search/%EF%BD%93%EF%BD%85%EF%BD%92%EF%BD%96%EF%BD%8C%EF%BD%85%EF%BD%94/1.htm">ｓｅｒｖｌｅｔ</a>
                                    <div>servlet3.0以后支持异步处理请求，具体是使用AsyncContext ，包装httpservletRequest以及httpservletResponse具有异步的功能， 
   
  
  final AsyncContext ac = request.startAsync(request, response); 
  ac.s</div>
                                </li>
                                <li><a href="/article/958.htm"
                                       title="我的spring学习笔记8-Spring中Bean的实例化" target="_blank">我的spring学习笔记8-Spring中Bean的实例化</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/Spring+3/1.htm">Spring 3</a>
                                    <div>在Spring中要实例化一个Bean有几种方法： 
 
1、最常用的（普通方法） 
 
 
<bean id="myBean" class="www.6e6.org.MyBean" /> 
 
使用这样方法，按Spring就会使用Bean的默认构造方法，也就是把没有参数的构造方法来建立Bean实例。 
 
（有构造方法的下个文细说） 
 
2、还</div>
                                </li>
                                <li><a href="/article/1085.htm"
                                       title="为Mysql创建最优的索引" target="_blank">为Mysql创建最优的索引</a>
                                    <span class="text-muted">annan211</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E7%B4%A2%E5%BC%95/1.htm">索引</a>
                                    <div>


	索引对于良好的性能非常关键，尤其是当数据规模越来越大的时候，索引的对性能的影响越发重要。
	索引经常会被误解甚至忽略，而且经常被糟糕的设计。
	索引优化应该是对查询性能优化最有效的手段了，索引能够轻易将查询性能提高几个数量级，最优的索引会比
	较好的索引性能要好2个数量级。
	
	1 索引的类型
	  (1) B-Tree
	    不出意外，这里提到的索引都是指 B-</div>
                                </li>
                                <li><a href="/article/1212.htm"
                                       title="日期函数" target="_blank">日期函数</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E6%97%A5%E6%9C%9F%E5%87%BD%E6%95%B0/1.htm">日期函数</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2/1.htm">查询</a>
                                    <div>  
ORACLE日期时间函数大全

   TO_DATE格式(以时间:2007-11-02   13:45:25为例)
   
        Year:      
        yy two digits 两位年                显示值:07
        yyy three digits 三位年                显示值:007
   </div>
                                </li>
                                <li><a href="/article/1339.htm"
                                       title="线程优先级" target="_blank">线程优先级</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a>
                                    <div>多线程运行时需要定义线程运行的先后顺序。 
线程优先级是用数字表示，数字越大线程优先级越高，取值在1到10，默认优先级为5。 
实例： 
package com.bijian.study;

/**
 * 因为在代码段当中把线程B的优先级设置高于线程A,所以运行结果先执行线程B的run()方法后再执行线程A的run()方法
 * 但在实际中，JAVA的优先级不准，强烈不建议用此方法来控制执</div>
                                </li>
                                <li><a href="/article/1466.htm"
                                       title="适配器模式和代理模式的区别" target="_blank">适配器模式和代理模式的区别</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
                                    <div>一.简介        适配器模式：适配器模式（英语：adapter pattern）有时候也称包装样式或者包装。将一个类的接口转接成用户所期待的。一个适配使得因接口不兼容而不能在一起工作的类工作在一起，做法是将类别自己的接口包裹在一个已存在的类中。      &nbs</div>
                                </li>
                                <li><a href="/article/1593.htm"
                                       title="【持久化框架MyBatis3三】MyBatis3 SQL映射配置文件" target="_blank">【持久化框架MyBatis3三】MyBatis3 SQL映射配置文件</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Mybatis3/1.htm">Mybatis3</a>
                                    <div> SQL映射配置文件一方面类似于Hibernate的映射配置文件，通过定义实体与关系表的列之间的对应关系。另一方面使用<select>,<insert>,<delete>，<update>元素定义增删改查的SQL语句， 
这些元素包含三方面内容 
1. 要执行的SQL语句 
2. SQL语句的入参，比如查询条件 
3. SQL语句的返回结果</div>
                                </li>
                                <li><a href="/article/1720.htm"
                                       title="oracle大数据表复制备份个人经验" target="_blank">oracle大数据表复制备份个人经验</a>
                                    <span class="text-muted">bitcarter</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E8%A1%A8%E5%A4%87%E4%BB%BD/1.htm">大表备份</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E8%A1%A8%E6%95%B0%E6%8D%AE%E5%A4%8D%E5%88%B6/1.htm">大表数据复制</a>
                                    <div>前提： 
   数据库仓库A（就拿oracle11g为例）中有两个用户user1和user2,现在有user1中有表ldm_table1,且表ldm_table1有数据5千万以上，ldm_table1中的数据是从其他库B（数据源）中抽取过来的，前期业务理解不够或者需求有变，数据有变动需要重新从B中抽取数据到A库表ldm_table1中。 
    </div>
                                </li>
                                <li><a href="/article/1847.htm"
                                       title="HTTP加速器varnish安装小记" target="_blank">HTTP加速器varnish安装小记</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/http+varnish+%E5%8A%A0%E9%80%9F/1.htm">http varnish 加速</a>
                                    <div>上午共享的那个varnish安装手册，个人看了下，有点不知所云，好吧~看来还是先安装玩玩！ 
苦逼公司服务器没法连外网，不能用什么wget或yum命令直接下载安装，每每看到别人博客贴出的在线安装代码时，总有一股羡慕嫉妒“恨”冒了出来。。。好吧，既然没法上外网，那只能麻烦点通过下载源码来编译安装了！ 
Varnish 3.0.4下载地址： http://repo.varnish-cache.org/</div>
                                </li>
                                <li><a href="/article/1974.htm"
                                       title="java-73-输入一个字符串，输出该字符串中对称的子字符串的最大长度" target="_blank">java-73-输入一个字符串，输出该字符串中对称的子字符串的最大长度</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>

public class LongestSymmtricalLength {

	/*
	 * Q75题目：输入一个字符串，输出该字符串中对称的子字符串的最大长度。
	 * 比如输入字符串“google”，由于该字符串里最长的对称子字符串是“goog”，因此输出4。
	 */
	
	public static void main(String[] args) {
		Str</div>
                                </li>
                                <li><a href="/article/2101.htm"
                                       title="学习编程的一点感想" target="_blank">学习编程的一点感想</a>
                                    <span class="text-muted">Cb123456</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E6%84%9F%E6%83%B3/1.htm">感想</a><a class="tag" taget="_blank" href="/search/Gis/1.htm">Gis</a>
                                    <div>       写点感想，总结一些，也顺便激励一些自己.现在就是复习阶段，也做做项目. 
  
   本专业是GIS专业，当初觉得本专业太水，靠这个会活不下去的，所以就报了培训班。学习的时候，进入状态很慢，而且当初进去的时候，已经上到Java高级阶段了，所以.....，呵呵，之后有点感觉了，不过，还是不好好写代码，还眼高手低的，有</div>
                                </li>
                                <li><a href="/article/2228.htm"
                                       title="[能源与安全]美国与中国" target="_blank">[能源与安全]美国与中国</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E8%83%BD%E6%BA%90/1.htm">能源</a>
                                    <div> 
 
     现在有一个局面：地球上的石油只剩下N桶，这些油只够让中国和美国这两个国家中的一个顺利过渡到宇宙时代，但是如果这两个国家为争夺这些石油而发生战争，其结果是两个国家都无法平稳过渡到宇宙时代。。。。而且在战争中，剩下的石油也会被快速消耗在战争中，结果是两败俱伤。。。 
 
 
      在这个大</div>
                                </li>
                                <li><a href="/article/2355.htm"
                                       title="SEMI-JOIN执行计划突然变成HASH JOIN了 的原因分析" target="_blank">SEMI-JOIN执行计划突然变成HASH JOIN了 的原因分析</a>
                                    <span class="text-muted">cwqcwqmax9</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
                                    <div>甲说： 
A B两个表总数据量都很大，在百万以上。 
idx1  idx2字段表示是索引字段 
A B 两表上都有 
col1字段表示普通字段 
 
select xxx from A 
where A.idx1 between mmm and nnn 
     and exists (select 1 from B where B.idx2 =</div>
                                </li>
                                <li><a href="/article/2482.htm"
                                       title="SpringMVC-ajax返回值乱码解决方案" target="_blank">SpringMVC-ajax返回值乱码解决方案</a>
                                    <span class="text-muted">dashuaifu</span>
<a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a><a class="tag" taget="_blank" href="/search/response/1.htm">response</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81/1.htm">中文乱码</a>
                                    <div>  
SpringMVC-ajax返回值乱码解决方案 
  
一：（自己总结，测试过可行） 
ajax返回如果含有中文汉字，则使用：（如下例：） 
@RequestMapping(value="/xxx.do")       public @ResponseBody void getPunishReasonB</div>
                                </li>
                                <li><a href="/article/2609.htm"
                                       title="Linux系统中查看日志的常用命令" target="_blank">Linux系统中查看日志的常用命令</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/OS/1.htm">OS</a>
                                    <div>因为在日常的工作中，出问题的时候查看日志是每个管理员的习惯，作为初学者，为了以后的需要，我今天将下面这些查看命令共享给各位 
cat 
tail -f 
日 志 文 件 说 明 
/var/log/message 系统启动后的信息和错误日志，是Red Hat Linux中最常用的日志之一 
/var/log/secure 与安全相关的日志信息 
/var/log/maillog 与邮件相关的日志信</div>
                                </li>
                                <li><a href="/article/2736.htm"
                                       title="[应用结构]应用" target="_blank">[应用结构]应用</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a>
                                    <div>应用主体 
应用主体是管理 Yii 应用系统整体结构和生命周期的对象。 每个Yii应用系统只能包含一个应用主体，应用主体在 入口脚本中创建并能通过表达式 \Yii::$app 全局范围内访问。 
 
 补充: 当我们说"一个应用"，它可能是一个应用主体对象，也可能是一个应用系统，是根据上下文来决定[译：中文为避免歧义，Application翻译为应</div>
                                </li>
                                <li><a href="/article/2863.htm"
                                       title="assertThat用法" target="_blank">assertThat用法</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/assertThat/1.htm">assertThat</a>
                                    <div>junit4.0  assertThat用法 
一般匹配符1、assertThat( testedNumber, allOf( greaterThan(8), lessThan(16) ) ); 
注释： allOf匹配符表明如果接下来的所有条件必须都成立测试才通过，相当于“与”（&&） 
2、assertThat( testedNumber, anyOf( g</div>
                                </li>
                                <li><a href="/article/2990.htm"
                                       title="android点滴2" target="_blank">android点滴2</a>
                                    <span class="text-muted">gundumw100</span>
<a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8/1.htm">网络应用</a><a class="tag" taget="_blank" href="/search/OS/1.htm">OS</a><a class="tag" taget="_blank" href="/search/HTC/1.htm">HTC</a>
                                    <div>如何让Drawable绕着中心旋转？ 
 

Animation a = new RotateAnimation(0.0f, 360.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);
a.setRepeatCount(-1);
a.setDuration(1000);
 
 
如何控制Andro</div>
                                </li>
                                <li><a href="/article/3117.htm"
                                       title="超简洁的CSS下拉菜单" target="_blank">超简洁的CSS下拉菜单</a>
                                    <span class="text-muted">ini</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                                    <div>效果体验：http://hovertree.com/texiao/css/3.htmHTML文件： 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简洁的HTML+CSS下拉菜单-HoverTree</title></div>
                                </li>
                                <li><a href="/article/3244.htm"
                                       title="kafka consumer防止数据丢失" target="_blank">kafka consumer防止数据丢失</a>
                                    <span class="text-muted">kane_xie</span>
<a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a><a class="tag" taget="_blank" href="/search/offset+commit/1.htm">offset commit</a>
                                    <div>kafka最初是被LinkedIn设计用来处理log的分布式消息系统，因此它的着眼点不在数据的安全性（log偶尔丢几条无所谓），换句话说kafka并不能完全保证数据不丢失。 
  
尽管kafka官网声称能够保证at-least-once，但如果consumer进程数小于partition_num，这个结论不一定成立。 
  
考虑这样一个case，partiton_num=2</div>
                                </li>
                                <li><a href="/article/3371.htm"
                                       title="@Repository、@Service、@Controller 和 @Component" target="_blank">@Repository、@Service、@Controller 和 @Component</a>
                                    <span class="text-muted">mhtbbx</span>
<a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/prototype/1.htm">prototype</a>
                                    <div>@Repository、@Service、@Controller 和 @Component 将类标识为Bean 
Spring 自 2.0 版本开始，陆续引入了一些注解用于简化 Spring 的开发。@Repository注解便属于最先引入的一批，它用于将数据访问层 (DAO 层 ) 的类标识为 Spring Bean。具体只需将该注解标注在 DAO类上即可。同时，为了让 Spring 能够扫描类</div>
                                </li>
                                <li><a href="/article/3498.htm"
                                       title="java 多线程高并发读写控制 误区" target="_blank">java 多线程高并发读写控制 误区</a>
                                    <span class="text-muted">qifeifei</span>
<a class="tag" taget="_blank" href="/search/java+thread/1.htm">java thread</a>
                                    <div>先看一下下面的错误代码，对写加了synchronized控制，保证了写的安全，但是问题在哪里呢？ 
public class testTh7 {
	private String data;
	public String read(){
		System.out.println(Thread.currentThread().getName() + "read data " </div>
                                </li>
                                <li><a href="/article/3625.htm"
                                       title="mongodb replica set(副本集)设置步骤" target="_blank">mongodb replica set(副本集)设置步骤</a>
                                    <span class="text-muted">tcrct</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
                                    <div>网上已经有一大堆的设置步骤的了，根据我遇到的问题，整理一下，如下： 
 
首先先去下载一个mongodb最新版，目前最新版应该是2.6 
 

cd /usr/local/bin
wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.6.0.tgz
tar -zxvf  mongodb-linux-x86_64-2.6.0.t</div>
                                </li>
                                <li><a href="/article/3752.htm"
                                       title="rust学习笔记" target="_blank">rust学习笔记</a>
                                    <span class="text-muted">wudixiaotie</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">学习笔记</a>
                                    <div>1.rust里绑定变量是let，默认绑定了的变量是不可更改的，所以如果想让变量可变就要加上mut。 
let x = 1; let mut y = 2; 
2.match 相当于erlang中的case，但是case的每一项后都是分号，但是rust的match却是逗号。 
3.match 的每一项最后都要加逗号，但是最后一项不加也不会报错，所有结尾加逗号的用法都是类似。 
4.每个语句结尾都要加分</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html>