- 博客(109)
- 收藏
- 关注
RSS订阅原创 事件冒泡和捕获的执行顺序
addEventListener() 方法addEventListener() 方法用于向指定元素添加事件句柄。element.addEventListener(event, function, useCapture)，其中的event，必须。字符串，指定事件名。 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。function 必须。指定要事件触发时执行的函数useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。（默认false..
2020-10-10 21:07:39
724
2
转载 css三列布局--两边固定中间自适应和中间固定两边自适应
参见博客：https://blog.csdn.net/a18792627168/article/details/79686746布局方式一:两边固定中间自适应1.flex布局2.利用浮动（float）3.利用绝对定位（position）4.对中间的宽度进行calc计算5.双飞翼布局（重点来了）6.圣杯布局（也是重点）...
2020-09-13 15:40:47
153
原创 Object.keys方法之详解
一、语法Object.keys(obj)参数：要返回其枚举自身属性的对象返回值：一个表示给定对象的所有可枚举属性的字符串数组二、处理对象，返回可枚举的属性数组let person = {name:"张三",age:25,address:"深圳",getName:function(){}}Object.keys(person) //["name", "age", "address","getName"]三、处理数组，返回索引值数组let arr = [1,2,3,4,5,.
2020-08-20 21:38:58
157
转载 使用js实现将数组转为链表，及将链表转为数组。
数组转链表，易懂版function array2list(ary) { if(ary.length === 0) { return null } var nodes = [] for(var i = 0; i < ary.length; i++) { var node = {} node.value = ary[i] node.next = null nodes.push(n
2020-08-15 17:39:42
1440
原创 js正则表达式基本使用
1、正则表达式组成正则表达式是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。正则表达式 = 普通字符+特殊字符（元字符）2、匹配符字符匹配符用于匹配某个或某些字符名词解析：字符簇在正则表达式中，通过一对方括号括起来的内容，我们就称之为“字符簇”，其表示的是一个范围，但是实际匹配时，只能匹配固定的某个字符。[a-z] ：匹配小写字母从a-z中的任一字符[A-Z] ：匹配大写字母从A-Z
2020-08-15 17:25:10
397
原创 JavaScript 进制转换(2进制、8进制、10进制、16进制之间的转换)
1，十进制转其他十进制转其他相对简单，直接使用 toString() 方法。//十进制转其他 var x=110; alert(x); alert(x.toString(8)); alert(x.toString(32)); alert(x.toString(16)); 2，其他转十进制其他进制转十进制也比较简单，使用parseInt，传递第二个参数代表当前数字的进制。//其他转十进制 var x='110'; alert(parseInt(x,2));
2020-08-15 17:16:34
462
原创 DOM中 property 和 attribute 详解
基本概念区别Attribute是HTML标签上的某个属性（特性），如‘type’,'id','value','class'以及自定义属性，它的值只能是字符串。利用setAttribute和getAttribute来设置和获取属性Propertyjavascript获取到的DOM节点对象，比如a 你可以将他看作为一个基本的js对象，这个节点对象包括很多属性((property)，比如“value”，“className”)可以看到，attributes只是properties这个大货色
2020-08-12 21:32:25
794
原创 js实现八大排序
js实现八大排序八大排序 1、插入排序——直接插入排序 2、插入排序——希尔排序（最小增量排序） 3、选择排序——简单选择排序 4、选择排序——堆排序 5、交换排序——冒泡排序 6、交换排序——快速排序 7、归并排序 8、基数排序 9、八大排序对比 八大排序这里的八大排序都是内部排序，即使用内存进行排序。1、插入排序——直接插入排序（1）基本思想a、先将待排序序列的第1个元素看成是一个有序的子序列；b、从第2个元素开始，逐个将待排序的元素x与.
2020-08-11 11:22:26
257
转载 JavaScript中易混淆的方法之split、splice、slice辨析比较
参考链接：https://blog.csdn.net/xinghuowuzhao/article/details/79879514
2020-08-03 17:00:42
98
原创 ES5和ES6中的类定义区别
ES6中的类只是语法糖，它并没有改变类实现的本质。举个例子，在ES5中定义一个类：function Person(name, age) { this.name = name; this.age=age;} Person.prototype.sayHello = function(){ return 'Hi, I am ' + this.name;}var xiaoming = new Person("xiaoming",24);xiaoming.sa...
2020-06-23 10:04:28
476
原创 URL的各个组成部分详解
构造一个完整URL例子：http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#r_70732423一个完整的URL包括：协议、域名、端口、虚拟目录、文件名、参数、锚1.协议部分：该URL的协议部分为“http：”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在”HTTP”后面的“//”为分隔符2.域名部分：该URL的域名
2020-06-21 14:58:33
1267
原创 闭包和闭包引起的内存泄露
1.变量作用域变量根据作用域的不同分为两种：全局变量和局部变量。函数内部可以使用全局变量。 函数外部不可以使用局部变量。 当函数执行完毕，本作用域内的局部变量会销毁。2. 闭包什么是闭包？ 能够访问其他函数内部变量的函数闭包解决了什么问题 由于变量的作用域的原因-----（函数内部能读取全局变量，函数外部无法读取函数内部的变量【局部变量】），为了在函数外 部读取局部变量，所以就有了闭包。闭包的作用 1.访问其他函...
2020-06-09 21:18:46
435
原创 js创建对象的四种方式
js创建对象的四种方式1. 通过构造函数obj来创建var obj = new object();obj.name = "xm";obj.age = 19;obj.eat = function(){}2. 字面量创建var obj ={ name: " xm", age: 19, eat: function(){}}3.工厂函数function students(name,age){ var obj ={ name: " xm.
2020-06-08 15:20:17
199
原创 算法—青蛙跳台阶问题汇总
1. 第一题（引子）：输出菲波那切数列的第N项。斐波那契数列含义（百度百科）：指的是这样一个数列：1、1、2、3、5、8、13、21、34、……在数学上，斐波纳契数列以如下被以递归的方法定义：F(0)=0，F(1)=1, F(n)=F(n-1)+F(n-2)（n>=2，n∈N*） 递归方式： public static int fibnacci(int n){ if (n==0){ return 0; } ..
2020-06-08 12:11:23
252
原创 构造函数、原型对象和实例之间的关系。ES6 extends 继承
复习一下构造函数、原型对象和实例之间的关系。代码表示：function F(){}var f = new F();// 构造器F.prototype.constructor === F; // trueF.__proto__ === Function.prototype; // trueFunction.prototype.__proto__ === Object.prototype; // trueObject.prototype.__proto__ === null; // tr
2020-06-07 22:08:47
147
原创 前端经典面试题: 从输入URL到页面加载发生了什么？
从输入URL到页面加载发生了什么?总体来说分为一下几个过程：1.输入网址2.DNS解析3.建立TCP连接（三次握手）4.发送HTTP请求5.服务器处理请求并返回HTTP报文6.浏览器解析渲染页面7.连接结束（TCP四次挥手）具体过程DNS解析DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时，例如www.baidu.com，其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不方便记忆。用户
2020-06-07 11:23:44
470
原创 JavaScript 执行机制
本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论：javascript是按照语句出现的顺序执行的看到这里读者要打人了：我难道不知道js是一行一行执行的？还用你说？稍安勿躁，正因为js是一行一行执行的，所以我们以为js都是这样的：let a =
2020-06-05 14:30:05
143
原创 CSS类的权值比较
权重比较共分为4个等级：第一等：代表内联样式，如: style="xxx"，权值为1000。第二等：代表ID选择器，如：#content，权值为100。第三等：代表类，伪类和属性选择器，如.content，:hover，[attribute]，权值为10。第四等：代表元素选择器和伪元素选择器，如div，p，权值为1。注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）相邻后代选择器（~）并不在等级中，所以他们的权值都为0。伪类：注意伪类是类伪元素：注意伪元素
2020-05-31 21:37:09
137
原创 new操作符具体干了什么呢?
先看代码var Func=function(){ //构造函数};var func=new Func ();new共经过了4个阶段1、创建一个空对象var obj=new Object();2、设置原型链obj.__proto__= Func.prototype;3、让Func中的this指向obj，并执行Func的函数体。var result =Func.call(obj);4、判断Func的返回值类型：如果是值类型，返回obj。如果是引用类型，就返回这
2020-05-23 20:46:07
424
原创 js 数组详细操作方法及解析合集
数组的方法（针对是否改变原数组）Array对象常用方法：不改变原数组：1、concat()连接两个或多个数组，并将新的数组返回，不改变原数组，返回新的数组2、join()把数组中所有元素放入一个字符串，将数组转换为字符串，不改变原数组，返回字符串3、slice()从已有的数组中返回选定的元素，提取部分元素，放到新数组中，参数解释：1：截取开始的位置的索引，包含开始索引；2：截取结束的位置的索引，不包含结束索引。不改变原数组，返回一个新数组4、toString()...
2020-05-23 18:57:52
194
原创 元素（为何img、input等内联元素可设置宽高）
元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如<div>和<span>就不同，而<strong>和 <p>也不一样。1. 替换和不可替换元素从元素本身的特点来讲，可以分为替换和不可替换元素。a) 替换元素替换元素 : 浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示
2020-05-23 18:49:18
182
转载 px、em 和 rem 三者的区别？
pxpx 实际上就是像素，用PX设置字体大小时，比较稳定和精确。px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)px特点IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；Firefox能够调整px和em，rem，但是有大部分的国产浏览器使用IE内核。emem 就是...
2020-04-16 21:11:59
168
原创 html中的文档流
一、什么是文档流？那么所谓的文档流（normal flow，也被称为“普通流”），指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式。当浏览器渲染html文档时，从顶部开始开始渲染，为元素分配所需要的空间，每一个块级元素单独占一行，行内元素则按照顺序被水平渲染直到在当前行遇到了边界，然后换到下一行的起点继续渲染。那么此时就不得不说一下块级元素和行内元素。二...
2020-04-16 20:57:51
1407
转载 display:none和visibility:hidden两者的区别和visible="false"
如果在div的style中visible=“false”，则div不返回在html中。使用css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。如：https://blog.csdn.net/weixin_34326179/article/details/92425983但是最常用两种方式就是设置元素样式为display: none或者visibility: hid...
2020-04-15 21:15:55
195
转载 回流(reflow)和重绘(repaint)
一.明确概念首先我们要明确页面在文档加载完成之后到完全显示中间的过程是1.根据文档生成DOM树（包括display:none的节点）2.在DOM树基础上根据节点的几何属性（margin/padding/width/height等)生成render树（不包括display:none、head节点但会包含visibility:hidden节点）3.在render树基础上进行进一步渲染包括color,...
2020-04-15 21:06:19
169
原创 对Javascript中client系列（clientTop、clientLeft、clientWidth和clientHeight）属性的相关解释
clientTop:clientTop可以返回div的上边框的大小,其值为一个整数，没有单位。但是和borderTopWidth存在一定的区别。在这里插入代码片<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>与client有关<...
2020-04-14 21:28:53
1209
转载 FLex布局解析
由于下面两篇博客，是我在看过很多博客，这两位作者总结的最全面的。这里不在费时间重复，可参考下面两篇博客。参考博客1：https://blog.csdn.net/dx18520548758/article/details/54316024?参考博客2：https://blog.csdn.net/lm9948/article/details/80732702?...
2020-03-17 10:22:19
74
原创 原生js书写瀑布流
浏览网页的时候经常会遇到瀑布流布局的网站。也许有些读者不了解瀑布流。瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。比如下面图片的效果，就是一个典型的瀑布流。<!DOCTYPE html><html lang="en"><head> ...
2020-03-12 21:04:18
75
原创 Javascript实现冒泡排序与快速排序以及对快速排序的性能优化
冒泡排序介绍重复遍历要排序的元素列，依次比较两个相邻的元素，前一个元素若比后一个元素大则互换位置。以升序排序为例，最大的元素会在第一次遍历后“冒泡”到数组的末端。假如数组长度为n，在n-1次遍历后可完成排序。实现let arr = [1, 5, 2, 9, 7, 4, 2, 3, 6, 8]function bubbleSort(arr) { let time = arr...
2020-03-12 16:40:22
201
原创 为什么js用script标签的src引入，而css用link标签的href引入
href和src的区别一般加载CSS用href,并放在头部；加载script用src，放在body内的下方。href是hypertext reference的缩写，表示超文本引用，用来建立当前元素和文档间的链接。常用的有link，a。当CSS使用href引用，浏览器会识别该文档问CSS，并行下载，不会停止对当前文档的加载。src是source的缩写，是资源，页面必不可少的一部分，src指向...
2020-03-11 22:08:11
1461
原创 css引入的两种方法link和@import的区别和用法
link和@import都是HTML中引入CSS的语法单词。两者的基本语法link语法结构<link href="外部CSS文件的URL路径" rel="stylesheet" type="text/css"/>link标签通过URL路径引入外部的CSS文件到HTML中，是一种HTML标签，属于书写HTML的语法，只能放在HTML源代码中使用。@import语法结...
2020-03-11 16:40:23
97
转载 强烈推荐-JS基本类型与引用类型知多少
这篇博文对js数据类型的分析很透彻。https://juejin.im/post/595616ea5188250da205da91最后有部分，有部分顺序写反了：(6)引用类型的比较是引用的比较var person1 = {};var person2 = {};console.log(person1 == person2); // false基本类型的比较--当两个比较值的...
2020-03-11 16:14:40
128
原创 js如何区分数组和对象？+ 数组和对象的区别总结
前言--我们可能会经常用到typeof去判断某一个变量的类型。typeof一般测试基本类型（Undefined、Null、Boolean、Number、String)，对引用类型（数组，对象，函数），数组和对象返回object，函数引用类型返回Function。typeof对于区分数组和对象是没有用的。方法一：通过ES6中的Array.isArray来识别Array.isAr...
2020-03-11 16:08:40
3281
原创 js中的new()到底做了些什么？？
new在执行时会做四件事情new会在内存中创建一个新的空对象new 会让this指向这个新的对象执行构造函数 目的：给这个新对象加属性和方法new会返回这个新对象基于上面的讲解，我们执行如下代码：var obj = new Base();new操作符具体干了什么呢?其实很简单，就干了三件事情。varobj = {};obj.__proto__ = Base....
2020-03-09 15:18:12
183
原创 js-对象深拷贝
写出一个函数，实现对，对象的深拷贝要求实现一个函数clone。let obj={ name:'小明', age:24}let obj1=clone(obj);修改obj1，不会影响到obj的值。 这道题，在obj上面，只写一层，对象里面没有嵌套数组或对象，但是要考虑到这种情况。就是逐个遍历，如果检测到属性值是时引用类型就用当前属性进行遍历。functio...
2020-03-09 15:11:48
96
原创 前端-js-编程题12-十六进制与RGB颜色值的相互转换
题目描述将 rgb 颜色字符串转换为十六进制的形式，如 rgb(255, 255, 255) 转为 #ffffff1. rgb 中每个 , 后面的空格数量不固定2. 十六进制表达式使用六位小写字母3. 如果输入不符合 rgb 格式，返回原始输入示例1输入复制'rgb(255, 255, 255)'输出复制#fffffffunction rgb2hex...
2020-03-08 11:47:53
1068
1
原创 JS预解析-经典详解
alert(a)a();var a=3;function a(){ alert(10)} alert(a)a=6;a(); //------------分割线------------------alert(a)a();var a=3;var a=function(){ alert(10)} alert(a)a=6;a(); ...
2020-03-08 11:39:48
235
1
原创 前端-js-编程题13-将字符串转换为驼峰格式
题目描述css 中经常有类似 background-image 这种通过 - 连接的字符，通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式，请完成此转换功能1. 以 - 为分隔符，将第二个起的非空单词首字母转为大写2. -webkit-border-image 转换后的结果为 webkitBorderImage示例1输入复...
2020-03-08 08:59:37
190
原创 前端-js编程题1-封装函数f，使f的this指向指定的对象
方法一：function bindThis(f, oTarget) {return function(){return f.apply(oTarget,arguments);};}方法二：function bindThis(f, oTarget) {return f.bind(oTarget);}方法三：function bi...
2020-03-08 08:59:24
1379
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人