js知识点总结

最新推荐文章于 2022-09-10 18:43:48 发布

weixin_46389498

最新推荐文章于 2022-09-10 18:43:48 发布

阅读量97

点赞数

本文链接：https://blog.csdn.net/weixin_46389498/article/details/104735891

版权

js知识点总结

php操作数据库
- 建立和数据库的连接

   $link = mysqli_connect('localhost','root','root','数据库名字');

执行sql语句

 $res = mysqli_query($link,'执行的sql语句');

解析结果

   mysqli_fetch_assoc(要解析的内容)   //解析一条内容
   mysqli_fetch_all(要解析的结果,MYSQL_ASSOC)   //解析多条数据

断开连接

mysqli_close($link)

cookie
- 是一个浏览器端的存储空间,存储格式是字符串的形式
- 特点
  1. 按照域名存储
  2. 存储大小有限制(4KB左右,50条左右)
  3. 时效性(默认是会话级别,也可以手动设置)
  4. 请求时自动携带
  5. 前后端可操作
- cookie的操作
  - 设置cookie
```
document.cookie = 'a = 200' //不带过期时间
document.cookie = 'a = 200;expires=时间对象'
```
  - 修改cookie
```
document.cookie = 'a = 100'
```
  - 删除cookie
```
document.cookie = 'a = 100;expires=当前时间以前'
```
  - 查询cookie
```
document.cookie
```

ajax请求

ajax是js和后端交互的手段

发送一个ajax请求

//1.创建一个ajax对象
let xhr = new XMLHttpRequest()
//2.配置请求信息
xhr.open('请求方式','请求地址',是否异步)
//3.发送请求
xhr.send()
//4.接受响应
xhr.onload = function(){
	console.log(xhr.responseText)
}

ajax的同步异步
- open的第三个参数不写或者true表示异步,书写顺序可以是1=>2=>3=>4,也可以是1=>2=>4=>3
- open的第三个参数是false表示同步,书写代码的顺序只能是1=>2=>4=>3

发送一个get请求

//1.创建一个ajax对象
let xhr = new XMLHttpRequest()
//2.配置请求信息
xhr.open('GET','请求地址?key=value&key2=value')
//3.发送请求
xhr.send()
//4.接受响应
xhr.onload = function(){
	console.log(xhr.responseText)
}

发送一个post请求

//1.创建一个ajax对象
let xhr = new XMLHttpRequest()
//2.配置请求信息
xhr.open('POST','请求地址')
//3.发送请求
xhr.send('key1=value&key2=value')
//4.单独设置请求头
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
//5.接受响应
xhr.onload = function(){
	console.log(xhr.responseText)
}

跨域请求
- 同源策略
  - 是 浏览器 给的一个关于请求的限制
  - 当你发送请求的时候,只要 端口号,域名,传输协议,有任意一个不一样,就叫做触发了同源策略,我们管触发了同源策略的请求叫做跨域请求
- 跨域请求的解决方案
  1. jsonp
    - script标签会把请求回来的内容当做js代码来执行
    - script的src属性不受同源策略的影响
    - 利用这两点内容,用script标签的src属性请求一个跨域的服务器地址,只要该服务器返回一个可以执行的js代码就可以了
  2. 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');
```
  3. 服务器代理
    - 和浏览器同源位置准备一个代理器,浏览器本该向目标服务器的请求发送给代理服务器,由代理服务器转发给目标服务器,目标服务器把响应返回给代理服务器.代理服务器再把响应返回给浏览器

回调函数,回调地狱

回调函数
- 是一种函数的使用方式,出现在两个函数之间的关系,把一个函数当做参数传递到另一个函数里面,在另一个函数里面以形参的方式调用
回调地狱
- 回调函数嵌套太多,出现了一个可维护性和可读性比较低的代码结构

解决回调地狱

promise es6的语法

  let p = new Promise(function(resolve,reject){
  	//做异步的事情
  	//写resolve()的时候,就是在调用then()里面的函数
  	//写reject()的时候,就是在调用catch()里面的函数
  })
  p.then(function(){})
  p.catch(function(){})

async/await es7的语法

async关键字是一个写在函数前面的关键字,会把当前这个函数编程异步函数
await关键字是一个使用在异步函数里面的关键字,其后面必须是一个promise对象

  async function fn(){
              // 1.第一个请求
  		//pGetSend()是一个函数,返回值是一个promise对象
              let res = await pGetSend('./server/a.php')
              let result = JSON.parse(res)
              console.log(result)
  }

闭包和继承
1. 闭包的条件
  1. 函数A内部直接或者间接返回一个函数B
  2. 函数B内部使用着函数A的私有数据
  3. 函数A外部有变量引用着函数B
2. 闭包的特点
  1. 延长变量的声明周期
    - 优点:变量会一直存在
    - 缺点:需要一个不会销毁的函数执行空间
  2. 可以在函数外部访问内部数据
    - 优点:函数外部访问内部数据
    - 缺点:需要一个不会销毁的函数执行空间
  3. 保护私有变量
    - 优点:内部的变量不能在外部访问
    - 缺点:闭包空间内可以访问内部数据
3. 继承
  1. 什么是继承
    - 出现在两个构造函数之间的关系
    - 当A构造函数的属性和方法被B构造函数的实例使用了
    - 我们就说 B 继承自构造函数A , A是B的父类,B是A的子类
  2. es5的继承
    1. 原型继承
```
 子类.prototype = 父类的实例
```
    2. 借用构造函数继承
      - 在子类构造函数体内借用父类的构造函数体
      - 使用call方法改变父类构造函数体内的this指向
    3. 组合继承
      - 把借用构造函数继承和原型继承放在一起使用
  3. es6的继承
    - 需要使用一个extends关键字和super() 方法
```
 class 子类 extends 父类{
 	constructor(){
 		super()
 	}
 }
```
this指向问题
- 全局调用函数名() this=> window
- 对象调用对象名.函数名() this=> window
- 定时处理函数 setTimeout(function(){}),setInterval(function(){}) this=>window
- 事件处理函数 xxx.onclick = function(){},xxx.addEventListener(‘click’,function(){}),以上量两种函数里,this=>事件源(绑定在谁身上的事件)
- 自调用函数 (function(){})() this=>window
- 构造函数 new 函数名() this=>当前实例
- 箭头函数箭头函数里没有this this=>context上下文
常见的设计模式
1. 单例模式
2. 组合模式
3. 观察者模式
4. 适配器模式
5. 代理模式
6. 工厂模式
7. 构建模式

jQuery

jquery的筛选器

  first()  筛选出来一个元素集合里面的第一个元素
  last()   筛选出来一个元素集合里面的最后一个元素
  eq(n)    筛选出来一个元素集合里面索引为n的那个元素
  next()   筛选出元素的下一个兄弟元素
  nextAll()    筛选出元素后面的所有兄弟元素
  nextAll(选择器) 筛选出下面所有兄弟元素中符合选择器要求的元素
  nextUntil(选择器)    筛选出元素后面的所有兄弟元素,直到选择器元素为止(不包含该选择器元素)
  prev()   筛选出元素的上一个兄弟元素
  prevAll()    筛选出元素上面的所有兄弟元素
  prevAll(选择器) 拿到上面所有兄弟元素中符合选择器条件的元素
  prevUntil(选择器)    筛选出元素上面的所有兄弟元素,直到选择器元素为止(不包含选择器元素)
  parent()    筛选出元素的父元素
  parents()   筛选出元素的所有祖先元素,直到html元素为止
  parents(选择器) 找到所有祖先元素中满足选择器条件的
  parentsUntil(选择器)    筛选出元素的所有祖先元素,直到 选择器 元素为止
  children()  筛选元素所有的子级元素
  children(选择器)    筛选出所有子元素里面符合选择器条件的元素
  children(选择器)    筛选出所有子元素里面符合选择器条件的元素
  siblings()  筛选出所有的兄弟元素(不包含自己)
  siblings(选择器)    拿到所有兄弟元素中符合选择器条件的元素
  find(选择器)
  一个是在元素集合中的每一个元素的后代元素中查找
   一个是在所有的子元素里面查找
  一个是在元素集合中的每一个元素的后代元素中查找
  一个是在所有的子元素里面查找
  index() 获取元素的索引位置,结果是一个数字

操作元素类名

  1. addClass()   添加类名
  2. removeClass()    移除类名
  3. toggleClass()    执行这个方法会给元素集合里面的所有元素切换类名(本身有这个类名,就删除,本身没有这个类名,就添加)
  4. hasClass()   判断有没有某一个类名(返回一个布尔值)

操作元素属性

  1. attr()和removeAttr()
  	attr()
  	attr(要读取的属性名)    传递一个参数的时候是读取
  	attr(属性名,属性值) 传递两个参数的时候是设置
  	removeAttr()  专门用来移除属性的
  	注意:所有的属性都会显示在标签上(原生属性和自定义属性),不管设置什么数据类型,都会变成字符串.    removeAttr()删除attr设置的属性(针对自定义属性)
  
  2.  prop() 和 removeProp()
  	prop()
  	prop(要读取的属性名)    传递一个参数的时候是获取
  	prop(属性名,属性值) 传递两个参数的时候是设置
  	removeProp()  专门用来移除属性的
  	    注意:非原生属性,不会显示在标签上,但是可以获取使用,存储的是什么数据类型,获取的就是什么数据类型.    removeProp() 删除prop设置的属性(针对自定义属性),不能删除原生属性(如id,class等)
  
  3. data() 和 removeData()
     data()
     data(要读取的是属性名)  传递一个参数的时候是读取
     data(属性名,属性值) 传递两个参数的时候是设置
     removeData()  专门用来删除数据的
     注意:和元素的原生属性没有关系,可以设置id,但是和元素的id没有关系,设置的是什么数据类型,拿到的就是什么数据类型.  data()方法也能读取写在标签上的H5标准自定义属性

jQuery发送ajax请求

  $.ajax({
  	url:'请求地址',
  	type:'请求方式',
  	data:{
  		参数
  	},
  	succes:function(res){
  		//请求成功的回调
  		//res 返回的响应
  	}
  })
  
  //也可以写
  $.ajax({
  	url:'请求地址',
  	type:'请求方式',
  	data:{
  		参数
  	}
  }).then(function(res){
  	//成功的回调
  	//res 返回的响应
  })