知识点总结第一部分

于 2020-03-08 15:47:28 发布
阅读量247 收藏
点赞数
文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AsuraThor/article/details/104725057
版权

前后端认知

前端

用户的可见界面
数据展示在页面上给用户看到

后端

把前端的数据储存到数据库，把数据库的数据的数据传递给前端

数据库

一个储存数据的仓库，后端可以进行增删改查等一些操作

服务器

服务器的作用

把电脑上的某一块磁盘空间对外开放，别的小伙伴可以通过网络访问该空间里面的内容

服务器环境搭建

使用一个软件就可以实现，即phpstudy，当软件启动时，就会将你电脑的某一块空间开放

PHP代码的书写规范

解决中文乱码问题

在书写代码之前，告诉浏览器需要用什么字符集格式解析，即
header('content-type: text/html;charset=utf-8;');

输出语句

echo

只能输出基本数据类型，输出复杂数据类型会报错
遇到布尔值的时候，true会输出1，false会输出空白内容

print_r()

可以输出所有数据类型
遇到布尔值的时候，true会输出1，false会输出空白内容

var_dump()

可以输出所有数据类型
遇到布尔值的时候，true会输出true，false会输出false
输出内容时，会输出所有数据类型，和数据信息

定义变量 $

直接使用$名定义，使用的时候直接使用$名作为变量名

单引号字符串

$str = '';单引号字符串是一个普通字符串，直接输出里面的内容

双引号字符串

$str = "";双引号字符串的里面可以直接解析变量

连接符

php的连接符是一个英文的点 .，直接使用就可以完成拼接

分支结构

条件分支

if () {} if () {} else {} switch () {} 使用方式与JS相同

循环结构

while () {} do {} while () for () {} 使用方式与JS相同

数组

关联型数组

相当于JS里面的对象 $arr = array('name' => 'Jack', "age" => 18, 'gender' => '男', 'boo' => true);

索引型数组

相当于JS里面的数组 $arr = array(1, 2, 3, 4, 5);

JSON格式转换

php的关联型数组和JS的对象一样，但是它传递给前端的时候，前端不认识，所以就需要进行一个格式转换

php数据转换为json格式

json_encode(php数据) 转换后输出的就是前端认识的json格式数据

json数据转换为php格式

json_decode(json数据) 转换后输出的就是php认识的php格式数据

导入文件

include "./base.php"; 文件通过该语法导入后就可以执行

数据库

定义

一个储存数据的”仓库“，一个总的数据库还包含了很多小“仓库”，用户可以在一个可视化界面对这个数据库进行"小仓库"的创建，并且可以对里面的数据进行增删改查等一系列操作

后端操作数据库

建立连接

mysqli_connect('IP地址', '数据库用户名', '数据库密码', '小仓库');
其中ip地址就是数据库存在的那一台电脑的ip，“小仓库”就是你需要操作的”仓库“

操作数据库

$res = mysqli_query($link, 'SELECT * FROM users');
其中users就是你要操作的数据库的某一项内容，这段语句是查询所有users，*的意思是查询所有

解析结果

$row = mysqli_fetch_assoc($res);
解析你查询到的结果
$data = mysqli_fetch_all($res, MYSQL_ASSOC);
解析获取到的全部结果，需要查看全部结果的话要把全部结果循环到一个二维数组

输出查看

print_r($data);
直接print_r();就可以查看你获取到的数据

断开连接

mysqli_close($link);
操作完成后就可以使用这条语句断开与数据库的连接

http传输协议

定义

ttp是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应

步骤

一个http请求一共会有四个步骤

  1. 建立连接
    基于tcp/ip协议的三次握手，目的是为了前后端可以正常通信
  2. 前端发送请求/请求报文
    请求报文行+请求报文头+请求报文空行+请求报文体
  3. 后端响应
    响应状态行+响应报文头+响应报文体
  4. 断开连接
    基于tcp/ip协议的四次挥手，保证不再互相进行通讯

请求方式（常见八种）

  1. GET > 多用于向服务端获取一些数据
  2. POST > 多用于向服务器传递信息
  3. PUT > 多用于向服务器传递信息, 并让服务器存储起来
  4. DELETE > 多用于让服务器删除一些信息
  5. HEAD > 不需要响应体, 主要是为了获取响应头信息
  6. PACTH > 和 PUT 类似, 倾向于局部更新
  7. CONNECT > 预留方式, 管道连接改成代理连接的方式
  8. OPTIONS > 用于允许前端查看服务端性能(服务端同意)
POST请求
  1. 倾向于向服务器传递数据
  2. 再请求体里面传递过去(地址后面没有)
  3. 理论上是没有限制(但是可以被服务器限制)
  4. 不会被浏览器主动缓存, 需要手动设置
  5. 相对于 GET 比较安全的(暗文发送)
  6. 数据格式理论上无所谓, 但是要和请求头中的 content-type 一致
GET请求
  1. 倾向于向服务器获取数据
  2. 直接再地址后面进行拼接(请求体是空的)
  3. 大小限制为 2KB 左右(因为 IE 最多传递 2KB)
  4. 会被浏览器主动缓存
  5. 相对于 POST 不是很安全(明文发送)
  6. 数据格式必须是 url 编码的格式, 如果不是会自动转换成 url 编码

响应状态吗

响应报文里面的一个信息，用来表示此次请求的状态

100-199

表示连接继续，继续请求

200-299

表示各种意义上的成功，200标准成功

300-399

重定向，看到的路径和请求的路径不同，经过服务器处理
304 缓存 / 301 永久重定向 / 302 临时重定向

400-499

各种客户端错误：404 请求地址错误 / 403 权限不够不允许查看

500-599

各种服务端错误：502 服务器维护或过载

关于Cookie

一个在客户端的储存空间，以字符串形式储存一些数据，可以设置过期时间（一定时间内免登陆操作）

Cookie的特点
  1. 按照域名储存
    哪一个域名下储存的内容，只能在这个域名下使用。和资源路径地址没有关系
  2. 储存大小限制
    可以储存4KB左右内容，大概相当于50条信息
  3. 时效性
    默认会话级别的时效性，关闭浏览器销毁。可以设置不销毁，N天失效
  4. 请求自动携带
    Cookie空间里面有内容的时候，当前域名下的任意一个请求，都会自动携带Cookie放在请求头里面
  5. 前后端操作
    前端后端都可以通过自己的方式对进行一系列操作

关于Ajax

什么是Ajax

Ajax是JS中，与php交互的一种手段，利用Ajax进行的请求，php输出的内容就不会显示到页面。可以通过JS渲染到页面。它是一种异步的xml和js交互的手段。

发送Ajax步骤

  1. 创建一个Ajax对象
    new XMLHttpRequest() 实例化一个对象，帮我们发送请求
  2. 配置信息
    ajax对象.open(请求方式, 请求地址, 是否异步) 默认异步(true)，同步是(false)
  3. 发送请求
    ajax对象.send() 把配置好的请求发送出去
  4. 接受响应
    ajax对象.onload = function () {ajax对象.responseText} 接受后端的响应，响应体放在{}内

Ajax状态码

获取状态码：ajax对象.readyState
0: 表示创建一个 ajax 对象成功
1: 表示配置请求信息成功(也就是执行完 open)
2: 表示响应体已经回到了浏览器, 但是还不能使用(因为此时还是一个响应报文)
3: 浏览器正在解析响应报文(把响应报文里面的响应体分离出来)
4: 浏览器分离响应体成功, 已经可以正常使用(本次请求结束）

Ajax的兼容处理

标准浏览器创建

new XMLHttpRequest 创建ajax对象的时候不兼容

IE低版本浏览器创建

new ActiveXObject IE低版本处理

标准浏览器接受响应

onload 接受响应

IE低版本浏览器接受响应

onreadystatechange IE低版本处理

同源策略

定义

浏览器的发送请求的限制，一种基本的安全功能。当传输协议、域名、端口号之中有任意一个不同的时候，浏览器就认为你在请求别人的服务器，会限制你的请求，触发同源策略。我们管触发同源策略的请求叫做跨域请求

解决方式

jsonp

script 标签
+ 默认有一个 type 属性, 值是 text/javascript
+ 不管 src 请求什么文件, 都是把文件里面的所有内容都当作字符串读取出来
+ 把读取出来的字符串当作 js 代码来执行
+ script 的 src 属性不受浏览器同源策略的影响
+ 使用 script 标签的 src 属性去请求一个别人家的服务器

CORS跨域资源共享

让别人的服务器告诉浏览器允许跨域请求，使用一串代码可以实现
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');

使用代理

代理跨域请求

  1. 在浏览器同源设置一个 代理服务器
  2. 把本该发送给目标服务器的请求发送给代理服务器
  3. 由代理服务器转发请求给目标服务器
  4. 目标服务器把响应返回给代理服务器
  5. 代理服务器 在把响应给到浏览器

我们可以使用nginx代理
把apach服务器切换为nginx

回调函数callback

定义

在函数里面以形参的方式调用一个传递进来的参数。在异步的末尾做一些事情的时候使用。

回调地狱

回调函数嵌套过多，就造成了回调地狱。没有可维护性和可读性

解决方法

方法一 Promise

Promise是解决回调地狱的方案，它有三个状态

  1. Pending 异步的事情正在进行
  2. Fulfilled 异步的事情成功了
  3. Rejected 异步的事情失败了
实现

在成功的时候返回一个成功的回调，在失败的时候返回一个失败的回调
Promise这个构造函数里面有两个对象then和catch，前者表示成功的回调，后者表示失败的回调
let p = new Promise(function (resolve, reject) {在这里做一个异步的事情 })
p.then(function () {})
p.catch(function () {})
Promise的链式调用：在then里面再次return一个promise对象，就可以在then后面继续then

let p = new Promise(function (resolve, reject) {
	//在这里做一个异步的事情
}).then(function () {
  return new Promise(function () {
       //第二个异步的事情
  })
}).then(function () {
})
方法二 async / await 语法

async/await是ES7新增的语法，我们用这个语法把异步代码写的像同步代码

实现
  1. async关键字必须写在一个函数的前面
  2. await关键字必须写在异步函数里面
  3. await关键字后面必须是一个promise对象
async function fn() {
      // 1. 第一个请求
      var res = await pGetSend('./server/a.php')
      var result = JSON.parse(res)
      console.log('第一次请求的结果')
      console.log(result)
      // 2. 第二个请求
      var res2 = await pGetSend(`./server/b.php?n1=${result.n1}&n2=${result.n2}`)
      var result2 = JSON.parse(res2)
      console.log('第二次请求的结果')
      console.log(result2)
      // 3. 第三个请求
      var res3 = await pGetSend(`./server/c.php?and=${result2.and}&n3=${result2.n3}`)
      console.log('第三次请求的结果')
      console.log(res3)
}
fn()

有了await以后，我们就可以把本该在 then里面接受的结果，在await前面定义一个变量来接受

兼容处理：利用网页工具bable

闭包

参考 关于闭包的一些事

继承

让一个构造函数继承另外一个构造函数的属性和方法，发生在两个构造函数之间。子级继承父级

ES5的继承方案

原型继承

通过改变原型链的方式来达到继承。缺点是继承下来的属性没有继承在自己身上，需要去_proto_里面找

//父类
function Person(name){
  this.name = name
}
Person.prototype.sayHi = function (){
  console.log('hello world')
}

//子类
function Student(age){
  this.age = age
}
//实现Student继承Person
Student.prototype = new Person('Jack')
var s1 = new Student(18)
console.log(s1)
借用构造函数继承

在子函数的构造体内，借用父类的构造函数继承，强制让父类的this指向子类的实例
call函数的应用：call是改变函数内部this指向的方法之一
借用继承的优点：继承的属性都在自己身上
借用继承的缺点：无法继承父类原型prototype上的方法

//父类
function Person(name, gender) {
    this.name = name
    this.gender = gender
}
Person.prototype.sayHi = function () {
    console.log('hello world')
}
//子类
function Student(age, name, gender) {
    this.age = age
    //这里的 this 指向 的是 Student 的当前实例(s1)
    //调用 Person 函数, 把函数内部的 this 指向了 Student 的实例
    //也就是现在让 Person 函数内部的 this 指向了 s1
    //Person 里面的代码
    //this.name 相当于是 s1.name
    //利用父类构造函数体, 向子类身上添加成员
    Person.call(this, name, gender)
}
var s1 = new Student(18, 'Rose', '男')
console.log(s1)
组合继承

组合继承就是将原型继承和借用构造函数继承组合到一起使用。
缺点：子类本身的方法就没有了，需要继承后再添加。

ES6继承方案

使用继承关键字继承

实现

语法：calss 子类 extends 父类
子类通过super完成继承

//父类
class Person {
    constructor (name) {
      //等价于我们的构造函数体
      this.name = name
    }
    //原型上的方法
    sayHi () {
      console.log('hello world')
    }
}
//子类
//一个继承自 Person 的 Student 子类
class Student extends Person {
    constructor (age, name) {
      //super(name)就相当于我们 es5 的借用构造函数继承
      //只不过不需要我们写 call 去改变 this 指向了
      //直接帮我们改变好 this 指向了, 我们只需要传递参数就可以了
      super(name)
      this.age = age
    }
    son () {
      console.log('我是子类的方法')
    }
}
var s1 = new Student(18, 'Jack')
console.log(s1)

设计模式

针对特定的问题,给出的简洁而优化的处理方案

单例模式

需要一个构造函数一生只能new出一个对象的时候，就可以使用单例模式

组合模式

把几个构造函数的入口函数组合在一起，然后使用一个“遥控器”统一控制

观察者模式

两个构造函数，一个被观察者。一个观察者。
当被观察者自身状态改变的时候，观察者给出响应，触发技能，实现要做的事

jQuery

jQuery是一个快速简洁的代码库。

特点
  1. 优质的选择器个筛选器
  2. 方便的隐式迭代
  3. 强大的链式编程
		//选择器
		1. $() =>  jQuery的选择器
		2. jQuery => jQuery的选择器 任选其一
		3. :first => 获取第一个
		4. :last => 获取最后一个
		5. :eq(数字) => 获取索引为n的那一个
		6. :odd => 获取索引为奇数的那些
		7. :even => 获取索引为偶数的那些
		
		//筛选器
		8. first() => 筛选出一个元素集合里的第一个
		9. last() => 筛选出一个元素集合里的最后一个
		10. eq() => 筛选出一个元素集合里面索引为n的那一个
		11. next() => 筛选出元素的下一个兄弟元素
		12. nextAll() => 筛选出元素后面所有的兄弟元素
		13. nextAll(选择器) => 筛选出下面所有兄弟元素中符合选择器要求的元素
		14. nextUntil(选择器) => 筛选元素后面所有的兄弟元素直到选择器元素为止
		15. prev() => 筛选出元素的上一个兄弟元素
		16. prevAll() => 筛选出元素的上面所有兄弟元素
		17. prevAll(选择器) => 筛选上面所有兄弟元素中符合选择器条件的
		18. prevUntil(选择器) => 筛选元素上面的所有兄弟元素直到选择器元素为止
		19. parent() => 筛选出元素的父元素
		20. parents() => 筛选元素的所有祖先元素,直到html元素为止
		21. parents(选择器) => 找到所有祖先元素中满足选择器的那一个
		22. parentsUntil(选择器) => 筛选元素的所有祖先元素,直到选择器元素为止
		23. children() => 筛选出元素所有的子级元素
		24. children(选择器) => 筛选所有子元素里面符合选择器条件的元素
		25. siblings() => 筛选出所有的兄弟元素 不包括自己
		26. siblings(选择器) => 筛选所有兄弟元素中满足选择器要求的元素
		27. find(选择器) => 只要后代元素里面有就可以, 就能找得到
		28. index(index,item) => 获取到元素的索引位置 结果是一个number数字
			第一个参数是索引,第二个参数是每一项
		
		//操作文本
		30. html() => 操作文本内容
			不传参数的时候,获取元素内部的超文本内容/传参数的时候,设置元素内部的超文本内容
		31. text() => 一个读写的方法
			不传参数的时候,获取元素内部的文本内容/传参数的时候,设置元素内部的文本内容
		32. val() => 操作input标签/不传递参数的时候,获取标签value/传参数的时候,设置value
		
		//操作类名
		33. addClass() => 添加类名/给集合里所有元素添加固定类名
		34. removClass() => 移除类名/移除集合里所有元素类名
		35. toggleClass() => 切换类名/切换集合所有元素类名/有这个类名就删除/没有这个类名就添加
		36. hasClass() => 判断有没有某一个类名/返回布尔值
		
		//操作元素样式
		37. css() => 一个可读写的属性/不同操作不同参数
		38. css('样式名称','样式的值') => 能获取多少元素就设置多少/px
		39. CSS('样式名称') => 获取样式的值
		40. css({
			属性1:值1,
			属性2:值2,
			属性3:值3,
			...
		}) => 批量设置集合里的所有元素样式值
		
		//操作元素属性
		//attr不管设置什么数据类型,都会变成字符串/所有的属性都会显示在标签上(原生属性和自定义属性)
		41. attr() => 读写/attr(属性名,属性值)一个参数是读取,两个参数是设置
		42. removeAttr() => 移除属性
		
		//prop非原生属性,不会显示在标签上,但可以获取使用/储存什么数据类型就可以获取什么数据类型
		43. prop() => 传递一个参数是读取,传递两个参数是设置
		44. removeProp() => 移除属性/不能移除原生属性id/class/style
		
		//data和元素的原生属性没有关系,可以设置id,但和元素的id没关系/储存数据/不改变数据类型
		45. data() => 传递一个参数是读取,传递两个参数是设置
		46. removeData() => 删除属性
		
		//绑定事件
		47. on() => 绑定事件
		48. one() => 绑定一个只能执行一次的方法
		49. off() => 解绑一个元素的事件
		50. trigger() => 专门用来触发事件的方法/不用点击
		51. click(参数,事件处理函数) => 事件函数
		52. hover() => 表示一个鼠标悬停动作/移入移出触发

		//节点操作
		//创建节点
		1. $(html格式的文本)
		
		//插入节点
		//内部插入
		2. 页面元素.append(需要插入的元素)
		3. 需要插入的元素.appendTo(页面元素)
		4. 页面元素.prepend(需要插入的元素)
		5. 需要插入的元素.prependTo(页面元素)
		//外部插入
		6. 页面元素.after(需要插入的元素)
		7. 需要插入的元素.insertAfter(页面元素)
		8. 页面元素.before(需要插入的元素)
		9. 需要插入的元素.insertBefore(页面元素)
		//删除节点
		10. 页面元素.empty() => 把自己变成空标签
		11. 页面元素.remove() => 把自己移除
		//替换节点
		12. 页面元素.replaceWith(替换元素)
		13. 替换元素.replaceAll(页面元素)
		//克隆节点
		14. 元素.clone() => 参数1:自己的事件是否克隆 参数2:子节点事件是否克隆,
			=> 不管是否传递参数,都会克隆后代元素( 元素+文本+属性+行内样式 )
			=> 参数只决定是不是克隆元素身上的事件
		
		//获取元素尺寸
		15. width() height() => 获取元素内容区域的尺寸
		16. innerWidth() innerHeight() => 获取元素和padding区域的尺寸
		17. outerWidth() outerHeight() => 获取元素内容和padding和border区域的尺寸
		18. outerWidth() outerHeight() => 获取元素内容和padding和border和margin区域的尺寸
		
		//获取元素位置
		19. offset() => 偏移量
			=> 一个可读写的属性,不传参就是读取,返回值是一个对象{left:px,top:px}
			=> 传递对象写入{left:px,top:px}
		20. position() => 定位/只读方法
			=> 元素相对于定位父级的位置关系/返回一个对象{left:px,top:px}
	
		//获取卷去的尺寸
		21. scrollTop() => 不传参就是获取卷去高度/传参就是设置卷去高度
		22. scrollLeft() => 不传参就是获取卷去的宽度/传参就是设置卷去的宽度
			=> 设置的时候不会滚动回去,而是直接跳转到固定位置/定时器或运动函数
		
		//jQuery函数
		23. ready() => 类似window.onload事件/页面html结构加载完毕后执行
			=> jQuery的入口函数 -> $(function(){})
		24. each() => 类似遍历数组/jQuery集合
			=> each(function(index,item){})
		
		//jQuery动画
		25. show() => 显示/show(时间,运动曲线,运动结束函数)
		26. hide() => 隐藏/hide(时间,运动曲线,运动结束函数)
		27. toggle() => 切换/toggle(时间,运动曲线,运动结束函数)
			=> 方法可以选填
		28. slideDown() => 下滑显示/slideDown(时间,运动曲线,运动结束函数)
		29. slideUp() => 上滑隐藏/slideUp(时间,运动曲线,运动结束函数)
		30. slideToggle() => 切换滑动显示和隐藏/slideToggle(时间,运动曲线,运动结束函数)
			=> 以上三个方法参数可以不填
		31. fadeIn() => 渐显/fadeIn(时间,运动曲线,运动结束函数)
		32. fadeOut() => 渐隐/fadeOut(时间,运动曲线,运动结束函数)
		33. fadeTo() => 去到指定透明度/fadeTo(时间,指定透明度,运动曲线,运动结束函数)
		34. animate() => 综合动画/animate({},时间,运动曲线,运动结束函数)
			=> {}里面写需要运动的css属性
		35. stop() => 停止动画/此函数触发时运动停止,做完当前所有命令
		36. finish() => 动画完成/不管运动到哪,瞬间运动完成
jQuery的多库并存机制

因为jQuery引入页面之后，向全局添加了两个名字$和jQuery，为了避免引入的其它类库发生名字冲突，jQuery提供了一个不占用这两个名字的方法。

  1. noConflict()或者iQuery.noConfilct()
    执行完这条语句后，jQuery就交出了控制权，返回值是新的控制权，可以给jQuery定义一个新的控制权
jQuery的插件扩展机制

jQuery提供了很多方法，但是当我们需要的方法没有的时候，我们就需要自己扩展一些方法

  1. $.extends()
    扩展给jQuery本身使用
    语法：$.extends({需要扩展的方法名：function(){},.......})
    使用：$.方法名()
  2. $.fn.exxtend()
    扩展给元素集合使用的
    语法：$.fn.exxtend({需要扩展的方法名：function(){},......})
    使用：$(选择器).方法名()
AsuraThor
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值