![](https://img-blog.csdnimg.cn/20191117103218763.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Javascript
陈善强
前端技术分享,共同进步
展开
-
el-checkbox复选框,单次点击选中框,取消失败
页面初次渲染,回显复选框,并且可取消/选中。原创 2023-07-05 11:42:34 · 903 阅读 · 1 评论 -
多个el-checkbox-group复选框组 选项互斥
【代码】多个el-checkbox-group复选框组 选项互斥。原创 2023-06-30 17:09:06 · 2475 阅读 · 0 评论 -
js 占位符在console.log中的应用
js 占位符砸console.log中的应用原创 2023-05-05 18:51:44 · 219 阅读 · 0 评论 -
js 计算两个日期之间的不同天数
有时候我们需要计算两个日期之间的天数,一行代码就可以搞定。计算两个日期之间的不同天数。原创 2022-09-29 09:55:50 · 569 阅读 · 0 评论 -
Async/Await的用法
async/await是es7引入的新用法,可以更加方便的进行异步操作async关键字用于函数上(async函数的返回值是promise实例对象)await关键字用于async函数中(await可以得到异步的结果)1、处理单个异步请求: async function queryData(id){ const ret = await axios.get(...原创 2019-11-29 10:12:25 · 225 阅读 · 0 评论 -
http 缓存控制
http缓存能够帮助服务器提高并发性能,很多资源不需要重复请求直接从浏览器中拿缓存http 缓存分类 :强缓存通过 expires 和 cache-control控制协商缓存通过 last-Modify 和E-tag控制补充:为什么有expires,有需要cache-control因为expires 有个服务器和浏览器时间不同步的问题expires是绝对事件 ...原创 2020-04-01 23:44:05 · 141 阅读 · 0 评论 -
XSS、CSRF 以及如何防范
在 Web 安全领域中,XSS 和 CSRF 是最常见的攻击方式。XSS,即 Cross Site Script,中译是跨站脚本攻击;其原本缩写是 CSS,但为了和层叠样式表(Cascading Style Sheet)有所区分,因而在安全领域叫做 XSS。XSS 攻击是指攻击者在网站上注入恶意的客户端代码,通过恶意脚本对客户端网页进行篡改,从而在用户浏览网页时,对用户浏览器进行控制或者...原创 2020-04-01 17:49:24 · 751 阅读 · 0 评论 -
浏览器多页签通讯实现
实现多页通讯主要有利用浏览器数据存储方式和服务器方式。浏览器数据存储的方式主要用本地存储方式解决。即调用 localStorage、Cookie等本地存储方式。服务器方式主要使用websocket技术使多页签都监听服务器推送事件来获得其他页签发送的数据。浏览器存储:第一种——调用localStorage在一个标签页里面使用 localStorage.setItem(key,value)添...原创 2020-04-01 17:43:17 · 460 阅读 · 0 评论 -
fetch vs axios
fetch是一个底层的api浏览器原生支持的,axios是一个封装好的框架axios支持浏览器和nodejs发请求,前后端发请求。支持promise语法。支持自动解析json。支持中断请求。支持拦截请求。支持请求进度检测。支持客户端防止csrf。总结:封装性比较好fetch优点浏览器级别原生支持的api原生支持promise api语法简洁 符合es标准规范...原创 2020-04-01 16:11:51 · 318 阅读 · 0 评论 -
js 函数参数传递
基本类型的参数是值传递,把值传递过来,跟那个变量没有关系;应用类型的参数时地址传递,传递的是这个变量指向的数据let a = 1;let b = [1,2,3];let c = {x:1};function f1(a,b,c){ a = 2; b.push(4); c = {y:2} console.log(a,b,c)//此时有作用域,执行结果是2、[1,2,3,4]、{y...原创 2020-03-28 13:10:53 · 172 阅读 · 0 评论 -
cookie、token、storage
cookie是http协议无状态这个背景下解决用户身份标示的解决方案(浏览器下具有cookie)token是解决API认证使用的,token不但能在浏览器中使用,小程序、app都能使用(token可以跨平台)cookie和token的存储介质:cookie是浏览器,token一般借助storage存放存储大小,cookie:4kb, storage 5M-10M作用范围:cookie-针...原创 2020-03-24 18:08:34 · 231 阅读 · 0 评论 -
通过ajax提交form表单数据的几种方式
一、FormData方法作用:模拟HTML表单,相当于将HTML表单映射成表单对象,自动将表单对象中的数据拼接成请求参数的格式。异步上传二进制文件使用在原生ajax中的使用<form id="form"> <input type="text" name="username" /> <input type="password" ...原创 2020-01-11 18:39:13 · 21521 阅读 · 3 评论 -
ES6模块化的基本用法
1、默认导出与导入默认导出语法 exports default 默认导出的成员默认导入语法 import 接收名称 from ‘模块标识符’注意:每个模块中,只允许使用唯一的一次 export default,否则会报错!a.js文件-代码如下let a = 10let c = 20let d = 30function show() { console.log('1111...原创 2020-01-10 14:30:30 · 569 阅读 · 0 评论 -
node项目配置babel方法
babel是将高级、有兼容性的js,转换为低级、无兼容性的js的语法转换工具1、第一步npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node2、第二步npm install --save @babel/polyfill3、第三步在项目根目录创建文件babel.config.js4、...原创 2020-01-10 11:55:44 · 1989 阅读 · 0 评论 -
同源/跨域(nodejs服务器)
如果两个页面拥有相同的协议、域名和端口,那么这两个页面就属于同一个源,其中只要有一个不相同,就是不同源(跨域)同源政策的目的: 同源政策是为了保证用户信息的安全,防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie,B网站是不能访问的。 随着互联网的发展,同源政策也越来越严格,在不同源的情况下,其中有一项规定就是无法向非同源地址发送Ajax 请求,如果请求,浏览器...原创 2020-01-08 19:20:13 · 473 阅读 · 0 评论 -
高阶函数、闭包、递归
1. 高阶函数 ***高阶函数是对其他函数进行操作的函数,它接收函数作为参数或将函数作为返回值输出如下:此时fn 就是一个高阶函数函数也是一种数据类型,同样可以作为参数,传递给另外一个参数使用。最典型的就是作为回调函数。同理函数也可以作为返回值传递回来2. 闭包 ***2.1 变量的作用域复习变量根据作用域的不同分为两种:全局变量和局部变量函数内部可以使用全局...原创 2019-12-16 17:24:40 · 181 阅读 · 0 评论 -
改变函数内部 this 指向的方法(javascript高级)
改变函数内this指向 js提供了三种方法 call() apply() bind()1. call方法call()方法调用一个对象简单理解为调用函数的方式,但是它可以改变函数的 this 指向应用场景: 经常做继承call:打电话,在程序中有调用的意思代码:var o = { name: 'andy'} function fn(a, b) { c...原创 2019-12-16 16:07:25 · 598 阅读 · 0 评论 -
ES5新增方法
1. 数组方法forEach遍历数组语法: arr.forEach(function(value, index, array) { //参数一是:数组元素 //参数二是:数组元素的索引 //参数三是:当前的数组 }) //相当于数组遍历的 for循环 没有返回值function forEach(fn){ //..... //...原创 2019-12-16 13:45:07 · 125 阅读 · 0 评论 -
ES6之前的继承
ES6之前并没有给我们提供 extends 继承我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承1. call()call()可以调用函数call()可以修改this的指向使用call()的时候,参数一是修改后的this指向,参数2,参数3…使用逗号隔开连接语法:fun.call(thisArg, arg1, arg2, ...)//thisArg :当前调用函数...原创 2019-12-15 17:56:30 · 275 阅读 · 0 评论 -
关于通过构造函数创建对象的相关知识点
通过构造函数创建对象的方式 function Person(name,age){ this.name = name; this.age = age; } var obj = new Person('test,18);1. 静态成员和实例成员JavaScript 的构造函数中可以添加一些成员可以在构造函数本身上添加,也可以在构造函数内部的 this 上添加通过这...原创 2019-12-15 17:49:40 · 1353 阅读 · 0 评论 -
JS对象的三种创建方式
字面量方式var obj = {};new关键字var obj = new Object();构造函数方式function Person(name,age){ this.name = name; this.age = age;}var obj = new Person('zs',12);原创 2019-12-15 17:11:13 · 128 阅读 · 0 评论 -
JS递归函数
含义:编程语言中,函数Func(Type a,……)直接或间接调用函数本身,则该函数称为递归函数。function diGui(){ if(){ return .... } digui()}digui()实例:1、在函数的内部执行函数本身称为递归,递归的本质是一个循环。function f() { console.log(1) ...原创 2019-12-11 16:18:06 · 647 阅读 · 0 评论 -
jQuery 对象和 DOM 对象
使用 jQuery 方法和原生JS获取的元素是不一样的,总结如下 :用原生 JS 获取来的对象就是 DOM 对象jQuery 方法获取的元素就是 jQuery 对象。jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(jquery对象就是一个伪数组,存储的是一个一个的DOM对象 )***。注意:只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原...原创 2019-12-09 16:08:12 · 178 阅读 · 0 评论 -
JS执行机制、同步和异步、宏观任务和微观任务
1. JS 是单线程JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之后再删除。 单线程就意味着,所有任务需要排队,前一个任务结束,才会...原创 2019-12-09 14:19:24 · 1100 阅读 · 0 评论 -
阻止默认行为
html中一些标签有默认行为,例如a标签被单击后,默认会进行页面跳转。阻止默认行为的方法普通浏览器 e.preventDefault()低版本浏览器(ie6-7) e.returnValue = false;阻止默认行为的兼容性利用return false 阻止默认行为,并且没有兼容性问题实例应用: <a href="http://www.baid...原创 2019-12-01 11:06:32 · 179 阅读 · 0 评论 -
阻止事件冒泡
事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点。注释:事件冒泡本身的特性,会带来的坏处,也会带来的好处,需要我们灵活掌握。阻止事件冒泡的方式标准写法:利用事件对象里面的 stopPropagation()方法 ( stop 停止 Propagation 传播) e.stopPropagation() 非标准写法:IE 6-8 利用事件对...原创 2019-12-01 10:55:52 · 135 阅读 · 0 评论 -
JS常用鼠标事件
1. 禁止选中文字和禁止右键菜单1.1 禁止鼠标右键菜单contextmenu事件:鼠标右键菜单事件。主要控制应该何时显示上下文菜单(右键菜单),主要用于程序员取消默认的上下文菜单document.addEventListener('contextmenu', function(e) { e.preventDefault();})1.2 禁止鼠标选中(selectstart 事件:...原创 2019-12-01 10:47:15 · 1278 阅读 · 0 评论 -
JS事件委托(什么情况下使用事件委托)
1. 什么是事件委托事件委托:把事情委托给别人,代为处理。事件委托也称为事件代理,在 jQuery 里面称为事件委派。理解:说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。js事件中的委托: <ul> <li>知否知否,应该有弹框在手</li> <li>...原创 2019-12-01 10:17:03 · 2663 阅读 · 0 评论 -
JS事件对象
1. 什么是事件对象官方解释:event 对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。简单理解:事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象 event,它有很多属性和方法。比如:谁绑定了这个事件。鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。2. 事件对象...原创 2019-11-30 17:57:46 · 214 阅读 · 0 评论 -
e.currentTarget、e.target 和 this 的区别
this 是事件绑定的元素(绑定这个事件处理函数的元素) 。e.target 是事件触发的元素。通常情况下target 和 this是一致的但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行),这时候this指向的是父元素,因为它是绑定事件的元素对象,而target指向的是子元素,因为他是触发事件的那个具体元素对象。总结 ...原创 2019-11-30 17:42:31 · 1017 阅读 · 0 评论 -
DOM事件流
思考问题:html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。那么是先执行父元素的单击事件,还是先执行div的单击事件 ?要搞清楚这个问题,就需要学习事件流事件流描述的是从页面中接收事件的顺序。(事件流,事件传播的流程)事件发生时会在元素节点之间按照特定的顺序...原创 2019-11-30 17:30:33 · 233 阅读 · 0 评论 -
JS删除事件(解绑事件)及兼容性解决方案
1.传统注册方式 eventTarget.onclick = null; 方法监听注册方式 1. eventTarget.removeEventListener(type, listener[, useCapture]); *** 2. eventTarget.detachEvent(eventNameWithOn, callback);案例:<div>...原创 2019-11-30 16:34:03 · 610 阅读 · 0 评论 -
JS事件监听兼容性解决方案
兼容性处理的原则: 首先照顾大多数浏览器,再处理特殊浏览器封装一个函数,函数中判断浏览器的类型: function addEventListener(element, eventName, fn) { // 判断当前浏览器是否支持 addEventListener 方法 if (element.addEventListener) { // 浏览器支持此种方...原创 2019-11-30 16:22:30 · 313 阅读 · 0 评论 -
JS同一元素同一事件,处理多个函数
1.注册事件有两种方式:1.1 传统方式(出现覆盖现象) var btn = document.querySelector('button'); btn.onclick=function(){ alert('1'); } btn.onclick=function(){ alert('2'); } // 点击btn之后弹出 2注:最后注册的处理函数将覆盖之前的处理...原创 2019-11-30 16:16:53 · 770 阅读 · 0 评论 -
事件监听
1. addEventListener事件监听语法: eventTarget.addEventListener(type, listener[, useCapture]) 注意:addEventListener()事件监听(IE9以后支持)eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发...原创 2019-11-30 15:15:58 · 283 阅读 · 0 评论 -
DOM的核心总结
关于dom操作,我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。1、创建document.writeinnerHTMLcreateElement区别:1. document.write 是直接将内容写入页面的内容流,界面加载完成之后,再写入,这样它会导致页面全部重绘2. innerHTML 是将内容写入某个 DOM 节点,不会导致页面全部重绘...原创 2019-11-30 11:50:08 · 343 阅读 · 0 评论 -
JS中flag使用场景之一
根据不同的flag值,执行相应的程序:1、 var flag =true; if(flag){ //当为真时,执行下面的代码 console.log('执行程序1') } else{ //当为假时,执行下面的代码 console.log('执行程序2') }注:上面的flag值默认是...原创 2019-11-29 14:44:01 · 6769 阅读 · 4 评论 -
JS中开关灯效果
var flag=true;if(flag){ alert('开灯!') flag=!flag}else{ alert('关灯!') flag=!flag}原创 2019-11-29 14:20:38 · 355 阅读 · 0 评论 -
在JS事件处理程序中如何获取,当前点击的这个元素的索引?
方法:自定义属性来处理实例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...原创 2019-11-28 17:33:56 · 943 阅读 · 0 评论 -
JavaScript和Jquery中的排他思想
如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法: 所有元素全部清除样式(干掉其他人) 给当前元素设置样式 (留下我自己) 注意顺序不能颠倒,首先干掉其他人,再设置自己 JavaScript代码如下: <button>按钮1</button> <button>按钮2</b...原创 2019-11-28 17:19:00 · 450 阅读 · 1 评论