接上篇 最全js个人总结 21-45

于 2020-04-06 11:00:56 发布
阅读量756 收藏 12
点赞数 3
分类专栏： 原生js js总结 文章标签： javascript jquery html5 css3 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41548835/article/details/105339993
版权

21,浏览器常见事件

浏览器弹窗事件

  • window.alert()

    • 提示框

  • window.prompt()

    • 输入框

  • window.confirm()

    • 确认框

浏览器事件

  • window.onload

    • 加载事件
    • 当页面内容完全加载完毕之后,执行定义的程序

  • window.onscroll

    • 滚动条事件
    • 当页面的滚动条发生滚动时,执行定义的程序

  • window.onresize

    • 视窗窗口大小改变事件
    • 当浏览器视窗窗口大小改变时,执行定义的程序

  • window.location

    • 浏览器地址栏

    • window.location.href = url地址

      • 设定跳转的页面
      • 在本窗口执行

  • window.navigator

    • 浏览器信息

  • window.history

    • 浏览器历史记录

  • window.open()

    • 新窗口打开事件

  • window.close()

    • 关闭当前窗口

鼠标事件

  • 标签对象.onclick

    • 鼠标左键单击事件

  • 标签对象.ondblclick

    • 鼠标左键双击事件

  • 标签对象.oncontextmenu

    • 鼠标右键事件

  • 标签对象.onmousedown

    • 鼠标按下事件

  • 标签对象.onmouseup

    • 鼠标抬起事件

  • 标签对象.onmousemove

    • 鼠标移动事件

  • 标签对象.onmouseover

    • 鼠标移入事件

  • 标签对象.onmouseout

    • 鼠标移出事件

  • 标签对象.onmouseenter

    • 鼠标移入事件

  • 标签对象.onmouseleave

    • 鼠标移出事件

键盘事件

  • 键盘事件只能给可以被选中的标签绑定,例如input,select,textarea,button,a,或者绑定给document或者window

  • 标签对象.onkeydown

    • 键盘按下
    • 按下时会一直触发

  • 标签对象.onkeyup

    • 键盘抬起

  • 多个按键事件

    • e.keyCode

      • 键盘按键对应的编号数值

    • e.ctrlKey

      • ctrl是否被按下

        • 结果是布尔类型

    • e.altKey

      • alt是否被按下

        • 结果是布尔类型

    • e.shiftKey

      • shift是否被按下

        • 结果是布尔类型

    • document.onkeydown = function(e){
      e = e || window.event;
      if( e.ctrlKey && e.shiftKey && e.keyCode == 86 ){
      console.log(‘我按了三个键’);
      }
      }

表单事件

  • onfocus

    • 标签获取焦点时触发
    • input,select,textarea,button,a 支持此事件

  • oninput

    • 标签输入内容时触发

  • onchange

    • 标签失去焦点,并且输入内容有改变时,触发

  • onsubmit

    • 事件必须绑定给form标签
    • 当表单提交时触发

触摸事件

  • 只有移动端支持

  • 标签对象.ontouchstart

    • 触摸开始

  • 标签对象.ontouchend

    • 触摸结束

  • 标签对象.ontouchmove

    • 触摸移动

特殊事件

  • 标签对象.ontransitionend

    • 当过渡结束时触发

  • 标签对象.onanimationend

    • 当动画结束时触发

22,浏览器属性

浏览器的宽度高度

  • 包含滚动条

    • 有没有文档类型声明,执行结果都相同
    • window.innerWidth
    • window.innerHeight

  • 不包含滚动条

    • 有文档类型声明,获取的是窗口大小,没有文档类型声明,获取的是,body也就是整个页面的大小(谷歌浏览器)
    • document.documentElement.clientHeight
    • document.documentElement.clientWidth

获取浏览器上卷的高度

  • 有文档类型声明

    • 实际上是获取HTML属性

    • document.documentElement.scrollTop

      • 上卷的高度

    • document.documentElement.scrollLeft

      • 左移的宽度

  • 没有文档类型声明

    • 实际上是获取body的属性

    • document.body.scrollTop

      • 上卷的高度

    • document.body.scrollLeft

      • 左移的宽度

  • 兼容方式

    • 逻辑或赋值方式

      • var height = document.documentElement.scrollTop || document.body.scrollTop;

23,标签属性操作

setAttribute()

  • 作用

    • 设定标签属性属性值
    • 设定的属性,只能通过getAttribute()方法来获取

  • 语法

    • 标签对象.setAttribute(‘参数1’ , ‘参数2’)

  • 参数

    • 参数1

      • 添加的属性

    • 参数2

      • 属性值

getAttribute()

  • 作用

    • 获取标签的属性以及属性值

  • 语法

    • 标签对象.getAttribute(‘参数’)

  • 参数

    • 需要获取的属性

removeAttribute()

  • 作用

    • 删除标签属性

  • 语法

    • 标签对象.removeAttribute(‘参数’)

  • 参数

    • 需要删除的属性

总结

  • 在标签对象中原生存在的属性,可以使用 点语法或者[]语法,直接操作标签对象获取,也可以用点语法和[]语法直接进行设定
  • 自定义属性,最好使用setAttribute()来设定,通过getAttribute()来获取

24,节点的操作

概念

  • 文档中的所有内容,都是节点,标签,文本,注释,属性等
  • 通过DOM操作和通过节点操作,获取到的对象,实际上是相同的对象

获取

  • 父级对象.childNodes

    • 获取父级对象中的所有子级节点
    • 执行结果是一个伪数组

  • 父级对象.children

    • 获取父级对象中的元素节点/标签节点
    • 执行结果是一个伪数组

  • 父级对象.firstChild

    • 获取父级对象中的第一个节点

  • 父级对象.lastChild

    • 获取父级对象中的最后一个节点

  • 父级对象.firstElementChild

    • 获取父级对象中的第一个元素节点

  • 父级对象.lastElementChild

    • 获取父级对象中的最后一个元素节点

  • 标签对象.previousSibling

    • 当前标签对象的上一个兄弟节点 (哥哥)

  • 标签对象.nextSibling

    • 当前标签对象的下一个兄弟节点 (弟弟)

  • 标签对象.previousElementSibling

    • 当前标签对象的上一个兄弟元素节点 (哥哥)

  • 标签对象.nextElementSibling

    • 当前标签对象的下一个兄弟元素节点 (弟弟)

  • 标签对象.parentNode

    • 获取标签对象的父级节点

  • 标签对象.attributes

    • 获取标签对象的所有属性
    • 执行结果是一个伪数组

类型,名称,内容

  • 节点类型

    • 标签对象/节点对象.nodeType

      • 返回值是一个数值
      • 元素节点,类型数值是1
      • 属性节点,类型数值是2
      • 文本节点,类型数值是3
      • 注释节点,类型数值是8

  • 节点名称

    • 标签对象/节点对象.nodeName

      • 元素节点,名称是标签名称
      • 属性节点,名称是属性名
      • 文本节点,名称是#text
      • 注释节点,名称是#comment

  • 节点内容

    • 标签对象/节点对象.nodeValue

      • 元素节点,内容是null
      • 属性节点,内容是属性值
      • 文本节点,内容是节点内容
      • 注释节点,内容是注释内容

设定节点

  • 创建

    • 创建一个标签节点/元素节点

      • document.createElement(‘你要创建的标签节点名称’)

    • 创建一个文本节点

      • document.createTextNode(‘你要创建的文本内容’)

    • 通过setAttribute()定义标签节点的属性,以及属性值

  • 将节点写入页面中

    • 在父级元素的末位添加节点

      • 标签对象.appendChild(‘添加的节点’)

    • 在父级中的某个标签之前,添加节点

      • 父级元素.insertBefore(你要添加的子级节点 , 你要添加在哪个节点之前)

  • 删除节点

    • 父级元素.removeChild(你要删除的子级节点)

  • 克隆节点

    • 标签节点/对象.cloneNode()

      • 只克隆标签本身

    • 标签节点/对象.cloneNode(true)

      • 克隆标签本身和标签子级内容

25,事件操作

1,事件的三个组成部分

  • 事件源

    • 绑定事件的标签对象

  • 事件类型

    • 绑定的是什么事件

  • 事件处理函数

    • 触发事件时执行的程序

2,事件对象

  • 是一个JavaScript自动定义的对象,这个对象中,存储与事件相关的数据信息

  • 获取事件对象

    • 标签对象.事件类型 = function(e){
      e = e || window.event
      }

  • e.type

    • 事件类型

3,鼠标点击的坐标

  • 事件源边框线内,左上角为坐标原点

    • offsetX
    • offsetY

  • 坐标原点是视窗窗口的左上角

    • clientX
    • clientY

  • 坐标原点是HTML文档的左上角

    • pageX
    • pageY

  • client和page的区别

    • 页面滚动时,两个数值有区别,如果页面没有移动,两个数值是相同的

4,鼠标点击的内容

  • 鼠标点击对象的信息,存储在target属性中

    • innerText

      • 点击标签的本文内容

    • tagName

      • 点击标签的标签名称
      • 标签名称是大写字符

    • id

      • id属性值

    • className

      • class属性值

5,事件的传播

  • 点击子级标签会触发父级标签上相同类型的事件

  • 获取机制

    • 冒泡机制

      • IE浏览器
      • 从子级开始获取事件类型,直到父级元素

    • 捕获机制

      • 非IE浏览器
      • 从父级开始获取时间类型,直到子级元素

  • 执行机制

    • 执行时,都是从子级开始执行程序

6,事件的阻止传播

  • function stopBubble(e){
    if(e.stopPropagation){
    // 普通浏览器
    e.stopPropagation();
    }else{
    // 低版本IE浏览器
    e.cancelBubble = true;
    }
    }

7,事件的委托

  • 通过给父级标签,添加事件,通过判断,来给子级标签定义不同的执行程序
  • 1,父级中,有多个需要添加相同类型的事件,但是事件处理函数不同
  • 2,动态生成的标签,使用事件委托方式更方便

8,事件的监听/事件的注册

  • 一个标签,相同的事件类型,默认只能绑定最后一个事件处理函数
  • 如果需要给有一个标签,相同的事件类型,添加多个时间处理函数,必须使用事件的监听语法
  • function myAddEvent( ele , type , fun){
    // 判断 addEventListener这个方法是否存在
    if(ele.addEventListener){
    // 普通浏览器
    ele.addEventListener(type , fun);
    }else{
    // 低版本IE浏览器
    ele.attachEvent(‘on’+type , fun);
    }
    }

9,事件的移除

  • 标签对象.removeEventListener(‘事件类型’ , 事件处理函数)

  • 只能移除绑定的是一个传参的函数名称

    • // 绑定事件 绑定的事件函数是fun
      oDiv.addEventListener(‘click’ , fun);

// 清除事件 清除的时间处理函数是fun
oDiv.removeEventListener(‘click’ , fun);
- function delFun(ele , type , fun){
if(ele.removeEventListener){
// 普通浏览器
ele.removeEventListener(type , fun);
}else{
// 低版本IE浏览器
ele.detachEvent( ‘on’ + type , fun);
}
}

10,阻止默认事件的执行

  • 方法1

    • e.preventDefault();
    • 普通浏览器

  • 方法2

    • e.returnValue = false;
    • 低版本IE浏览器

  • 方法3

    • return false;
    • 并不能阻止所有的执行

  • 兼容语法

    • if (e.preventDefault) {
      // 普通浏览器
      e.preventDefault();
      } else {
      低版本IE浏览器
      e.returnValue = false;
      }

26,ES6的基本语法

变量的定义

  • let

    • 定义变量
    • 不能重复声明定义相同的变量
    • 如果有{},只存在于{}中
    • 不会被预解释

  • const

    • 定义常量
    • 不能重复声明定义相同的常量,赋值之后,存储的数据不能被改变
    • 如果有{},值存在于{}中
    • 不会被预解释

箭头函数

  • var fun = () => {}

  • 只有表达式函数,可以写成箭头函数 function fun(){} 这样正常定义的函数不能写成箭头函数

  • 箭头函数不能被预解释

  • 箭头函数的this指向的是父级程序的this指向

  • 如果父级不是函数,没有this指向,箭头函数的this指向的是window

  • 箭头函数的this指向,不能被改变

  • 箭头函数没有arguments

  • 简写语法

    • 如果箭头函数只有一个参数,()可以不写
    • 如果箭头函数的执行体,只有一行代码,可以省略{}

改变this指向

  • call()方法

    • 函数.call(指向的对象 , 原始函数参数1,原始函数参数2…)

  • apply()方法

    • 函数.apply(指向的对象 , [原始函数参数1,原始函数参数2…])

  • bind()方法

    • 函数.bind(指向的对象)
    • 不会立即执行函数,而是生成一个新的,改变了this指向的函数
    • 只有this指向与原始函数不同,其他都完全相同

立即执行函数

  • 立即执行函数,不能被重复调用

  • 立即执行函数的this,指向window

  • 语法

    • (函数(){})()

    • !函数(){}()

    • ~函数(){}()

    • 函数的参数,在立即执行()中定义

      • function(str){
        console.log(str)
        }
      • (function(str){console.log(str)}) (‘北京’)

模板字符串

  • 字符串内容

  • 支持换行

  • 可以解析变量

    • 变量必须使用${‘变量’}包裹

解构语法

  • 数组的解构

    • var [变量1 , 变量2 , …] = [1,2,3…]

      • 将数组中的数值,依次赋值给[ ] 中的变量

    • var [变量1 , 变量2 , [变量3] …] = [ 1 , 2 , [ 3 , 4 , ] …]

      • 解构多维数组

    • 多维数组转化为一维数组

      • 使用 .toString() , 转化为以逗号间隔的字符串,再转化为数组

  • 对象的解构

    • var {变量1 , 变量2 …} = {属性1 , 属性2 }

      • 将对象中的属性存储的属性值,赋值给{}中的变量,这个变量必须是对象中存在的属性

    • var {变量1 : 别名 , 变量2 : 别名 …} = {属性1 , 属性2 }

      • 给变量添加别名

    • var {变量1 : { 属性2 : 别名 }} = {属性1 : {属性2 } }

      • 解构多维对象

展开运算符

  • …数组

    • 将数组的数值展开,一一使用

合并运算符

  • var fun = (…形参)=>{}
  • 将所有的实参,以数组的形式存储在形参中,作用于arguments相同

27,轮播图

运动函数

  • 以动画效果形式,实现标签的运动效果

  • 核心思想

    • 通过定时器,逐步完成需要的位移效果

  • 参数

    • 执行运动的标签对象

    • 需要执行运动的属性属性值

      • 对象形式
      • { left : 500 , top : 500 , opacity : 0 }

    • 当所有的运动都结束时,执行的程序

      • 参数形式

  • 在轮播图中,通过运动函数来实现图片的轮播

  • 步骤过程

    • 1,

      • 定义一个变量,来存储定时器

        • 对象类型

    • 2,

      • 循环遍历,第二个参数,对象中的每一个单元,生成一个对应的运动定时器

      • 1,获取标签的初始属性值

        • 当前循环的运动属性,对应的属性值

        • 添加一个判断

          • ,如果是透明度,要获取方式是获取浮点数,获取结果要乘以100
          • 如果不是透明度,获取整数部分

      • 2,定义定时器

        • 将定时器存储在对象变量中,对象中的单元属性是运动属性,数值是setInterval的执行结果(1,2,3…)

        • 1,定义步长

          • 目标数值 - 初始值 / 次数 (一般不超过10次)
          • 步长如果是正数,向上取整
          • 入股欧式负数,向下取整

        • 2,每次运动,改变的数值

          • 初始值 += 步长

        • 3,将新的初始值数据,赋值给标签对象

          • 添加判断

            • 如果是透明度, 初始值 / 100
            • 如果不是透明度,拼接 px 单位

        • 4,判断是否到达最终位置

          • 当前初始值 == 最终位置数值

          • 清除当前定时器

            • 清除当前移动属性对应的定时器
            • 删除对象变量中存储的对应的定时器单元

        • 5,判断对象变量,是否是一个空对象

          • 如果是空对象,证明所有的定时器都已经停止,执行运动停止时执行的函数,也就是参数3

轮播图

  • 定义html,css

  • JavaScript部分

    • 1,获取标签对象

    • 2,轮播图步骤

      • 1

        • 根据原始轮播图,定义焦点按钮

          • 循环遍历轮播图li单元

            • 1,生成一个li标签
            • 2,给li标签添加属性 num = i+1
            • 3,给第一个li添加样式
            • 4,将li写入页面ol中

      • 2

        • 复制原始轮播图中,第一个和最后一个li

          • 最后一个写入为ul中的第一个标签
          • 第一个写入为ul中的最后一个标签
          • 根据新的ul中li的单元个数,设定ul的宽度 li个数 * li宽度
          • 将ul向左移动一个li的宽度

      • 3

        • 自动轮播

          • 定义定时器,定时器中调用move运动函数

      • 4

        • 定义运动终止函数

          • 判断index的数值

            • 如果是新ul的长度-1,让index为1,根据新的index值,执行对ul的赋值定位操作
            • 如果是0,赋值index为新ul的length-2,根据新的index值,执行对ul的赋值定位操作

          • 焦点的样式改变

            • 循环遍历ol中的li,清除所有的样式
            • 给num 等于 index 的标签,添加样式

          • 给变量赋值为false

      • 5

        • 移入移出

          • 鼠标移入父级div,让自动轮播定时器停止
          • 鼠标移出父级div,再次执行自动轮播函数

      • 6

        • 左右切换

          • 给父级div添加点击事件,并且判断

            • 如果点击的是左链接

              • index–,根据新的index值,执行move函数

            • 如果点击的是右链接

              • index++,根据新的index值,执行move函数

      • 7

        • 焦点

          • 给ol添加点击事件,并且判断

            • 如果点击的是li标签

              • 获取li标签,num属性
              • 将index赋值为num
              • 根据新的index值,执行move函数

      • 8

        • 解决点击过快问题

          • 定义一个变量,存储数值为false

            • 给左右切换和焦点,添加判断

              • 如果变量是true,执行return,终止之后的程序执行
              • 给变量赋值为true

28,正则表达式

语法

  • 字面量

    • let reg = /正则表达式/;

  • 构造函数

    • let reg = new RegExp();

方法

  • test()

    • 是否符合正则规范

  • exec()

    • 捕获

规范

  • 元字符

    • \d

      • 数字

    • \D

      • 非数字

    • \w

      • 数字,字母,下划线

    • \W

      • 非数字,字母,下划线

    • \s

      • 空格

    • \S

      • 非空格

    • .

      • 换行

  • 边界符

    • ^

      • 起始

    • $

      • 结束

  • 限定符

      • 0 — 正无穷
      • 1 — 正无穷

    • ?

      • 0 — 1

    • {n}

      • n次

    • {n,}

      • n — 正无穷次

    • {n,m}

      • n — m 次

  • 特殊符号

    • \

      • 如果符合转义符规范,按照转义符执行,如果是正则规范,按照正则执行

    • |

      • 逻辑或

    • ()

      • 当做一个整体执行

    • [ ]

      • 表示是任意一个内容即可

      • a 至 b

    • [^]

      • 非内容

    • 写在表达式之外的

      • /表达式/i

        • 不区分大小写

      • /表达式/g

        • 全局验证

  • 相关函数

    • search()

      • ()中的参数可以是正则表达式

    • match()

      • 默认只查找符合规范的第一个内容
      • 如果 /表达式/g 查找全局

    • replace()

      • 默认只替换一次

      • 参数1,如果是/表达式/g,替换全局

      • 实际操作中,如果有变量参与

        • eval(),执行正则表达式变量

29,面向对象

概念

  • 面向对象是一种编程思想

    • 通过实例化对象,调用其中的方法和属性,实现项目功能

优点

  • 高内聚,低耦合

语法规范

  • 构造函数名称,首字符大写
  • 构造函数中不能定义return
  • 属性定义在构造函数中,方法定义在prototype中

工厂模式

  • function CreateObj(参数){
    this.属性1 = 属性值;
    this.属性2 = 参数;
    }
    CreateObj.prototype.fun = function(){
    console.log(this.属性1,this.属性2);
    }

30,ES6的构造函数语法

在ES6中,专门新增了一个关键词 class ,用于声明构造函数

class 构造函数名称 {

constructor(形参){
    this.属性1 = 参数;
}

实例化对象方法(){
    程序内容
}

}

const 实例化对象 = new 构造函数(实参);
实例化对象.方法();

31,PHP

基本概念

  • 是一门服务器端的弱类型的脚本语言

  • 作用

    • 实现服务器前端的数据操作

基本语法

  • 1,所有的PHP程序都必须定义在起始和结束标识符之间 <?php 程序内容 ?>
  • 2,如果结束标识符之后,没有其他程序,必须要忽略结束标识符
  • 3,php程序必须以 ; 分号 结束
  • 4,PHP程序严格区分大小写

变量

  • PHP中以 来 定 义 变 量 , 使 用 变 量 时 , 也 必 须 带 来定义变量,使用变量时,也必须带 来定义变量,使用变量时,也必须带符号
  • $int = 100;

数据类型

  • 原始数据类型

    • 标量类型

      • 布尔类型

      • 字符串类型

        • PHP中字符串中支持解析变量,必须是双引号才执行解析变量
        • 如果字符串中,没有需要解析的内容,使用单引号,效率更高
        • 为了防止变量与字符串冲突,变量必须使用 { } 包裹
        • echo “今天{$int}度”;

      • 整数类型

      • 浮点数类型

        • JavaScript中浮点数最多17位有效数值
        • php中14位有效数值

    • 复合类型

      • 数组

        • PHP中数组单元的属性,可以是字符串

        • $arr = [1,2,3,4,5];

          • 默认也是索引属性

        • $arr = [
          ‘name’=>‘张三’,
          ‘age’ =>18,
          ‘sex’ =>‘男’,
          ];

          • 定义关键属性

      • 对象

      • 函数

    • 特殊类型

      • null
      • 资源类型

  • 伪类型

    • 混合类型
    • 数值类型
    • 可回调类型
    • void类型

运算符

  • 字符串拼接运算符

    • PHP中是 . 点

分支结构语句

  • if…else if…else

    • else if 之间的空客,写不写都行

  • switch

    • PHP中,switch进行的是 == 等于比较
    • JavaScript中,switch进行的是 === 全等比较

循环结构语句

  • 没有for in 循环语句

  • foreache语句语法区别较大

    • 针对数组的循环遍历

    • foreach( 数组变量 as 自定义变量1 => 自定义变量2 ){
      循环体内容;
      }

      • 循环遍历数组中的所有单元,将单元的键名存储在自定义变量1中,将数据存储在自定义变量2中

    • foreach( 数组变量 as 自定义变量1 ){
      循环体内容;
      }

      • 如果只有一个自定义变量,存储的是数组单元的数据

PDO

  • PHP7.0版本以后提供的最新的操作数据库的API方法

  • 操作步骤

    • 1,定义配置参数,链接MySQL服务器

      • 参数

        • $dsn = ‘mysql:dbname=html1926;host=127.0.0.1;port=3306’;
        • $user = ‘root’;
        • $pwd = ‘root’;

      • p d o = n e w P D O ( pdo = new PDO( pdo=newPDO(dsn, u s e r , user, user,pwd);

        • 通过PHP中PDO构造函数,创建一个实例化的PDO对象,参数是之前定义的三个参数

    • 2,定义并且执行SQL语句

      • 执行SQL语句

        • 查询语句

          • $stmt = p d o − > q u e r y ( pdo->query( pdo−>query(sql);
          • 使用query()来执行,参数是定义的SQL语句
          • 执行结果是一个对象

        • 非查询语句
          (增,删,改语句)

          • 使用exec()来执行,参数是定义的SQL语句

          • 执行成功是影响的数据数量

            • 执行成功,有时影响数据数量也可以是0条

          • 执行失败是false

    • 3,获取执行结果,显示在页面中

      • fetchAll()

        • 获取执行结果集中的所有数据,组成新的数组,参数是PDO::FETCH_ASSOC,设定数组为关联数组
        • $arr = $stmt->fetchAll(PDO::FETCH_ASSOC)

      • fetch()

        • 获取执行结果集中的第一条数据,组成新的数组,参数是PDO::FETCH_ASSOC,设定数组为关联数组
        • $arr = $stmt->fetch(PDO::FETCH_ASSOC)

      • rowCount()

        • 获取查询结果集中的数据数量
        • $stmt->rowCount();

    • 注意

      • JavaScript中,对于对象的操作,是点符号,PHP中对于对象的操作,是->符号

32,数据库

数据库的基本概念

  • 存储数据的仓库

    • 以特定的电子形式，存储和输出数据的仓库

  • 分类

    • 网状型数据库

    • 层次型数据库

    • 关系型数据库

      • MySQL

    • 非关系型数据库

      • MongoDB

  • 基本语法

    • MySQL数据表存储引擎统一为InnoDB；
    • MySQL数据库、数据表的编码方式统一为UTF8；
    • SQL语句必须以分号结尾；
    • MySQL关键字与函数名称全部大写；
    • 数据库名称、表名称、字段名称等全部小写；

数据类型

  • 整数类型

    • M

      • 设定存储数值的位数

        • 实际项目中一般不定义

      • 实际项目时,没有任何作用,即时超出设定位数,没有超出数值范围,都可以存储

    • TINYINT(M)

      • 大小

        • 1个字节

      • 范围

        • -128 - 127(默认范围)
        • 0-255

    • SMALLINT(M)

      • 大小

        • 2个字节

      • 范围

        • -32768到32767
        • 0到65535

    • MEDIUMINT(M)

      • 大小

        • 3个字节

      • 范围

        • -8388608到8388607
        • 0到16777215

    • INT(M)

      • 大小

        • 4个字节

      • 范围

        • -2147483648到2147483647
        • 0到4294967295

    • BIGINT(M)

      • 大小

        • 0到4294967295

      • 范围

        • -9223372036854775808到9223372036854775807
        • 0到18446744073709551615

  • 浮点数类型

    • M,D

      • M

        • 整个数值的位数,包括整数部分和小数部分

      • D

        • 整个数值中,小数部分的位数

      • 整数部分的位数

        • M-D

    • FLOAT(M,D)

      • 单精度小数

      • 范围

        • -3.4e38至3.4e38
        • 最多7位小数

    • DOUBLE(M,D)

      • 双精度小数

      • 范围

        • -1.7e308至1.7e308
        • 最多15位小数

    • DECIMAL(M,D)

      • 定长浮点数

      • 范围

        • 65位数值
        • 最多30位小数

  • 字符串类型

    • M

      • 设定存储字符串的长度

    • CHAR(M)

      • 定长字符

      • 范围

        • 0至255个字符

    • VARCHAR(M)

      • 变长字符

      • 范围

        • 理论上最多存储65535个字符

    • TINYTEXT(M)

      • 范围

        • 255 个字符

    • TEXT(M)

      • 范围

        • 65535 个字符

    • MEDIUMTEXT(M)

      • 范围

        • 16777215 个字符

    • LONGTEXT(M)

      • 4294967295 个字符 或者 4G

  • 时间类型

    • YEAR()

      • 存储年份

      • 2

        • 两位年份

      • 4

        • 四位年份

    • TIME()

      • 存储时间
      • 格式：HH:MM:SS

    • DATE()

      • 存储年月日
      • 格式: YYYY-MM-DD

    • DATETIME()

      • 存储年月日,时分秒
      • 格式: YYYY-MM-DD HH:MM:SS

    • TIMESTAMP()

      • 自动获取并且存储当前时间

字段属性和约束

  • 属性

    • UNSIGNED

      • 非负

    • ZEROFILL

      • 补零
      • 添加ZEROFILL属性,会自动添加UNSIGNED属性

  • 约束

    • NOT NULL

      • 非空,输入数据不能为空

    • DEFAULT

      • 默认值

    • UNIQUE KEY

      • 唯一约束,不能输入重复数据

    • PRMARY KEY

      • 主键约束,一般都定义字段为id名称
      • 与 AUTO_INCREMENT 自增属性捆绑使用
      • 主键约束的字段,数据不能重复,不能为空

    • FOREIGN KEY

      • 外键约束,在联合查询中使用

数据查询语句

  • SELECT 字段,字段… FROM 表名

    • 查询指定字段的所有数据

  • SELECT 字段,字段… FROM 表名 WHERE 字段 约束条件

    • 查询指定字段的符合条件的数据

    • < >= <= <>不等于 AND 逻辑与 OR 逻辑或

  • SELECT 字段,字段… FROM 表名 WHERE 字段 约束条件 ORDER BY 字段1 排序方式 , 字段2 排序方式

    • 按照指定字段的排序方式显示查询结果

    • ASC

      • 升序,小—大,默认方式,可以不设定

    • DESC

      • 降序,大—小

  • SELECT 字段,字段… FROM 表名 WHERE 字段 约束条件 ORDER BY 字段1 排序方式 , 字段2 排序方式 LIMIT 起始数据索引 , 显示数据数量

    • 分页查询

数据的更新操作

  • UPDATE 表名 SET 字段 = 数据 , 字段 = 数据…;

    • 给指定字段的所有数据更新

  • UPDATE 表名 SET 字段 = 数据 , 字段 = 数据… WHERE 字段 约束条件;

    • 给指定字段中,符合条件的的数据更新

  • 注意:SQL语句中没有 += 等赋值运算符, 只能使用 age = age+1

数据的删除操作

  • DELETE

    • DELETE FROM 表名;

      • 删除表结构中的所有数据

    • DELETE FROM 表名 WHERE 字段 约束条件;

      • 删除表结构中的符合条件的数据

  • TRUNCATE

    • TRUNCATE TABLE 表名

      • 删除表结构中的所有数据

  • 区别

    • 1,DELETE保留id主键值,TRUNCATE不保留id主键值
    • 2,DELETE可以逐行删除,TRUNCATE只能删除所有
    • 3,DELETE支持回滚操作,TRUNCATE不支持
    • 4,DELETE支持触发器操作,TRUNCATE不支持

33,HTTP协议

概念

  • 发送请求和接收响应时,执行的协议

建立连接

  • 三次握手

    • 为了确认客户端和服务器都能正常的接收和发送信息

    • 第一次

      • 客户端发送给服务器

        • 客户端

          • 知道自己可以发送消息

        • 服务器

          • 知道客户端可以发送消息
          • 知道自己可以接收消息

    • 第二次

      • 服务器发送给客户端

        • 客户端

          • 知道自己能接收消息
          • 知道服务器可以发送消息
          • 知道服务器可以接收消息

        • 服务器

          • 知道自己可以发送消息

    • 第三次

      • 客户端发送给服务器

        • 服务器

          • 知道客户端可以接收消息

断开连接

  • 四次挥手

    • 第一次

      • 客户端发送给服务器

        • 告诉服务器,客户端要断开和你的连接了

    • 第二次

      • 服务器发送给客户端

        • 服务器知道客户端要断开连接了,我也要关闭我自己了

    • 第三次

      • 服务器发送给客户端

        • 服务器已经关闭了,不会再发送消息了,但是可以接收消息

    • 第四次

      • 客户端发送给服务器

        • 客户端知道服务器关闭了,知道服务器不发送消息了
        • 客户端告诉服务器,客户端也要关闭了,不再接收消息了,但是可能随时发送消息

发送请求

  • 请求报文

    • 请求行,请求头,请求空行,请求体

接收影响

  • 响应报文

    • 响应行,响应头,响应体

get请求和post请求的区别

  • get请求的特点

    • 参数会显示在地址栏中
    • 会被浏览器自动缓存
    • 请求内容的大小,受到浏览器地址栏存储信息长度的限制
    • get请求方式,多用于从服务器获取信息
    • 相对不安全

  • post请求的特点

    • 参数不会显示在地址栏中
    • 不会被浏览器缓存
    • 理论上参数大小不受限制,但是各个服务器,对post请求大小有限制
    • post请求方式,多用于向服务器发送信息
    • 相对安全

34,cookie和localStorage

cookie

  • 概念

    • 每个浏览器都有的一个独立的存储空间(一个文本文件)
    • 在相同域名下,可以使用同一个cookie,不用域名有不同的cookie

  • 作用

    • 存储数据信息,前端和后台都可以对cookie进行操作

  • 设定

    • php

      • 设定

        • setcookie()

          • 参数1

            • cookie的名称

          • 参数2

            • cookie的数值

          • 参数3

            • cookie的时效

              • time() + 时间(单位:秒)

        • 说明

          • 服务器时间和本地中国时区有-8的小时的时差,php的setcookie()函数,会根据本地时区,自动转化为服务器时间

      • 读取

        • $COOKIE

          • 在预定义变量中,存储所有的cookie,可以通过数组的方式,调用其中的某个cookie的数值

    • JavaScript

      • document.cookie

        • 来操作cookie

      • 设定

        • function mySetCookie(key, value, time) {
          let t = new Date();
          let t1 = t.getTime() - 8 * 60 * 60 * 1000 + time * 1000;
          t.setTime(t1);

    document.cookie = ${key}=${value};expires=${time ? t : ''};
    }
    - 三个参数,是cookie的名称,数据,和时效

      - 读取

  	- 将cookie字符串,转化为cookie对象
  	- function getCookie(cookieStr){

    const obj = {};
    let arr = cookieStr.split(’; ‘);
    arr.forEach(function(item){
    let newArr = item.split(’=’);
    obj[newArr[0]] = newArr[1];
    })
    return obj;
    }

  • 删除

    • cookie是没有删除操作的
    • 一旦cookie的时效过期,会自动删除
    • 时效以服务器时间为准

localStorage

  • 概念

    • 也是一个浏览器提供的本地存储空间
    • 只要是同一个浏览器,执行的程序都可以获取到localStorage存储的数据

  • 作用

    • 存储本地数据,所有的页面程序都可以调用

  • 相关操作

    • 设定

      • localStorage.setItem(‘设定的键名’ , ‘设定的数值’)

    • 获取

      • localStorage.getItem(‘获取的键名’)

    • 删除

      • localStorage.removeItem(‘获取的键名’)

    • 清除

      • localStorage.clear()

两者的区别

  • 1

    • cookie : 同源才能访问
    • localStorage: 所有的前端页面都可以访问

  • 2

    • cookie : 前端,后端都可以操作
    • localStorage: 只有前端可以操作

  • 3

    • cookie : 默认的有效时间是会话级别
    • localStorage: 默认的有效时间是永久性的

  • 4

    • cookie : 必须是键值对形式的字符串
    • localStorage: 必须是普通字符串或者json字符串

  • 5

    • cookie : 一般存储大小为4K
    • localStorage: 一般存储大小为20M

35,ajax请求

作用

  • 前后端重要的交互手段

特点

  • 不用刷新或者跳转页面,而是通过发送请求,给后台传参,并且接收返回的内容
  • 是异步操作,不会影响同步程序的执行
  • 操作灵活,简便
  • 是面向对象的编程方法

基本步骤

  • 建立一个ajax对象
  • 设定ajax请求的地址和方法
  • 接收响应体
  • 将响应体渲染到页面中

get方式请求步骤

  • 1,创建ajax对象

    • 需要兼容处理方式
    • let xhr = {};
      if(XMLHttpRequest){
      xhr = new XMLHttpRequest();
      }else{
      xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
      }

  • 2,定义open()

    • xhr.open(参数1,参数2,参数3);

    • 参数1

      • 传参方式,get

    • 参数2

      • 传参地址
      • 之后可以拼接参数,语法与超链接传参语法一致

    • 参数3

      • 是否异步

      • 默认值

        • true,异步执行

      • 设定值

        • false,同步执行

      • ajax请求一般都是异步执行

  • 3,设定send()

    • xhr.send()

  • 4,获取响应体

    • 标准浏览器

      • xhr.onload = function(){}

    • 兼容低版本IE浏览器

      • xhr.onreadystatechange = function(){}

    • 当ajax状态码为4,并且请求状态码为2XX时,请求成功,可以获取响应体

      • xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)

post方式请求步骤

  • 1,创建ajax对象

    • 需要兼容处理方式
    • let xhr = {};
      if(XMLHttpRequest){
      xhr = new XMLHttpRequest();
      }else{
      xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
      }

  • 2,定义open()

    • xhr.open(参数1,参数2,参数3);

    • 参数1

      • 传参方式,get

    • 参数2

      • 传参地址
      • post方式,不在请请求地址之后拼接参数

    • 参数3

      • 是否异步

      • 默认值

        • true,异步执行

      • 设定值

        • false,同步执行

      • ajax请求一般都是异步执行

  • 3,定义响应头

    • xhr.setRequestHeader(‘content-type’ , ‘application/x-www-form-urlencoded’);

  • 4,设定send()

    • xhr.send(参数)
    • 参数必须是字符串形式,语法格式与超链接传参格式相同,但是没有?

  • 5,获取响应体

    • 标准浏览器

      • xhr.onload = function(){}

    • 兼容低版本IE浏览器

      • xhr.onreadystatechange = function(){}

    • 当ajax状态码为4,并且请求状态码为2XX时,请求成功,可以获取响应体

      • xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)

36,跨域和jsonp

基本概念

  • 同源

    • 用一个域名下,可以发送请求,并且获取响应体
    • 不同域名下,只能发送请求,不能获取响应体

  • 跨域

    • 实现给不同域名发送请求,并且获取响应体

实现方式

  • jsonp

    • 原理

      • 通过script标签中,定义src的属性为跨域访问的对象
      • 获取跨域请求中,后台返回的响应体,响应体是后台程序执行的输出字符串,将这个字符串在script标签中按照,JavaScript的语法格式执行,下过就是一段JavaScript程序

    • 传参

      • 在地址栏之后拼接参数,语法格式与超链接传参语法格式相同
      • 一般传参搜索的关键词和执行函数的名称

    • 后台程序

      • 返回数据,定义为回调函数的参数
      • 前端程序,在函数中,根据参数,直接执行程序,渲染页面

  • 代理服务器

    • 设定Apache或者nginx服务器的配置文件,由Apache或者nginx完成跨域操作

  • 代理服务器特点

    • 正向代理

      • 客户端—>代理服务器—>服务器

    • 反向代理

      • 服务器—>代理服务器—>客户端

  • 基本步骤

    • 1,设定服务器配置文件

      • 以nginx为例
      • 找到配置文件,在server{}中定义代理选项
      • location = /自定义代理名称 {
        proxy_pass 代理请求的url地址;
        }

    • 2,定义ajax请求

      • 在定义open()时,第二参数是使用 /自定义代理名称
      • 如果是get方式,可以拼接参数
      • 如果是post方式,就按照ajax,post方式,执行步骤即可

37,promise

委托执行一个异步请求,并且返回异步请求执行的结果

关键状态

  • 执行中
  • 执行成功
  • 执行失败

基本语法

  • const p = new Promise(function(参数1,参数2){
    执行内容;
    })
    // then调用的函数和参数1,调用的函数,是同一个函数
    p.then(function(){
    执行内容
    })
    // catch调用的函数和参数2,调用的函数,是同一个函数
    p.catch(function(){
    执行内容
    })

38 , async 和 await

将多个异步执行,按照同步执行的顺序来执行,之前的异步执行没有结束,之后的异步执行不会开始执行

基本语法格式

  • async function fun(){
    let a = await new Promise();

    let b = await new Promise();

    let c = await new Promise();
    }

    • 定义3个异步执行,按照同步执行的顺序,从上至下执行3个异步,第一个异步执行完毕,执行第二个异步,第二异步执行完毕才会执行第三个异步

39,闭包

作用

  • 调用函数内部数据的方法之一
  • 延长变量的生存周期
  • 生成一个不销毁的执行空间

优点和缺点

  • 1,不销毁执行空间

    • 优点:延长了变量的生命周期
    • 缺点:执行空间不被销毁,一直存在,会引起内存溢出,会导致内存泄露,会被作为攻击对象

  • 2,变量私有化

    • 优点:不会污染全局变量
    • 缺点:外界无法访问函数中的变量,

  • 在函数外部可以访问函数内部的数据

    • 外部访问
    • 函数的执行空间不会被销毁,有可能引起内存的溢出

闭包的条件

  • 函数的执行空间必须不被销毁
  • 函数的返回值是一个函数
  • 内部函数(返回值函数)访问外部函数(定义的函数)的数据

基本语法

  • function fun1(){
    var int = 100;
    return function fun2(){
    var num = int;
    return num;
    }
    }
    // 调用fun1,f1是return的返回值
    let f1 = fun1();
    // 调用f1,也就是return的返回值函数
    let f2 = f1();
  • 实际应用中,如果是事件绑定,绑定的往往是 立即执行函数 oDvi.addEventlistener(‘click’ , (function(){})())

40,继承

基本概念

  • 子类从父类继承属性和方法

作用

  • 优化代码,简化程序

方法1

  • 在原型链上,添加父类生成的实例化对象
  • // 定义父类
    function Father(name,age){
    this.name = name;
    this.age = age;
    }
    Father.prototype.fun = function(){
    console.log(${this.name}今年${this.age}岁了);
    }

// 通过父类,生成实例化对象
const p = new Father(‘李四’ , 20);

// 定义子类
function Son(){}

// 在子类的prototype中,添加父类的实例化对象
Son.prototype = p;

// 通过子类,生成实例化对象
// 子类实例化对象,就具有父类的所有属性和方法
const s = new Son();

方法2

  • 只继承属性
  • // 装备一个父类
    function Father(name,age){
    this.name = name;
    this.age = age;
    }
    Father.prototype.fun = function(){
    console.log(this.name,this.age);
    }

function Son(sex){

// 在子类中,调用父类
// 通过call方法来改变父类构造函数的this指向

// 相当于在当前位置生成父类的属性
// 并且this指向子类构造函数的this
Father.call(this , '张三',18)

// 我们自己定义的子类的属性
this.sex = sex;

}

// 子类执行时需要的参数
const s = new Son(‘女’);

方法3

  • 组合继承

    • 两种继承方式一起使用

  • // 准备一个父类
    function Father(name,age){
    this.name = name;
    this.age = age;
    }
    Father.prototype.fun = function(){
    console.log(${this.name}今年${this.age}岁了);
    }

// 定义子类
function Son(sex){
Father.call(this,‘张三’,18);
this.sex = sex;
}
// 继承方法,也会继承属性,但是这个属性的存储位置不同
Son.prototype = new Father(‘李四’,20 );

// 给子类自定义方法,要写在Son.prototype赋值之后
Son.prototype.f =function(){
console.log(this.name,this.sex);
}

const s = new Son(‘男’);

- 在实例化对象中,直接存储的是通过call方法,继承的父类的属性和属性值
- 在实例化对象的__proto__中,存储的是通过添加父类实例化对象,继承的属性和属性值

ES6的继承语法

  • 关键词

    • extends

      • 继承

    • super

      • 设定继承属性的参数

  • class Son2 extends Father2{
    constructor(name,age,sex){
    super(name,age);
    this.sex = sex;
    }
    f(){
    console.log(this.name,this.age,this.sex);
    }
    }

41,设计模式

概念,作用

  • 解决程序中的某个问题,而特别定义的程序规范

单例模式

  • 作用

    • 同一个构造函数,生成的实例化对象应该指向的是同一个对象

  • 基本原理

    • 1,为了不造成全局变量污染,使用函数封装程序,使用闭包来调用程序

    • 2,使用闭包,函数的返回值,必须是也是函数

    • 3,通过判断生成实例化对象.

      • 如果是第一次执行构造函数,生成实例化对象并且返回
      • 之后再执行构造函数,直接返回之前的实例化对象

  • 代码规范

    • 1,一个变量,存储的是一个立即执行函数的执行结果
    • 2,立即执行函数返回值是一个函数
    • 3,在函数中定义构造函数
    • 4,返回值函数中,通过判断,生成实例化对象,并且返回实例化对象

  • 基本代码

    • const Utils = (function () {
      // 先定义一个构造函数
      class setElement {
      constructor() {

      }
      setCss(ele,styleObj) {
      for (let key in styleObj) {
      ele.style[key] = styleObj[key];
      }
      }

      setEvent(ele,event,fun){
      ele.addEventListener(event,fun)
      }
      }

    // 定义一个空对象
    let obj = undefined;

    return function(){

      if(!obj){
      // 调用执行构造函数,不需要参数
      obj = new setElement();
  }
  return obj;

    }
    })();

组合模式

  • 作用

    • 通过一个调用,执行所有需要执行的程序

观察者模式

  • 作用

    • 用于订阅—发布消息
    • 当一个对象的状态发生改变,所有依赖于这个对象的对象,都要发送通知,并且根据程序主动更新数据,主要是解决了主体对象与观察者对象之间的功能的耦合

  • 核心内容

    • 1,消息盒子

      • 存储事件类型和事件处理函数

    • 2,on方法

      • 定义事件类型和事件处理函数

    • 3,emit方法

      • 定义发布消息

    • 4,off方法

      • 取消关注

    • 5,delete方法

      • 删除事件类型

  • 代码

    • class Observer{
      constructor(){
      // 定义消息盒子
      this.message=[];
      }

    // 绑定事件类型和事件处理函数到消息盒子中
    on(type,fun){
    if(!this.message[type]){
    this.message[type] = [fun];
    }else{
    this.message[type].push(fun);
    }
    }

    // 执行事件,发布消息
    emit(type,…agr){
    if(!this.message[type]){
    return;
    }
    let event = {type:type,agr:agr};
    for(var i = 0 ; i <= agr.length-1 ; i++){
    let tmp = agr[i];
    tmp(event);
    }
    }

    // 删除事件处理函数
    off(type,fun){
    if(!this.message[type]){
    return;
    }
    for(var i = 0 ; i <= this.message[type].length-1 ; i++){
    var f = this.message[type][i];
    if(f === fun){
    this.message[type].splice(i,1);
    i–;
    }
    }
    }

    // 删除整个事件类型
    delete(type){
    if(!this.message[type]){
    return;
    }
    delete(this.message[type]);
    }
    }

    • const obj = new Observer();
      obj.on(‘byCar’ , fun1);
      obj.on(‘byCar’ , fun1);
      obj.on(‘byCar’ , fun2);
      obj.on(‘byCar’ , fun3);
      obj.on(‘byHouse’ , fun4);
      obj.on(‘byHouse’ , fun5);
      obj.on(‘byHouse’ , fun6);

obj.emit(‘byCar’ , fun1,fun3);

obj.off(‘byCar’ , fun3);
obj.off(‘byCar’ , fun1);

obj.delete(‘byCar’);

function fun1(){
console.log(‘买法拉利’)
}

function fun2(){
console.log(‘买兰博基尼’)
}

function fun3(){
console.log(‘买科尼塞克’)
}

function fun4(){
console.log(‘买三居室’)
}

function fun5(){
console.log(‘买别墅’)
}

function fun6(){
console.log(‘买城堡’)
}

42,数据劫持

与观察者模式配合使用,完成双向数据绑定

语法

  • Object.defineProperty()

  • 参数1

    • 需要劫持的对象

  • 参数2

    • 劫持对象的键名

  • 参数3

    • 劫持键名的相关设定

    • 必须是对象类型

    • 设定方法

      • value:数据

        • 设定劫持数据的数值

      • get(){}方法

        • 通过return来定义劫持单元的数据
        • 定义的数据,不能被修改

      • set(){}方法

        • 当企图修改被劫持单元数据时,触发set()方法

注意

  • 问题1

    • 如果劫持的键名不存在,就是在给对象新增单元
    • 新增的单元如果使用value:数据;的语法形式来设定,设定的数据不能被修改

  • 问题2

    • 如果坚持的键名已经存在,使用value:数据;的语法形式来设定,设定的数据可以被修改

  • 问题3

    • 使用get()方法来劫持数据时,value:数据;的语法形式就不能使用

43,SET集合类型

集合类型,类似于数组类型,但是不接受重复数据

语法

  • const s = new Set()
  • 在()中,定义集合类型的数据,必须是数组的形式

操作

  • 1,定义

    • const set = new Set([100,200,300,true,false,‘北京’,‘上海’,{name:‘张三’} , [1,2,3,4]]);

  • 2,使用

    • 方法1

      • SET集合中的单元,不能直接使用,要转化为数组,再来使用
      • const arr = […set];
        console.log(arr[0]);

    • 方法2

      • 直接通过…展开运算符,展开使用
      • console.log([…set][0])

  • 3,新增

    • set对象.add(数据)

  • 4,删除

    • set对象.delete(数据)

  • 5,清除

    • set对象.clear()

  • 6,长度

    • set对象.size

  • 7.遍历

    • set对象.forEach()

    • 注意:

      • SET只是类似数组,并不是真的数组,使用forEach循环遍历SET对象,function(){}中设定的参数1,参数2,都是SET单元的数据,参数3是原始的SET对象

44,MAP类型

类似于对象的数据类型,以键值对的形式存储数据

基本语法

  • const map = new Map()

操作

  • 1,定义

    • const m = new Map([[‘name’,‘张三’] , [‘age’,100] , [{a:100} , ‘数据’] , [ [1,2,3] , ‘数组’] , [ function(){console.log(123)} , ‘函数’ ] ]);
    • 参数必须是二维数组的形式
    • 每一个二维数组,必须有2个单元,第一个单元是键名,第二个单元数数据

  • 2,新增

    • map对象.set(参数1,参数2)

    • 参数1

      • 定义新增单元的键名

    • 参数2

      • 定义新增单元的数据

    • 注意

      • m.set( a , 100); 和 m.set( ‘a’ , 100); 定义之后,map类型中的显示效果不同
      • 参数1,不能是变量,不支持变量

  • 3,使用

    • map对象.get(键名) 方法
    • 不管map中显示的形式是什么,只要通过get(键名),一定可以获取到数据

  • 4,删除

    • map对象.delete(键名)

  • 5,清除

    • map对象.clear()

  • 6,遍历

    • map对象.forEach()
    • 语法等于普通forRach()相同

  • 7,判断是否是map中的成员

    • map对象.had(键名)
    • 执行结果为布尔类型

45,jQuery

基本介绍

  • 网站

    • 中文

      • http://jquery.cuishifeng.cn/

    • 官网

      • https://jquery.com/

  • 核心

    • 封装好的,前端的方法库
    • 就是一个JavaScript程序文件

  • 优点

    • 强大的选择器机制
    • 优质的隐式迭代
    • 无所不能的链式编程

  • 两个全局外部接口

    • jQuery
    • $

jQuery的选择器

  • jQuery通过选择器获取的标签对象,都是伪数组的形式

  • 转化

    • JavaScript语法获取的标签对象,不能使用jQuery语法操作,jQuery语法获取的标签对象,也不能使用JavaScript语法操作,必须要相互转化

    • JavaScrip标签对象转化为jQuery标签对象

      • $(js对象)

    • jQuery标签对象转化为JavaScript标签对象

      • $(jQuery标签对象)[索引下标]

  • 方法

    • 1,通过id选择器

      • $(’#id选择器名称’)

    • 2,通过calss选择器

      • $(’.class选择器名称’)

    • 3,通过标签名称

      • $(‘标签名称’)

    • 4,通过css选择器

      • $(‘ul>li’)
      • $(’[name=“abc”]’)
      • $(‘div#box’)

    • 5,通过结构伪类选择器

      • $(‘ul>li:first’)

        • 第一个

      • $(‘ul>li:last’)

        • 最后一个

      • $(‘ul>li:eq(索引)’)

        • 按照索引,获取标签对象

      • $(‘ul>li:odd()’)

        • 获取索引数值是奇数的标签
        • 索引数值是奇数,标签个数是偶数

      • $(‘ul>li:even()’)

        • 获取索引数值是偶数的标签
        • 索引数值是偶数,标签个数是奇数

jQuery的筛选器

  • 在通过jQuery选择器获取到的标签对象的基础上,再使用筛选器,获取符合条件的标签

  • 1

    • $( ).first()

      • 第一个

  • 2

    • $( ).last()

      • 最后一个

  • 3

    • $( )…eq()

      • 按照下标获取

  • 4

    • $( ).prev()

      • 上一个兄弟

  • 5

    • $( ).next()

      • 下一个兄弟

  • 6

    • $( ).prevAll()

      • 之前所有兄弟

  • 7

    • $( ).nextAll()

      • 之后所有兄弟

  • 8

    • $( ).siblings()

      • 上下所有的兄弟

  • 9

    • $( ).parent()

      • 直接父级

  • 10

    • $( ).parents()

      • 所有父级
      • 最后两个一定是body和html

  • 11

    • $( ).find(条件)

      • 找寻子级中符合条件的标签

  • 12

    • $( ).end( )

      • 返回链式编程的上一个操作对象

      • 与parent()的区别

        • parent()

          • 是当前操作标签的父级标签

        • end()

          • 是返回链式编程中,当前操作标签的上一个操作的标签

jQuery的属性操作

  • 注意,属性操作不是样式操作

  • 关键词

    • prop

      • 最新版本的jQuery已经弃用,不推荐使用

    • attr

      • 推荐使用的关键词

  • 获取指定属性的属性值

    • $( ).attr(‘属性’)

  • 设定指定属性的属性值

    • $( ).attr(‘属性’ , 属性值)
    • 可以设定自定义属性以及属性值

  • 删除指定属性

    • $( ).removeAttr(‘属性’)

jQuery的class类名操作

  • 注意,这里是进行的class的类名操作,不是进行样式操作

  • 1

    • 新增class类名属性值

      • $( ).addClass(‘类名’)
      • 新增类名,是在原有类名的继承上,新增的类名

  • 2

    • 删除class类名属性值

      • $( ).removeClass(‘类名’)

  • 3

    • 判断是否有这个类名

      • $( ).has(‘类名’)
      • 返回值是布尔类型
      • 不可以继续链式编程

  • 4

    • 切换类名

      • $( )toggleClass(‘类名’)
      • 如果有这个类名就做删除类名操作,如果没有这个类名就做添加类名炒作

  • 特别注意

    • 如果jQuery的操作,是获取或者设定操作,那么可以继续执行链式编程
    • 如果jQuery的操作,是返回值操作,那么不可以继续执行链式编程

jQuery的内容操作

  • $( ).html()

    • 全覆盖操作

    • 可以解析标签

    • 没有参数

      • 获取标签对象的内容

    • 设定参数

      • 设定标签对象的内容

  • $( ).text()

    • 全覆盖操作

    • 不能解析标签

    • 没有参数

      • 获取标签对象的内容

    • 设定参数

      • 设定标签对象的内容

  • $( ).val()

    • 全覆盖操作

    • 没有参数

      • 获取标签对象的数据

    • 设定参数

      • 设定标签对象的数据

    • 注意

      • select>option

        • 获取数据时,是从select标签对象获取
        • 设定数据时,要设定在option标签上

      • input>file

        • 只能获取数据,不能设定数据

jQuery的css样式操作

  • 1

    • $( ).css(属性)

      • 获取标签对象的指定css样式属性的属性值

  • 2

    • $( ).css(属性 , 属性值)

      • 设定标签对象的指定css样式属性的属性值
      • 单一属性属性值的设定

  • 3

    • $( ).css({ 属性:属性值 , 属性:属性值 })

      • 设定标签对象的指定css样式属性的属性值
      • 参数只有一个,为对象语法形式
      • 批量设定属性属性值

jQuery的事件

  • on()语法绑定

    • 语法1

      • $( ).on(事件类型 , 事件处理函数)

    • 语法2

      • $( ).on(事件类型 , 标签名称 , 事件处理函数)
      • 执行事件委托效果,只有点击对象与设定的标签名称相同时,才会触发效事件,执行事件处理函数

    • 语法3

      • $( ).on(事件类型 , {属性:属性值} , 事件处理函数)
      • 对象类型的参数,作用是给事件对象e中存储参数
      • 参数存储在 e.data 中

    • 语法4

      • $( ).on(事件类型 , 标签名称 , {属性:属性值} , 事件处理函数)
      • 事件委托和传参同时设定

  • 简写语法绑定

    • $( ).事件类型(事件处理函数)
    • jQuery中标签对象支持的事件类型,一般都可以写成简写语法形式
    • 一般JavaScript中支持的事件类型,也都可以使用简写语法形式

  • 特殊事件绑定

    • $( ).hover(参数1,参数2)

    • 参数1

      • 函数或者传参函数
      • 鼠标移入标签对象时触发

    • 参数2

      • 函数或者传参函数
      • 鼠标移出标签对象时触发

    • 鼠标只有经过当前绑定事件的标签对象的编辑线时,才会触发事件,经过子级标签时,不会触发函数

  • 事件的删除

    • $( ).off(事件类型 , 事件处理函数)

  • 事件的发布

    • 直接执行已经给标签对象绑定的事件处理函数
    • $(‘div’).on(‘click’ , function(){
      console.log(‘我是绑定的内容’)
      });

$(‘div’).trigger(‘click’);

  • one()方法绑定事件

    • 绑定的事件处理函数,只会执行一次
    • $( ).one(事件类型 , 事件处理函数)

  • 阻止事件传播,阻止冒泡

    • event.stopPropagation()

  • 阻止默认事件执行

    • event.preventDefault()

  • return false

    • 阻止所有

jQuery的元素操作

  • 新增元素

    • $(‘设定的标签’)
    • 可以设定标签的名称,属性,内容,id,class,style等等

  • 写入元素

    • 父级元素结束位置,新增标签

      • 父级元素.append(子级元素)
      • 子级元素.appendTo(父级元素)

    • 父级元素起始位置,新增标签

      • 父级元素.prepend(子级元素)
      • 子级元素.prependTo(父级元素)

    • 已有元素之后,新增标签

      • 已有元素.after(新增元素)
      • 新增元素.insertAfter(已有元素)

    • 已有元素之前,新增标签

      • 已有元素.before(新增元素)
      • 新增元素.insertBefore(已有元素)

  • 修改元素

    • 把旧元素.replaceWith(替换的新元素)
    • 新元素.replaceAll(旧元素)

  • 删除元素

    • 删除标签对象的内容

      • $( ).empty()

    • 删除标签对象自己本身

      • $( ).remove()

  • 克隆元素

    • 语法1

      • $( ).clone()
      • 只可能标签以及标签的所有内容,不克隆标签本身的

    • 语法2

      • $( ).clone(参数1)

      • 是否克隆元素身上的事件

        • 默认值是 false 不克隆事件

      • 默认会也克隆子级元素身上的事件

    • 语法3

      • $( ).clone(参数1 , 参数2)
      • 是否克隆子级元素身上的事件
      • 默认值是 true 克隆子级事件

jQuery的元素占位

  • 1, $( ).height() $( ).width()

    • 获取 内容
    • 参数如果是数值,就是设定属性值

  • 2, $( ).innerHeight() $( ).innerWidth()

    • 获取 内容 +padding
    • 参数如果是数值,就是设定属性值

  • 3, $( ).outerHeight() $( ).outerWidth()

    • 获取 内容 + padding + border
    • 参数如果是数值,就是设定属性值

  • 4, $( ).outerHeight(true) $( ).outerWidth(true)

    • 获取 内容 + padding + border + margin

  • 总结

    • 如果设定好了 属性 ,获取到的属性值会保持不变,有没有box-sizing: border-box;不影响结果

    • 普通盒模型

      • 占位 = 内容 + padding + border + margin
      • width,height,设定的是 内容

    • 怪异盒模型

      • 占位 = 内容 + padding + border + margin
      • width,height,设定的是 内容 + padding + border

    • 不同盒模型属性,如果只定定义了width和height,获取数据结果是不同的

jQuery的元素位置

  • 1,获取css属性值

    • 通过 $( ).css(属性) 方式,获取属性值
    • 获取的结果都有 px 单位
    • 如果是有定位属性,没有设定数值,获取结果是 0px
    • 如果没有设定定位属性,获取结果是 auto

  • 2, $( ).offset()

    • 标签和文档的距离

      • 如果没有滚动,也是和视窗窗口的距离

    • 获取结果是一个对象,有两个单元 left 和 top

    • 可以设定数据,也是定义为对象的形式

    • 如果css定义的样式,和设定的样式,数据有差距,通过定位来调整,margin值不变

  • 3, $( ).position()

    • 获取标签和父级元素之间的间距
    • 只获取的是定位的属性,不计算margin
    • 只能获取,不能设定
    • 获取结果是一个对象,两个单元 left 和 top

jQuery的动画

  • 1

    • $( ).show()

      • 让元素动画显示

      • 参数1

        • 时间 单位是毫秒

      • 参数2

        • 可选参数 运动方式 linear

      • 参数3

        • 可选参数 运动结束时执行的函数,回调函数

  • 2

    • $( ).hide()

      • 让元素动画隐藏

      • 参数1

        • 时间 单位是毫秒

      • 参数2

        • 可选参数 运动方式 linear

      • 参数3

        • 可选参数 运动结束时执行的函数,回调函数

  • 3

    • $( ).toggle()

      • 切换元素隐藏显示

        • 显示的时候隐藏,隐藏的时候显示

      • 参数1

        • 时间 单位是毫秒

      • 参数2

        • 可选参数 运动方式 linear

      • 参数3

        • 可选参数 运动结束时执行的函数,回调函数

  • 4

    • $( ).slideDown()

      • 让元素下拉显示

      • 参数1

        • 时间 单位是毫秒

      • 参数2

        • 可选参数 运动方式 linear

      • 参数3

        • 可选参数 运动结束时执行的函数,回调函数

  • 5

    • $( ).slideUp()

      • 让元素上卷隐藏

      • 参数1

        • 时间 单位是毫秒

      • 参数2

        • 可选参数 运动方式 linear

      • 参数3

        • 可选参数 运动结束时执行的函数,回调函数

  • 6

    • $( ).slideToggle()

      • 让元素上下切换

      • 参数1

        • 时间 单位是毫秒

      • 参数2

        • 可选参数 运动方式 linear

      • 参数3

        • 可选参数 运动结束时执行的函数,回调函数

  • 7

    • $( ).fadeIn()

      • 让元素逐渐显示

      • 参数1

        • 时间 单位是毫秒

      • 参数2

        • 可选参数 运动方式 linear

      • 参数3

        • 可选参数 运动结束时执行的函数,回调函数

  • 8

    • $( ).fadeOut()

      • 让元素逐渐消失

      • 参数1

        • 时间 单位是毫秒

      • 参数2

        • 可选参数 运动方式 linear

      • 参数3

        • 可选参数 运动结束时执行的函数,回调函数

  • 9

    • $( ).fadeToggle()

      • 让元素渐隐渐现

      • 参数1

        • 时间 单位是毫秒

      • 参数2

        • 可选参数 运动方式 linear

      • 参数3

        • 可选参数 运动结束时执行的函数,回调函数

  • 10

    • $( ).fadeTo()

      • 渐渐变化到指定的透明度

      • 参数1

        • 时间 单位是毫秒

      • 参数2

        • 指定的透明度

      • 参数3

        • 可选参数 运动方式 linear

      • 参数4

        • 可选参数 运动结束时执行的函数,回调函数

  • 点击过快

    • 当前动画没有结束,又触发了下一次动画

    • 默认

      • 执行完当前动画之后,再依次执行最后触发的动画

    • $( ).stop().动画

      • 当前动画立即停止,也就是不再执行之后的动画,从当前停止的位置开始,立即执行下一个动画效果

    • $( ).finish().动画

      • 当前动画立即结束,也就是立即执行到当前动画的终止位置,从当前动画的终止位置开始,执行下一个动画效果

jQuery的自定义动画

  • $( ).animate()

    • 参数1

      • 运动的属性 , 数据类型必须是对象类型

    • 参数2

      • 时间,单位毫秒

    • 参数3

      • 运动方式

    • 参数4

      • 回调函数,运动结束后执行的程序

  • 注意

    • 1,属性值,有没有px都可以,但是规范最好都统一
    • 2,动画都是同时结束的
    • 3,极个别浏览器版本支持颜色的改变,但是最好不用jQuery的动画实现颜色改变
    • 4,动画效果不支持 display , 要使用透明度

jQuery的隐式迭代

  • jQuery中默认对获取的标签对象数组中的所有内容都执行操作

  • $(‘ul>li’).addClass(‘active’);

    • 给所有的li标签,都添加上class类名

  • jQuery的tab切换/选项卡

    • $(‘ul>li’).click(function(){
      ( t h i s ) / / t h i s 是 j s 的 语 法 , 添 加 (this) // this是js的语法,添加 (this)//this是js的语法,添加()包裹,才能用jq方法操作
      .addClass(‘active’) // 给当前点击标签添加class类名
      .siblings().removeClass(‘active’) // 点击li的所有兄弟
      .parent() // 找到的是ul
      .next() // 找到的是ol
      .find(‘li’) // 找到ol中的所有li
      .removeClass(‘active’)
      .eq($(this).index()) // 找到与点击标签索引相同的ol中的li标签
      .addClass(‘active’) // 添加class类名
      })

jQuery的请求方式

  • get方式

    • $.get()
    • 参数1:传参地址
    • 参数2:传参的参数,可以是键值对的字符串,也可以是对象
    • 参数3:传参成功,执行的程序
    • 参数4:期望的返回值数据类型

  • post方式

    • $.post()
    • 参数1:传参地址
    • 参数2:传参的参数,可以是键值对的字符串,也可以是对象
    • 参数3:传参成功,执行的程序
    • 参数4:期望的返回值数据类型

  • ajax方式

    • 参数只能有一个,必须是对象形式
    • url : 请求地址
    • data : 请求参数 可以是键值对字符串或者对象
    • type : 请求方式 get / post 默认是get方式
    • dataType : 期望的返回值类型 json — 将响应体按照json格式转化
    • success : 请求成功之后,执行的函数
    • async : true 是否异步
    • error : 请求失败时执行的函数
    • timeout : 设定请求超时的时间,超过设定的时间,就认为是请求失败 单位是毫秒
    • cache : true 浏览器是否缓存
    • context : 执行请求成功或者失败的回调函数时,this的执行设定

jQuery的全局函数

  • $.(window).ajaxStart(function(){})

    • 请求开始时触发,只会触发一次

  • $(window).ajaxSend(function(){})

    • ajax请求,执行send()时触发
    • 有一个发送请求就会触发一次

  • $(window).ajaxSuccess(function(){})

    • ajax请求,成功时触发
    • 有一个请求成功就会触发一次

  • $(window).ajaxError(function(){})

    • ajax请求,失败时触发
    • 有一个请求失败就会触发一次

  • $(window).ajaxComplete(function(){})

    • ajax请求,完成时触发
    • 有一个请求完成就会触发一次

  • $(window).ajaxStop(function(){})

    • ajax请求,结束时触发
    • 所有请求结束的时候,会触发一次

jQuery的扩展方法

  • 可以向jQuery中,添加自定义方法

  • 语法1

    • jQuery.extend()是添加自定义方法的关键词
    • 参数是对象的形式,对象的属性是自定义函数的名称,对象的属性值是自定义函数的程序
    • jQuery.extend({
      自定义函数名1:function(){自定义函数程序},
      自定义函数名2:function(){自定义函数程序},
      })

  • 语法2

    • jQuery.fn.extend()是添加自定义方法的关键词
    • jQuery.fn.extend({
      自定义函数名1:function(){
      return 相关操作
      },

    自定义函数名2:function(){
    return 相关操作
    },
    }

jQuery的其他操作方法

  • $( ).index()

    • 获取标签对象,在伪数组中的的索引值

  • $( ).each(function(参数1,参数2){})

    • 循环遍历

    • 参数1

      • 索引值

    • 参数2

      • 标签对象
      • 标签对象是JavaScript的语法格式,要想使用jQuery语法,必须加$( )

特别内容–浏览器兼容处理

1,浏览器卷去的高度

  • var height = document.documentElement.scrollTop || document.body.scrollTop;

2,获取非行内样式属性

  • if(window.getComputedStyle){
    // 这个方法是可以使用的
    console.log(window.getComputedStyle(oDiv).width);
    }else{
    // 兼容IE的方法
    console.log(oDiv.currentStyle.width);
    }
  • 实际效果是获取标签执行的样式属性值

3,获取事件对象

  • 标签对象.事件类型 = function(e){
    e = e || window.event
    }

4,事件的监听/事件的注册

  • function myAddEvent( ele , type , fun){
    // 判断 addEventListener这个方法是否存在
    if(ele.addEventListener){
    ele.addEventListener(type , fun);
    }else{
    ele.attachEvent(‘on’+type , fun);
    }
    }

5,删除事件处理函数

  • function delFun(ele , type , fun){
    if(ele.removeEventListener){
    ele.removeEventListener(type , fun);
    }else{
    ele.detachEvent( ‘on’ + type , fun);
    }
    }

6,阻止事件的传播

  • function stopBubble(e){
    if(e.stopPropagation){
    e.stopPropagation();
    }else{
    e.cancelBubble = true;
    }
    }

7,阻止默认事件的执行

  • if (e.preventDefault) {
    e.preventDefault();
    } else {
    e.returnValue = false;
    }

8,建立ajax对象

  • let xhr = {};
    if(XMLHttpRequest){
    xhr = new XMLHttpRequest();
    }else{
    xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
    }

9,获取ajax响应体

  • 标准浏览器

    • xhr.onload = function(){}

  • 兼容浏览器

    • xhr.onreadystatechange = function(){}
Shmily_zc
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值