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

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程序都必须定义在起始和结束标识符之间
• 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’;

    • $pdo=newPDO($dsn,$user,$pwd);

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

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

    • 执行SQL语句

      • 查询语句

        • $stmt = $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(){
    $(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(){}