- 博客(42)
- 收藏
- 关注
RSS订阅原创 原生JavaScript之Object对象常用方法
Object对象—详见：MObject.assign(target,…sources):将源对象的所有自身可枚举的属性和值复制到目标对象。并返回目标对象。Object.create(obj,[propertiesObject]):创建一个新对象，obj作为新对象的原型。propertiesObject(可选)为新对象的可枚举属性描述器。 o2 = Object.create({}, {...
2019-09-23 15:37:52
412
原创 CSS技巧积累
积累的一些css技巧**1.彩色图片显示为黑白图片。filter属性**img{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%);}/*参考filte...
2019-09-09 15:27:39
241
原创 Javascript中宽高和偏移
原生JavaScriptclientHeight/Width:Element.clientHeight==>元素包括padding的高度，不包括滚动条Element.clientWidth==>元素包括padding的宽度，不包括滚动条document.body/documentElement.clientWidth/Height==>:代表视口的宽高scrollHei...
2019-09-09 15:21:16
255
原创 JavaScript中的假值归纳
在公司实习一段时间，过程中，发现有很多时候在if()判断语句时，总是出现真假值判断错误的情况。所以特意想总结一下JavaScript中的一些真假值，让自己以后能更快速的判断。在JavaScript中，所有的值都能转换成真值(truthy)和假值(falsy)中的一种.所以我们只要记住所有的假值，那么剩下的就是真值。列出我总结的假值：0， +0, -0, null, undefined, ...
2019-01-07 14:50:13
364
1
原创 让react项目支持"decorators"装饰器语法
写在前面；最近在学习ESNext，当学习到装饰器部分时，就需要让项目支持装饰器语法，但是在网上搜索了一番，没有让我成功的。幸好在各种摸索中，我最终还是成功。于是我写下这篇文章，希望对需要它的人有所帮助，同时也是当作自己的一篇笔记。此次配置我是在react项目中进行配置的，目的是让react项目中的高阶组件支持装饰器语法，当然让它能与mobx配合使用也是我的目的之一。具体步骤：一.新建reac...
2018-12-16 15:22:24
6570
2
原创 win10系统无限一分钟后重启问题解决
今天在开机时遇到一个奇怪的问题：网络连接也是有个红叉，状态栏还有个淡黄色的锁。于是百度解决方案，原来网上有非常多人都遇到过这个问题，于是我想把这个问题的解决过程记录下来，以防以后遇到同样的问题，可以看自己的记录，快速解决问题。出现该问题的原因原因是网络组件相关文件异常或损坏，在锁屏界面我们就可以看到网络连接是一个大红×。所以我们只需要恢复文件就可以正常使用了。心里准备在解决这个问题时...
2018-10-23 17:20:25
22407
12
原创 ES5、ES6中继承的实现
继承在JavaScript中也是比较重要的概念。如果仔细讲解会需要比较多的篇幅，所以这里我就列举两种使用比较多，比较被推荐的继承写法。在JavaScript中，实现继承的最根本的思想肯定是原型链，不管怎样都离不开它，所以如果你对原型链理解非常好，那么继承对于你来说只是代码层面的事。 ES5中的两种非常经典的继承第一种：组合继承指的是将原型链和构造函数的技术组合到一起来实现继承。其...
2018-08-03 15:52:16
4121
原创 js小题目之this讲解
在网上看到一道关于js考察this指向的小题目，觉得可以记录一下，因为不仅考察了this指向，还有关于arguments的知识点。先看题目：var length = 10;function fn() { console.log(this.length)};var obj = { length: 5, method: function (fn) { ...
2018-07-23 14:14:57
543
原创 ES6特性之Promise总结
Promise是ES6新特性中知名度非常高的点，我实力不济写的不会很好，如果看官想深入学习Promise请移步其他比较权威的著作，比如阮一峰老师的《ES6入门标准》、《JavaScript Promise迷你书（中文版）》或者直接看"promise/A+"标准也行。我这篇文章的目的只是为我自己备忘而作，当然您也可以略作浏览，难免有所收获嘛！JavaScript异步编程有四种解决方案：回调函数，...
2018-07-22 17:34:09
365
原创 ES6模块（module）语法总结
javascript一直没有模块的概念，不过2015年ES6的出现，解决了这一问题。ES6模块的设计思想是尽量静态化，使得编译时就能确定模块间的依赖关系，以及输入输出的变量。 ES6模块功能主要由export和import两个命令构成。export命令用于规定模块的输出接口，import用于载入其他模块的功能。一个模块就是一个js文件。 export命令写法总结：...
2018-07-22 13:36:30
726
原创 jquery()-$()用法总结
jQuery()方法在大方向上有三种作用：1.接受一个字符串（选择器），用于选取文档元素。2.创建DOM元素。3.绑定一个在DOM文档载入完成后执行的函数。 下面详细介绍各自的用法。一、选取文档元素1.1 $(selector,[context])默认情况下，选择器从整个文档中对DOM进行搜索，不过当传入context参数时，就只会在context范围中选取元素。例：...
2018-07-21 14:37:25
509
1
原创 原生JavaScript之ajax总结
什么都不说，直接上两段代码，解开ajax的面纱，来看看原生js的ajax是如何工作的。//ajax发送GET请求function ajaxGet(url,callback){ //第一步：创建XMLHttpRequest对象 var request = new XMLHttpRequest(); //第二步：指定请求路径和方式 request.open("GET",url); /...
2018-07-20 21:41:44
426
原创 JavaScript数组常用方法归纳
不做完整的介绍，只介绍自己用的比较多的数组方法，ES3、ES5、ES6都有涉及。ES3中常用:join:将数组的所有元素都转换成字符串并拼接在一起，返回最后生成的字符串。默认使用逗号。reverse:将数组中的元素颠倒顺序，返回逆序的数组（不是新数组）。sort：传递比较函数，将数组元素进行排序。concat:返回新数组。var a = [1,2,3];console.lo...
2018-06-04 23:20:01
449
原创 扩展运算符
首先点明，ES6的新特性之扩展运算符（spread）就是三个点（...），和ES6的可变参数形式一样。扩展运算符是很强大的一个运算符，它能简化很多在ES5中会比较繁杂的操作。对于这个运算符，概念性的东西不多，所以这里我就简明扼要的给出一些它的常用场景：1：可变参数。（虽然可变参数严格说不是扩展运算符（spread），而是剩余运算符（rest），但是鉴于它也是三个点：...,我就写在了一起以便记忆）...
2018-05-18 21:53:56
456
原创 microtasks、macrotasks影响JavaScript异步任务执行顺序
首先我直接告诉你常见的microtasks、macrotasks。macrotasks: setTimeout setInterval setImmediate requestAnimationFrame I/O UI renderingmicrotasks: process.nextTick Promises Object.observe MutationObserver现在你肯定很懵逼，这都是...
2018-05-17 15:58:32
1425
原创 滚轮事件总结
原生js: 滚轮事件主要是火狐浏览器和其他浏览器的区别，而不是IE与其他浏览器的区别。 在Chrome等其他浏览器中（以下简称Chrome），滚轮事件是mousewheel。而在火狐中是DOMMouScroll，即使Firefox59。在滚轮事件中，“Chrome”有一个event.wheelDelta属性，而“Firefox”中有一个event.detail属性。二者区别： event.whee...
2018-05-07 21:30:32
2691
原创 JSON语法以及json与JavaScript对象的转换
JSON是JavaScript的一个严格的子集，利用了JavaScript中的一些模式来表示结构化数据。理解JSON，最重要的是理解它是一种数据格式，而不是一种编程语言。JSON虽然利用了JavaScript的一些模式，但JSON并不从属于JavaScript，很多编程语言都可以用JSON来传递数据。 JSON的语法: 学习JSON的语法，你只需知道以下三种类型的值。 1.简单值：也就是J...
2018-04-19 20:11:10
182
原创 JavaScript操作文档样式（css）的方法
一、修改文档元素的style属性。例如：e.stye.backgroundColor = "red"; 注意点： 1.一次只能操作一个属性。 2.被操作的属性的书写要符合驼峰命名法。 3.属性值有单位的必须带上单位。 4.属性值是字符串。 5.由于操作的是style属性，所以设置样式很有用，但是获取...
2018-04-18 22:57:05
348
原创 JavaScript的数据类型
写在前面： 本文只是简单介绍一下，不会深入探究。 js总共有6种数据类型：五个基本类型Number、String、Boolean、Null、Undefined和一个混合对象Object。 typeof操作符可以用来检测变量的数据类型(输出是一个关于数据类型的字符串)， 返回如下6种字符串：number、string、boolean、undefined、object、function。 注意:Nul...
2018-04-18 19:38:14
146
原创 数据结构之JavaScript实现队列（queue）
和栈一样，队列其实也是一种列表，不同的是队列只能在队尾插入元素，在队首删除元素，也就是说，队列是先进先出的数据结构；而栈是先进后出的数据结构。队列的主要操作就是入队和出队操作，也就是队尾插入元素和队首删除元素。队列还有一个比较重要的操作就是读取队首的元素。值得注意一点的是：优先队列。优先队列的普通队列的不同是出队的规则不同：普通队列先进先出，就想排队一样；而优先队列不一定先进先出，而是按照...
2018-04-17 20:44:56
962
原创 数据结构之JavaScript实现栈（Stack）
什么是栈？栈是一种特殊的列表，栈内的元素只能在列表的一段访问，这一端被称为栈顶。栈是一种后入先出的数据结构。下面就是JavaScript实现栈：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript实现sta
2018-04-16 12:51:20
349
原创 两种方式实现CSS动画
实现CSS动画有两种主要的方法：过渡动画(transition)和animation动画。第一种：过渡动画（transition）。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS动画之transition</tit
2018-04-16 00:25:26
7030
原创 数据结构之JavaScript实现List
利用数组实现列表。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript实现列表</title></head><body> &a
2018-04-15 18:10:10
731
原创 多个CSS样式到底谁起作用
首先得知道css有三个特性：继承、层叠、优先级。这三个特性在决定选择器谁起作用时有考虑的优先顺序。 具体这三者是怎样影响选择器的请参考权威文档。这里我就只用大白话的形式告诉一些基本常识。 在考虑到底哪个css样式起作用时，先考虑继承，再考虑优先级，最后考虑层叠。 怎样个考虑法呢？ 第一步：直接选中优先于间接选中。即选择器直接选中元素时指定的样式优先于继承下来的样式。 第二步：若多个样式都是直接选中...
2018-04-12 21:10:55
1241
原创 css3新增属性：多列(column)
css3多列能够创建多个列来对文本进行布局，就想报纸那样。关于多列的相关属性及属性值如下：column-count: number|auto;：指定元素应分为的列数。column-fill: 指定如何填充列 balance：(默认)列的高度尽量均衡 auto： 顺序填充内容高度可能差距很大。column-gap: 指定列之间的间距。 length： 一个指定的长度，将设置列之间的差距 nor...
2018-04-08 21:10:55
497
原创 表单中的标签及其常用属性汇总
表单是HTML中非常重要的一环，而且内容也不算少，所以在这里就简单的汇总了常用的表单标签，至于它们的属性就列举的很少了，如果想要详细学习属性，推荐到w3cschool去查看学习。这是w3cschool中关于表单一节的链接：点击打开链接 下面是我用HTML文档列举的表单标签，可拷到本地跑一下，直观感受一下。<!DOCTYPE html><html lang="en">...
2018-04-06 20:51:14
5274
原创 JavaScript中，文档结构遍历
js中，文档结构遍历有两套很相似的API分别只是是否包括文本节点和注释节点：1.作为节点树遍历：(包括文本节点和注释节点)Document对象、Element对象和文档中表示文本的Text对象都是Node对象。Node定义了以下重要属性：parentNode：该节点的父节点。没有父节点就是null。childNodes：只读的类数组对象（NodeList），它是该节点的子节点的实时表示。first...
2018-04-05 20:48:26
239
原创 详解JavaScript中选取元素的所有方法
DOM中选取文档元素的方法总共有5种：1.通过id值。2.通过name属性值。3.通过指定的标签名。4.通过class类。5.通过css选择器。下面我就这五种方法详细解释一下吧。1.通过ID选取元素: document.getElementById() 任何元素都可以有一个id属性，在文档中该值必须唯一，所以该方法返回一个DOM对象。通过id获取元素是最简单最常用的选取元素的方法。getE...
2018-04-05 19:43:37
10785
原创 怎样获取网址（url）中的字符串参数
在正式介绍之前先普及几个其他参数获取的指令： “window.location.pathname”;设置或获取对象指定的文件名或路径。“window.location.href”;设置或获取整个 URL 为字符串。“window.location.port”;设置或获取与 URL 关联的端口号码。如果采用默认的80端口(即使添加了:80)，那么返回值并不是默认的80而是空字符“window.loc...
2018-04-04 15:29:01
3662
原创 详细解释JavaScript中三元表达式
三元表达式的基本格式：布尔表达式？语句1：语句2简单解释：如果布尔表达式返回结果为真就执行语句1，如果布尔表达式返回结果为假就执行语句2。但是在实际应用中并没有这么简单，还是有些需要注意的地方，比如布尔表达式只能是布尔表达式吗？语句1和语句2中有多条语句需要执行又怎么办？等。鉴于以上细节问题，我总结了几条便于使用三元表达式应该熟知的知识点：1，布尔表达式的值或者返回值是计算值。比如1==1返回tr...
2018-04-04 14:38:46
2175
原创 javascript中关于宽高、位置、坐标等相关属性和方法介绍：
开篇前，我直接了当地写出几个常用的操作：1.获取窗口右侧滚动条的宽度window.innerWidth-document.documentElement.clientWidth2.获取HTML元素的尺寸（包含边框和内边距）element.offsetWidth和element.offsetHeight3.获取窗口滚动条的位置document.documentElement.scrollTop和wi...
2018-04-03 22:29:55
149
原创 for循环绑定事件时，var和let声明循环变量的区别
在理解var、let、const三者在声明变量的区别时，遇到了一道十分有意思的题：<body><ul> <li>第一个li</li> <li>第二个li</li> <li>第三个li</li> <li>第四个li</li>
2018-03-31 20:24:54
6989
1
原创 关于浮动你不得不知道的知识
首先你得知道浮动属性出现的初衷是“为了实现文字环绕图片的效果”,只是后来被用在了“不正当的方面”。以下是我总结的16条关于浮动的规则。1.css允许浮动任何元素，且浮动的元素会从正常的文档流中脱离出来，不过它仍然会影响布局。2.浮动元素周围的外边距不会合并，不管周围的margin是否是浮动元素的都不会合并。3.如果浮动一个非替换元素（比如链接），该元素的宽度会尽可能的小。4.浮动元素的包含块是其最...
2018-03-31 01:35:32
399
原创 web前端性能优化方法
我自己总结的几个大方向上的前端性能优化的方法：1.减少HTTP请求数量2.尽可能减少Repaint和Reflow3.减少对DOM的操作4.可以的话，尽量使用Json格式进行数据交换5.合理正确的使用HTML标签和css样式6.对JavaScript等代码进行优化7.使用CDN加速8.压缩CSS、JS、图片等文件9.使用浏览器缓存当然这非常简略，所以下面我转载了一篇更细节的文章：https://se...
2018-03-30 21:56:12
311
转载 从输入URL到页面展示的详细过程
其实从输入URL到页面展示在我们眼前所经历的过程其实还是非常复杂的，牵扯到的知识点也是非常的庞杂。其中很多知识都会有专门的学科去研究，所以这里只是简单地概括一下大致流程：1、输入网址2、DNS解析3、建立tcp连接4、客户端发送HTPP请求5、服务器处理请求 6、服务器响应请求7、浏览器展示HTML8、浏览器发送请求获取其他在HTML中的资源。下面是转载自https://www.cnblogs.c...
2018-03-30 14:00:43
51753
9
原创 css实现元素居中的方法汇总
css实现居中的方法有非常多，所以这里不会全部列举。就选择自己比较喜欢的几种居中方式介绍一下。推荐几篇关于“css居中”的文章供大家深入学习：一、css垂直居中的11种方式二、六种实现元素水平居中的方式三、Centering in CSS：A Complete Guide（国外大牛） 简要介绍一下（详细应用可参考上面的三篇文章）。 水平居中：方法一：margin:0...
2018-03-29 21:10:05
183
原创 css清除浮动的方法汇总
浮动在css中是非常重要但也是引起很多莫名问题的罪魁祸首，所以我们对它可谓又爱又恨。下面是我总结的几种清除浮动的方式（其中第一种是最常用的方式，很多大型网站都用到过）：提醒读者：全文所有的实例代码都只有些微几行不同，为了让读者更清楚理解才在每个例子中都展现了完整代码。清除浮动方式一：父级div定义伪类:after 结合使用zoom兼容低版本IE<!DOCTYPE html><h...
2018-03-28 20:36:09
342
原创 JavaScript对象的创建和对象属性操作详解
在正式介绍对象创建和属性操作之前，先普及几个概念： 三类JavaScript对象: 1.内置对象：由ECMAscript规范定义的对象。例如array、date对象。 2.宿主对象：由js解释器所嵌入的宿主环境（如web浏览器）所定义的对象。 3.自定义对象：这大家肯定都知道，是有运行中的js代码创建的对象。 两类js对象属性： 1.自由属性：直接在本对象中定义的属性。 2.继承属性；在...
2018-03-27 22:37:12
741
原创 Javascript中的事件捕获、事件冒泡与事件委托
看以下简单的三层div结构。<div id="grandparent"> <div id="parent"> <div id="child"></div> </div></div>根据以上三层div嵌套结构，我来根据我的理解解释下什么叫事件捕获、事件冒泡、事件委托
2018-03-25 18:04:44
230
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人