- 博客(51)
- 收藏
- 关注
RSS订阅原创 重学Javascript之类型转换
文章目录强制类型转换(显示类型转换)调用数组、函数、对象和正则表达式的valueOf() 会返回对象本身。日期类定义的valueOf（）方法会返回它的一个内部表示：1970年1月1日以来的毫秒数。自动类型转换这里要注意： 在 + 或 ==进行的隐式转换中，对象（除了日期类型）都是先尝试使用valueOf()进行转换，然后再尝试使用toString()。强制类型转换(显示类型转换)Number()Boolean()String()调用数组、函数、对象和正则表达式的valueOf(
2020-07-24 23:25:08
168
原创 重学Javascript之数据类型
Number类型在Javascript，数值类型包括整数、浮点数。不管是什么类型，在js中都是使用64为来存储数值。这些数值因为分为正数和负数，因此64位内存既要用来存储正数，也要能存储负数。在这64位中，52位保存整数，11位保存小数，剩下的1位为符号位。对于整数而言，除了可以使用常用的十进制来表示之外，还可以使用八进制和十六进制。八进制是以数字0开头的数字，如012是10的八进制表示注意，如果0后面的数字超出范围，会以十进制来进行解析。十六进制是以数字0和x开头的数
2020-07-24 18:57:56
326
原创 深入了解JS之Javascript错误处理
毋庸置疑的是，在程序设计中，错误处理是很重要的一个环节。不管水平多高的软件开发人员，都或多或少地难以避免写出逻辑不是特别严谨的代码。另一方面来说，当我们的写的代码中带有错误处理的逻辑时，当出现了错误时可以及时通知到用户，这会带来用户体验上的提升。作为开发人员，我们要知道如何处理Javascript错误。try-catch语句在Javascript中，通过try-catch语句来实现异常的处理。该语句作为标准的一部分，其语法规则如下：`try {``.....``} catch (error.
2020-07-23 22:53:50
282
原创 React组件理解
什么是组件组件允许我们将应用的UI拆分成独立的、可复用的模块，其实也就是可复用的代码片段。React应用程序就是由组件来构建的，也就是说React应用的基石！React中的组件类别class组件函数组件class组件这个组件主要是ES6中的写法。我们的一个class组件的基本结构如下：class MyComponent extends React.Component {constructor(props) {super(props)}render () {ret
2020-07-01 00:16:34
237
原创 ipad上100vh和100%踩坑记
最近遇到了一个小bug，在ipad上编辑word文件的虚拟键盘收回时，会导致页面的导航条隐藏，且页面的下面会出现一块空白自己尝试的解决方案通过focusin和focusout对虚拟键盘的弹入弹出进行监听，但发现基本没什么用。我的理解是：focusin和focusout比较适合于监听对于文本输入框的键盘事件。通过比较screen.availHeight和screen.height进行比较。如果在虚拟键盘弹出时元素的高度等有变化，那么可以尝试通过这种方式判断虚拟键盘是不是弹出来了.另一种方法
2020-06-17 10:21:49
1816
原创 Web小技术之实现响应式导航条
主要代码：<!DOCTYPE html><html><head> <title>Responsive Navigation Bar</title> <link rel="stylesheet" type="text/css" href="node_modules\@fortawesome\fontawesome-free\css\fontawesome.css"> <link href="node_modules\.
2020-05-10 22:38:47
1052
1
原创 计算机网络基础之TCP/IP协议层 与 DNS协议，IP协议，ARP协议
协议什么是协议？ 我觉得要理解什么是协议，首先要知道他是属于计算机中的术语。另一方面，也要清楚认识到，计算机是“傻瓜式”的，他不会做什么多余的工作的，它会按照我们给他的命令执行工作。对于要实现在两台计算机之间实现数据传输，我们要给计算机设置好命令，比如，如何建立连接，怎么样进行传输，怎样结束连接等等。因此，协议就可以理解为我们给计算机设置的一系列规则。TCP/IP协议族定义根据《图解HT...
2020-05-05 23:18:04
535
原创 CSS小技巧——flex实现元素位置自动更新
今天在写项目的时候，在思考怎么实现把一个图片列表中的点击过的图片隐藏之后，在其下面的图片位置自动更新，后来想到了flex这个神奇的CSS属性。flex + 最大/最小宽高度先来看一个简单的代码：<!DOCTYPE html><html><head> <title></title> <style type="text/...
2020-04-28 00:09:20
600
原创 JS中的静态属性及实例属性
在回忆怎么判断一个对象是一个数组的方法时，想到了Array.isArray()这个方法，突然有点不理解，这是什么意思，isArray()怎么可以通过Array直接调用，这样的情况很多，比如Object上的方法。看了几篇文章，简单理解是：JS中有“静态属性”和实例属性。function Person(name) {this.name = name}Person.setName = (name...
2020-04-25 12:13:06
2359
原创 JS之类数组对象
什么是类数组对象有length属性和若干索引属性的对象。var array = ['name', 'age', 'sex'];var arrayLike = { 0: 'name', 1: 'age', 2: 'sex', length: 3}为什么叫类数组类数组对象可以执行一些常见的数组操作，比如读写数据、获取长度（length属性）、遍历...
2020-04-25 01:27:49
349
原创 JS中的错误处理与调试
错误处理try-catch语句在使用try-catch时，我们通常是把可能会出错的代码放在try语句块中，把错误处理程序放在catch语句块中。try { }catch(err){}那么，当我们执行try语句块中的代码遇到错误时，会跳出try语句块，然后执行catch中的代码。通过上面的代码可以发现，catch会接收一个错误相关的对象err，err中存有与错误有关的信息...
2020-04-10 10:04:12
255
原创 连续子数组的最大和
题目描述HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学。今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决。但是,如果向量中包含负数,是否应该包含某个负数,并期望旁边的正数会弥补它呢？例如:{6,-3,-2,7,-15,1,2,2},连续子向量的最大和为8(从第0个开始,到第3个为止)。给一个数组，返回它的最大连续子...
2020-04-07 00:22:03
124
原创 令人挠头的运算符： && 、|| 和 类型转换
在JS中有一些操作符结果比较“迷人”，比如： && ||&&对于&&来说：如果第一个为true，返回的是第二个值。相反，第一个为false,则直接返回这个值而不会执行后面的。1 && 2 //2对于多个值连接在一起，规则类似，前一个为true，就继续判断下一个，直到遇到false或者是到达最后返回值。1 &&a...
2020-04-03 22:18:33
421
原创 变量对象的生成
执行上下文的生命周期分为两个阶段：创建阶段和代码执行阶段。创建阶段：生成变量对象确定作用域链确定this的指向生成变量对象的过程如下：建立arguments对象：检查当前上下文中的参数（函数参数），建立该对象下的属性和属性值。函数中的所有形参加入到变量对象中。函数参数名作为一个变量对象的一个属性被创建，值为对应传进来的值 ，否则为undefined.当前执行...
2020-04-03 09:20:12
255
原创 js之获取对象类型的几种方式
通过typeoftypeof的所有返回值包括以下几种：numberbooleanstringundefinedfunctionsymbolobject对于基本类型或者函数，通过typeof很好判断，但是对于object类型，使用typeof就显得宽泛了。通过instanceofinstanceof的原理是，判断构造函数的原型是否在这个对象的原型链上。比如:[...
2020-03-21 11:06:07
5153
原创 JSON
JSON只是一种数据格式语法的值可以标识为以下三种类型:简单值 字符串、数值、布尔值、null 不支持undefined对象数组####简单值JavaScript字符串与 JSON字符串的大区别在于，JSON字符串必须使用双引号（单引号会导致语 法错误）对象{ "name": "Nicholas", "age": 29 } 与JS...
2020-03-06 17:23:00
151
原创 ES5之继承
ES5之继承原型链基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法。构造函数、原型和实例的关系：每个构造函数都有一个原型对象，这个原型对象有一个指向构造函数的指针，而实例有一个指向他的原型对象的内部指针。原型链：一个函数的原型对象等于另一个类型的实例，此时该原型对象中就有一个指向另一个原型的指针，相应的，另一个原型对象也包含一个指向另一个构造函数的指针。如果另一个原型又...
2020-03-06 15:28:35
114
原创 Vue之双向绑定
Vue之双向绑定双向数据绑定将DOM与Vue实例的data数据绑定到一起，彼此间互相影响。数据的变化会引起DOM的改变DOM的改变也会引起数据的变化原理当把一个普通的Javascript对象传入Vue实例作为data选项时，Vue会遍历这个对象的所有属性，并使用Object.defineProperty( )来把每个属性转为setter和getter。这些setter和getter...
2020-03-03 14:02:13
295
原创 CSS之position定位
在CSS中，使用position属性可以改变元素的定位方式，其取值有以下几种：static relative absolute fixed sticky默认值为static，且适用于所有元素。static 生成正常元素框，位于文档流中；行内元素会生成一个或多个行框随父元素流动relative 相对于正常文本流中的位置偏移一定的距离，元素的大小，形状不发生变化。且原位置空间...
2020-03-02 15:12:26
281
原创 CSS之浮动float
浮动1.1 浮动的元素在CSS中，浮动通过float属性实现。取值： left | right | none初始值：none适用于： 所有元素浮动的元素会脱离常规文档流，但是，仍会对常规文档流的布局有所影响。使用浮动的一个独特之处就是：浮动的元素处于单独的平面上，但是对文档中的其他内容仍会有影响。之所以这样是因为，对于文档中浮动的元素，其他内容会围绕浮动的元素流动。可以看到...
2020-03-01 15:38:35
232
原创 CSS之字体
字体族字体族使用font-family 属性声明的。适用于所有元素。当我们想要对文档中的字体进行设置时，就可以通过font-family这个属性。通过这个属性，我们可以指定字体。比如：p { font-family:Georgia;}设置之后，用户代理会使用Georgia字体显示文档中所有的p元素。如果用户代理没有找到Georgia字体，那么就会忽略该字体使用默认字体。因此，为了防...
2020-02-18 22:26:32
794
原创 CSS之长度单位
CSS之长度单位很多CSS属性要靠长度度量衡才能正确显示元素。因此，CSS中有许多长度单位。CSS中的长度单位分为绝对长度单位和相对长度单位。绝对长度单位英寸(in) 1 英寸为2.54厘米厘米(cm)毫米(mm)四分之一毫米（q)像素(px)主要有以上几种,我们通过程序实例来看看他们不同的效果。<div id = "test"> <p>计算...
2020-01-20 18:17:14
252
原创 CSS之应用样式的四种方式
CSS之应用样式的四种方式1. link标签通过link标签链接的样式表不是HTML文档的一部分，但是却供文档使用。这样的样式表称为外部样式表。Web浏览器遇到link标签时，会查找并加载样式表，并渲染HTML文档。属性rel: relation 关系的简称 常用为stylesheethref: 样式表的URL链接 可以是绝对地址 也可以是相对地址type: 文档的数据类型 始...
2020-01-12 21:55:28
3664
原创 CSS选择器
CSS选择器选择器基础CSS选择器是由与文档树中所有元素匹配的模式组成。当模式中的所有条件均满足时，选择器匹配，并且规则中的声明将应用于匹配的一个或多个元素。p { color:red;} 这个规则会匹配文档中所有的p元素，并将其中文本的颜色设置为红色。选择器概述一些术语：后代：文档数中的子代，孙子或者更高后代的元素。祖先：元素由于存在嵌套关系，所以一个元素，他可以是文档树中元...
2019-11-28 00:26:53
134
原创 CSS之实现按钮hover时边框动态效果
在看书时，突然想到怎样来实现这样的一个效果，记得以前看过一篇文章说用四个div标签在按钮的四周就可以实现。于是自己动手做了一下。实现也很简单，主要就是用一个包含元素包含四个div和一个button元素，包含元素和button元素相同的宽高，另外四个div进行绝对定位。 <div id="buttonTry"> <div id="left"></d...
2019-11-10 13:36:35
2592
原创 关于span高度过高，且文字脱离span盒子的原因
首先我们来看问题描述：我设置的span标签时，当设置一个高度之后，发现本该在元素盒子内的文字在外面。再看一下代码：<div class = "commenter"> <img src = "background.png" class = "userImg"> <...
2019-11-07 12:40:54
2713
翻译 47个CSS提示和技巧让你的网站更高级
1. 水平居中要在 CSS 中水平居中块级元素，需要三件事：在元素上显式设置宽度，将左右边距设置为自动，并包括适当的文档类型以防止旧版本的 IE 进入怪癖模式。div#page {width: 960px; margin: 0 auto}上面的代码将会使id 为page的元素在div标签中水平居中。2. 通过设置line-height来垂直居中文本如果想要在一个高度固定的包含块中垂直居...
2019-10-29 14:13:16
446
原创 CSS之link 标签与@import 的异同
CSS之link 标签与@import 的异同在CSS中，有两种方式可以在.html文件中引入外部样式表。link 标签常见方式为 :<link rel = "stylesheet" href = "main.css">@import 指令@import url(../main.css)两种方式的异同相同点都可以在.html文件中用来导入外部样式表。...
2019-10-12 15:44:47
152
原创 CSS样式之实现水平排列块元素的几种方式
三种实现水平排列块元素的方式1. 使用浮动定位（float）.cellDiv { height:300px; /*display:table-cell;*/ float:left; /*display:inline-block;*/ border:1px solid orange; } <div class = "cellDiv">...
2019-10-01 16:55:20
10615
原创 CSS之父元素包含浮动子元素
CSS之父元素包含浮动子元素#third { width: 500px; float: left; background: orange; height: 500px; } #forth { width: 400px; h...
2019-09-20 17:15:13
1274
原创 CSS样式之外边距折叠
CSS样式之外边距折叠外边距在CSS中，所有元素都是以盒模型的方式展现的，即每个元素都可以看作一个盒子。这个盒子包括元素的内容，内边距，边框，外边距。在CSS规则里，width和height默认表示内容盒子的大小，也就是元素可渲染内容区的宽度和高度。块盒子：即由块级元素生成的盒子。常规块盒子中有一种机制叫做外边距折叠。即，***垂直方向上***的两个外边距相遇时，会折叠形成一个外...
2019-09-19 00:15:00
241
原创 CSS样式之层叠、特殊性以及继承
CSS样式之层叠和特殊性层叠CSS中通过层叠的机制来处理多个规则同时作用于一个元素的情况。这是一个非常重要的概念，通过CSS（层叠样式表）的名字就可以得知。层叠的机制： 为不同的规则赋予不同的重要性。这就像是生活中，领导给你分配任务，领导说：“小猪，你去给我倒杯水。” 接着又说：“小猪，你给我拿点吃的。” 你还没走呢，领导又说：“小猪，来给我按按摩。” 小猪没有修过分身术，只能一...
2019-09-16 01:30:50
241
原创 通过纯CSS实现文字前添加图片
纯CSS添加图片<ul id = "nav"> <li><a href="#">Home</a></li> <li>Servies</li> <ul> <li>Design</li> <li>Development</li>...
2019-09-15 17:01:41
7524
原创 JS学习之执行环境和作用域
JS学习之执行环境和作用域执行环境和作用域相关介绍执行环境执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。变量对象每个执行环境都有与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。虽然我们在编写程序时，无法访问这个对象，但是解析器在处理数据时会在后台使用它。全局执行环境全局执行环境是最外层的一个执行环境。根据ECMAScript实现所...
2019-09-10 13:35:43
104
原创 JS之with语句
在Javascript中，有一个特别的语句——with语句作用将代码的作用域设置到一个特定的对象中。语法with(expression) statements目的为了简化多次编写同一个对象的工作 <div id = "Div"> jaiocoibewiobvie </div> ...
2019-09-09 14:29:55
1472
原创 通过DOM动态删除多个节点报错原因理解
通过DOM动态删除多个节点报错原因理解在DOM中，我们可以通过removeChild( )来删除元素的子节点，但有时当我们通过循环函数删除一个元素的多个子节点时，浏览器却显示：Failed to execute ‘removeChild’ on ‘Node’: parameter 1 is not of type ‘Node’.这是什么原因呢？接下来分析几个可能常出现的错误写法.<...
2019-08-20 16:47:41
1415
转载 前端必读：浏览器内部工作原理
这篇文章写的非常好！！推荐前端必读：浏览器内部工作原理原文地址：How Browsers Work: Behind the scenes of modern web browsers
2019-08-17 20:42:49
107
原创 JS学习之事件对象
JS学习之事件对象理解在触发DOM上的某个事件时，会创建一个event对象，该对象中包含着与事件相关的信息，包括事件的类型，导致事件的元素以其他的与事件有关的信息。DOM中的事件对象兼容DOM的浏览器会在事件触发时传一个event对象到事件处理程序中。不论指定事件处理程序时使用哪种方法（DOM0级 或者 DOM2级)。接下来我们看一个例子：//假设有个按钮，id为btn<...
2019-08-17 17:16:55
147
原创 JS创建对象方法之构造函数模式
JS创建对象方法之工厂方法，构造函数方法我们在ECMAScript中创建对象虽然可以通过Object()构造方法或者是对象字面量的方式，但是这两种方式有缺点的：使用同一接口创建很多对象，会产生大量重复的代码。JS创建对象之工厂模式关于工厂模式，首先简单地从字面意思来理解，为什么叫工厂模式，而不叫其他的名字，我觉得可以这样理解。比如说这个工厂是一个加工手刹的工厂，我们是雇主，我们想要一定...
2019-07-25 15:48:55
500
原创 JS之基本包装类型
基本包装类型简介基本包装类型是一种特殊的引用类型，他们有着与基本数据类型相应的特殊行为，分别为Boolean、Number、String。其实每当读取一个基本类型值时，后台就会创建一个基本包装类型的对象，从而可以让我们能够调用一些方法来操作数据。 var str = "Hello World!"; var str2 = str.substring(5);我们可以看到，在这个例子中...
2019-07-23 15:15:46
122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人