php
php 语法
每一句PHP 语法后缀都要带上 ; 因为php 是强类型语言
PHP中用 $ 来定义变量
. 是拼接符
单引号是普通字符串
双引号是特殊字符串 可以解析变量
PHP 导入其他文件 include “文件名”
PHP 中的输出语句
1.echo()
只能输入基本数据类型 true 是1 false 是输出空白
2.print_r()
可以输出所有数据类型 true 是1 false 是空白
3.var_dump()
可以输出所有数据类型 和数据细节 true 是true false 是false
PHP 文件格式转换JSON 文件格式
json_encode()
JSON文件格式转换PHP 文件格式
json_decode()
PHP 中的数组
- 关联型数组 类似于JS中的对象
- 索引型数组 类似于JS中的数组
基础数据类型
布尔值 （不区分大小写）
整形 (int)
浮点型 (float)
字符串 (string)
数组 (Array)
对象 (object)
var_dump($变量) 看你是什么类型
共8种
预定义变量
服务器变量_SERVER保存头部信息 路径 脚本位置 等的数组
Cookie变量_COOKIE 保存Cookie值的数组
HTTP GET 变量 _GET 保存URL请求和表单get提交的变量和数组 （put） (delete)
HTTP POST变量_POST 保存post方法生成的变量和数组
Request 变量$_REQUEST
数据库
数据库的概念
数据库是按照数据结构来组织 存储和管理数据的建立在计算机存储上的仓库 可以被视为能够自动查询的和修改的数据库
数据增删改查
基本顺序: Server(服务器) -> Database(数据库) -> Table(表) -> Row(行) -> Column(列)
1.创建 create database dbname;
2.创建数据表use dbname; create table tbname(colName type not null default 0);
0
3.增加字段alter table tbname add colNante type;
4.修改字段alter table tbname change oldColIName newColName type;
5.删除字段alter table tbname drop colName;
增加记录insert into tbname (colName 1,colName2) values(val1,val2);
删除记录delete from tbname[ where colName = value];
站
修改记录update tbname set colName = value;
查找记录select * form tbName [ where colName = value];
主键:能够唯一标识表中某一行的属性或属性组。一个表只能有一个主键
数据库的增删改查用的都是mysqli_query() 方法(链接信息,sql语句);
增加的sql语句返回的结果就是,true就是增加成功,false就是增加失败;
删除的sql语句返回的结果就是,true就是删除成功,false就是删除失败;
修改的sql语句返回的结果就是,true就是修改修改,false就是修改失败;
查询的sql语句返回的结果就是, 查询到数据就是一个查询信息 需要解析的 查询不到数据就是false
增删改不需要解析结构
只有查询需要解析结果 因为查询到结果我们看不懂
sql语句 语法规范
1.sql 语句里面的关键字大写
2.表名和字段名尽可能使用反引号(``)包裹
sql语句 的语法规则
1.当你写入文本内容需要用引号包裹起来 表示是字符串
插入的sql 语句
插入的顺序是按照数据库的字段的数据插入
id 可以写 null 会自动增长
INSERT INTO 表名 VALUES(数据1,数据2,…);
必须按照数据的字段插入
2.INSERT INTO 表名 (字段1,字段2…) VALUES(数据1,数据2,…);
字段不匹配的时候错误
删除的sql 语句
DELETE FROM 表名 WHERE username = “admin”;
修改的sql语句
UPDATE 表名 SET ‘age’= 25 WHERE ‘Id’= 4;
UPDATE 表名 SET 可以写多条用逗号隔开 WHERE ‘Id’= 4;
查询的sql语句
1.SELECT * FROM 表名
a)查询这个表里的所有数据
2.2. SELECT * FROM 表名 WHERE ‘条件’
根据条件查找数据
3.SELECT * FROM 表名 WHERE 条件1 AND 条件2
两个条件必须都满足
4.SELECT * FROM 表名 WHERE 条件1< OR 条件2
一个条件满足就可以
5.SELECT * FROM 表名 WHERE 条件1 LIKE “%三%”
条件1 里面含有三的
HTTP 协议
什么是 HTTP 传输协议
官方解释
- http是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应
私人解释
- 前端以什么样的方式把数据传递给后端，后端又是怎么把反馈信息返回给前端的
HTTP 传输协议的内容
1.建立连接通道
2.客户端发起请求
3.服务端返回响应
4.断开连接通道
一个http请求的步骤 (一个不能少 必须有前端发起)
一、建立连接
a)基于 TCP/IP 协议的三次握手
b)目的 保证前后端正常通信
二、发送请求
a)每一个请求都以请求报文的形式发送
b)报文: 报告 + 文章
c)请求报文 就是一个固定格式的信件
d)必有有一个表体
e)中间些内容
f)最后必须要有时间
g)还有一个此致敬礼
h)浏览器帮我们自动组装好
i)请求报文的包含内容
a)请求报文行(请求行)
a)请求方式
b)请求路径
c)传输协议版本
b) 请求报文头
a)以key = value 出现 键值对
b)Host : 请求的主机
c)User-Agent: 浏览器的信息(终端信息)
d)Content-Type: 前端给后端的数据格式
e)cookie: 本地存储 只有4kb 大小
c) 请求报文空行(请求空行)
a)分隔请求头和请求体的一个空行
d) 请求报文体(请求体)
a)前端给后端的数据
一个报文
请求行 什么请求 请求什么地址
请求头 一些描述信息
请求空行
请求体 前端给后端的数据
三、返回响应（后端响应）
a)也是一个固定信件
b)响应报文的包含内容
a)响应状态行（状态行）
1.HTTP/1.1 传输协议版本
2.200 响应状态码
3.OK 对响应状态码的简单描述
b) 响应报文头(响应头)
1.Date 时间
2.Server: 服务器信息
3.Content-length: 后端返回的数据长度
4.Content-type: 后端返回的数据格式
c) 响应报文体
1.后端返回给前端的数据
一个响应报文
状态行 什么请求 请求什么地址
响应头 一些描述信息
响应体 后端返回给前端的信息
四、断开连接
总结:
1.一个http请求
1.建立连接 ->3次握手
2.前端发送请求 ->请求报文的形式
3.后端返回响应 -> 响应报文的形式
4.断开连接 -> 四次挥手
常见的响应状态码
100 ~ 199
表示连接继续
200 ~ 299
各种成功
300 ~ 399
重定向
400 ~ 499
客户端错误
500 ~ 599
服务端错误
常见的请求方式
GET – 向服务器获取
POST – 向服务器传递
PUT – 向服务器传递，并让服务器添加
DELETE – 让服务器删除
HEAD – 只是用于获取响应头
PACTH – 和 PUT 类似， 只不过更倾向于更新局部数据
CONNECT – 预留方式， 管道连接更改为代理连接使用
OPTIONS – 允许客户端查看服务端性能
GET 和 POST的区别
语义化不一样
GET 倾向于从服务器获取数据
POST 倾向于向服务器提交数据
传递参数的方式
GET 请求直接在地址栏后面拼接
POST 请求在请求体里面传递
参数的大小限制
GET 请求一般不大于 2KB
POST 请求理论上没有上限(可以被服务器限制)
缓存能力
GET 会被浏览器主动缓存
POST 不会被浏览器主动缓存(需要手动设置)
安全性能
GET 请求相对安全性比较低(相对于POST)
POST 请求相对安全性比较高(相对于GET)
数据格式
GET 数据格式必须是URL编码格式 如果不是会自动转换成url编码
POST 理论上上无所谓 但是要和请求头中的content-type 一致
Cookie
一个在 客户端 的存储空间 以key1 = value1;
cookie 的特性
按照域名存储
哪个域名存储哪个域名使用
存储大小有限制
4KB 左右
50 条左右
有时效性
默认是会话级别（关闭浏览器就没有了）
可以手动设置过期时间
请求中自动携带
只要 cookie 里面有东西， 就会在发送请求的时候自动携带
前后端操作
前端可以通过js操作 cookie空间进行增删改查
后端也可以通过任何后端语言 进行cookie空间的增删改查
前端cookie（HTML）
前端设置cookie
document.cookie = ‘age=18;expires=事件对象’
expires 是设置过期时间
修改cookie
以为cookie 不能重名 所以直接在写一遍覆盖就行
删除 cookie
document.cookie = ‘age=18;expires=事件对象-1’;
获取cookie
document.cookie
后端cookie （PHP）
后端设置 cookie
php 里面有一个方法叫做 setcookie, 专门用来设置 cookie
语法: setcookie(key, value, 过期时间)
过期时间可以不写, 不写默认是会话界别的
setcookie(‘php_a’, ‘100’);
后端获取时间对象使用 time() 方法
拿到的就是世界标准时间, 单位是 秒
time() + 15 当前时间 15 秒以后
setcookie(‘php_b’, ‘200’, time() + 15) // 设置的这个 cookie 会在 15 秒以后过期
后端修改 cookie
也是使用 setcookie 这个方法
从新设置一次就可以了
后端删除 cookie
也是使用 setcookie 方法
只要把 cookie 的过期时间设置成当前时间以前就可以了
setcookie(‘a’, ‘我早上没吃饭’, time() - 1); // 让 a 这个 cookie 1 秒以前 过期, 删除
后端获取 cookie
php 有一个预定义变量叫做 $_COOKIE
是一个关联型数组
里面存储的就是一个一个的 cookie 信息
你想要哪一个, 就直接从 $_COOKIE 这个关联型数组里面获取
获取 cookie 里面的 a 成员
$a = $_COOKIE[‘a’];
$b = $_COOKIE[‘b’];
Ajax
什么是 ajax ？
Ajax
就是 JS 这个语言和 服务端 交互的手段
就是使用js的语法向后端发送请求
异步和后端交流的手段
最大特点就是局部刷新
a = async (异步)
j = javascript
a = and (和)
x = xml
发送 Ajax 请求
1.创建 ajax 对象
let xhr = new XMLHttpRequest()
2.配置请求信息
xhr.open(‘GET’, ‘./test.php’, true)
3.发送请求
xhr.send()
4接受响应
xhr.onload = function () {
console.log(xhr.responseText)
}
ajax 状态码
readyState 状态码
描述当前处于ajax的哪一步上
0：表示创建一个ajax对象成功了
1：表示配置请求信息成功了（也就是执行完了open）
2：表示响应体已经回到了浏览器（但是还不能使用 因为此时还是一个响应报文的形式）
3：浏览器正在解析响应报文
4：浏览器分离响应体成功 可以使用了 本次请求结束
onreadystatechange 事件 当状态码改变 会触发(0 -4 )
Ajax 的兼容处理
创建 ajax对象 的兼容
标准浏览器
let xhr = new XMLHttpRequest()
IE 低版本
Let xhr = new ActiveXObject(‘Microsoft.XMLHTTP’)
接受响应的兼容
标准浏览器
xhr.onload = function () {
console.log(xhr.responseText)
}
IE 浏览器：
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && /^\d{2}$/.test(xhr.status)) {
console.log(xhr.responseText)
}
}
跨域
三种解决办法：
1.jsonp
实现方法:
- script 标签会把请求的所有内容当做js代码运行
- script 标签的 src属性 不受浏览器同源策略的影响
结论: 使用 script 标签的src属性去请求 只要返回正确的js代码就可以
缺点: 极度不安全 只能用于GET请求
2.CORS
五年前火爆前端的跨域解决方案
目前占市场大概45%
和前端没关系 后端来操作 用ajax
配置 cors 跨域 PHP
header(“Access-Control-Allow-Origin:*”);
header(“Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS”);
header(‘Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid’);
代理
三年前火爆前端的跨域解决方案
目前占市场大概50%
因为浏览器不允许你请求一个非同源的地址
Promise
Promise
三个状态
成功 -》 fulfilled -》 过去完成时
失败 -》 rejected-》 过去完成时
继续 -》 pending -》 正在进行时
一旦状态确定 就不可更改
两种结果
继续 =》 成功
继续 =》 失败
Promise 语法
let p1 = new Promise(function(){ 你要做的异步事情 })
new Promise(function(resolve,reject){})
resolve 是成功的回调
reject 是 失败的回调
有两个方法
.then() 成功时执行的
.catch() 失败时执行的
在 let p1 = new Promise(function(resolve,reject){
在这里写 执行某一个 不可能都执行
resolve() 就调用 then里面的函数
reject(这里可以写报错信息) 就调用catch 里面的函数
})
async/await 语法
ES7 语法 回调地狱的终极解决方案
目的 把异步代码写起来像同步代码
async => 异步
await => 等待
- async关键写写在函数的前面，就把该函数变成了-个异步函数
2.await 是一个写在异步函数里面的关键字
a)你想使用await关键字 那么函数前面必须有async
3. await 关键字后面的必须是一个Promise对象
有了以上三个条件，我们就可以把本该在promise的then回调里面接受的结果，放在await关键字前面定义一个变量来接受了
await是什么意思
await后面必须是一个promise对象的时候
那么就会把代码停止在这里不动了，等到后面promise里面的异步 事仍做完以后
把结果给到前面的变量，在继续向后执行代码
只生效在当前作用域内部，也就是这 个async函数内部
闭包和继承
闭包
闭包的条件
1.在函数A内部直接或者间接返回一个函数B
2.在函数B内部使用这 函数A内部的数据
3.在A函数外部有一个变量接受这 函数B(一个不销毁的函数执行空间)
（函数内部的函数）(函数内部返回函数 才是闭包空间)
闭包的特点
1.延迟了变量的生命周期
2.函数外部可以操作函数内部的数据
3.保护变量私有化
统一有一个缺点
一个不会销毁的函数执行空间
导致内存泄漏
闭包的作用
当你需要延迟变量的生命周期的时候
或者你需要访问函数内部的私有变量的时候
（如果有别的方法 尽量不适用闭包函数）
间接的返回一个函数 （当你需要访问多个私有数据）
return 一个对象 或者数组 这个对象或者数组里面有个函数
继承
原型继承 (改变原型链的方式继承)
Student.prototype = new Person()
缺点: 继承的属性 没有继承在自己的身上
传递参数要在多个地方传递 不利于维护 阅读
借用构造函数继承
function Student() {
Person.call(this) //用的call 改变this指向
}
优点: 借用来的属性在自己身上 不需要_proto_ 上去找
缺点: 只能继承父类的属性 不能继承父类prototype上的方法
(一般构造函数的方法写在原型上 如果写在构造函数体内 如果 new 的实例越多 就开辟更多的函数空间 更占内存 所以把方法写在原型 上面)
组合继承
function Student() {
Person.call(this) //用的call 改变this指向
}
Student.prototype = new Person()
(一起使用)
es6的继承
class Student extends Person { (extends 关键字)
constructor() {
super() //在子类里面调用 借用父类的构造函数体
}
}
（class 子类 extends 父类）
Jquery
JQuery是一个 前端类库(方法库， 工具库);
JQuery 里面 95% 都是方法
JQuery 的优点
无双不能的选择器
无处不在隐式迭代
无与伦比的链式编程
jQuery号称 全兼容
JQuery 的特殊选择器
:first 获取第一个
:last 获取最后一个
:eq(索引) 获取索引位置的元素
:odd 获取索引为奇数
:even 获取索引为偶数的
JQuery 筛选器
用在 JQuery 选择的元素集合后面
都是方法 为了对选出来的集合 在进行筛选
- first() 筛选当前集合的第一个
- last() 筛选当前集合的最后一个
- eq(n) 筛选当前集合索引为 n 的
- next() 筛选当前元素的下一个兄弟元素
- prev() 筛选当前元素的上一个兄弟元素
- nextAll() 筛选当前元素的下面的所有兄弟元素
- prevAll() 筛选当前元素的所有上面的兄弟元素
- nextUntil(选择器) 筛选当前元素下面所有的兄弟元素 直到 选择器 为止 不包含 选择器
- prevUntil(选择器) 筛选当前元素上面所有的兄弟元素 直到 选择器 为止 不包含 选择器
- parent() 筛选当前元素的父元素
- parents() 筛选当前元素的所有父元素 直到html 包括html
parents( 选择器 ) 筛选当前元素的所有父元素 的 符合 选择器 的 元素 - parentsUntil( 选择器 ) 筛选当前元素上面所有父元素直到 选择器 为止 不包含 选择器
- children() 筛选当前元素的 所有子元素
- children( 选择器 ) 筛选当前元素 所有子元素 为 选择器的
- siblings() 筛选当前元素的所有兄弟元素
- find ( 选择器 )
- 在一个元素里面找后代 符合选择器的元素
- 在一个元素集合里面找 后代元素
- index()
找到当前元素的索引位置
拿到是一个数字
JQuery 操作文本内容
-
html() 操作文本内容 识别 html标签 可以拿到标签
如果是一个集合 那么就只能获取该集合的第一个元素的 内容 设置的时候 获取多少 设置多少 覆盖式写入 -
text() 操作文本内容 不识别html标签 拿不到标签
如果是一个集合 那么获取该集合 的所有内容
设置的时候 获取多少 设置多少 覆盖式写入 -
val() 操作 input 的 value 属性
如果是一个集合 那么就只能获取该集合的第一个元素的 value 设置的时候 获取多少 设置多少 覆盖式写入
都是读写的方法 不传参数 就是读取 写参数 就是设置
JQuery 操作类名
addClass( 要添加的类名 ) 添加类名
removeClass( 要删除的类名 ) 删除类名
hasClass( 要查找的类名 ) 判断有没有类名
toggleClass( 要切换的类名 ) 切换类名
JQuery 操作样式
css()
还可以链式编程
用法
- css(‘width’) 获取
不管行内 非行内 都能获取 但是 获取到的 带 单位 - css( ‘width’, ‘300’) 设置
获取多少 设置多少 设置的时候单位可以不写 默认添加px - css ({ }) 一下设置多个
传一个对象 可以一次性设置多个
JQuery 操作元素 属性
-
attr() 是一个读写的方法
attr(要读取的属性名) 读取
attr(属性名 , 属性值) 设置
所有属性都会显示在标签上
不管你设置的 是什么数据类型 都会变成字符串 -
removeAttr() 用来删除 attr（） 设置的属性
获取到多少 就删除多少 (针对 自定义属性)
可以删除 原生属性 -
prop() 一个读写的方法
prop(要读取的属性名) 读取
prop(属性名 , 属性值) 设置
非原生属性 不会显示在标签上
存储的是什么数据类型 获取就是什么数据类型
可以获取状态 attr() 不行 比如: checked -
removeProp() 用来删除 prop（） 设置的属性
获取到多少 就删除多少(针对 自定义属性)
不能删除原生 属性 -
data() 一个读写的方法
data(要读取的属性名) 读取
data(属性名 , 属性值) 设置
data() 设置的都是自定义属性 和原生属性没关系
设置的属性 不会显示在 标签上
把自定义的属性 放在一起 规划一下
可以获取 H5 标准自定义属性
data- 就是标准自定义属性 -
removeData() 删除 data() 设置的属性
三个方法存储内容: -
attr() 设置的自定义属性存储在标签身上
-
prop() 设置的自定义属性存在 对象里
-
data() 设置的自定义属性存在 专门的空间里
JQuery 绑定事件
on()
参数描述
on(事件类型 , 事件处理函数)
获取多少 元素 设置多少
on(事件类型 , 事件委托 , 事件处理函数)
on（事件类型 , 复杂数据类型 ,事件处理函数）
复杂数据类型是 触发事件传递的参数
on( 事件类型 , 事件委托 , 任意数据类型 , 事件处理函数)
on({ }) 传一个对象 可以绑定多个事件
one() 方法
参数和 on 一模一样
off() 方法 解绑事件
off(事件类型) 解绑该事件类型的所有事件函数
off(事件类型 , 事件处理函数 ) 解绑该事件类型 的 该事件处理函数
trigger() 专门触发事件的方法
trigger( 事件类型 ) 触发该元素的 这个事件类型
JQuery 自带的事件函数 (不能事件委托)
$(元素).click() 等等
$（元素）.scroll（） 浏览器滚动触发
$(元素）.hover() 移入 + 移除
两个参数都是函数 第一个函数是移入 第二个参数是移除 如果你就传入一个函数 不管移入还是移除都会触发
jQuery创建节点
(‘
Jquery插入节点
(父子关系)
1.内部插入 append()
父元素.append(要插入的子元素)
插入以后会放在父元素的最后一位
内部插入 appendTo()
要插入的子元素.appendTo(父元素)
插入以后会放在父元素的最后一位
内部插入 prepend()
父元素.prepend(要插入的子元素)
插入以后会放在父元素的第一位
内部插入 prependTo()
要插入的子元素.prependTo(父元素)
插入以后会放在父元素的第一位
兄弟关系：
外部插入 after()
页面元素.after(要插入的元素)
插入到页面元素的后面一个位置
外部插入 insertAfter()
要插入的元素.insertAfter(页面元素)
插入到页面元素的后面一个位置
外部插入 before()
页面元素.before(要插入的元素)
插入到页面元素的前面一个位置
外部插入 insertBefore()
要插入的元素.insertBefore(页面元素)
插入到页面元素的前面一个位置
JQuery 删除节点
remove() 删除自己
empty() 把自己变成空标签
JQuery 替换节点
replaceWith()
元素.replaceWith(想要替换成的元素)
replaceAll()
想要替换成的元素.replaceAll(元素)
JQuery克隆节点
clone()
返回值 : 就是克隆出来的元素集合,集合里面只有一个克隆出来的节点
有两个参数 都是布尔值 什么都不传 子元素也可以复制
第一个参数表示是否克隆自己的事件 默认值是false
第二个参数表示是否克隆子元素的事件 默认值跟随第一个参数 如果第一个是false 那么就是false
传个 true 就是可以克隆事件
传个 true 和 false 就是只克隆自己的事件 不克隆子元素的事件
阻止默认事件 和事件冒泡
return false
JQuery 获取元素大小 (不管盒模型是什么状态)
width() 获取内容区域的大小 不带单位 可以直接使用
height() 获取内容区域的大小 不带单位 可以直接使用
innerWidth() 获取内容区域的大小 + padding 不带单位 可以直接使用
innerHeight() 获取内容区域的大小 + padding 不带单位 可以直接使用
outerWidth() 获取内容区域的大小 + padding + border 不带单位 可以直接使用
outerHeight() 获取内容区域的大小 + padding + border 不带单位 可以直接使用
outerWidth(true) 获取内容区域的大小 + padding + border + margin 不带单位 可以直接使用
outerHeight(true) 获取内容区域的大小 + padding + border + margin 不带单位 可以直接使用
JQuery 元素的位置
offset() 是一个读写的方法 返回值是一个对象
读到元素的偏移量根据页面左上角来的距离
设置的话 元素.offset({left:xxx,top:xxx}) 传一个对象
设置的话 不管你原先有没有 就是你设置的值
position() 定位 只能读取 读取的也是一个对象
读取的是一个定位关系 也就是距离你的left值 和top值
写right 和bottom 会计算成top 和left 给你
如果你没定位就是距离父级来计算距离
JQuery 操作页面被卷去的高度和宽度 （都是读写的属性）
$(window) .scrollTop()
scrollLeft()
不传参数就是获取属性
传一个参数就是设置
Jquery 的入口函数
$(window).ready()
ready 跟window.onload 差不多
区别: window.onload 是所有资源加载完毕
ready() 是dom元素加载完毕
$(function(){}) === ready()
each() 方法 类似于forEach() 参数前两个反过来
他的语法是 each(function(index , item){})
JQuery 元素集合 转原生DOM元素 就是获取到索引
原生DOM元素 想使用JQuery的方法就要用 $() 包裹起来
JQuery 标准动画
show() 显示
hide() 隐藏
toggle() 切换
它们三个参数一样
第一个参数 运动时间
第二个参数 运动曲线
第三个参数 运动结束的回调函数
JQuery 折叠动画
slideDown() 下拉显示
slideUp() 上拉隐藏
slideToggle() 切换
它们三个参数一样
第一个参数 运动时间
第二个参数 运动曲线
第三个参数 运动结束的回调函数
JQuery 渐隐渐现
fadeIn（） 显示
fadeOut（） 渐隐
fadeToggle （） 切换
它们三个参数一样
第一个参数 运动时间
第二个参数 运动曲线
第三个参数 运动结束的回调函数
JQuery 操作透明度
fadeTo（）
第一个参数 运动时间
第二个参数 一个指定的透明度
第三个参数 运动曲线
第四个参数 运动结束的回调函数
JQuery 综合动画
animate（）
改不了颜色 transform 改不了
第一个参数： 对象 要改变的样式
第二个参数 ： 运动时间
第三个参数 ： 运动曲线
第四个参数 ： 运动结束的回调函数
stop() 停止动画
finish() 直接完成动画
JQuery 发送ajax请求
$.ajax() 传个对象 配置信息
url： 请求地址
type： 请求方式 默认是get (也可以用 method)
asyns： 默认是true 是否异步
data： 可以写成对象 也可以写成字符串 像后端传的数据
dataType： 默认是string不解析 可以选json 解析 也可以传个jsonp 就是jsonp 跨域
success： 成功的回调函数
error: 失败的回调函数
timeout 设置超时时间
cache 是否缓存 默认是true 缓存
context 改变回调函数的this的指向
jsonp: 传递到后端函数名的key
当dataType 等于jsonp cache 就是false
如果不写jsonp 默认是 callback
也可以用.then() 接受响应
success 在对象里面用 || .then() 在对象后边用
也只有url 是必填
失败的回调 不仅是请求失败的时候触发 解析失败也是失败 也触发
失败的回调函数 有三个参数
- xhr => ajax对象
- err => 错误信息 简单描述
- info => 详细的错误信息
$.ajax（） 的回调函数this 指向
默认指向被JQuery 加工过的ajax 对象
context可以修改这个this 指向
JQuery 专门发送get请求
$.get( )
JQuety 专门发送post请求
$.post()
它们两个参数 一样
第一个参数 请求地址
第二个参数 要携带的参数
第三个参数 请求成功的回调函数
第四个参数 希望后端返回的数据类型
除了 第一个参数 其他的参数 都是选填 第四个参数 传个’json’ 自动帮你 解析
JQuery全局的ajax函数
也叫做 全局ajax 钩子
和发送请求没关系 （不是用来发送请求的）
这些全局 钩子函数 都是挂在ajax 身上
而是通过你的每一个请求来执行一些函数
ajaxStart（funcition(){}）
同级作用域 下 在你第一个请求开始之前 会触发这里面的函数 如果有多个ajax 只触发一次
ajaxSend(function(){})
这里面的函数 在每一个ajax请求准备send之前触发
ajaxSuccess（function（）{}）
这里面的函数 在每一个 ajax请求成功之后触发
ajaxError(function（）{})
这里面的函数 在每一次 ajax请求失败之后触发
ajaxCompLete（）
这里面的函数 在每一次 ajax请求完成触发不管成功和失败
ajaxStop()
这里面的函数 在同级作用域内 最后一个ajax结束之后触发
如果有多个ajax 只触发一次
上面的都是 $(window). 调用
顺序 一般
ajaxStart()
ajaxSend()
ajaxSuccess() || ajaxError
ajaxCompLete()
ajaxStop()
JQuery 多库并存
.noConflict()执行了这个方法JQuery会把 .noConflict() 执行了这个方法 JQuery 会把.noConflict()执行了这个方法JQuery会把 控制权交出去
.noConflict(true)执行了这个方法JQuery会把 .noConflict(true) 执行了这个方法 JQuery 会把.noConflict(true)执行了这个方法JQuery会把 控制权交出去 和JQuery 控制权交出去
noConflict() 有一个返回值 用一个变量名接受一下 就可以继续使用了
JQuery 的插件扩展
$.extend()
扩展的方法 使用的时候 $. 你扩展的方法名()
不需要隐式迭代
.fn.extend()扩展的方法使用的时候 .fn.extend() 扩展的方法 使用的时候.fn.extend()扩展的方法使用的时候(). 你扩展的方法名()
需要隐式迭代
他们的语法一样
$.extend({
你要扩展的方法1: function(){},
你要扩展的方法2: function(){}
})
JQuery 拷贝对象问题
$.extend()
传递一个对象 可以做到 插件扩展
传递多个对象 可以将后面几个对象内容复制到第一个对象里面
$.extend(是否深拷贝, 对象1 ,对象2, …)
第一个参数可以不写 默认是false
JQuery的表单验证插件
jquery_validate
是一个基于JQuery 的插件
$（form）.validate({
relues: { 配置那些input 需要验证 },
messages: {那些input的提示信息需要自定义},
submitHandler: function(form) { AJAX 请求放在这里面 }
})
JQuery 的方法 serialize() 快速从表单中获取数据
修改错误信息的样式 在style 里面写
input.error { 要修改的样式写在这里面 } 这是修改 错误的 input标签的
label.error { 要修改的样式写在这里面 } 这是修改 错误信息的
gulp
了解 gulp (前端自动化打包构建工具)
打包
把多个散乱的文件 收拾在一起
多个文件合成一个文件
对代码的压缩 混淆
构建
直接使用这个工具 给我一个目录结构
把该配置好的东西都配置好
我知道直接写代码 会自动打包
gulp 版本
3.x.x 市场最多的版本
4.x.x 所有公司都在做迁移
自动化打包构建工具
gulp
环境 : node
规则： 基于文件和文件夹进行打包
流程： 基于流 进行打包构建
工作： 通过一个一个的任务进行工作
webpack
环境： node
规则：基于一个js文件进行打包
流程：基于模块进行打包构建
工作：通过一个一个的模块，插件，loader进行工作
流：（了解）
当你使用代码读取磁盘的内容的时候
不是立即把磁盘的内容给你看
而是处理成我们不认识（二进制形式）
当这个二进制文件 被包装过以后 就是一个可以使用方法的二进制流
gulp 安装
直接 在电脑里面安装 是一个工具
使用 npm 进行安装
npm install --global gulp || npm i -g gulp
gulp 检查安装
gulp --version
如果你的是4.x.x 出现的脚手架 cli 版本号
gulp 卸载
使用 npm 进行卸载
npm uninstall --global gulp
使用gulp
当你安装完以后 就有了对项目的打包能力
如果想打包 需要一个配置文件
你需要告诉 gulp 做哪些事情
gulp 准备
- 要有一个项目
- 在项目文件夹里面准备一个源码的文件夹
- 准备一个文件夹 存放打包后的代码 （gulp帮我们创建）
- 需要一个我们这个项目的配置打包文件
统一起名 : gulpfile.js (gulp 只认识这个名字 ) - 因为是一个项目 需要用到第三方 用npm 管理下
- 确定我们源码的目录结构
目录结构配置好 才好写 配置打包文件
一般的都是 src 源码目录 - pages => html 文件
- css => 存放css文件
- js => 存放js文件
- sass => 存放sass文件
- images => 存放图片
- videos => 视频
- audios => 音频
- lib => 我项目用到的公共资源
全局 gulp 和项目 gulp 的区别
1.npm i -g gulp //全局工具
a)一个电脑安装一次
2.npm i gulp // 项目依赖 第三方模块
a)为了在gulpfile.js 文件导入使用
b)一个项目安装一次
c)别人写好的方法 放到了里面
d)用来提供一下API
e)每一个项目都要使用
f)卸载 npm uninstall gulp
dependencies 项目依赖
devDependencies 开发依赖
下载项目依赖
npm i 包名
下载开发依赖
npm i --save-dev 包名 || npm i -D 包名
第三方 gulp 模块 常用方法
导入模块 let gulp = require(‘gulp’);
gulp.task() 创建一个任务
语法 : gulp.task(任务名称 , function(){这个任务需要做什么})
gulp.src() 用来找文件的
几种使用方式
gulp.src(‘./src/pages/index.html’) 找到文件
gulp.src(‘./src/pages/.html’) 找到所有html文件
gulp.src(‘./src/pages/’) 找到所有文件
gulp.src(‘./src//.html’) 找到src所有文件夹下的html文件
gulp.pipe() 管道函数 用了执行某些方法
gulp.pipe(你要执行的方法)
gulp.dest() 放到哪一个目录下
gulp.dest(你要存放的目录)
gulp.series() 可以逐个执行多个任务
gulp.series(任务1，任务2，任务3)
返回值是一个任务流 只要返回值执行 就能把好几个任务逐一执行
gulp.parallel() 多个任务同时执行
gulp.parallel(任务1，任务2，任务3)
返回值是一个任务流 只要返回值执行 就能把好几个任务同时执行
gulp.watch() 监考一个文件夹
当内容有改变 重新打包
gulp.watch(要监控的文件夹 , 要执行的任务)
运行任务 直接 在当前目录 命令行 输入
gulp 任务名称
sass
了解 SASS
是一个css 的预编译工具
写在 .scss || .sass 后缀的文件里面
浏览器不认识 这两种文件 需要先转换成css文件在运行
预编译
可以把sass 编译成 css
.scss 和 .sass 的区别
- .scss 后缀的 和写 css 一样
- .sass 后缀的 没有 {} 和 ;
sass 和 css 的区别
- css 文件 后缀是 css
- sass 文件后缀是 sass || scss
sass 编译工具
编译工具 就叫 sass
以前依赖 ruby 环境 后来依赖 python环境
现在依赖node环境
sass 安装
需要下载一个工具 编译 成css文件
npm install --global sass || npm i -g sass
sass 检测
sass --version
sass 卸载
npm uninstall -g sass
sass 编译
单文件编译
指令 : sass 要编译的文件名 编译后生成的文件名
把一个 .scss 的文件编译成 .css 文件
打开命令行 切换到 目录到你要编译的那个文件目录
编译后 会有一个编译后的文件 和编译映射文件
每次修改都要重新编译
单文件实时编译
指令: sass --watch 要编译的文件:生成的文件
把一个 .scss 的文件编译成 .css 文件
随着 修改 css 文件也会立马修改 同步
一个终端只能监控一个文件
实时编译文件夹
指令： sass --watch 要编译的文件夹:生成的文件夹
能监控一个文件夹 任意一个修改了 同步修改
把文件夹里面的scss的文件都编译成css文件
生成map 文件的作用
映射生成代码的位置到源文件位置
在浏览器的控制行 直接样式映射到sass文件的对应行
sass注释
// 单行注释 编译的时候回消失
/**/ 多行注释 会编译 打包的时候会消失
/!/ 强力注释 编译 打包的时候 会保留
sass变量
可以把一些值定义成一个变量 使用的时候直接用变量
定义变量 使用 $变量名: 值; (值不需要引号)
定义好的变量 不使用 不会编译
使用的时候 在值的地方用
sass 条件分支语句 （依赖变量使用）
if () {}
语法 : @if 变量 == 值 { 样式 }
if else(){}
语法：@if 变量 == 值 { 样式 } @else { 样式 }
if else if(){}
语法: @if 变量 值 {} @else if 变量 值 {} @else if 变量 == 值 {}
sass 循环语句
- @for 变量 from 开始数字 to 结束数字 { 样式 }
(不包含结束的数字)
在循环里面使用变量
在选择器中使用变量 #{变量}
在样式里面使用变量 变量
@for KaTeX parse error: Expected ‘}’, got ‘#’ at position 35: … li:nth-child(#̲{i}){
height: 10px * $i;
}
}
2. @for 变量 from 开始数字 through 结束数字 { 样式 }
包含结束数字
在循环里面使用变量
在选择器中使用变量 #{变量}
在样式里面使用变量 变量
@for KaTeX parse error: Expected '}', got '#' at position 32: … li:nth-child(#̲{i}){
height: 10px * $i;
}
}
- each 循环
依赖sass 数组使用
语法: @each 变量1 , 变量2, … in 数组 {}
2012
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
