axios 的封装 // 在http.js中引入axios import axios from 'axios'; // 引入axios import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到 // vant的toast提示框组件，大家可根据自己的ui组件更改。 import { Toast } from 'vant'; //超时时间更改 axios.defaults.timeout = 10000; //修改 POST默认请求头 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; // 先导入vuex,因为我们要使用到里面的状态对象 // vuex的路径根据自己的路径去写 import store from '@/store/index'; // 请求拦截器 axios.interceptors.request.use(     config => {         // 每次发送请求之前判断vuex中是否存在token                 // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况         // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断         const token = store.state.token;         token && (config.headers.Authorization = token);         return config;     },     error => {         return Promise.error(error);     }); // 响应拦截器 axios.interceptors.response.use(     response => {         // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据             // 否则的话抛出错误         if (response.status === 200) {             return Promise.resolve(response);         } else {             return Promise.reject(response);         }     },     // 服务器状态码不是2开头的的情况     // 这里可以跟你们的后台开发人员协商好统一的错误状态码         // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等     // 下面列举几个常见的操作，其他需求可自行扩展     error => {         if (error.response.status) {             switch (error.response.status) {                 // 401: 未登录                 // 未登录则跳转登录页面，并携带当前页面的路径                 // 在登录成功后返回当前页面，这一步需要在登录页操作。                                 case 401:                     router.replace({                         path: '/login',                         query: {                             redirect: router.currentRoute.fullPath                         }                     });                     break;                     // 403 token过期                     // 登录过期对用户进行提示                     // 清除本地token和清空vuex中token对象                     // 跳转登录页面                                 case 403:                     Toast({                         message: '登录过期，请重新登录',                         duration: 1000,                         forbidClick: true                     });                     // 清除token                     localStorage.removeItem('token');                     store.commit('loginSuccess', null);                     // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面                     setTimeout(() => {                         router.replace({                             path: '/login',                             query: {                                 redirect: router.currentRoute.fullPath                             }                         });                     }, 1000);                     break;                     // 404请求不存在                 case 404:                     Toast({                         message: '网络请求不存在',                         duration: 1500,                         forbidClick: true                     });                     break;                     // 其他错误，直接抛出错误提示                 default:                     Toast({                         message: error.response.data.message,                         duration: 1500,                         forbidClick: true                     });             }             return Promise.reject(error.response);         }     }) /**  * get方法，对应get请求  * @param {String} url [请求的url地址]  * @param {Object} params [请求时携带的参数]  */ export function get(url, params) {     return new Promise((resolve, reject) => {         axios.get(url, {             params: params         }).then(res => {             resolve(res.data);         }).catch(err => {             reject(err.data)         })     }) } /**  * post方法，对应post请求  * @param {String} url [请求的url地址]  * @param {Object} params [请求时携带的参数]  */ export function post(url, params) {     return new Promise((resolve, reject) => {         axios.post(url, QS.stringify(params))             .then(res => {                 resolve(res.data);             })             .catch(err => {                 reject(err.data)             })     }); }

JQuery 过滤器大全 1.基本过滤器：selector:first 获取所有已选择到的元素中的第一个元素 selector:last 获取所有已选择到的元素中的最后一个元素 selector:even 获取所有已选择到的元素中的索引为偶数的元素 selector:odd 获取所有已选择到的元素中的索引为奇数的元素 selector:eq(index) 获取所有已选择到的元素中的索引为index的元素 selector:lt(num) 获取所有已选择到的元素中的索引值小于num的元素 selector:gt(num) 获取所有已选择到的元素中的索引值大于num的元素 selector1:not(selector2) 获取所有已选择到的元素中的除了selector2的元素 selector:header 获取所有已选择到的元素中的标题元素(h1~h6) 2.内容过滤器： selector:contains(text) 获取所有已选择到的元素中文本包含text的元素 selector:empty 获取所有已选择到的元素中的空元素(没有子节点) selector:parent 获取所有已选择到的元素中的非空元素(有子节点)，如$("div:parent"); selector1:has(selector2) 获取所有已选择到的元素中包含selector2的元素，如$("div:has('span')"); 3.可见性过滤器：隐藏类型分两种：1）不占据屏幕空间 display:none; <input type="hidden"> 2）占据屏幕空间 visibility:hidden; opacity:0;//透明度为0 使用： :visible 选择所有占据屏幕空间的元素 :hidden 选择所有不占据屏幕空间的元素 4.属性过滤器： selector[attrKey] 获取所有已选择到的元素中具有属性attrKey的元素 selector[attrKey=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为attrVal的元素 selector[attrKey^=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal开头的元素 selector[attrKey$=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal结尾的元素 selector[attrKey*=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为包含attrVal的元素 selector[attrKey!=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值不为以attrVal的元素或者没有属性attrVal的元素 5.后代选择器： selector:nth-child(index) 获取每个selector元素中索引为index的子元素。【注意】index从1开始 selector:first-child 获取每一个selector元素中的第一个子元素（每个父元素的第一个子元素） selector:last-child 获取每一个selector元素中的最后一个子元素（每个父元素的最后一个子元素） selector:only-child 获取每一个selector元素中的独生子子元素（每个父元素如果只有一个孩子元素，获取该元素） selector:first-of-type 获取每个selector元素中每种类型子元素中的第一个 selector:last-of-type 获取每个selector元素中每种类型子元素中的最后一个 6.表单过滤器： :checked 选取所有被选中的元素，用于复选框、单选框、下拉框 :selected 选取所有被选中的元素，该选择器只适用于<option> :focus 选取当前获取焦点的元素 :text 选取所有的单行文本框(<input type="text">) :password 选取所有的密码框 :input 选取所有的<input>,<textarea>,<select>,<button>元素。 *注意，$(":input")是选中可以让用户输入的标签元素；而$("input")是选择名字为input的标签元素。* :enable 选取所有可用元素，该选择器仅可用于支持disable属性的html元素。(<button>,<input>,<optgruop>,<option>,<select>,<textarea>) :disable 选取所有不可用元素，该选择器也仅可用于支持disable属性的html元素。 :radio 选取所有的单选框 :checkbox 选取所有的多选框 :submit 选取所有的提交按钮 :image 选取所有的input类型为image的表单元素 :reset 选取所有的input类型为reset的表单元素 :button 选取所有的input类型为button的表单元素 :file 选取所有的input类型为file的表单元素

jQuery中常用的API 1.jQuery中的html(),text(),val()方法 html() 无参：获取html的值 有参数html：设置html的值 text() 无参：获取文本值 有参数text：设置文本值 val() 无参：获取value的值 有参数value：设置value的值 3.jQuery中属性设置函数 //获取属性值 attr(key) prop(key) //删除属性 removeAttr(attributeName) removeProp(propertyName) //批量设置属性 css(key) //添加类 addClass(className) //判断有没有指定的类，有，返回true，否则返回false hasClass(className) //删除类 removeClass(className) 3.jQuery中的工具方法 1) get(); //以数组的形式返回DOM节点。 console.log($('div').get()); 2) toArray(); //返回一个包含jQuery对象结合中的所有DOM元素数组。 console.log($('div').toArray()); 3) eq(index); //返回index位置上的jQuery对象。 console.log($('div').eq(1).get(0)); 4) filter(function(index,item){}); //过滤器函数，返回jQuery对象。 var $result = $('div').filter(function(index,item){ return index == 2; }); 5) map(function(index,item){}); //用于获取或设置元素集合中的值。 var $result = $('div').map(function(index,item){ return $(item).html() }); 6) each(function(index,item){}); //遍历一个jQuery对象。 $('div').each(function(index,item){ console.log(index,'--',item); }); 7) slice(0,3); //截取 var $result = $('div').slice(0,3); console.log($result.get()); }); 8) not() 9) first() 10) last() 11) is() 12) has()

jQuery中的Dom操作 1.查找节点通过jQuery选择器来完成2.创建节点 创建元素节点：var newTd = $("<td></td>") 创建文本节点：var newTd = $("<td>文本内容</td>")3.插入节点 1) $A.append(B) 将B追加到A的末尾处，作为它的最后一个子元素 2) $A.appendTo(B) 将A追加到B的末尾，作为它的最后一个子元素 3) prepend() $A.prependTo(B) 将A追加到B的前面，作为它的第一个子元素 $A.after(B) 在A之后追加B，作为它的兄弟元素 $A.insertAfter(B) 在B之后追加A，作为它的兄弟元素 $A.before(B) 在A之前追加B，作为它的兄弟元素 $A.insertBefore(B) 在B之前追加A，作为它的兄弟元素 4.删除节点 remove([selector]) 从DOM中删除所有匹配的元素，返回值是一个指向已经被删除的节点的引用，可以在以后再使用这些元素。 该方法会移除元素，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。 detach([selector]) 与remove()类似，但是detach()保存所有jQuery数据和被移走的元素的相关联事件。 empty() 无参数。从DOM中清空集合中匹配元素的所有的子节点。 5.复制节点 $("#id").clone(false); 该方法返回的是一个节点的引用，参数默认为false，为浅复制； 参数是true,为深复制，含义是：复制元素的同时复制元素中所绑定的事件。 6.替换节点 replaceWith(newContent); 用新内容替换集合中所有匹配的元素，并且返回被删除的元素的集合。 该方法会删除与节点相关联的所有数据和事件处理程序。 replaceAll(target); 用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果。 7.包裹节点 wrap([wrappingElement]) 在每个匹配的元素外层包上一个html元素 warpAll([wrappingElement]) 将所有匹配的元素用一个元素来包裹，在所有匹配元素外面包裹一层HTML结构 warpInner([wrappingElement]) 每个匹配元素里面内容(子元素)都会被这种结构包裹 8.节点遍历 children([selector]) 用于取得匹配元素的子元素集合(只考虑子元素而不考虑任何后代元素) $('.content.inner')=>$('.content').children('.inner'); find(selector) 在当前对象元素中的子元素查找，和参数所匹配的所有的后代元素 next([selector]) 取得匹配的元素集合中每一个元素紧邻的后面兄弟元素 nextAll([selector]) 查找当前元素之后所有的同辈元素 prev([selector]) 取得匹配元素前面紧邻的兄弟元素 prevAll([selector]) 取得当前元素之前所有的同辈元素 silibinng([selector]) 取得匹配元素的前后所有的兄弟元素 closest(selector) 取得和参数匹配的最近的元素，如果匹配不上继续向上查找父元素 filter(selector) 把当前所选择的所有元素再进行筛选过滤 parent([selector]) 取得匹配元素的集合中，每个元素的父元素 parents([selector]) 获得集合中每个匹配元素的祖先元素

jQuery的事件和API 一、事件 on() 在选定的元素上绑定一个或多个事件处理函数。 off() 移除一个事件处理函数。 trigger() 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。 二、鼠标事件 click() 单击 dblclick() 双击 hover() 悬停 mousedown() 按下 mouseup() 抬起 mouseenter() 移入 不支持子元素 mouseleave() 离开 不支持子元素 mouseout() 离开 支持子元素 mouseover() 进入 支持子元素 mousemove() 移动 三、键盘事件 keypress() 按键按下 keyup() 按键抬起 keydown() 按键按下 四、表单事件 focus() 聚焦事件 blur() 失去焦点事件 change() 当元素的值发生改变时激发的事件 select() 当textarea或文本类型的input元素中的文本被选择时触发的事件 submit() 表单提交事件，绑定在form上