前端自用复习

复习

html

web标准

• 结构标准：用于对网页元素进行整理和分类,html
• 表现标准：用于设置网页元素的版式，颜色，大小，外观样式 css
• 行为标准：指网页模型的定义及交互 JAVAscript

理想状态我们的源码，html,css,Javascript

大致三种特点

• 结构：使内容更清晰，更有逻辑性
• 表现：用于修饰内容的样式
• 行为：内容的交互及操作效果

初学代码

• break
  打断、换行
• 段落标签
  文本常用，在一个段落会根据浏览器窗口自动换行
• 水平线标签

  ---

  ,可以将段落和段落隔开，使文档结构清晰，层次分明
• 文本格式化标签（熟记）
  • 粗体
  • 斜体
  • 加删除线
  • 加下划线
  • 后面的标签更有语义化
• 图像img重点
  • 语法中，src属性用于指定图像文件的路径和文件名，是img必须属性。
    • 标签属性
      • src
        • url
          • 图像的路径
      • alt
        • 文本
          • 图像不能显示时替换文本
      • title
        • 文本
          • 鼠标悬停时显示的内容
      • width
        • 像素
          • 设置图像宽度
      • height
        • 像素
          • 设置图像高度
      • border
        • 数字
          • 设置图像边框的宽度
• <标签名 属性1=“属性值1”>内容</标签名>
  • 标签可以拥有多个属性，必须写在开始标签中，位于标签名后
  • 属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
  • 任何标签属性都有默认值，省略该属性，则取的是默认值
• 链接标签（重点）
  • 需要锚点。href
    • href，用于指定链接目标的url地址
      • 用id锚点，跳过去
  • target
    • 用于指定链接页面的打开方式，其取值有self和_blank两种。
      • self默认值
      • _blank在新窗口打开方式
  • 内部链接
    • 直接链接内部页面名称：首页
  • 如果当时没有目标，通常将链接标签定义href="#"空链接
  • 还可以加入各种元素，图像，表格，音频，视频，都可以添加超链接

路径（重点，难点）

• 实际工作中，通常新建一个文件夹用于存放图像文件，这时插入图像，就需要采用路径方式来指定图像文件的位置
• 根目录里 当前目录
  • 路径分为相对路径，绝对路径
    • 以引用文件之网页所在位置为参考基础，而建立的目录路径
    • 当保存于不同目录的网页引用同一个文件时，所使用的路径不同，称为绝对路径

html标签语义化

• 1，方便代码阅读和维护
• 2，让浏览器爬虫或网络爬虫很好的解析
• 3.具有更好的搜索引擎优化

div+span标签

• 这两个盒子是没有语义化的，他是网页布局重要的两个盒子
  • div是division缩写。分割分区意思，一个网页有很多div来组成网页
• span跨度，跨距范围
  • div是块元素，span是行内元素

列表标签

• 特点，整洁有序，整齐
  • 无序列表ul
    • 无序列表各个表项之间没有顺序级别之分，是并列的
  • 有序列表ol
    • 有序列表，有序列排序的列表。各个列表项按照一定的顺序排列定义
      • 很少用
  • 自定义列表
    • 定义李彪常用于对术语或名词进行解释和描述

      • dt

table

• 表格是常用标签
  • table，tr、td是创建表格的基本标签
  • table用于定义一个表格
  • tr用于定义表格一行。必须嵌套table标签中
  • td用于定义表格中的单元格，必须嵌套于tr中。
    • td类似于容器，容纳所有元素
  • tbody表格体，后期会经常用
  • 表格属性
    • border
      • 设置表格的边框
    • cellspacing
      • 设置单元格与单元格边框之间空白边距
    • cellpadding
      • 设置单元格内容与单元格边框之间空白间距
    • widt
      • 设置表格宽度
    • height
      • 设置表格高度
    • align
      • 设置表格在网页中的水平对齐方式
        • left，right，center
    • 表头标签
      • 表头一般位于表格第一行第一列，其文本加粗居中
      • 直接用表头替换相应单元格标签
        • 语义化，重要作用
    • 表格标题
      • caption
        • 必紧随table标签之后，只能对每一个表格定义一个标题，通常这个标题会被居中于表格之上
    • 合并单元格（难点）
      • 跨行合并rowspan
      • 跨列合并colspan
    • 总结
      • 1，表格提供了html中定义表格数据的方法
      • 2，表格中由行中的单元格组成
      • 3，没有行元素，列的个数由行的单元格撑起
    • 表单标签
      • 在html中，一个完整的表单通常由表单控件，提示信息，表单域构成
      • 表单控件：包含具体的表单功能项，如：单行文本输入框，密码输入框，复选框，提交按钮，重置按钮
    • input控件
      • text
        • 单行文本输入框
      • password
        • 密码输入框
      • radio
        • 单选按钮
      • checkbox
        • 复选框
      • button
        • 普通按钮
      • submit
        • 提交按钮
      • reset
        • 重置按钮
      • image、
        • 图像形式的提交按钮
      • file
        • 文件域
      • 属性值
        • name
          • 由用户自定义控件的名称
        • value
          • 由用户自定义input控件的默认文本值
        • size
          • 正整数
            • 控件中的显示宽度
        • checked
          • checked
            • 定义选择控件默认被选中的项
        • maxleng
          • 正整数
            • 控件允许输入的最多字符数
      • 文件域
        • file
          • textarea
            • cols一行字符数
            • rows多少行
      • 下拉菜单
        • select选项配合option下拉选项
          • selectd：“selected”默认当前选项
      • form表单域 信息提交
        • action 收集的信息提交给哪个文件处理、
        • method
          • 传递信息的方法
            • get post

css

css选择器

• 后代选择器
  • xx xx
• 交集选择器
  • xx。xx
• 并集选择器
  • xx，xx，xx{}
• 相邻选择器
  • xx1+xx2，为了选xx2
    • 注意，xx1和xx2是并列关系，而且紧挨着

伪类选择器（内植类）

• 向某些选择器添加特殊效果
  • ：link 未访问效果
  • ：hover 鼠标悬停效果
  • ：visited 访问后的状态
  • ：active 激活的状态

块元素

• 特点
  • 块元素可以设置宽高，独占一行
  • 块元素不设置宽高，默认父元素宽度
  • 块元素不设宽度，默认为0，内容会撑开高度

行内元素

• 特点
  • 在一行内显示
  • 不能设置宽高
  • 行内元素默认宽高为0，内容撑开宽高
  • 代码换行生成缝隙

行内块元素

• img、input、textarea
• 特点
  • 1，在一行显示
  • 2，可以设置宽高
  • 3，代码换行生成缝隙
• 转换
  • 块转行内
    • display：inlline
      • 转完不能设宽高
  • 行内转块
    • display：block
  • 行内转行内块
    • display：inline-block

背景相关

• background-color:transparent 透明
• background-image:url()路径
• background-repeat:repeat 平铺 默认
  • -repeat-x 水平平铺
  • -repeat-y 垂直平铺
  • -repeat-no-repeat 不平铺
• -attachment:scroll 背景附着，随着滚动
  • ：fixed 固定，不随着内容滚动
    • 这时候参考浏览器位置
• 背景属性连写
  • 没有强制要求顺序
    • 颜色，图片地址，平铺，滚动，位置，不写取默认值

css的三大特性

• 具有层叠性，同属性权重相同时，后一个会覆盖前面一个
• 具有继承性，子标签会继承父标签一些属性（就近原则）
  • text- font- line- color 都可以继承
• 具有优先级权重
  • 通配符 0,0,0,0,1
  • 标签 0,0,0,1
  • 类 0,0,1,0
  • id 0,1,0,0
  • 行内样式 1,0,0,0
  • ！important 无穷大∞

盒模型

• 内容区域：内边距，外边距，边框组成
• 边框
  • border-xx线型为必写项
    • solid实线
    • dotted点线
    • dashed虚线
    • double双实线
• 如果块元素没设置宽度，给它设左右padding不会撑宽盒子。如果设了宽度，给它设左右padding必然撑宽盒子
• margin：0 auto 只对块元素有用
• text-align:center 可以使块元素里面的内容，文字，行内，行内块居中
• overflow:hidden 可以触发块级格式化上下文BFC
• 盒子宽=左右边框粗细+左右内边距+width
• 盒子高=上下边框粗细+上下文内边距+height
• 边框圆角
  • border-radius=50px
    • 正圆的做法：
      • 1，必须是正方形
      • border-radius=50%
• 盒子阴影css3
  • box-shadow 0 0 0 0，#333
    • 水平偏移量，正值向下，负值向上，垂直偏移量，阴影模糊范围，阴影大小，阴影颜色
  • 盒子里面的阴影，内阴影
    • boxx-shadow:inset 0 0 0 0 green;
  • 多组阴影之间用逗号隔开
    • box-shadow:xxxx，inset xxxxxx
• 整体透明设
  • opacity：0.5
• css布局
  • 普通流，浮动，定位
    • 标准流
      • 在页面元素自上而下，自左而右，块独占一行，行内元素在一行显示，直到碰父元素边界换行
    • 浮动
      • 设置飘在普通流上面，脱离标准流
  • 特点
    • 1，脱离标准流的控制，不占据原来的位置
    • 2，让块元素一行显示
    • 3.只能浮动父元素左边和右边
    • 4，受到父元素padding值得约束
    • 5，浮动元素顶部对齐
    • 6，只能影响下面的元素，不会影响上边的标准流块元素
    • 7，有了行内块的显示特点：块浮动后不设宽，不会默认父元素宽度，宽度为0。内容会撑开宽高
    • 8,，行内元素浮动后可以设置宽高
• 当文字，行内，行内块遇到浮动元素，不会跑下面，而是环绕浮动元素
• 定位
  • position
    • 默认静态定位static，不定位，标准流
    • 相对定位 relative 位置+偏移
      • 1，相对定位，元素不脱标。还在原来位置
      • 2，位置偏移永远基于自身位置
    • 绝对定位：absolut
      • 1,完全脱标，不占位置
      • 2，如果父元素没有使用定位，位置基于浏览器
      • 3，位置偏移基于离他最近的使用了定位的父元素位置偏移
      • 4，有了行内块的特点
      • 口诀，子绝父相
    • 固定定位
      • position：fixed
        • 1，完全脱标
        • 2，只认浏览器可视窗口（跟父元素没关系，不随滚动条）
        • 3，有了行内块特点，固定的块元素不设宽度，默认父元素宽度，默认高为0，内容撑开高
        • 4，行内元素可以设宽高了
    • 绝对定位会随着滚动条滚动，固定定位不会随着滚动条滚动
    • margin:0 auto
      • 只能使标准流块元素水平居中
    • 非主流居中方法
      • l0+r0+t0+b0+margin:auto
        • 该技巧，子元素必须设置了宽高
• 元素的显示与隐藏
  • visibility:
    • 默认visible
    • hidden
      • 对象隐藏
      • 隐藏后，占位置
      • display：none不保留位置
  • overflow 溢出 内容溢出的处理
    • visible 默认
    • hidden 溢出隐藏
    • scroll 不管内容是否溢出。都生成滚动条
    • auto 内容溢出生成滚动条，不溢出不生成滚动条
• css 用户界面样式
  • 鼠标样式 cursor
    • 默认 default 小白
    • pointer 小手样式
    • move 移动
    • text 文本
    • not-allowed 禁止的样式
    • help 帮助 小白下面多了个问号
    • resize：none 禁止文本域拖拽
• 单文本的省略号三部曲（必须同时出现）
  • white-space: nowrap 强制一行显示
  • overflow：hidden 溢出隐藏
  • text-overflow：clip/ellipsis 默认值/溢出省略号
• 控制行为，行内块，文字垂直对齐
  • vertical-align:
    • baseline 基线对齐默认
    • top 和文字顶对齐
    • middle 和文字居中对齐
    • bottom 底线对齐
    • 清除图片底部缝隙 转块元素也可以 display ：block

结构伪类选择器c3

• 快速选择父元素的子元素
  • .father:first-child{}
    • 父元素第一个子元素
  • ：last-chilid{}
    • 父元素最后一个子元素
  • nth-child（x）{}
    • 父元素第x个子元素
  • nth-last-child（x）{}
    • 父元素倒数第N个子元素
  • nth-of-type（x）{}
    • 同类型的第N个

占位符

• placeholder
  • 输入文字时就消失了，删除文字显示出来

字体图标

• 可改变大小，改变颜色
• iconfont
• 1,下载字体图标，复制字体文件夹（fonts）
• 2，找到说明文件
• 3，按说明文件复制到css（注意路径）
• 4，定义类名，使用字体图标

移动web

2D

• 重点居中方案
  • direction方向
• 移动translate
  • transition：all 0.3s
    • 过渡
  • 类似于定位写法
  • 定位：脱标，会影响下面盒子布局，行内元素转块元素
  • 移动：对行内元素不生效，不脱标不会转块
• 旋转 rotate
  • transform：rotate（45deg）正值顺时针
    • 默认中心点旋转
• 伪元素
  • ：：before
    • .p：hover：：before{}
  • 伪元素：行内元素
    • content属性必须写
    • 只能用双标签，单标签不能用
    • 变化：基于45deg基础进行变化
• 缩放 scale
  • transform：scale（2,3）
  • 特点：不会影响其他盒子位置，可以使下面的文字，子元素，css属性值都跟着缩放

动画

• 动画定义
  • animation
• 动画序列
  • 时间节点
    • 0% 50% 100%
• 动画属性语法
  • @keyframes 规定动画
  • animation-name
    • 规定动画名称
  • -duration
    • 执行时间
  • timing-function
    • 速度曲线
  • -delay
    • 规定何时开始
  • -iteration-count
    • 播放次数，默认1，还有infinte
  • -direction
    • 是否下一期逆时播放
      • normal，alternate
  • -play-state
    • 是否正在运行或暂停
      • runing、pause
  • -fill-mode
    • 结束后的状态，保持forwards
      • 回到起始backwards
  • linear匀速
    • ease 慢快慢
      • ease-in慢快
        • ease-out快-慢
          • ease-in-out慢快慢
  • 名称，时间，匀速，播放次数，播放方向，停留100%
• 分帧图
  • animation-timing-function：steps（n）
    • n分成几小部分完成

3d

• 新特性兼容问题
  • -moz-
  • -ms-
  • -webkit-
  • -o-
• 视距
  • perspective
    • 透视的
      • 一般加在body上。统一body视角，去管理下面的子元素
    • 值越小，变化越剧烈
• 3D转化
  • translate3d
    • 多出来一条轴 Z轴
    • translate3d（xyz）

图片

• background-size
  • 图片会按照自己的分辨率显示
  • ：cover 覆盖绝对不留白
  • ：contain 包含，绝对要显示全我的图片

flex布局

• 特点：
  • 比传统操作快捷
• 弹性布局、伸缩布局、伸缩盒布局、弹性盒布局
• 重点属性
  • 确认主轴方向
    • flex-direction:
      • row
        • 默认：从左到右
      • row-reverse
        • 从右到左
      • column
        • 从上到下
      • column-reverse
        • 从下到上
  • align-items
    • 控制子元素在侧轴上的排序方式
      • flex-start
      • flex-end
  • 三个主属性要记熟悉
    • flex：1 display=flex flex-direction：column align-items：center
• 线性渐变
  • background：-webkit-linear-gradient（30deg，red，blue）

Rem布局

• Rem局限性：em必须找父亲字体大小
• 1rem的值=html的字体大小
  • 原来使用的px替换成Rem单位
• 特点
  • 1rem背后（html字体大小）变化，整个Rem单位都会变化
• 媒体查询
  • 响应屏幕的变化，获得不同的样式
  • @media（关键字，媒体查询的开头）
  • 具体的就不写了

js

javascript

• 执行代码使用
  • 交互效果
• 由ECMAscript定义了js语法规范，描述了语言基本写法，数据类型
• BOM浏览器对象模型，操作浏览器功能的API，通过bom操作窗口，比如弹窗跳转，获取分辨率
• DOM文档对象模型，操作页面元素的API，Dom可以把HTML看做是文档树，通过dom提供
• js=ECMAscript+dom+bom

书写位置

• 内联式
  • 在html页面内部设置
• 外链式（推荐）
  • 新建js文件，通过script标签引用当前页面中
  • 注意：不要把代码写到外链式标签中，一个网页可以同时调用多个外部js文件
• 行内式写法（不推荐）
  • 把js代码写到标签内部

js输入消息方式

• alert（）
  • 弹出框
• document.write（）
  • 在网页中输出消息
• prompt（）
  • 接收用户输入的【输入框】
• confirm（）
  • 确认框
• console.log（）
  • 在控制台输出消息

变量（重点）

• 变量指的是程序中保存数据的一个容器
• 变量是计算内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
• 定义变量（var 变量名） 声明变量
  • 赋值（变量名：值；var 变量=数据）
    • 总结：一个变量一次只能保存一个值，最后一次的赋值结果
    • 变量区分大小写
• 命名规范
  • 由字母（A-Za-z），数字0-9，下划线，美元$组成
  • 不能以数字开头，或者定义中文汉字为变量名
  • 不能是关键字保留字代码符号
    • 例如：var，for，while，&，class
  • 不能出现空格，
  • 变量名必须有意义，遵守驼峰命名法，首字母小写，后面单词首字母要大写
• 类型检测
  • typeof
    • 最终结果为数据对应的类型名称，名称为字符串形式
• 数据类型转换操作
  • 字符串
    • tostring（）
    • string（）
    • 隐式转换+‘ ’
  • 数值强制转
    • Nummber（）
    • parseInt（）
    • parseFloat（）
    • 隐式±正负号 四则运算
  • 布尔类型转换
    • Boolean（）
      • false结果有以下几个
        • NaN
        • 0
        • null
        • undefined
        • false
        • “ ”
        • 别的都是true
• 操作符，运算符，在js总进行各自运算
  • 数字相加，字符串相连
  • abc+123有隐式转换过程
    • 结果就是两个字符串相连
  • 自增自减 ++ –
    • a++ 参与运算时，会先用原来的值先运算再自增
    • ++a 参与运算时，会先在原来的基础上自增，再使用新的值参与运算
  • 比较运算符
    • < >= <= == === !==
  • 逻辑操作符，用于连接多个条件
    • &&逻辑与
      • 用于需要多个条件成立
        • 两边结果都是true，最终结果才是true
    • ||逻辑或
      • 两边结果有一个是true，最终结果就是ture
    • ！逻辑非
      • 取反。颠倒是非
  • 赋值操作符
    • =
      • 把右边的结果赋（存储）给左边变量之类的容器
    • +=
      • 简写
  • 操作符优先级
    • 1，[] ()
    • 2,++ – ！
    • 3， * / %
    • 4，+ -
    • 5，> >= < <=
    • 6,== != === !==
    • 7,&&
    • 8,||
    • 9,= += -= *= /= %=
    • 大致记住
      • 括号先算，其次算算术，再次算比较，然后算逻辑，最后赋值

流程控制

• 表达式
  • 在js代码中，只要可以产生一个结果，都可以称为一个表达式
• 语句
  • 可以理解为一个行为，一般在行为与行为之间都会用；分号隔开
  • 简而言之，一个程序可以由多个语句组成，一个语句可以由多个表达式组成
• 顺序结构
  • 从上到下执行的代码就是顺序结构
    • 默认从上到下
• 分支结构
  • 根据不同情况，执行对应代码，其作用就是用来判断的
    • if…else，如果…也…
    • 三种写法
      • if
        • 单个if解决一个分支的判断问题，当条件表达式结果为true时，执行代码
      • if…else
        • 解决两个分支的判断问题
      • if… else if
• 循环结构
  • 重复做一件事，其作用就是用来重复执行代码的
    • for循环语句
      • for（循环变量声明，循环条件，循环呈递增递减）{循环的主体代码}
      • 顺序执行，1声明变量，2，检测循环条件 3，循环体代码，4，循环变量增减 直到结束
• switch语句 （打碎）
  • if语句适合用于范围的检测
  • switch适合单个值（因为默认是全等的）比较严谨

数组

• 一个数据，我们使用变量存储就够了，但有时，数据会有多个。我们就用数组
• 什么是数组
  • 数组是一个有顺序，有长度的数据集合
• 数组存值
  • 数组中的数据使用索引管理，索引就是序号，只不过数组中的数据从0索引开始
• 数组取值
  • 把数据存在数组里，是为了以后能使用，所以要把里面的数据取出来，利用索引
  • 例子
    • var a=arr[0]+arr[1]+arr[2]+arr[3]+arr[4]
    • log（a）
• 数组的长度属性
  • length
  • length 的值为数值类型，表示数组中的元素个数
  • 设置length，如果希望清空，可以设置length为0
    • empty 空
• 数组的索引
  • 数组的元素按索引排列，从0开始，自动递增
  • 可以根据索引操作数组中某个元素，可以获取，也可以设置
• 数组遍历
  • 正向遍历
    • for（var i=0;i<arr.length;i++）{log(arr[i])}
  • 反向遍历
    • for（var i=arr.length;i>=0;i–）{log(arr[i])}
• 给数组新增元素
  • 可以使用数组length为索引，添加新元素
    • arr【arr【4】.length】=200

基本类型和复杂类型学的区别

• 可存储数据的个数不同，基本只能一个，复杂类型可以存多个值
• 基本类型在内存单元中存储的是具体值
• 复杂类型在内存单元中存储值的地址

date

• js中，要获取系统当前日期和时间，需用到js中自带的Date对象
• var date=new Date
  • getFullYear（）
  • getHours（）
  • getMonth（）+1
  • getDate（）
  • getMinutes（）
  • getDay（）
  • getSeconnds（）

Math

• 在js中，也提供了随机数和取整等功能

预解析

• 变量提升
  • 找到当前作用域变量部分，将声明var提升到作用域顶端
• 函数提升
  • 找到作用域中（函数声明语句）将函数体提升到作用域顶端，都可以调用

arguments

• 伪数组
  • 形参，实参个数不对应时使用
• 表示函数本次调用的实参
• 类数组
  • 具有索引和长度，但不具有数组的特殊功能

函数

• 回调函数
  • 函数作参数用
• 递归函数
  • 在函数内部调用自身
  • 参数
    • 形参
      • 用来占位置，没有默认值
    • 实参
      • 用来给形参赋值
    • 返回值
      • 指函数的结果
    • return
      • 结束函数执行
      • 注意，break是for循环中使用
• 匿名函数
  • 一般用变量存储匿名函数
• 自调用函数
  • 立刻执行函数
• 测试函数类型
  • type of fun
• 函数存给对象叫方法，不存还是函数

对象

• 对象也是复杂数据类型
  • 一个或多个属性组成
  • 属性：属性名+属性值
• 对象中，可以设置匿名，命名函数，注意，不要括号
• 对象遍历，属性名是无序的，所以对象是无序的数据存储
• 在js中，万物皆对象，字符串，数组，数值，函数
  • 常用的内置对象及方法
    • Array数组对象
      • unshift（）
        • 数组开头增加
      • shift（）
        • 数组开头删除一项
      • push（）
        • 数组末尾增加
      • pop（）
        • 数组末尾删除一项
      • concat（）
        • 数组的拼接
      • splice（）
        • 数组增查改删
      • slice（n,m）
        • 截取
      • reverse（）
        • 数组翻转
      • sort（）
        • 数组排序
      • tostring（）
        • 数组转字符串
      • join（）
        • 拼接
      • indexOf（查找内容）
        • 查找
      • forEach（）
        • 遍历
    • string字符串内置方法
      • charAT（index）
        • 通过索引找字符
      • charCodeAT（index）
        • 通过索引找到字符的unicode编码
      • indexOf（）
        • 从前往后找，找到返回内容的索引，找不到返回-1
      • lastIndexOf（）
        • 从后往前找
      • slice（n，m）
        • 从索引n查找到m，但不包括m，slice可以取负值
      • substring（n，m）
        • 从n-m 不可以取负值
      • substr（n，m）
        • 从n开始截取m个
      • split（切割形式）
        • 把1个字符，分割成字符串数组
      • toUpperCase（）
        • 转大写字母
      • toLowerCase（）
        • 转小写字母
    • Math内置方法
      • Math.floor（）
        • 向下取整
      • Math.ceil（）
        • 向上取整
      • Math.random（）
        • 取0-1之间随机小数
      • Math.round（）
        • 四舍五入
      • Math.abs（）
        • 取绝对值
      • Math.pow（x，y）
        • x的y次幂
      • Math.max（）
        • 取最大值
      • Math.min（）
        • 取最小值
    • Date日期对象内置方法
      • new Date（）
        • 创建一个日期对象
      • var date=new Date
        • getFullYear（）
        • getHours（）
        • getMonth（）+1
        • getDate（）
        • getMinutes（）
        • getDay（）
        • getSeconnds（）
• 对象属删除
  • 格式delete.对象，属性名
    • delete obj.name
    • delete.obj.age
    • delete.obj.gender
• 多个对象的创建操作（构造函数）
  • 调用构造函数时，必须加new
  • new的作用★
    • 在内存中创建一个新的空对象
    • 让this指向这个新对象
    • 执行构造函数里面的内容，给这个新对象添加属性和方法
    • 返回这个新对象
• 对象类型的检测相关操作
  • typeof
    • 只能用于null除外的基本类型检测
      • 一般用===检测
  • instanceof格式
    • 数据instanceof构造函数
      • 返回值，布尔类型
  • constructor（常用）数据.constructor
    • 返回值，可以获取当前创建的构造函数
  • obj.prototype.tostring.call（数据）
    • 作用，可以获取任意数组的类型名称
      • 返回值，【object首字母大写的类型名称】

根据数据创建结构

• 在字符串中，进行数据拼接方式，书写2个引号，两个++，将数据放入
• 如果要生成复杂结构，在每行字符串最后设置一个\去除换行符功能即可

复杂类型的比较操作

• 对复杂类型进行比较时，其比较内存单元的值，因为保存的是地址，比较的也是地址
• 两个复杂类型长得一样，比较结果也是false
• 必须两个复杂类型是同一个值，才能返回true

Dom

Dom文档对象模型

• 大白话，就是别人封装好的操作html的方法，调用即可
• 作用：修改网页的内容，样式，结构，相应用户对网页的操作
• 用法，函数调用的方式，如。getElementById（‘#id’）

Dom树

• 描述：当创建了一个网页并把它加载到web浏览器中时，Dom就悄然发生了，它把你编写的网页文档转化为一个文档对象，Dom树只是多种文档结构的一种普遍方式
• 作用：树结构清晰，方便浏览器存储。把html内容都转化为对象。方便js结构从操作
• 组成：文档，一个页面就是一个文档，Dom中使用document表示
• 元素：页面所有标签都是元素，Dom中用element表示
• 节点
  • 网页中，所有内容都是节点（标签，属性，文本，注释）
  • Dom中用node表示，文档元素，节点都被看成是对象
• Dom的Api分类
  • 获取元素，操作元素属性，时间，操作节点

获取元素

• 操作页面元素的步骤
  • 1，获取需要操作的元素
  • 2，操作元素属性
• 通过id获取元素
  • document.getElementById(’#id’)
  • 参数：类型 字符串 值：id属性值
  • 返回：类型：对象
  • 值：具有该id属性值的元素
• 通过标签名获取元素
  • element.getElementsByTageName(“标签名”)
• 通过类名获取元素
  • element.getelementsByClassName（‘类名’）
  • 这里的元素有多个，所以elements
• 获取body元素
  • document.body
  • 返回：类型：对象 值：body元素

事件

• 官方描述：触发—响应的过程
• 大白话
  • 当用户某个页面元素进行某种操作，网页能做出相应的回应
• 事件三要素
  • 事件源
    • 谁，具体的哪个元素
  • 事件类型
    • 监控用户对这个元素的某种操作
  • 事件执行程序
    • 一旦用户对该元素有监控的行为，要干什么
• 注册事件
  • 步骤
    • 获取具体的某个元素对象
      • 绑定某个类型的事件
        • 添加事件处理程序
• 语法
  • 事件源
    • on+事件事件类型=函数名/匿名函数
• 事件处理程序中的this
  • 代表事件源（就是绑定事件的元素）
• 事件类型
  • click 点击
    • input获得焦点 focus
      • input失去焦点blur

操作元素标准属性

• 步骤
  • 1，获取需要操作的元素
  • 2，操作元素的属性
  • 标准属性：元素自带的属性（可读可写）
  • 获取语法
    • element.属性名
  • 设置语法
    • element.属性名：属性值

操作元素内容

• 普通元素内容设置
• element.innerHTML=‘内容’
  • 识别标签，空格，经常使用
• element.innerText=‘内容’
• 表单元素
  • element.value=‘内容’

操作元素样式

• style属性
  • 修改行内样式，优先级高
• element.style=‘css属性名：属性值’
• element.style.css属性名=‘属性值’
  • 设置单个样式
  • 注意用驼峰
• element.className=‘类名1类名2类名3’
  • 设置多个样式，会刷新元素的class属性
• 设置多个样式
  • element.classList
• 添加类
  • element.classList.add（‘类名1’，‘类名2’）
• 移除类
  • element.classList.remove（）
• 切换类
  • element.classList.toggle（‘类名1’）
  • 如果元素有该属性，则删除，没有则添加

操作元素常用属性

• element.src=‘值’
  • 路径
• element.disabled=true/false
  • 鼠标禁用
• element.checked=true/false
  • 复选框
• 作用域
  • 一般多个函数要调用，则放外面或全局作用域

jquery

jquery是一个快速简洁的javascript库

是一个封装好的特定集合（方法和函数）

• 学习jquery本质就是学习调用这些函数（方法）

优点

• 轻量级，几十kb，不会影响页面加载速度
  • 链式编程，隐式迭代，自动遍历
    • 简化了dom操作

jquery顶级对象$，就可以调用jquery方法

• jquery对象才能使用jquery方法
  • 原生dom对象则用原生js方法

jquery选择器

• $（‘选择器’）
  • 加引号

jquery筛选择器

• $(’:first’)
  • 第一个元素
• $（‘：last’）
  • 最后一个元素
• $（‘：eq（2）’）
  • 查找指定索引元素
• $（：odd）
  • 奇数
• $（‘：even’）
  • 偶数

jquery筛选方法

• $（“ li ”）.parent(’’)
  • 父级
• $（“ li ”）.children(’’)
  • 子级
• $（“li ”）.find(’’)
  • 后代
• $（“li ”）.sibling（‘’）
  • 兄弟
• $（“li ”）.prevAll(’’)
  • 前面所有的
• $（“li ”）.nextAll(’’)
  • 后面的所有的
• $（“li ”）.hasClass（‘’）
  • 判断是否具有某个类名
• $（“li ”）.eq（index）
  • 指定索引方法

jquery动画效果

• 显示隐藏
  • show
  • hide
  • toggle（speed，【easing】，[fn]）
  • 切换 速度，切换效果。回调函数
• 滑动效果
  • slideDown
    • 下滑
  • slideUp
    • 上滑
  • slideToggle
    • 切换
• 淡入淡出
  • fadeIn
    • 淡入
  • fadeOut
    • 淡出
  • fadeToggle
    • 切换
  • fadeTo（opacity必写）
• animate
  • 自定义动画
  • （params，【speed】，【easing】，【fn】）
• 动画队列及队列停止排队方法
  • stop（）
    • 写在效果前面，相当于停止上次的动画
• jquery属性操作
  • 设置或获取固有属性值prop（）
  • 所谓元素固有属性，就是元素本身自带的属性
  • 比如里面的href
  • 写单个就是获取，写双就是设置
    • prop（’ ’ ，’’）
• 设置或获取自定义属性值attr（）
  • attr（‘属性值’）
    • 类似原生getAttribute获取
  • attr（属性’，‘属性值’）
    • 类似原生setAttribute 设置

数据缓存data（）

• 当做变量存储
  • data（）方法可以在指定元素上存取数据，并不会改Dom元素结构，所有元素上不会显示，一旦刷新，全部移除
• 附加数据语法
  • data（‘name’，‘value’）
• 获取数据语法
  • data（‘name’）

jquery内容文本值（写法）

• html（）
  • innerHTML
• text（）设置元素的文本内容
  • innerText
• val（）
  • 获取表单的值
• parents获取祖先
  • find（）获取后代方法

jquery 元素操作

• each（）
  • 遍历匹配 每一个元素，主要用Dom处理，each每一个
  • $(‘div’).each(function(index,domEle){})
    • 里面的回调函数，有两个参数：index是每个元素的索引号，demEle是每个Dom元素对象，不是jquery对象
    • 所以，想使用jquery方法，需要转换$（domEle）
• 创建元素
  • 语法
    • $（’
    • ’）

• 添加元素
  • element.append（‘内容’）
    • 把内容放入匹配元素内容最后面。类似原生appendChild
  • element.prepend（‘内容’）
    • 把内容放入匹配元素最前面
  • element.after（‘内容’）
    • 把内容放目标元素后面
  • element.before（‘内容’）
    • 把内容放目标元素前面
  • 内部添加元素生成后他们是父子关系
  • 外部添加元素，他们是兄弟关系
• 删除元素
  • element.remove（）
    • 删除匹配的元素（本身）
• 删除元素内容
  • element.empty（）
    • 删除匹配的元素集合中的所有子节点
  • element.html（‘’）
    • 清空匹配的元素内容
  • empty（）和html（）作用等价，都可以删除元素内部内容，只不过html还可以设置内容

• jquery尺寸

  • width（） height（）
    • 只算宽高
  • innerwidth（）innerheight（）
    • 包含padding+width
  • outerWidth（），outerHeight（）
    • 包含padding+border+width
  • outerWidth（true），outerHeight（true）
    • 包含padding+boreder+margin+width
  • 以上参数为空，则是获取相应值，返回的是数字型，可以拿出来加减乘除
    • 如果参数为数字，则是修改相应值
    • 参数可以不必写单位

  jquery位置

  • offset（），position（），scrollTop（）
    • offset（）
      • 设置或获取元素偏移坐标，跟父级没关系
      • 该方法有两个属性，left，top
        • offset（）.top
          • 用于获取文档顶部距离
        • offset（）.left
          • 用于获取距离文档左侧距离
      • 可以设置元素的偏移
        • offset（{top：10，left：10}）
    • position（）获取元素偏移
      • 该方法用于返回被选元素相对于（带有定位的父级）偏移坐标，如果父级都没有定位，则以文档为准
      • 注意，该方法只能获取
    • scrolltop/left
      • 设置或获取元素被卷去的头部和左侧
      • 方法设置或返回被选元素被卷去的头部
      • 不跟参数是获取，参数为不带单位的数字，则是设置被卷去的头部

  jquery事件，注册

  • $（‘div’）.click（function（）{事件处理程序}）
  • 事件处理on（）绑定事件
    • on方法在匹配元素上绑定一个或多个事件的事件处理函数
    • 语法：element.on（events.【selector,fn】）
    • 优势
      • 可以绑定多个事件，多个处理时间处理程序
      • 可以事件委派操作：把原来加给子元素身上的事件绑定在父元素身上，就是事件委派给父元素
      • 执行同样事件，连写用空格
      • 动态创建的元素，click（）没办法绑定事件，on（）可以给动态生成的元素绑定事件
  • 事件处理off（）解绑事件
    • off方法可以移除通过on（）方法添加的事件处理程序
    • 如果有的事件只想触发一次，可以用on（）来绑定事件
  • 自动触发事件
    • trigger（）
      • 有些事件希望自动触发，比如轮播图，自动播放，可以利用定时器自动触发，不必鼠标点击触发

  js高级

  面向对象

  • 万物皆对象
    • 多人合作大项目
      • 三大特性
        • 封装性
        • 继承性
        • 多态性
      • 优缺点
        • 优点，易维护，可复用，可扩展，灵活性高
        • 缺点，性能没有面向过程高
    • 面向对象思维特点
      • 1，抽取对象的共有属性和方法（封装）成一个类（模板）
      • 2，对类进行实例化，获取类的对象

  面向过程

  • 以前学的都是面向过程，步骤一步一步实现，使用时依次调用
  • 优缺点
    • 性能比面向对象高，步骤联系紧密
    • 缺点，不好维护，不易多次使用和扩展

  ES6的类和对象

  • 类：抽象
    • 1，抽取，把对象属性和行为封装一个类
    • 2，对象进行实例化获取类的对象
  • 对象，具体
    • 对象：类中的具体某个实例（属性方法集合体）
    • 在js中，对象是一组无序的相关属性和方法集合，所有事物都是对象
  • 属性：事物的特征，在对象中用属性表示
  • 方法：事物的行为，在对象中用方法表示

  类，class

  • 在ES6新增了类的概念，可以使用class关键字声明一个类，之后这个类来实例化对象（构造函数实例化对象）
  • 类抽象了对象的公共部分，泛指某一大类
  • 创建类
    • class类名{}
      • 注意首字母大小写
      • 类要抽取公共属性方法定义一个类
      • 类就是构造函数的语法糖
    • 注意：类里方法不带function，直接写就可以了
    • 类里要有属性方法，想放到类里，就要用到consturctor构造器
  • 注意，方法和方法之间不能加逗号
    • 类中定义属性，调用方法都需要用到this
  • 类的继承extends
  • 类的本质
    • class本质还是function
    • 类的所有方法都定义在类的prototype属性上
    • 类创建的实例里面也有proto,指向类的prototype原型对象
    • ES5新的class写法只是看上去更清晰，更新对象编程的语法而已

  consturctor()

  • 类的构造函数（默认方法），用于传递参数，返回实例化对象，通过new命令生成对象实例化时，自动调用该方法
  • 注意，每一个类里都有构造函数，如果没有显示定义，类内部会自动创建一个consturctor（）
  • 构造函数
    • 记录是哪个构造函数创建出来的
      • 原型，原型对象都有一个constructor属性。它指回构造函数本身
  • constructor主要用于记录对象引用哪个构造函数

  this代表当前实例化对象，谁new代表谁

  总结：类有对象的公共属性和方法，用class创建，class里面包括consturctor和方法，我们把公共属性放到consturctor里面，把公共方法直接往后写即可，但是要注意，不能加逗号

  super关键字

  • 如果遇到子类父类都有的属性，直接调用父类方法即可
  • 当子类没有constructor时，可以随意用父类的，但如果子类也有，constructor会返回实例，this指向不同，不可以再用父类的东西
  • 注意，子类在构造函数中使用suer，必须放到this前面
    • （必须先调用父亲的构造方法，再使用子类构造方法）
  • 三个注意点
    • 1，在ES6没有变量提升，所以必须先定义类，才能通过类实例化对象
    • 2，类里面共有属性和方法一定要加上this使用
    • 3，类里面指向问题
      • constructor里面this是实例化对象。普通函数指向调用者，谁调用就是谁

  构造函数和原型

  • ES6全称ECMAscript6.0，但浏览器只实现ES6部分特性和功能
  • 在ES6之前，对象不是基于类创建的，而是用一种称为构造函数来定义对象和它们的特征
  • 构造函数是一种特殊函数，主要用来初始化对象，即为对象成员变量赋初始值，与new一起使用。我们可以把对象的公共属性和方法抽取出来，然后封装到这个函数里
  • 在js中，使用构造函数要注意
    • 1，构造函数用于创建某一类对象（首字母大写，规范）
    • 2，构造函数要和new一起使用才有意义
      • new在执行时，做了4件事情
        • 1，在内存中能够创建新对象
        • 2，让this指向这个新对象
        • 3，执行构造函数里面的代码，给这个新对象添加属性和方法
        • 4，返回这个新对象（所以构造函数不需要return）
  • 静态成员和实例成员
    • 静态成员
      • 在构造函数上添加的成员，称为静态成员，只能由构造函数本身访问
    • 实例成员
      • 在构造函数内部创建的对象成员称为实例成员。只能由实例化对象访问
  • 构造函数小问题
    • 当实例化对象时，属性好理解，属性名属性值，那么方法是函数，函数是复杂数据类型
    • 保存的时候，是保存地址，指向函数，而每创建一个对象，都会有一个函数，每个函数都要开辟一个新空间
    • 此时，浪费内存了，节省内存用原型方法放到构造函数里，如果多次实例化，会浪费内存
  • 构造函数原型prototype
    • 原型对象
      • 就是一个属性，构造函数的属性。这个属性是对象，我们称为prototype原型对象
    • 每一个构造函数都有prototyp属性
      • 作用：共享方法，节省内存
    • 总结，所有公共属性写到构造函数里面，所有方法写到原型对象中
      • 创建一个对象都可以自动跑到原型对象上找方法
      • 每一个对象都有一个属性，对象原型，执行原型对象
  • 对象原型proto统称原型
    • 作用：指向prototype
      • 注意，proto原型是一个非标准属性，不可以用来赋值和设置（只读属性）
    • 对象原型和原型对象是等价的
    • 对象原型意义在于为对象的查找机制提供一个方向或者说路线。它只是内部指向原型对象prototype
    • 总结，每一个对象都有一个原型，作用指向原型对象prototype
    • 对象原型意义在于为对象成员查找机制提供一个方向一条路线

  创建对象三种方式

  • 1，对象字面量
  • 2，new Object（）构造函数
  • 3，自定义构造函数

  原型链

  • 作用：提供一个成员查找机制，或查找规则

  js成员查找机制（规则）

  • 当访问一个对象的属性（包括方法）时，首先查找对象自身有没有这个属性。如果没有，就查找它的原型proto指向哪个。如果还没有，就查找原型对象的原型（Object的原型对象）以此类推，直到null为止

  扩展内置对象

  • 可以通过原型对象，对原来的内置对象进行扩展自定义方法
  • 比如：给数组增加自定义求偶数求和的功能

  继承

  • 通过构造函数+原型对象模拟实现继承，被称为组合继承
  • 方法的继承
    • 实现方法：把父类的实例对象保存给子类的原型对象
    • 总结，用构造函数实现属性继承，用原型对象实现方法继承
    • 1，将子类所共享的方法提取出来，让子类的prototype=new父类
    • 2，本质，子类原型对象等于实例化父类，因为父类实例化后，另外开辟空间，就不会影响原来父类原型对象
    • 3，将子类constructor有回去的路，指回构造函数

  ES5新增方法

  • 数组方法：迭代遍历方法
    • forEach（）
      • array.forEach(function(数组当前项的值，索引，本身))
    • filter（）
      • 筛选数组，直接返回一个新数组
    • some（）
      • 方法用于检查数组是否有满足指定条件
        • 注意，它返回巴布尔值
        • 找到返回true，找不到返回false
        • 如果找到第一个满足条件的元素，则终止循环，不再查找
    • forEach适合遍历拿下标，filter适合拿返回值，some想把数组某一个拿到，需另一个空数组装。指定某一个
      • 字符串方法str.trim()删除字符串两侧空白符

  函数进阶

  • 函数的定义和调用
    • 1，函数声明方式function关键字（命名函数）
    • 2，函数表达式（匿名函数）自调用函数
    • 3，new function() var fn=new function(‘参数一’，函数体) var fn=new function(‘a’,‘b’,‘console.log(a,b)’)
    • 4,Funcction里的参数必须是字符串格式
    • 5，第三种方式执行效率低，不方便书写，因此较少使用
    • 6，所有函数都是Function的实例（对象）
    • 7，函数也属于对象（万物皆对象）
  • 函数调用方式
    • 1，普通函数 fn（）
    • 2,对象方法 obj.taiji=function(){} （obj.taiji（））
    • 3，构造函数 function star（）{} new star（）
    • 4，绑定事件函数 btn.οnclick=function （）{} btn.onclick（）
    • 5，定时器函数 window。setInterval（function（）{}，1000）
    • 6，立刻执行函数，也就是自调用函数
      （function（）{}）（）
  • 改变函数内部指向，bind（），call（），apply（）
    • call（）方法调用一个对象，可以改变this指向
      • 返回值就是函数的返回值，因为它就是调用函数
    • bind（）方法不会调用函数，但能改变this指向
      • 返回由指定的this值和初始化参数改造的原函数拷贝，所以，如果只想改this指向，不想调用这个函数时，就用它
    • apply（）主要和数组有关，比如Math.max（）求数组最大值
  • 严格模式use.strict严格模式ie10以上支持
    • 严格模式对js语义做了更改
      • 1，消除了js语法不合理不严谨之处，减少了怪异行为
      • 2，消除代码运行的一些不安全之处，保证代码运行安全
      • 3，提高编码器效率增加运行速度
      • 4，禁用了在ECMA未来版本中可能会定义的一些语法

  高阶函数

  • 函数作为参数传递或作为返回值返回称为高阶函数
  • 闭包 变量作用域
    • 变量根据作用域的不同，分为两种，全局变量，局部变量
      • 1，函数内部可以使用全局变量
      • 2，函数外部不可以使用局部变量
      • 3，当函数执行完毕，本作用域的局部变量会销毁
    • 闭包的作用
      • 延伸变量的作用范围
    • 闭包closure指有权访问另一个函数作用域中变量的函数
      • 简单理解，一个作用域可以访问另一个函数内部的局部变量
  • 递归
    • 如果一个函数在内部可以调用自身，那么这个函数就是递归函数，自己调用自己
  • 深拷贝，浅拷贝
    • 深拷贝利用递归
    • 拷贝不能直接赋值，对象赋值的是地址
    • Es6新方法，object。assign（）
  • 正则表达式
    • 用于匹配字符串中字符组合的模式，在js中，正则也表达式也是对象
    • 作用：检索关键字，过滤敏感字符，表单验证。通常用来检索替换那些符合某个模式（规则）的文本
    • 例如，表单只能输入下划线，英文或数字…
    • 正则表达式特点
      • 1，灵活性，逻辑性，功能性都很强
      • 2，可以迅速用简单的方式达到字符串的复杂控制
      • 3，对于刚接触的人来说，难懂
      • 4，实际开发，一般直接复制，根据情况修改正则表达式
    • 创建正则表达式
      • 1，var regexp=new RegEXP（/123/）
      • 2，var rg =/123/ log （rg）
    • 测试正则表达式
      • test（）正则对象方法，用于检测字符串是否符合该规则，该对象会返回true或false，其参数是测试字符串
    • 注意，正则里面没有引号
    • 正则表达式的特殊字符，元字符
      • 边界符
        • ^代表匹配行首的文本，以。。。开始
        • $代表匹配行尾的文本，以。。。结束
        • 如果^$在一起，就是精确匹配
      • 字符类
        • 字符类表示有一系列字符可供选择，只要匹配其中之一即可，所有可供选择的字符都放方括号内[]
        • 方括号，表示有一系列字符可供选择，只要匹配其中之一即可
      • 取反
        • 方括号内部加上^表示取反，只要包含方括号内的字符，都返回false
      • 量词符
        • 用来设定某个模式出现的次数
        • • 重复0次或多次
        • • 重复1次或更多次
        • ？
          • 重复0次或1次
        • {n}
          • 重复n次
        • {n，}
          • 重复n次或更多次
        • {n，m}
          • 重复n-m次
      • 括号总结
        • 1，大括号
          • 量词符，里面表示重复次数
        • 2，中括号
          • 字符集合，匹配方括号任意字符
        • 3，小括号
          • 表示优先级
      • 预定义类
        • 指某些常见模式的简写方式
        • \d
          • 匹配0-9任意数字
            • 【0-9】
        • \D
          • 匹配0-9以外
            • 【^0-9】
        • \w
          • 匹配任意字母，数字，下划线
            • 【A-Za-z0-9】
        • \W
          • 除所有字母，数字，下划线，以外的字符
            • 【^A-Za-z0-9】
        • \s
          • 匹配空格（包括换行符，制表符，空格）
            • 【\t\r\n\v\f】
        • \S
          • 匹配非空格的字符
            • 【^\t\r\n\v\f】

  AJAX

  服务器想把自己的网页让其他人访问，就用到服务器

  作用

  • 服务器是非常重要的概念
    • 简单来说，服务器=硬件配置高的电脑+安装特殊软件
    • 安装的软件不同，提供的服务也不同

  客户端client

  • 连接到服务器，享受服务的设备就是客户端

  基本流程

  • 1，确认地址
    • 用户在浏览器（客户端）输入要访问的URL
  • 2，发送请求
    • 浏览器向服务器发送请求，request告知要访问
  • 3，获取响应
    • 服务端收到浏览器发送的请求，并返回（respanse）
  • 4，显示内容
    • 浏览器将服务的返回的结果显示界面上

  本地虚拟web服务器

  • 安装了服务器软件，，我们的电脑又是客户端又是服务端

  访问数据

  • 行话称为接口，get类型的接口，可以直接装在浏览器看效果

  ajax是前端实战开发基本武器

  • 好处
    • 1，局部更新，提升用户体验，提升性能
    • 2，分离开发，提高开发效率
    • ①后端提供接口，这个接口可以理解为一个函数，它的内部进行业务处理，数据库访问，并返回结果
    • ②前段调用接口获取数据，再把数据转化图文并茂网页

  Ajax

  • Asynchronous JavaScript And Xml
  • 异步的js和xml
    • 异步：表示不阻塞，浏览器在请求数据时，不会阻塞用户后续操作，理解为，派了个小弟去服务器拿数据
    • xml是一种数据格式，一开始从服务器拿数据是ml格式，后来被json取代
    • 更具体点，浏览器通过内置对象XMLhttprequest向服务器发起请求，并可以接收服务器返回给浏览器的数据
  • 是一种创建交互式网页应用的网页开发技术

  使用Jquery提供的Ajax功能

  • jquery不仅提供了DOM操作，还封装了Ajax函数，调用即可
  • 但有个大前提，我们要调用的接口功能都依赖服务器，一定要确认接口是否准备好了

  常见两种请求方式，get post

  • 不同点
    • get获取，得到
      • 这种方式请求用于服务器请求资源，它是最常见的请求方式，重点在于它只是请求，不会改服务器资源
    • post 派送，投递
      • 这种方式的请求用于向服务器提交数据，重点在于，它可能修改服务器资源
  • 相同点
    • 都可以在发送请求时，附带一些数据，例如，查名字占用，都能从服务器上获取返回的数据
  • 实际操作对比
    • get传数据直接显示在URL中
    • querystring parameters 查询字符串参数
    • post传递数据更安全
    • form Data表单（形式）数据

  XMLHttpRequest

  • jax的功能基于XMLHttpRequest对象实现的
  • 它是内置对象，充当构造器使用
  • 属性和方法
    • open（）
    • send（）
    • onload（function（））
    • responseText

  原生ajax带参数的get

  • get带参数的格式
    • 附加在请求的url地址后面
    • url？参数1=值1&参数二=值二
    • ？用来连接url和后面的get参数 &用来连接多个参数

  原生ajax中，get和post的区别

  • get：
    • 参数拼接在url（url？name=1&age=30）
    • 由于浏览器对url长度的支持有限，所以只能附少量数据
  • post
    • 要设置请求头
      • xhr.setRequestHeader…
    • 相对于get，没有传参大小限制
  • .get（）和.post（）其实就是$.ajax（）快捷方法

  浏览器中的小问题

  • onreadystatechange事件和readystate属性
    • onload是H5以后新增的，方便获取响应的事件，老的浏览器不支持
  • 在Html5之前，获取服务器返回内容，用的是onreadystatechange事件，这个事件实在xhr对象状态变化时被触发，而一次请求过程中，XMLHttpRequest对象的状态会发生多次改变，也就意味着该事件被多次触发

  Xhr对象的状态（5种）

  • UNSENT
    • XHR被创建，但尚未调用open（）方法
  • OPENED
    • open（）方法已经被调用，建立了连接
  • HEADERS_RECEIVED
    • send（）方法已经被调用，可以获取状态行和响应头
  • LOADING
    • 响应体下载中，responseText属性包含部分数据
  • DONE
    • 响应体下载完成，可以直接使用responseText
  • 一次正常的send（），xhr.readstatus的值变化是0->1->2->3->4
  • onlooad是一种快速方式

  FormData对象的使用

  • FormData是用来对表单数据进行处理的一种方式，还可以随意添加数据
  • 注意点：
    • 创建实例对象时，必须传入Dom对象形式的form标签
  • get（）获取formData中的某个数据，append（）可以添加自定义属性
  • 使用ajax发送时，必须设置2个属性：contentType：false；processData：false

  readystate是xhr的属性，用来表示ajax操作的状态

  • 0，初始化阶段
  • 1，建立了连接
  • 2，请求已发送
  • 3，下载中
  • 4，下载完毕（这个阶段才能使用响应的数据）

  注意点：

  • get请求的请求参数需手动拼在open（）的后面，并使用？连接
  • xhr.send是原生ajax异步操作
  • 在响应处理时，必须确保readystate属性的值是4才可以使用响应体数据
  • 原生js不会自动识别服务端相应的JSON格式数据。需要自己进行转换

  如何检测服务端响应的内容类型

  • 服务端的响应信息除了主要信息外，还有一些额外信息，称为Respnse Headers响应头
  • 获取响应头信息
    • xhr.getAllResponseHeaders（）
      • 所有
    • xhr.getResponseHeader（‘传入某个具体响应头名称’）
      • 某个；常用
  • 可以通过Content-Type判断是否是JSON类型，从而转换