zdw火车叨位去-CSDN博客

原创浮动布局tips

1.设置为float元素后，该元素宽度不再延伸，而是由内容决定宽度。2.设置为float元素后，该元素会变成block类型。3.margin的参照系也与之前没有区别。4.父元素高度塌陷：父元素不为浮动元素。浮动元素的height大于父元素height时。或者父元素干脆没有定义高度。5.当父元素也为浮动元素时，会自适应包含该子元素。6.清除浮动三种方法：在浮动元素后添加一个div元素，利用其clear属性。.clearfix{ clear:both} 在父元素添加 ove.

2021-07-01 16:32:35 143

原创四. REPL和控制台

当测试Node应用或模块时，不需要在文件中输入JS代码，也不需要在Node中运行，Node为我们提供了一个交互模块：交互式编程环境(REPL)1.命令行中直接输入node即可打开REPL。输入内容由V8引擎处理。2._可以获得上一个表达式的值。3.赋值表达式在赋值时不会返回。(即只返回undefined)4.在REPL中可以快速、轻易地查看一个对象的接口。5.REPL命令的完整列表。.break 结束多行输入，已输入的也会丢失。 .clear 重启上下文对象，清空所有多行表达...

2021-06-28 15:21:59 356

原创三.Node模块和npm

1.当程序引用一个模块时，Node首先会检查是否有缓存。Node在首次加载一个模块之后会将其缓存。2.每个文件只能定义一个模块。3.如果模块没有缓存，Node会检查该模块是不是原生模块。原生模块指预编译过的二进制文件，比如C++插件。 Node会用专用函数来加载原生模块。4.如果模块没有缓存，也不是原生模块，那么Node会创建一个新的模块对象。5.加载模块时，Node会先查找符合模块名称的js文件，如果每找到就找JSON文件，如果还是没有找到，就会找符合名称的.node文件(预编译的N

2021-06-27 17:09:59 171 1

原创二.Node:全局对象，事件，异步特性

1.javaScript是单线程。Node通过事件循环(event loop)模拟异步环境。2.Node环境和浏览器环境的本质区别是二进制数据的缓存。虽然Node现在可以操作ES6的ArrayBuffer和类型化数组。但是大部分很二进制有关的还是用Buffer类实现。 buffer是Node的一个全局对象，另一个全局对象是global本身。Node还能访问另一个全局变量process——Node应用和其环境的桥梁。1.global和process对象1.与浏览器中的不同，Node中的全局变量

2021-06-26 22:48:06 133

原创解决electronjs 无法显示消息通知问题

根据Electron官网例子https://www.electronjs.org/docs/tutorial/notifications，无法显示通知。查询原因是win10的通知设置屏蔽了应用的通知。点击右下角时间旁边的消息。2.点击右上角管理通知，打开获取其他应用通知按钮。...

2021-05-06 23:14:19 1942

原创 React：生命周期（新）

1.新版去掉了原来的componentWillMount，componentWillUpdate，componentWillReceiveProps。2.新增函数 getDerivedStateFromProps 控制state的值在任何时候都取决于props 返回值为null或state对象，不能为undefined 原型对象自身静态函数,使用前要加static static getDerivedStateFromProps(props,state)...

2021-03-13 20:40:37 182

原创 React：生命周期（旧）

1.setState()不能写在render()内。2.setInterval()等函数不能随意写在class内render外。3.对象key与value相同会触发简写机制。{opacity:opacity}等同于{opacity}4.生命周期函数无需写成箭头函数形式。class Life extends React.Component{ state={opacity:1} render(){ return (<div> <h1 style..

2021-03-13 17:27:23 82

原创定位布局tips

1.static，relative保持在文档流中。absolute,fixed元素框从文档流完全删除。2.根元素的包含块是一个矩形,叫做初始化包含块。3.absolute的元素的位置相对于最近的非static祖先元素，如果元素没有非static的祖先元素，那么它的位置相对于最初的包含块。4.position不改变自己的子元素与自己的关系，也就是子元素始终跟随自己一起动。如果没有特别设置，position子元素默认继承父元素属性。4.fixed元素的包含块是视窗本身。...

2021-03-11 23:52:29 117

原创 React：refs

1.refs字符串形式（官方不推荐）class Demo extends React.Component{ render(){ return(<div> <input ref='input1' type="text"placeholder="点击按钮提示数据" /> <button onClick={this.showData}>按钮</button> <input onBlur={this.blurData} ref=

2021-03-11 21:17:18 70

原创 React：props

1.通过标签属性从组件外向组件内传递变化的数据。2.组件标签的所有属性都保存在props中。3.每个组件对象都会有props(properties)属性。4.props只读，组件内部不要修改props数据。5.用解构赋值批量传输属性：{...P}展开运算符不能展开对象由于React和jsx,导致可以在标签属性传递时展开对象6.js代码必须写在{ }中。age={18}7.限制传递的props：对组件标签属性进行限制限制语句如果写在class外面，要写类名Person.

2021-03-11 18:42:39 107

原创 Mutation Observer API监听DOM

1.Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。2.事件是同步触发，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。3.Mutation Observer 有以下特点。它等待所有脚本任务完成后，才会运行（即异步触发方式）。它把 DOM 变动记录封装成一个数组进行处

2021-01-14 16:42:46 128

原创 Text 节点， DocumentFragment 节点

1.文本节点（Text）代表元素节点（Element）和属性节点（Attribute）的文本内容。如果一个节点只包含一段文本，那么它就有一个文本子节点，代表该节点的文本内容。2.空格也是一个字符，也会形成文本节点。3.data属性等同于nodeValue属性，用来设置或读取文本节点的内容。4.wholeText属性将当前文本节点与毗邻的文本节点，作为一个整体返回。5.length属性返回当前文本节点的文本长度。6.nextElementSibling属性返回紧跟在当前文本节点后面的那个

2021-01-14 15:09:41 224

原创元素Element节点，属性与方法

1.Element节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象。2.不同的 HTML 元素对应的元素节点是不一样的，浏览器使用不同的构造函数，生成不同的元素节点。比如<a>元素的构造函数是HTMLAnchorElement()，<button>是HTMLButtonElement()。因此，元素节点不是一种对象，而是许多种对象，这些对象除了继承Element对象的属性和方法，还有各自独有的属性和方法。3

2021-01-13 18:22:03 790

原创文档document节点，属性与方法

1.document节点对象代表整个文档，每张网页都有自己的document对象。window.document属性就指向这个对象。2.document对象的获取。正常的网页，直接使用document或window.document。 iframe框架里面的网页，使用iframe节点的contentDocument属性。 Ajax 操作返回的文档，使用XMLHttpRequest对象的responseXML属性。内部节点的ownerDocument属性。3.document.default

2021-01-12 23:11:46 398

原创 ParentNode，ChildNode

1.ParentNode接口表示当前节点是一个父节点，提供一些处理子节点的方法。ChildNode接口表示当前节点是一个子节点，提供一些相关方法。2.ParentNode.children属性返回一个HTMLCollection实例，成员是当前节点的所有元素子节点。该属性只读。3.ParentNode.firstElementChild属性返回当前节点的第一个元素子节点。4.ParentNode.lastElementChild属性返回当前节点的最后一个元素子节点。5.ParentNode.

2021-01-12 18:09:03 697

原创 NodeList ，HTMLCollection

1.节点都是单个对象，DOM 提供两种节点集合NodeList和HTMLCollection,用于容纳多个节点。2.NodeList可以包含各种类型的节点，HTMLCollection只能包含 HTML 元素节点。3.NodeList实例是一个类似数组的对象，它的成员是节点对象。通过以下方法可以得到NodeList实例。Node.childNodes document.querySelectorAll()等节点搜索方法3.NodeList.prototype.length属性返回 NodeL

2021-01-12 17:53:50 461 1

原创节点node接口的属性与方法

1.DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。2.节点的类型有七种。浏览器提供一个原生的节点对象Node，这七种节点都继承了Node，因此具有一些共同的属性和方法。Document：整个文档树的顶层节点 DocumentType：doctype标签（比如<!DOCTYPE html>） Element：网页的各种HTML标签（比如<body>、<a>等） Attr：网页元素的属性（比如class=

2021-01-12 16:28:33 514

原创 JavaScript定时器

1.setTimeout()函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。先输出1和3，然后等待1秒再输出2console.log(1);setTimeout('console.log(2)',1000);console.log(3);推迟执行的是函数，就直接将函数名作为参数。function f() { console.log(2);}setTimeout(f, 1000);setTimeout(f)//

2021-01-11 22:23:35 149

原创异步操作

1.单线程模型指的是，JavaScript 只在一个线程上运行。也就是说，JavaScript 同时只能执行一个任务，其他任务都必须在后面排队等待。2.JavaScript 引擎有多个线程，单个脚本只能在一个线程上运行（称为主线程），其他线程都是在后台配合。3.同步任务是那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕，才能执行后一个任务。4.异步任务是那些被引擎放在一边，不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了（比如 Ajax 操作从服务器

2021-01-11 20:55:12 180

原创继承与原型，constructor属性，instanceof运算

1.JavaScript 规定，每个函数都有一个prototype属性，指向一个对象。对于构造函数来说，生成实例的时候，该属性会自动成为实例对象的原型。原型对象的属性不是实例对象自身的属性。只要修改原型对象，变动就立刻会体现在所有实例对象上。2.当实例对象本身没有某个属性或方法的时候，它会到原型对象去寻找该属性或方法。3.avaScript 规定，所有对象都有自己的原型对象（prototype）。任何一个对象，都可以充当其他对象的原型。由于原型对象也是对象，所以它也有自己的原型。4.

2021-01-11 18:04:11 92

原创 this关键字与call,apply,bind绑定

1.不管是什么场合，this都有一个共同点：它总是返回一个对象。2.this就是属性或方法“当前”所在的对象。3.JavaScript 语言之中，一切皆对象，运行环境也是对象，所以函数都是在某个对象之中运行，this就是函数运行时所在的对象（环境）。4.如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。该方法赋值给另一个对象，就会改变this的指向。5.函数实例的call()方法，可以指定函数内部this的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该

2021-01-11 16:27:18 82

原创对象实例与new命令

1.构造函数的特点有两个。函数体内部使用了this关键字，代表了所要生成的对象实例。生成对象的时候，必须使用new命令。2.使用new命令时，它后面的函数依次执行下面的步骤。创建一个空对象，作为将要返回的对象实例。将这个空对象的原型，指向构造函数的prototype属性。将这个空对象赋值给函数内部的this关键字。开始执行构造函数内部的代码。也就是说，构造函数内部，this指的是一个新生成的空对象，所有针对this的操作，都会发生在这个空对象上。3.如果构造函数内部有retu

2021-01-10 19:54:03 101

原创 js标准库—JSON对象

1.JSON 格式（JavaScript Object Notation 的缩写）是一种用于数据交换的文本格式，2001年由 Douglas Crockford 提出，目的是取代繁琐笨重的 XML 格式。2.相比 XML 格式，JSON 格式有两个显著的优点。书写简单，一目了然。符合 JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。3.每个 JSON 对象就是一个值，可能是一个数组或对象，也可能是一个原始类型的值。总之，只能是一个值，不能是两个或更多的值。4.

2020-12-25 21:45:02 259

原创 js包装对象—Boolean,Number,String对象

1.对象是 JavaScript 语言最主要的数据类型，三种原始类型的值——数值、字符串、布尔值——在一定条件下，也会自动转为对象，也就是原始类型的“包装对象”（wrapper）。所谓“包装对象”，指的是与数值、字符串、布尔值分别相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成（包装成）对象。这三个对象作为构造函数使用（带有new）时，可以将原始类型的值转为对象。作为普通函数使用时（不带有new），可以将任意类型的值，转为原始类型的值。2.某

2020-12-24 22:09:12 116

原创 js标准库—Array对象

1.Array是 JavaScript 的原生对象，同时也是一个构造函数，可以用它生成新的数组。2.Array.isArray()返回一个布尔值，表示参数是否为数组。数组的valueOf()返回数组本身。数组的toString()返回数组的字符串形式。 push()方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。 pop()方法用于删除数组的最后一个元素，并返回该元素。 shift()方法用于删除数组的第一个元素，并返回该元素。 unshift()方法用于在数组的第

2020-12-24 20:36:08 145 1

原创 js标准库—属性描述对象

1.JavaScript 提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”（attributes object）。每个属性都有自己对应的属性描述对象，保存该属性的一些元信息。属性描述对象的各个属性称为“元属性”，因为它们可以看作是控制属性的属性。{ value: 123, value是该属性的属性值，默认为undefined。 writable: false, writable是一

2020-12-24 20:04:49 160 1

原创 js标准库—Object对象

1.JavaScript 的所有其他对象都继承自Object对象，即那些对象都是Object的实例。2.所谓实例方法就是定义在Object原型对象Object.prototype上的方法。它可以被Object实例直接使用。3.Object本身是一个函数，将任意值转为对象。如果参数为空（或者为undefined和null），Object()返回一个空对象。如果参数是原始类型的值，Object()将其转为对应的包装对象的实例。如果Object()的参数是一个对象，它总是返回该对象，即不用转换

2020-12-24 18:05:35 211 1

原创 console对象与控制台

1.console对象可以输出各种信息到控制台。浏览器实现，可以使用下面三种方法的打开它。按 F12 或者Control + Shift + i 浏览器菜单选择“工具/开发者工具”。在一个页面元素上，打开右键菜单，选择其中的“检查元素(Inspect Element)”。2.打开开发者工具以后，顶端有多个面板。Elements：查看网页的 HTML 源码和 CSS 代码。 Resources：查看网页加载的各种资源文件（比如代码文件、字体文件 CSS 文件等），以及在硬盘上创建的各种内容（

2020-12-23 22:31:10 2168

原创 js错误处理机制

1.Error构造函数接受一个参数，表示错误提示，可以从实例的message属性读到这个参数。抛出Error实例对象以后，整个程序就中断在发生错误的地方，不再往下执行。2.Error实例还提供name和stack属性，分别表示错误的名称和错误的堆栈，但它们是非标准的，不是每种实现都有。message：错误提示信息 name：错误名称（非标准属性） stack：错误的堆栈（非标准属性）var err = new Error('出错了');err.message // "出错了"3.Syn

2020-12-23 21:00:50 314

原创 js数据类型转换—Number,String,Boolean强制转换

一，Number()1.参数是原始类型值。只要有一个字符无法转成数值，整个字符串就会被转为NaN。 parseInt逐个解析字符，而Number函数整体转换字符串的类型。// 数值：转换后还是原来的值Number(324) // 324// 字符串：如果可以被解析为数值，则转换为相应的数值Number('324') // 324// 字符串：如果不可以被解析为数值，返回 NaNNumber('324abc') // NaN// 空字符串转为0Number('') // 0

2020-12-23 18:26:50 448

原创 js运算符

一，算术运算符1.除了加法运算符，其他算术运算符（比如减法、除法和乘法）都不会发生重载。它们的规则是：所有运算子一律转为数值，再进行相应的数学运算。2.对象的相加，必须先转成原始类型的值，然后再相加。对象转成原始类型的值：对象的valueOf方法总是返回对象自身，这时再自动调用对象的toString方法，将其转为字符串。true + true // 21 + true // 21 + 'a' // "1a"false + 'a' // "falsea"'3' + 4 + 5 // "

2020-12-20 22:00:32 111

原创 js数据类型—数组

1.任何类型的数据，都可以放入数组。var arr = [ {a: 1}, [1, 2, 3], function() {return true;}];arr[0] // Object {a: 1}arr[1] // [1, 2, 3]arr[2] // function (){return true;}2.数组是一种动态的数据结构，可以随时增减数组的成员。['a', 'b', 'c'].length // 3var arr = [ 'a', 'b', 'c' ]

2020-12-19 23:05:19 301 1

原创 js数据类型—函数

1.采用函数表达式声明函数时，function命令后面不带有函数名。如果加上函数名，该函数名只在函数体内部有效，在函数体外部无效。var print = function x(){ console.log(typeof x);};x// ReferenceError: x is not definedprint()// function2.return语句不是必需的，如果没有的话，该函数就不返回任何值，或者说返回undefined。3.JavaScript 语言将函数看作一种值。

2020-12-19 22:22:57 80 1

原创 js数据类型—对象

1.对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。2.对象的所有键名都是字符串。加不加引号都可以。如果键名是数值，会被自动转为字符串。如果键名不符合标识名的条件（比如第一个字符为数字，或者含有空格或运算符），且也不是数字，则必须加上引号。对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用。var obj = { 1: 'a', 3.2: 'b'

2020-12-19 18:48:06 445 1

原创 js字符串

单引号双引号都可以，一般都用单引号。字符串默认只能写在一行内，分成多行将会报错。长字符串分成多行，可以在每一行的尾部使用反斜杠，反斜杠的后面必须是换行符。用+可以连接多个单行字符串。输出的时候也是单行。 'Did she say \'Hello\'?'// "Did she say 'Hello'?"'abc'// SyntaxError: Unexpected token ILLEGALvar longString = 'Long \long..

2020-12-19 16:51:11 85 1

原创 parseInt，parseFloat，isNaN，isFinite—数值相关方法

1.parseInt()用于将字符串转换为整数。头部空格自动去除。参数先被转换为字符串，再被转换为整数。遇到不能转换数值时停止，首字不能转换直接停止。parseInt()第二个参数为被转换数的进制。parseInt('123') // 123parseInt(' 81') // 81parseInt('8a') // 8parseInt('abc') // NaNparseInt('0x10') // 16parseInt(0.0000008) // 8// 等同于pa

2020-12-19 16:28:19 273 2

原创 js特殊数值类型——NaN、Infinity

1.NaN和Infinity都属于数值。2.规则0 / 0 // NaNNaN === NaN // falseBoolean(NaN) // false[NaN].indexOf(NaN) // -13.NaN与任何数（包括它自己）的运算，得到的都是NaN。4.Infinity两种情况：一个数的绝对值太大，超过范围时，显示Infinity 非0数值除以0，得到Infinity5.Infinity表示正的无穷，-Infinity表示负的无穷。0 / 0...

2020-11-24 23:47:19 1374

原创 js数据类型——数值类型

1.JavaScript 内部，所有数字都是以64位浮点数形式储存，没有整数。1 === 1.0 // true0.1 + 0.2 === 0.3// false(0.3 - 0.2) === (0.2 - 0.1)// false2.js数字64位组成：第1位：符号位，0表示正数，1表示负数第2位到第12位（共11位）：指数部分第13位到第64位（共52位）：小数部分（即有效数字）3.JavaScript 对15位的十进制数都可以精确处理，大于2的53次方的数值，都无法保持精.

2020-11-24 23:16:28 216

原创 js判断布尔值

undefined//falsenull//falsefalse//false0//falseNaN//false""//false''//false除了上面几种类型为false，其他都为true " "和‘ ’为空字符串 { }和[ ]也为true{}//true[]//true

2020-11-24 21:53:52 1180

原创 js数据类型的分类

1.基本数据类型：数字，字符串，布尔值，undefined，null。2.引用数据类型：对象——数组、函数。3.检查数据类型的方法：typeoftypeof window // "object"typeof {} // "object"typeof [] // "object"typeof '123' // "string"typeof null // "object"{ }是函数 [ ]是数组因为历史原因，null也是对象...

2020-11-24 21:42:08 71

空空如也

空空如也