LRight-T-CSDN博客

原创 js中原生ajax及其兼容性写法

ajax兼容性写法var xhr;if(window.XMLHttpRequest) { xhr = new XMLHttpRequest();}else { xhr = ActiveXObject("Micsoft.XMLHTTP");//兼容老版本Ie}//xhr.open();参1，get/post请求；参2：url；参3：true/false；异步/同步，可省略，默认异步xhr.open(‘get',url ,);//用于get请求xhr.send();//xhr.op.

2021-08-27 16:26:50 287

原创纯css画三角形及气泡样式的简单画法

在做项目的过程中，遇到了要写一个气泡的样式，先布局了矩形部分，但小三角形的旗气泡遇到一点困难。后来梳理了一下，以此记录。首先是三角形的画法：三角形的原理就是矩形，然后分成四个三角形，一般使用border来画一个三角形，如下图所示，我们给一个形状设置border属性时，一般是一下这种样式，如果我们不要里面的矩形，也就是里面的部分width和height都设置为0，那么只剩下border的宽度，形成图2这种形式图2：四个border可以形成一个矩形，然后就可以根据设置不同的border画出我们想要的.

2021-08-08 22:40:21 566

原创关于深度改变组件样式不生效问题

在使用antd或element-ui需要改变组件样式时，一般情况下，会采用深度改变组件样式的写法。如果是css,一般采用>>>的写法，示例如下：前面的类一般是后面组件的父类或祖先类。如果是less或其他预处理语言，需要使用/deep/语法，一般使用如下示例：deep前面可以不用写类名，有时候使用deep可能会报错，可以改成::v-deep,用法与deep一致。有时候会出现以上三种情况都不能生效的问题，这个时候需要考虑组件的样式是否是在嵌套的组件中了。某些情况是直接绑定在body上面

2021-08-06 12:29:58 2706

原创 JS将数组相同的元素进行分类

js实现将数组中相同元素进行分类，思路是先将数组去重，这里采用对象的方式进行去重，然后将相同的元素重新放入一个数组内,实例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content

2021-07-04 21:31:02 2328

原创 js的7种继承方法总结

1.原型链方式（子类的原型指向父类的实例）；可通过两种方式来确定原型和实例之间的关系，instanceof操作符；isPrototypeOf();给子类添加方法要放在替换原型的语句之后；不能使用字面量方式添加方法，否则会重写原型链；缺点：属性共享问题function Supper(){ this.age = 12;}Supper.prototype.getAge = function(){ return this.age;}function Sub(){ this.name = "xiaox

2021-03-14 22:26:44 118

原创 js创建对象的8种方法及其优缺点总结

1.对象字面量形式；优点：对于创建单个对象简单方便，缺点，产生大量重复性代码，无法复用var obj = { name:"xiaowang", age:22, sayName:function(){ console.log(this.name); }}//还有一种使用new Objectvar o = new Object();o.name = "xiaowang";o.age = 22;o.sayName = function(){console.log(this.name);

2021-03-14 20:55:37 517

原创 for in和for of的区别

for…infor…in一般用于遍历对象，遍历的是对象的键名。并且会遍历对象自身和继承的可枚举属性（不含Symbol属性）。也可用于遍历数组，但是遍历数组有几个缺点：它遍历数组是遍历的数组索引，可能遍历的顺序不是按照数组的顺序，结果出现差异，会遍历继承的属性。所以for in一般用于遍历对象。let obj={ a:0, b:1, c:2, d:3}for(let i in obj){console.log(obj[i]);//0,1,2,3}let arr=[1,2,3,4,5]

2021-03-01 18:25:11 185

原创 ES6遍历对象属性的5种方法

1. for…infor…in循环遍历对象自身和继承的可枚举属性（不含Symbol属性）2.Object.keys(obj)Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）的键名3.Object.getOwnPropertyNames(obj)Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含Symbol属性，但包括不可枚举属性）4.Object.getOwnpertySymbols(obj)Ob

2021-03-01 17:41:21 1426

原创 location对象和history对象

location对象是最有用的BOM对象之一，提供了与当前窗口加载的文档有关的信息，以及一些导航功能，它既是window对象属性，又是document的属性。location对象的属性：hash: “#…” 返回url中的hash（#后跟零个或多个字符），如果URL中不包含散列，返回空字符串host: “www.baidu.com:80” 返回服务器名称和端口号hostname: “www.baidu.com” 返回不带端口名的服务器名称href: “http://www.bai.

2021-01-03 10:51:53 1169

原创浏览器中的window对象

screenLeft/screenTop；IE和Opera中表示文档区到主屏幕的距离，在Chrome,Firefox和Safari中是浏览器到主屏幕的距离 Firefox Safari和Chrome始终返回每个框架的top.screenX和top.screenY,即使在页面页面由于被设置了外边距而发生了偏移的情况下，相对于window对象使用screenX和screenY每次都会返回相同的值，IE和Opera会给出框架相对于屏幕边界的精确坐标值，所以无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。.

2021-01-02 23:12:34 396

原创 js中继承方法总结

js中的继承主要使用原型链实现原型链继承：利用原型让一个引用类型继承另一个引用类型的属性和方法原型链：当查找一个实例属性时，先在实例中查找，找到就直接返回，找不到在沿着原型链向上查找直到原型链的末端，找到就返回，没找到就报错原型链继承：缺点，子类的constructor也指向父类；共享（原来的原型实例属性会变成现在的原型属性），比如引用实例，所有一个实例对它进行操作时，其他实例也会相应变化；创建子类实例时，不能向超类的构造函数中传递参数function superType(){this.it=

2020-12-28 18:33:09 75

原创 js创建对象方法及其优缺点

Object函数var obj = new Object();obj.name = "XXX";obj.sayName = function(){ console.log(this.name);};对象字面量var obj = { name:"aa", sayName:function(){ console.log(this.name);}};缺点：前两种方式会产生大量重复代码工厂模式:抽象创建具体对象的过程，用函数来封装以特定接口创建对象的细节，不适用new关键字.

2020-12-28 16:31:40 169

原创 js对象方法总结

Object.defineProperty();//数据属性，参1：要修改的对象，参2：要修改的属性，参3：要修改的配置，有四个可选(Configurable:true/false)，表示能否通过delete删除属性而重新定义属性，能否修改属性的特性，能否把属性修改为属性器访问，默认为true; 一旦改为false就不能在更改；(Enumerable)，表示能够通过for-in遍历返回属性，默认为true；(Writable)，表示能否修改属性，默认为true；(value)，表示属性数据值，读取属性时从.

2020-12-25 17:43:58 114

原创 js中数组方法总结

数组创建方法：一：构造函数var arr = new Array();//空数组var arr = new Array(10);//固定长度的数组var arr = new Array(“red”,“blue”);//长度为2，值为red,和blue的数组二：数组字面量var arr = [];//空数组var arr = [“red”,“blue”];//包含两个字符串得数组使用对象字面量时，不会调用Array的构造函数，数组可以通过操作length属性来进行数组的添加和删除三：数组检

2020-12-23 11:12:16 71

原创 vue实现鼠标按下选中多个元素，然后鼠标松开，检测选中元素

关于js中鼠标按下进行元素选择，鼠标松开的时候检测选了多少个元素的实现。写代码的时候需要实现这个功能，理了一下其中的逻辑，感觉还有点复杂，现在做一个记录。**说明：**首先要用到鼠标事件，onmousedown、onmouseup（此处不用onmousemove）获取坐标事件：event.pageX，event.pageY，获取相对于页面的坐标。getBoundingClient()函数，获取元素距离页面的距离用法：rectObject = object.getBoundingClientRec

2020-12-09 17:15:51 3465 2

原创 js中typeof类型检查及null和undefined区别

typeof操作符typeof操作符可进行类型检测null --typeof null 返回objectundefined --typeof undefined 返回undefinedboolean --typeof true/false 返回booleannumber --typeof 数字返回numberstring – typeof ‘str’ 返回stringobject --typeof obj(对象) 返回objectfunction typeof fu

2020-11-30 19:38:34 689

原创 js中＜script＞中的async和defer属性区别

async和defer区别async和defer都是<script></script>标签中可选的属性async: 可选的，如果写了该属性，表示应该立即下载脚本，但不应妨碍页面的其他操作，比如下载其他资源或等待加载其他脚本，只对外部标本文件有效，标记为async的脚本并不保证会按照他们指定的先后顺序执行。指定该属性的目的是不让页面等待脚本的下载和执行，从而异步加载其他内容，异步脚本不要在加载期间修改DOM，他一定会在load事件前执行，但可能在DOMContentLoad事件出

2020-11-27 12:56:51 136

原创使用jquery自定义弹窗

自定义弹窗使用jquery的$.dialog()方法可自定义弹窗参数：属性 title 窗口名称html 内容显示传入的html代码url 内容显示iframe，src为传入的urwidth 内容区宽度height 内容区高度buttons 数组:按钮及事件buttons:[{text: “确认”,isEmphasize: true, //蓝色按钮handler: function(){ alert(‘handler’) }},{text: “取消”,han

2020-11-24 15:28:13 2645

原创 Vue_自定义过滤器

过滤器：对数据进行筛选和过滤，可被用于一些常见的文本格式化，现使用自定义过滤器对时间进行格式化，使用双花括号插值来调用。<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script> <script type="te

2020-09-28 15:35:06 73

原创 Vue_列表渲染和排序

2020-09-28 15:22:40 711

原创 Vue_Vue的生命周期

Vue的生命周期：Vue实例的创建、运行、到销毁称为vue的生命周期8个阶段：beforeCreate():创建之前，获取不到数据和methods;初始化中，初始化事件和生命周期，生命周期函数会自动执行。created():创建，获取到数据和methods,但页面没有元素，是假的HTML，初始化data,methods和props及所有的选项，并给数据对象添加劫持。beforeMount():挂载之前，获取data数据和方法，但页面仍没有元素，会编译el选项，对应的结构作为数据，通过complie函

2020-09-24 23:47:20 276

原创 Vue_事件处理和修饰符

vue的事件处理：可以使用v-on来进行事件处理，例如：v-on:click=“XXX” 也可以简写为：@click=“XXX”，@keyup=“XXX”vue的事件修饰符：例如原生js中的停止冒泡：event.stopPropagation(); 和阻止默认事件发生:：event.preventDefault(); 在vue.js中可以使用如下方式：停止冒泡： @click.stop=“XXX”, 阻止默认事件发生：@click.prevent=“XXX”,其中stop和prevent就是事件修饰符

2020-09-24 23:24:33 103

原创 Vue_v-model表单输入绑定

v-model:实现数据的双向绑定，一般在表单中使用。v-model在表单中，type为text和textarea元素使用value属性和input事件，checkbox使用checked属性，radio使用change事件，select将value作为prop并将change作为事件。v-model.lazy:本质上是失去焦点时触发v-model.number:转换为数字v-model.trim:去掉首尾空格示例：<script src="http://cdn.jsdelivr.net/n

2020-09-24 23:05:37 123

原创 Vue--计算属性和监听属性

computed:计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要属性值还没有发生改变，多次访问属性计算属性会立即返回之前的计算结果，而不必再次执行函数。如果不希望有缓存，就用函数代替。watch:侦听属性，响应数据的变化，需要在数据命令执行异步或开销较大的操作时，这个方式最有用。watch只能监听已经存在的属性，数组的push和pop等方法不会触发监听函数例：<body> <div id="app">

2020-09-15 09:20:02 155

原创 Vue--常见指令

vue实例的作用范围：在el选择的元素内部都可以，使用el进行挂载选择器：除了id选择器以外，还有class选择器，标签选择器vue取消了对dom元素的操作，通过this关键字来改变值1.v-text：设置标签文本值，如果要替换部分内容要使用两个大括号的写法，字符串的拼接，外面是是双引号里面就用单引号2. v-html:设置标签的innerHTML，如果是html代码会自动解析3. v-on:为元素绑定事件,也可以使用@代替,可以传递自定义参数，事件修饰符，事件绑定的方法写成函数调用的形

2020-09-15 09:15:30 86

原创 ES7相关

/1.指数运算符（幂）：*Array.prototype.includes(value):判断数组中是否包含指定value*/例： console.log(3**3); let arr = [1,3,'aaa']; console.log(arr.includes('a'));//精确匹配

2020-09-13 10:56:57 50

原创 ES6--for of用法

for(let value of target){}循环遍历1.遍历数组2.遍历Set3.遍历Map4.遍历字符串5.遍历伪数组例：//数组去重方法 let arr = [1,2,3,4,5,5,6,2]; let arr1 = arr; arr = []; let set=new Set(arr1); for(let i of se

2020-09-13 10:56:06 83

原创 ES6--深度克隆（深拷贝和浅拷贝）

拷贝数据：基本数据类型：拷贝后会生成一份新的数据，修改拷贝以后的数据不会影响原数据对象/数组拷贝后不会生成新的数据，而是拷贝引用，修改拷贝后的数据会影响原数据拷贝数据的方法：1.直接赋值给一个变量：浅拷贝修改拷贝以后的数据会影响原数据2.Object.assign():浅拷贝3.Array.prototype.concat():浅拷贝4.Array.prototype.slice()：浅拷贝5.JSON.parse(JSON.stringify()):深拷贝，拷贝的数据不能有函数例：

2020-09-13 10:42:52 1093

原创 ES6--set和map容器

1.set容器：无序不可重复的多个value的集合体set()set(array)add(value)delete(value)has(value)clear()size2.map容器：无序的key不重复的多个key-value的集合体Map()Map(array)set(key,value)//添加get(key)delete(key)has(key)clear()size例： let set = new Set([1,2,3,2,4,5]); cons

2020-09-13 09:19:24 122

原创 ES6--对象（Object）方法的扩展

Object.is(v1,v2):判断两个数据是否全等2.Object.assgin(target,source1,source2):将原对象的属性复制到目标对象上3.直接操作_proto_属性let obj2={};obj2.proto=obj1;例：console.log(0==-0);//true console.log(Object.is(0,-0));//false console.log(NaN==NaN);//false console.log(Obj

2020-09-13 08:51:32 138

原创 ES6--字符串和字符数组的扩展

字符串扩展：includes(str):判断是否包含指定的字符串startsWith(str):判断是否以指定的字符串开头endsWith(str):判断是否以指定的字符串结尾repeat(count):重复指定次数Number.isFinite(i):判断是否有限大的数Number.isNaN(i):判断是否是NaNNumber.isInteger:判断是否是整数Number.parseInt(str):将字符串转换为对应的数值Math.trunc(i):直接去除小数部分例： let

2020-09-13 08:46:02 83

原创 ES6--class类

class类的使用详解1.通过class定义类/实现类的继承2.在类中通过constructor重新定义类3.通过new来创建类的实例4.通过extends来实现类的继承5.通过super来调用父类的构造方法6.重写从父类中继承的一般方法例： // function Person(name,age){ // this.name = name; // this.age = age; // } class Perso

2020-09-13 08:38:51 74

原创 ES6--async函数

async函数：真正意义上解决异步回调问题，以同步流程表达异步操作本质：Generator语法糖async function foo(){await 异步操作;await 异步操作;}特点：不用向Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行返回的总是Promise对象，可以用then方法进行下一步操作async取代Generator函数的星号*，await取代yield语义上更明确，使用简单async function foo(){

2020-09-13 08:21:19 75

原创 ES6--Generator函数

Generator函数：1.ES6提供的解决异步编程的方案之一2.Generator函数是一个状态机，内部封装了不同状态的数据3.用来生成遍历器对象4.可暂停函数（惰性求值），yield可暂停，next方法可启动，每次返回的是yield后的表达式结果特点：1.function与函数之间有一个号2.内部使用yield表达式来定义不同状态例如：function generatorExample(){let result = yield ‘hello’;//状态值为helloyield ‘g

2020-09-13 08:20:59 100

原创 ES6--iterator接口机制

iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制1.为各种数据结构提供统一便捷的访问接口2.使得数据结构的成员能够按某种次序排列3.ES6创造了一种新的遍历命令，for…of循环，Iterator接口主要供for…of消费工作原理：1.创建一个指针对象（遍历器对象），指向数据结构的起始位置，2.第一次调用next方法，指针自动指向数据结构的第一个成员3.接下来不断调用next方法，指针会一直向后移动，直到指向最后一个成员4.每调用next方法返回的是一个包含value和

2020-09-12 18:26:55 110

原创 ES6--Symbol属性

Symbol:ES6中添加了一种原始数据类型symbol(已有的原始数据类型：String,Number,Boolean,undefined,null,对象)Symbol属性对应的值是唯一的，解决命名冲突问题，Symbol值不能与其他数据进行计算，包括同字符串拼串，for in,for of遍历时不会遍历Symbol属性使用：调用Symbol函数得到symbol值let symbol = Symbol();let obj={};obj[symbol] = “hello”;2.传参标识let

2020-09-12 18:17:23 79

原创 ES6--Promise对象

Promise对象：代表了未来某个将要发生的操作，通常是异步操作promise对象可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数（回调地狱），ES6的Promise是一个构造函数，用来生成promise实例基本步骤：1创建promise对象 2.调用promise的then()3.promise的三个状态：pending:初始化，fullfilled:成功，rejected:失败4.应用：使用promise实现超时处理，使用promise封装处理ajax请求使用promise实现封

2020-09-12 18:09:24 82

原创 ES6--箭头函数和三点运算符

基本语法：没有参数：()=>console.log(‘xxxx’);不能省略小括号一个参数：i=>i+2;可以省略大于一个参数：(i,j) => i+j;不能省略小括号函数体不用大括号：默认返回结果函数体如果有多个语句，需要用{}包围，若有需要返回的内容，需要手动返回使用场景，用来定义多个回调函数特点：1，简洁2.箭头函数没有自己的this,它的this不是调用的时候决定的，而是在定义的时候决定的3.扩展理解：箭头函数的this看外层是否有函数如果有，外层函数的thi

2020-09-12 17:42:29 208

原创 ES6--变量解构赋值和模板字符串及对象的简写方式

变量的解构赋值：从对象或数组中提取数据，并赋值给变量（多个）对象的解构赋值：let {n,a} = {n:‘tom’,a:12}数组的解构赋值：let [a,b] = [1,‘atone’];用途：给多个形参赋值例： let obj={name:"xiaozhan",age:29}; // let name = obj.name; // let age = obj.age;打开这两句话会报错，重复定义 let {name,age} = obj;/

2020-09-12 10:39:25 334

原创 ES6--let和const关键字

let关键字：作用：与var类似，用于声明一个变量特点：在块作用域内有效，不能重复声明，不会预处理，不能变量提升应用：循环遍历加监听const关键字：定义一个常量，不能修改，其他特点同let,用于保存不用改变的数据例： let username = "admin"; console.log(username); // let username = "wwww";不能声明两次，不能在定义之前使用变量 let btns = document.getElementsB

2020-09-12 10:20:59 62

空空如也

空空如也