js
关注
分享
扫一扫
咩有猫腻.
要努力哦.
展开
-
px转vw----等比放大、缩小
1、 在package.json页面加入"postcss-import": "^12.0.1", "postcss-px-to-viewport": "^1.1.1", "postcss-url": "^8.0.0",2、 然后 npm install 安装一下3、 然后再在package.json同级处添加一个文件.postcssrs.js// https://github.com/michael-ciniawsky/postcss-load-configmodule.ex原创 2021-11-22 15:25:48 · 1397 阅读 · 5 评论 -
状态码问题及解决方法（403）
1.解决网络图片加载出现403错误在<head></head>里面加一个<meta name="referrer" content="no-referrer"/>原创 2020-07-21 19:05:46 · 2728 阅读 · 0 评论 -
FormData使用方法详解
FormData的主要用途有两个：1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。2、异步上传文件一、创建formData对象1、创建一个空对象：//通过FormData构造函数创建一个空对象var formdata=new FormData();//可以通过append()方法来追加数据formdata.append("name","laotie");//通过get方法对值进行读取console.log(formdata转载 2020-07-18 15:34:12 · 236 阅读 · 0 评论 -
Promise与async、await
在之前我们使用各种回调的时候，嵌套一层一层又一层的，不知道的以为是千层饼，你以为你写的代码在第二层，其实是在第五层的情况也数不胜数了。 后来，针对回调的问题有了我们的Promise，它的出现让我们的代码变的更加的优雅且更容易维护。异步执行，无论对于我们日常生活还是代码工作都是必不可免的。而且对于Javascript中作为单线程的处理方式，必然的需要异步操作来提升自身。Promiseconst promise =function(value) { return new Promise(funct原创 2020-07-16 16:30:50 · 162 阅读 · 2 评论 -
ES6语法
ES6语法1.ES5和ES6声明变量的方式对比ES5中声明变量的方式：//1.通过var声明var num;//2.函数方式声明function fn(num){ return num; }fn(10);ES6中声明变量的方式：//1.使用let声明let a = 10;//2.使用const声明const name = “小红”;2. var ，let ， const 的区别：不存在变量提升var 命令会发生变量提升现象，即变量可以在声明之前使用，值为undefined。l转载 2020-06-17 14:10:00 · 350 阅读 · 1 评论 -
浅拷贝和深拷贝、单例模式、适配器模式、观察者模式、组合模式、相关的面试题
这篇博客注释很少，主要展示的是代码 ，注释多的在前面的文章里浅拷贝和深拷贝<script> //浅拷贝 复制的是地址而非具体的值************************ let obj1 = { a: 1, b: 2 }; let obj2 = obj1; obj2.a = 11; console.log(obj1); // {a: 11, b: 2} //深拷贝************************************ let ob原创 2020-06-10 23:52:53 · 186 阅读 · 0 评论 -
Object的几个常见方法（ Object.hasOwnProperty（）、instanceof、Object.assign()、Object.defineProperty() ）
<script> //Object //*********************************************************************************** //hasOwnProperty********************************************************************* //Object的hasOwnProperty()方法返回一个布尔值，判原创 2020-06-10 20:08:54 · 819 阅读 · 0 评论 -
使用 promise、async、await 改造异步请求（如ajax）
原创 2020-05-15 18:58:16 · 711 阅读 · 0 评论 -
async / await (ES7新增语法)
原创 2020-05-15 18:49:24 · 140 阅读 · 0 评论 -
MAP数据类型 （与obj 对象的区别）
// MAP类型 是3阶段和实际项目中,应用比较广泛的一种数据类型// 是一个 类似于 对象的数据类型// 重新继续认识一下对象// 最初,喜欢的是你的动人的容颜// 之后,喜欢的是你的温柔的性格// 现在,我深深的爱上你独特的灵魂// 深入了解JavaScript的对象// 给对象添加属性和属性值// 创建一个空对象// const obj = {};// obj.name = '张三';// 添加不同类型属性,和属性值// 属性之前都是字符串类型,现在如果是其他类型会原创 2020-05-15 02:36:25 · 1286 阅读 · 0 评论 -
set数据类型 （与arr 数组的区别）
// SET数据类型// 是一个类似于数组的数据类型// 特点 : 不接受 相同的数据的定义和赋值// 相同的数据,在SET数据类型中只会存储一次// 例如 数组类型 const arr = [1,1,1,1,2,2,2,3,3,3,4,4,4];// 在数组中,可以存储重复的数值// 之前还有 专门的 数组去重的语法// 现在使用SET数据类型来存储,可以防止存储重复的数值数据****SET 数据类型的语法*****************原创 2020-05-15 02:31:59 · 2204 阅读 · 0 评论 -
JS-渐隐渐现轮播图
一.需求分析需求分析 实现轮播图片切换 不是左右运动切换,是渐隐渐现切换 不同通过运动函数实现 是通过 透明度opacity 和 过渡 transition 来实现具体实现 1,设定好html和css 注意:其他轮播li透明度opacity都是0 第一个轮播li透明度opacity是1 2,创建实例化...原创 2020-04-16 03:00:18 · 663 阅读 · 0 评论 -
JS-烟花效果
一.需求分析html结构非常简单 只要一个烟花背景,其他内容都是动态生成的JavaScript部分 1,点击时,生成两个div标签 一个在点击位置 一个在烟花背景最下方 要让下方的烟花 上升到 鼠标点击位置 的div 2,两个div重合时 清除两个div 生成若干个 小烟花 ...原创 2020-04-15 03:41:50 · 611 阅读 · 0 评论 -
JS---放大镜---图片展示（面向对象）
最终class Amplify{ constructor(ele,imgArray){ this.ele=ele; this.imgArray=imgArray; this.show=ele.querySelector('.show'); this.mask=ele.querySelector('.mask'); ...原创 2020-04-15 02:54:53 · 567 阅读 · 2 评论 -
JS-轮播图-面向对象 最终简洁版
一.css=二.html和内部js三.外部jsclass SetLoop{ constructor(ele){ this.ele=ele; this.oUl=ele.querySelector('ul'); this.oUllis=ele.querySelectorAll('ul li'); this.oOl=e...原创 2020-04-14 19:04:05 · 119 阅读 · 0 评论 -
JS-面向对象之 轮播图 分部解释
一.html二.css三.内部js<script src="./04_banner.js"></script><script> /* 面向过程的 // 1,获取标签对象和设定参数 // 标签对象 var oDiv = document.querySelector('div'); var oUl = docu...原创 2020-04-14 18:58:12 · 208 阅读 · 0 评论 -
JS-ES6语法中构造函数的封装class类
一.ES5构造函数中的一些问题ES5的构造函数有一些问题最大的问题,就是定义 prototype 是在函数之外定义的调用构造函数,生成实例化对象,一定要在定义 prototype 之后否则生成的实例化对象,只有属性没有函数方法ES6中,新增语法形式 class 类是一种新的定义构造函数的语法作用和原理与ES5语法完全相同只是语法格式和书写方式,不同// 如果先调用构造函数...原创 2020-04-14 00:24:10 · 1351 阅读 · 0 评论 -
JS-table表格之面向对象
一.css部分二.html部分三.js部分（四的三的详解）<!-- js --><script> const arr=[ {name:"你好",age:6,sex:"女",city:"上海"}, {name:"好啊",age:7,sex:"男",city:"云南"}, {name:"wuwu",age:7...原创 2020-04-14 00:05:40 · 394 阅读 · 0 评论 -
JS5-复习（轮播图、节点操作、正则表达式、ES6语法规范let const 箭头函数、面向对象编程）
一,轮播图 基本步骤和思路 1,根据ul>li,原始的轮播图数量,生成对应的焦点标签,ol>li 获取ul>li标签对象伪数组 循环遍历伪数组 生成li标签,添加index属性 将生成的li标签,写入到ol中 2,复制原始轮播图内容,第一张和最后一张 clone...原创 2020-04-13 13:40:39 · 164 阅读 · 0 评论 -
JS- 选项卡（两种方法）之 面向对象 /事件委托
一.css<style> *{ margin: 0; padding:0; } ul,ol,li{ list-style: none; } .cont{ width: 800px; ...原创 2020-04-11 01:04:23 · 446 阅读 · 0 评论 -
JS-原型对象、原型属性、原型链
1,原型对象 每一个函数,天生都有一个 prototype 属性,称为原型对象 是一个专门用来存储数据,函数等内容的空间2,原型属性 每一个对象,天生都有一个 __proto__ 属性,称为原型属性 实例化对象的原型属性,指向的创建实例化对象的构造函数的 prototype 函数,数组,等,JavaScript中的数据类型 实际存储的形式都是一...原创 2020-04-11 00:52:29 · 378 阅读 · 0 评论 -
JS-构造函数（自定义构造函数、prototype）
一.自定义构造函数创建对象的方法,有两种 字面量 const obj = {} 构造函数 const obj = new Object() 这个构造函数,就是JavaScript程序定义好的构造函数,我们直接使用就可以了所谓的构造函数,实际也是一种函数构造函数专门用于生成,定义对象的通过构造函数,生成的对象,称为实例化对象强调: 构造函数,就是一种函数...原创 2020-04-11 00:20:43 · 701 阅读 · 0 评论 -
JS-面向对象（编程思想、工厂模式、优点）
一.面向对象基本介绍1,什么是面向对象 所谓的面向对象,是一种编程思想,编程思路,代码的书写格式 之前为了简化代码,我们是将程序封装为函数的形式来调用 函数会有一些小问题: 函数内部定义的局部作用域变量,函数外部无法直接调用 函数调用使用时,会占用大量的系统内存,容易造成数据溢出数据泄露,容易被黑客攻击 函数一般只是封装一...原创 2020-04-10 14:19:02 · 421 阅读 · 0 评论 -
JS-展开运算符、合并运算符
一.展开运算符展开运算符...数组将数组中的数据,展开来使用在函数的实参中使用// 有多个形参function fun(num1,num2,num3,num4,num5){ console.log(num1,num2,num3,num4,num5)}// 执行时就要输入多个实参fun(100,200,300,400,500);// 现在有一个数组,存储多个数据co...原创 2020-04-09 22:48:32 · 407 阅读 · 0 评论 -
JS-数组的解构、对象的解构
一.数组的解构语法就是数组的另一种使用调用方法可以不通过 []语法,不通过索引下标,来调用使用数组中的数据用于将数组中的数据,一一对应的赋值给变量const arr = ['北京','上海','广州','重庆','天津'];// 之前使用数组的数据,必须通过[]语法和索引下标// let str1 = arr[0];// let str2 = arr[1];// let str3...原创 2020-04-09 22:38:34 · 2771 阅读 · 0 评论 -
JS-立即执行函数
立即执行函数在定义函数的同时,立即执行这个函数语法:(封装的函数)()!封装的函数()~封装的函数()这三种语法没有区别,爱用哪个用那个立即执行定义的函数,不是真正的在定义声明函数立即执行之后,无法再次被正常的调用具体使用方法,要到闭包的时候使用 // 定义函数function fun(){console.log(123)}// 调用函数fun();// 立即执...原创 2020-04-09 21:36:16 · 161 阅读 · 0 评论 -
JS-箭头函数及其this的指向和改变this指向（call apply bind）
一.箭头函数<div>我是div</div>所谓的箭头函数是函数的另一种语法形式const fun = function(){} 普通函数const fun = ()=>{} 箭头函数将匿名函数的部分,从 function(){} 写成 ()=>{} 的形式如果函数只有一个参数,可以不写()const fun = ...原创 2020-04-09 21:34:23 · 5146 阅读 · 0 评论 -
JS-ES6语法（let、const）
一.ES6语法ES6语法ES6版本的JavaScript语法,是一个非常重要的版本对于JavaScript的功能上有一个极大的丰富让JavaScript从弱类型语言,提升到了 半强类型语言从 速腾 提升到了 保时捷 但是 跟 帕加尼 还是有差距的二.ES6语法之变量的定义（let、const）<ul> <li>1</li> ...原创 2020-04-09 14:40:12 · 384 阅读 · 0 评论 -
JS-正则表达式进行文本的搜索替换重置demo
1原创 2020-04-09 13:47:37 · 656 阅读 · 3 评论 -
JS-正则表达式之特殊符号和其他配合函数（ \ | () [] - [^内容] i g 和search、match、replace）
一.正则表达式之特殊符号正则表达式的特殊符号1, \ 可以表示正则表达式的规范,或者是转义符 设定是不冲突的,符合哪个就执行哪个2, | 表示逻辑或的关系 表示两个规范,满足哪个都可以 如果要表示多种内容,并且限定字符个数 公式 : (内容1|内容2|内容3...){次数限定}3, () 将()中的内容作为一个整体,来...原创 2020-04-08 23:33:19 · 494 阅读 · 0 评论 -
JS-限定符号( ^ 和 $ 与 * + ？ {n} {n,} {n,m} )
一.限定符号限定符号 边界符^ 表示开头$ 表示结尾// 以数字开头即可,之后的内容,不做限定 var reg1 = /^\d/;console.log(reg1.test('123')); → trueconsole.log(reg1.test('123abc')); → trueconsole.log(re...原创 2020-04-08 22:41:32 · 1397 阅读 · 0 评论 -
JS-正则表达式（基本语法、test、exec、\d\D\w\W\s\S .）
一.正则表达式什么是正则表达式对字符串内容,进行格式和内容的验证对于正则表达式,我们不用自己去写,所有常用的正则表达式,在网上都可以搜到我们只需要能看懂,会使用所有的计算机语言,正则表达式,都是相同的,通用正则表达式的基本语法1,字面量(常用)使用 // 来包裹表达式内容var 变量 = /正则表达式/2,构造函数var 变量 = RegExt(‘正则表达式’);正则表达式...原创 2020-04-08 21:48:39 · 5382 阅读 · 2 评论 -
JS-节点操作（获取节点对象的方法、节点的类型名称内容、删除新增克隆写入）
一.节点操作基本概念 复制标签,会使用克隆方法 写入标签时,会使用节点操作方法什么是节点? 整个的HTML文件,其中的所有内容,都视为HTML文件的一个节点对象 可以通过操作这些节点对象,来操作HTML文件 起始节点操作,就是另一种 DOM 操作,也是获取对象,操作对象 只是节点操作,比 DOM 操作,更加复杂更加丰富节点的类型...原创 2020-04-08 14:01:16 · 513 阅读 · 0 评论 -
JS-各种标签及用法（第四周总结）
BOM操作 : 浏览器对象模型,都是操作浏览器的1,三大弹出层 window.alert() 提示框 window.prompt() 输入框 window.confirm() 确认框2,地址栏信息window.location 地址栏信息window.location.reload 重新加载页面window.locati...原创 2020-04-07 21:00:40 · 441 阅读 · 0 评论 -
JS-一些易错问题
1.已知字符串" hello everybody "通过下面哪个方法可以去掉字符串两端的空白答案是：trim()答案解析：trim去掉字符串首尾空格2.以下代码执行后，哪个结果是正确的 var str = "hello world"; console.log( str. substring(2,7) )答案是：llo w22.var arr = [5,4,2,7]; arr.splice...原创 2020-04-07 21:00:27 · 1097 阅读 · 0 评论 -
JS-轮播图
一.轮播图初步 <style> *{ margin: 0; padding: 0; } ul,ol,li{ list-style: none; } a,a:hover,a:active{ text-de...原创 2020-04-04 01:31:00 · 258 阅读 · 0 评论 -
JS- 事件监听之防止点击过快
<!-- 在body中,调用外部js文件,只要写在调用函数之前就可以 --><script src="./move.js"></script><script> // 阻止点击过快的思路 // 方法1:禁用 // 点击时,禁用button // 这样的方法,只对button按钮有用 // div...原创 2020-04-04 01:02:47 · 506 阅读 · 0 评论 -
JS- 运动函数分步骤至最终
运动函数之终极版var oDiv = document.querySelector('div');var oBtn = document.querySelector('button');// left,top,opacity,宽,高 都改变oBtn.addEventListener('click', function () { move(oDiv, { left: 600, t...原创 2020-04-04 01:01:43 · 279 阅读 · 0 评论 -
JS-函数套函数的特别说明
// 当参数是一个函数时,特别的执行方式和赋值方式// 参数是一个字符串,或者是其他 基本数据类型// 直接赋值,直接调用就可以了function fun1(str){ console.log(str);}fun1('张三');// 参数是一个函数// 输入的参数,就有两种情况// 1,实参直接是另一个函数// 2,参数是一个函数名称function fun2(f)...原创 2020-04-03 23:36:12 · 908 阅读 · 1 评论 -
JS15-Date的注意事项
Date的设定和获取 var d = new Date(设定指定的时间); 方式1,使用字符串,设定完整的时间 ---- 推荐方式 var d = new Date('年-月-日 时:分:秒'); var d = new Date('年 月 日 时:分:秒'); var d = new Date('年,月,日 时:分:秒'); ...原创 2020-04-03 17:46:26 · 115 阅读 · 0 评论