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
}
- 标签对象.事件类型 = function(e){
-
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
// 清除事件 清除的时间处理函数是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;
}
- if (e.preventDefault) {
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)}) (‘北京’)
- function(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);
- function mySetCookie(key, value, time) {
-
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);
- class Observer{
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类名
})
- $(‘ul>li’).click(function(){
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(){}