2020年05月_DOM曼珠沙华

原创 JavaScript操作字符串方法小结

本文主要是关于字符串方法的介绍。创建String类型是字符串的对象包装类型，可以使用String构造函数来创建。var stringObject = new String("Hello World");String对象的方法也可以在所有基本的字符串值访问到，其中继承valueOf()、toLocaleString()后如toString()方法，都返回length属性String对象的每个实例都有一个length属性，表示字符串中包含多个字符。var stringObject

2020-05-29 18:53:39 197

原创 JavaScript 数组方法小结

Array，ECMAScript的引用类型，数组。ECMAScript数组都是有序列表，而且每一项都可以保存任何类型的数据。数组的大小根据内容自动扩展。创建数组创建数组的两种方式：第一种：：var colors = new Array();例如：var colors = new Array(3); //创建一个包含3项的数组var colors = new Array("red","green","yellow"); //创建包含3个字符串的数组//或者var

2020-05-29 13:08:39 232

原创对 JavaScript原型及原型链的理解

构造函数对象是某个特定引用类型的实例，新对象是使用new操作符后跟一个构造函数来创建的。构造函数本身是一个函数，只不过该函数是出于创建新对象的目的而定义的。例如：var person = new Object();这里就是使用构造函数Object()来创建对象。简单来说就是：ECMAScritp中的构造函数，可以用来创建特定类型的对象。像Object、Array是原生构造函数，在运行时会自动出现在执行环境中。也可以创建自定义的构造函数，从而定义自定义对象类型的属性和方法。下面是自定

2020-05-28 16:31:09 226

转载秒懂JavaScript的原型对象与原型链

我们知道原型是一个对象，其他对象可以通过它实现属性继承。但是尼玛除了prototype，又有一个__proto__是用来干嘛的？长那么像，让人怎么区分呢？它们都指向谁，那么混乱怎么记啊？原型链又是什么鬼？var obj = {};console.log(obj.prototype); //undefinedconsole.log(obj.__proto__); //Object {}var obj2 = function(){}console.log(obj2.prototype); //o...

2020-05-28 11:17:27 179

原创闭包、闭包作用及缺点

闭包：是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见形式：就是在一个函数内部创建另一个函数。先来看一个例子：function count() { var arr = []; for (var i=1; i<=3; i++) { arr.push(function () { return i * i; }); } return arr;}var results = count(..

2020-05-28 10:43:42 532 1

转载一篇文章看懂JS执行上下文[转]【自用】

一、引子我们都知道，JS代码的执行顺序总是与代码先后顺序有所差异，当先抛开异步问题你会发现就算是同步代码，它的执行也与你的预期不一致，比如：function f1() { console.log('res');};f1(); //echofunction f1() { console.log('echo');};f1(); //echo按照代码书写顺序，应该先输出 res，再输出 echo才对，很遗憾，两次输出均为 echo；如果我们将上述代码中的函数声明改为...

2020-05-27 15:58:05 226

原创 JS对象详解（对象创建及属性类型）

对象ESMAScript把对象定义为：无序属性的集合，其属性可以包含基本值，对象或者函数。简单来说，是一组名值对，其中值可以是数据或函数。每个对象都是基于引用类型创建的。创建对象1.创建自定义对象的最简单的方式是创建Object的实例，然后再为它们添加属性和方法：var person = new Object();person.name = "Nicholas";person.age = 10;person.job = "Software Engineer";person.s

2020-05-26 17:11:31 2169 1

原创 JavaScript基础数据类型概述、类型转换及Object类型

基础数据类型ECMAScript中有五种简单的数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number、String。还有一中复杂数据类型 Object，Object本质上是由一组无序的名值对组成。ES6 中新增了一种 Symbol。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。typeof操作符ECMAScript是松散类型的，所以需要一个手段来检测给定变量的操作类型 typeof 。对一个值使用typeof操..

2020-05-26 08:52:33 424

原创 JavaScript事件绑定的三种方式及事件监听的兼容处理

在JavaScript中，有三种常用的绑定事件的方法：在DOM元素中直接绑定；在JavaScript代码中绑定；绑定事件监听函数。1.在DOM元素上直接绑定这种绑定事件的当时称为 HTML事件处理程序。某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值是可以执行JavaScript的代码。<input type="button" value="Click this" onclick="alert('Clicked')"/>

2020-05-25 20:39:35 727

原创 DOM事件、事件流、事件对象、事件委托

本文主主要围绕以下四个部分展开： DOM事件级别事件流（冒泡、捕获、DOM事件流）事件对象（event）事件委托一、DOM事件级别DOM级别：可分为四级：DOM0级，DOM1级，DOM2级和 DOM3级。查看详细的DOM级别可以戳这里哟~ 可以看到在DOM1标准内并未添加事件相关的东西。所以DOM事件级别分别为：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理先了解一下HTML事件处理程序某个元素支持的每种事件，都可以使用一个与相应

2020-05-25 16:58:52 867

转载 DOM操作方法（查找、更新、插入、删除）

DOM的产生、分类、节点、树等参考文档DOM 文档对象模型、domReady、window.onload与$(document).ready()操作DOM的节点由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；遍历：遍历该DOM节点下的子节点，以便进行进一步操作；.

2020-05-25 00:18:48 1382

原创 JS实现简单的滑动门

这个是为了体验DOM操作的过程实现的：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>滑动门</title> <style type="text/css"> *{ margin: 0; padding: 0; } #container{ height: 275px; margin: 0

2020-05-24 20:35:48 415

原创 DOM 文档对象模型、domReady、window.onload与$(document).ready()

一个完整的JavaScript由三个不同的部分组成：核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM）。DOM文档对象模型（DOM，Document, Object Model）是针对XML但经过扩展用于HTML的应用程序编程接口（API，Application Programming Interface）。DOM把整个页面映射为一个多层次节点结构。HTML或XML页面中的每次组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。<!DOCTYPE ht

2020-05-24 16:38:41 752

原创 cookie、本地存储（localStorage、sessionStorage）用法、设置、查看位置及区别

HTML5之前的存储：cookie设置cookie：<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>cookie的应用——记住用户名</title></head><body> <form action="#" id="myform"> <label for="user

2020-05-24 04:02:48 3944

原创谷歌浏览器如何检查cookie存放位置

cookie存储默认在浏览器，在设置完毕后可以直接在浏览器上查看，可以设置cookie时间等，详细查看查看位置（选中位置为点击位置）：1.打开谷歌后，点击下图选中符号：以这两个cookie值为例：2.点击后，出现出现设置界面，点击设置：3.出现设置界面后，点击网站设置：4.进入网站设置后，点击Cookie和网站数据：5.查看所有Cookie和网站数据：6.点击进入之后，里面存储了很多。看图一，我们测试用的存储的ip和端口为http://127....

2020-05-24 02:26:42 6827

原创 CSS权重、CSS继承、默认样式

css权重权重：当多个选择器选择同一个元素时，哪个样式优先级高可以通过约分的方式比较两个组合的选择器，将相同的选择器月份，剩余的进行比较。css常用的选择器通配选择器 * 标签选择器 div 类选择器 .class id选择器 #id 内联样式 style="" !important权重选择器权重内联样式 style="" 1000 id选择器 #id 100 类、属性、伪类选择器 10 标签选择器、伪元素选择器 ...

2020-05-23 18:26:03 466

原创文档流、文本流、定位流、浮动流、脱离文档流

文档流文档流(Normal flow)也称为常规流，普通流。从直观上理解，常规流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）。内联元素不会独占一行，而每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。浮动元素不占任何正常文档流空间，而浮动元素的定位照样基于正常的文档流，当一个元素脱离正常文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。文本流

2020-05-23 15:10:42 5140 2

原创块格式化上下文 BFC

块格式化上下文(Block Formatting Context, BFC)是web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

2020-05-23 11:29:05 162

原创在安装cube-ui后，报These relative modules were not found: * ./cubeic.ttf ./cubeic.woff

在运行项目时， npm run serve指令运行时显示下面的报错。要怎么解决？

2020-05-21 13:32:24 873 3

原创 Unknown custom element: ＜cube-form＞ did you register the component correctly

在使用cube-ui写了部分代码后，出现了bug，提示我这个报错，显示<cube-form>是一个未知的自定义元素，在询问我是否正确注册了组件，所以这边应该是我使用的ui框架未导入，因为我安装是正常的。所以就需要导入cub-ui，看了一下官网，使用了全部导入，在 main.js 内添加下，如下图：最后运行，报错就解决了。这种报错，如果显示<el-button>也是一样的，添加下方代码导入即可：...

2020-05-21 12:22:44 495

原创 vue组件间（父子、兄弟、跨级组件）通信传值

大体可以分为这几种情况：父子组件传值子父组件传值兄弟组件传值（不相干的两个组件）跨组件传值父组件给子组件传值静态传值父组件内：<form-test title="element表单"></form-test>子组件使用props获取：props:['title'],子组件渲染在页面内：<h3>{{title}}</h3>最后渲染效果：动态传值子组件内的东西与上方的一致，修改父组件内的组件：<form-test

2020-05-21 08:12:14 5425 1

原创自定义组件实现v-model双向绑定

v-model是一个特殊的语法糖，相当于绑定了:value和@input两个命令。所以，v-model在使用时，需要绑定value和要响应input这个事件。<custom-input v-model="searchText"></custom-input><custom-input :value="searchText" @input="searchText = $event"></custom-input>子组

2020-05-19 20:50:40 825

原创 Vue实现简单购物车

这里先分析一下vue项目的文件结构，组件、入口文件及配置可以添加的位置。其中：assets表示静态资源，如css，jscomponents是公共组件存放的位置App.vue是根组件main.js为入口文件组件化需要在项目src文件夹下components文件夹内创建Cart.vue文件作为购物车组件。所以在新建完成后需要在App.vue根组件内使用。组件按需引入及注册import Cart from './components/Cart.vue'export default{ na

2020-05-19 11:33:17 4391 1

原创 Vue项目创建及单个练习文件新建

起步在学习vue之前需要安装node（在控制管理器中node -v进行检查，若无版本号，则需要安装）。1.安装vue-clinpm install -g @vue/clinpm install -g @vue/cli-service-global一般常用第一个安装即可。2.新建项目 vue create vue-demovue-demo为你的项目名称，在安装时需要等待。3.选择配置Babal代码转义Linter代码风格测试4.启动项目npm run serve先进入项目cd

2020-05-18 15:13:33 883

原创 jQuery选择器小结(基本选择器、层次选择器、过滤选择器和表单选择器) 没写完

JQ选择器jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。基本选择器基本选择器通过元素id，class和标签名等查找DOM查找元素。选择器描述返回示例 #id 根据给定的id匹配一个元素单个元素 $("#test")选取id为test的元素 .class 根据给定的类名匹配元素集合元素 $(".test")选取所有class为test的元素 element 根据给定的元素匹配类名集

2020-05-18 11:13:22 196

原创 Javascript 异步编程的6种方法（目前写了6种）

Javascript语言的执行环境是"单线程"（single thread）。所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。为了解决这个问题，Javascr

2020-05-17 23:17:30 401

原创微信小程序获取当前日期及时间

1.在微信小程序新建好之后，项目内可以看到有一个名字为utils的文件夹，内放置util.js文件，util.js文件用于存放公共方法。打开后可以看到内容如下图：如果说你只需要获得当前日期等其他文件内没有的数据，就需要你进行添加，可以看到源文件获取日期加时间的一个数据，比如2.我们现在只需要日期，需要添加日期方法，下方选中的部分：在添加完成后，同时需要将其导出，在原来导出的基础上添加 formatDate:formatDate 即可，如下方代码：module.exports .

2020-05-17 17:18:39 28584 5

转载 ES6 async与Promise、Generator的比较

async与Promise、Generator的比较我们通过一个例子，来看 async 函数与 Promise、Generator 函数的比较。假定某个 DOM 元素上面，部署了一系列的动画，前一个动画结束，才能开始后一个。如果当中有一个动画出错，就不再往下执行，返回上一个成功执行的动画的返回值。首先是 Promise 的写法。function chainAnimationsPromise(elem, animations){ // 变量ret用来保存上一个动画的返回值 let ret

2020-05-17 16:07:25 268

转载 ES7 async/await函数

含义ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是什么？一句话，它就是 Generator 函数的语法糖。const fs = require('fs');const readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(fileName, function(error, data) { if

2020-05-17 14:34:06 401

原创 ReferenceError: fetch is not defined

在使用fetch时，报错fetch is not find根据https://stackoverflow.com/questions/48433783/referenceerror-fetch-is-not-defined的回答，通过安装、使用，测试fetch正常。

2020-05-17 11:45:51 12442 1

原创 ES6的生成器 Generator

GeneratorGenerator函数是 ES6 提供的一种异步编程解决方案。简单来说：生成器函数就是一个带星号（*）的函数，生成器函数可以暂停，而普通函数则是默认一路到底执行代码，生成器函数在内部碰到 yield 就可以实现暂停功能，使用 next 进行迭代。function* g(){ yield 'a'; yield 'b'; return 'ending';}var gen = g();g()并不会立即执行函数，而是返回迭代器Iterator对象，必须调用遍历器对象的

2020-05-16 14:33:48 251

原创 git运行报错 Could not resolve host: github.com

git运行push命令时，报错 Could not resolve host: github.com：根据网上搜到的答案：https://blog.csdn.net/zhanglongdream/article/details/71307775是先 ping github.com，然后我ping完之后，直接是下图：根据查到的获取到 ip为13.250.177.233。编辑系统文件 etc/hosts，位置为 C:\Windows\System32\drivers\etc，添加了下图.

2020-05-15 00:34:11 19376 5

转载 ES6 函数的扩展

1.函数参数默认值函数的参数设置默认值时，直接在在参数定义的后面添加。function log(x, y = 'World') { console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // HelloES6 的写法还有两个好处：首先，阅读代码的人，可以立刻意识到哪些参数是可以省略的，不用查看函数体或文档；其次，有利于将来的代码优化，即使

2020-05-13 23:15:30 216

转载 ES6 数值的扩展

1.二进制和八进制的表示法ES6 提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0OO）表示。0b111110111 === 503 // true0o767 === 503 // true从 ES5 开始，在严格模式之中，八进制就不再允许使用前缀0表示，ES6 进一步明确，要使用前缀0o表示。// 非严格模式(function(){ console.log(0o11 === 011);})() // true// 严格模式(function()

2020-05-13 11:58:38 245

转载 ES6 字符串新增的方法

字符串新增的方法1.String.fromcodePoint()可识别大于 0xFFFF的字符，弥补了String.formCharCode()方法的不足。在作用上，正好与下面的codePointAt()方法相反。String.fromCodePoint(0x20BB7)// "????"String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'// true上面代码中，如果String.fromCodePoint方法

2020-05-12 19:12:34 336

转载 ES6 的字符串扩展：模板字符串

根据阮一峰大神的文章字符串扩展进行学习和理解的，之前看了没看懂，重新再看一下字符串扩展的有以下几点：字符的Unicode表示法字符串遍历器接口直接输入U+2028和U+2029 JSON.stringify()的改造模板字符串这里只介绍字符串遍历器接口和模板字符串。字符串的遍历器接口ES6 为字符串添加了遍历器接口，使得字符串可以被for ...of循环遍历。for(let codePoint of 'foo'){ console.log(codePoin.

2020-05-12 11:13:34 537

原创 MVVM框架理解

什么是MVVM？MVVM是Model-View-ViewModel的缩写。、在了解MVVM之前，我们先回顾一下前端发展的历史。在上个世纪的1989年，欧洲核子研究中心的物理学家Tim Berners-Lee发明了超文本标记语言（HyperText Markup Language），简称HTML，并在1993年成为互联网草案。从此，互联网开始迅速商业化，诞生了一大批商业网站。最早的HTML页面是完全静态的网页，它们是预先编写好的存放在Web服务器上的html文件。浏览器请求某个URL时，Web服务

2020-05-11 10:57:32 1179

原创解构（Destructuring）赋值

在es5中我们进行相关赋值的时候，只能一个一个进行赋值，使用逗号的进行赋值也只是最右边的赋值才生效。在es6中出现了赋值解构，分两种情况一个是数组解构，一个是对象解构赋值。这么好用的方法给我带来很多便利。在解构中有以下两部分参与：解构的源：解构赋值表达式的右边部分解构的目标：解构赋值表达式的左边部分数组解构数组解构的几种类型：//模式匹配只要等号两边的模式相同，左边的变量就会被赋予对应的值let [a, b, c] = [1, 2, 3]; //可以从数组中提取值，按照对应

2020-05-10 22:27:39 229

原创 ES6 Set数据结构的使用

ES6 内的数据结构Set特性：类似数组，但是它的最大特性就是所有元素都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成Set数据结构。const s = new Set();[2,3,3,5,6,7,7,4,3].forEach( x => s.add(x));for(let i of s){ console.log(i);}//2 3 5 6 7 4可以看到通过add()向Set结构内添加数据，返回的Set结构内无重复数据。Set函数可以接受一

2020-05-10 18:46:05 171

原创 let、const、var的用法及区别

letES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。{ var a = 1; let b = 2;}a; // 1b; // ReferenceError: b is not defined上面代码在代码块中，分别用let和var声明了两个变量，在代码块之外调用这两个变量，let声明报错，var返回了正常的值。说明，let声明的变量只在它所在的代码块有效。let不存在变量提升，它所声明的变量一定要在声明后使

2020-05-08 21:28:26 490

uni-app二维码生成资源 weapp-qrcode-master

cookie被篡改怎么办？