c-Tomorrow-CSDN博客

原创 new运算符的模拟实现

一句话介绍JavaScript中的new运算符new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一我们都知道在JavaScript中new运算符是利用构造函数的方式创建对象的，今天就来模拟一个这个new运算符的功能。new关运算符通过构造函数创建对象得到的对象，来分析一下1.得到的对象的属性中有构造函数中this所绑定的属性2.得到的对象可以访问构造函数原型链上...

2018-10-29 23:18:21 571

原创 margin的特性及Bug分析

margin是盒子模型中的外边距，在很多地方都会用到这个属性。对于margin相关的东西做了一些总结目录特性总结margin的auto值的应用margin的Bug分析特性总结1.不属于盒子的组成部分，不会影响盒子的尺寸设置。2.在元素周围生成额外的空白区，这个空白区永远都是透明的。3.主要用于控制盒子与盒子之间的间距，以及盒子在页面中的占位。4.对inline元...

2018-09-07 17:20:47 933 1

原创 padding的特性及百分比值详解

padding是盒子模型内部的组成部分，它的设置会影响盒子尺寸。有一下注意点。1.不同盒模型下的特点标准盒模型设定下，影响盒子自身尺寸。怪异盒模型设定下，影响盒子内容区域尺寸2.行间元素的padding垂直部分的占用空间会受到line-height的限制 (有效果，不占用空间)3.对除了table类显示模式的中间元素外，均有效上述额中间元素指的是...

2018-09-03 11:14:21 4381 1

原创宽与高的特性总结

css中的width和height用于设置元素的宽度和高度。1.不同盒模型下的宽高设置标准盒子设定下：设置的是元素的内容区域宽高。怪异盒子设定下：设置的是元素的整体区域宽高。2.值可以是数值3.对inline（行级）元素无效4.支持min和max前缀（1）min-width和min-height设置最小宽高度。（2）max-width...

2018-09-03 10:56:49 310

原创 clip的text值设置文字遮罩效果

在background-clip中有一个属性值是text。用于让裁剪区域限制于容器中的文本内。可以让背景图呈现在文本区域内，实现用图像填充文本的神奇效果。有一下几点需要注意： 1.需要配合webkit的另一个私有属性： -webkit-text-fill-color: 来实现。 2.仅适用于webkit系内核的浏览器。这个效果需要使用webkit的写法来描述属性。...

2018-09-03 10:42:35 1127

原创漫谈background各种属性的特性

在CSS3样式中background中可以划分多个属性进行设置。目录background-imagebackground-attachmentbackground-originbackground-colorbackground-repeatbackground-positionbackground-clipbackground-size总结：背景的复合属性...

2018-09-03 10:28:13 1428

原创 JavaScriptES6中Map与对象、数组，JSON之间的相互转换

目录 Map转为数组数组转为 MapMap 转为对象对象转为 MapMap 转为 JSONJSON 转为 Map主页传送门Map转为数组const map = new Map();map.set(1,"foo").set(2,"bar").set(3,"baz");const arr = [...map];console.log(arr);数组...

2018-08-29 14:53:18 33153 1

原创 JavaScriptES6Map与WeakMap

目录 Map含义与用法实例的属性和操作方法遍历方法WeakMap含义WeakMap的语法WeakMap的用途Map含义与用法 JavaScript的对象，本质上是键值对的集合（hash结构），但是传统上只能用字符串作为建，这有了很大的限制。const data = {};const element = document.getElements...

2018-08-29 14:46:44 6312

原创 JavaScriptES6的Set与WeakSet

目录Set基本用法Set实例的属性和方法遍历方法及应用WeakSet含义语法WeakSet结构的三个方法。Set基本用法 ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成Set数据结构。const s = new Set();[2,3,5,4,2,3].forEach((x) ...

2018-08-29 14:22:13 1804

原创 JavaScriptES6内置的Symbol值

除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。目录Symbol.hasInstanceSymbol.isConcatSpreadableSymbol.speciesSymbol.matchSymbol.replaceSymbol.searchSymbol.splitSymbol.iteratorSym...

2018-08-20 16:47:00 1573

原创 JavaScriptES6之独一无二的Symbol

目录作为属性名的Symbol实例：消除魔术字符串Symbol类型属性名的遍历Symbol.for() Symbol.keyFor()Symbol是一个原始数据类型，表示独一无二的值，也就是说Symbol类型的值只要创建就是唯一的。它是JavaScript语言的第七种数据类型，前六种：undefined、null、Boolean、String、number、Object。Sy...

2018-08-20 16:10:48 798

原创 JavaScriptES6对象的Object.key， Object.values， Object.entries

目录 Object.key()Object.values()Object.entries()Object.key()在ES5中，就引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。let obj = { foo : "bar", baz : 18,}console.l...

2018-08-13 13:13:02 34824 1

原创 JavaScriptES6对象的super关键字

我们知道，this关键字总是指向函数所在的当前对象，ES6又新增了另一个类似的关键字super，指向当前对象的原型对象。const proto = { foo : "hello",};const obj = { foo : "world", find(){ console.log(this.foo); }, finds(){...

2018-08-13 12:59:17 2638

原创 JavaScriptES6对象的proto属性，Object.setPrototypeOf，Object.getPrototypeOf

目录 __proto__属性Object.setPrototypeOf()Object.getPrototypeOf()__proto__属性__proto__属性（前后各两个下划线），用来读取或设置当前对象的prototype对象。目前，所有浏览器（包括 IE11）都部署了这个属性。该属性没有写入 ES6 的正文，而是写入了附录，原因是__proto__前后的双下划线，说...

2018-08-13 12:52:38 871

原创 JavaScriptES6对象的Object.getOwnPropertyDescriptors方法理解

上一个博客提到了Object.getOwnPropertyDescriptor方法会返回某个对象属性的描述对象。ES2017引入了Object.getOwnPropertyDescriptors方法。返回值为对象所有自身属性（非继承属性）的描述对象。const obj = { a : 1, foo(){}, get bar(){ return 1...

2018-08-12 21:52:35 1114

原创 JavaScriptES6对象之属性的可枚举性及遍历详解

目录可枚举性属性的遍历可枚举性对象的每个属性都有一个描述对象，用来控制该属性的行为，Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。描述对象的enumerable属性，称为可枚举性，如果为true，为可枚举的，如果为false，就表示某些操作会忽略当前属性。let obj = { foo :1};console.log(Ob...

2018-08-12 20:25:52 2780

原创 JavaScriptES6对象的Object.is和Object.assign方法详解

目录 Object.is()Object.assign()Object.is()ES5比较两个值是否相等，只有两个运算符：相等运算符（===）和严格运算符（===）。他们都有缺点，前者会自动转换数据类型，后者NaN不等于自身，以及 +0 等于-0,JavaScript缺乏一种运算，在所有环境中，只要两个值一样的，它们就应该相等。ES6提出同值相等算法，用来解决这个问题。Ob...

2018-08-12 14:55:09 972

原创 JavaScriptES6对象之属性简洁表达式及属性名表达式

ES6中对象的字面量是发生了翻天覆地的变化，变得非常简便目录属性简洁表达式属性名表达式方法的name属性属性简洁表达式ES6中允许使用变量来作为属性和方法，书写更简便。const foo = "bar";const baz = { foo,}console.log(baz); {foo:"bar"}//等同于const baz = {foo :...

2018-08-12 00:02:50 4631

原创 JavaScriptES6数组的方法

目录 Array.from()Array.of()数组实例的copyWithin()数组实例的find()和findIndex()数组实例的fill()数组的实例 entries(),keys()和values()数组实例的includes()Array.from()Array.from方法用于将两类对象转为真正的数组，类似数组的对象和可遍历的对象，也包括E...

2018-08-09 15:13:28 480

原创 JavaScriptES6数组的扩展运算符详解

ES6中新增了许多数组的方法以及数组的新特性目录扩展运算符扩展运算符的作用扩展运算符扩展运算符是三个点，它好比rest参数的逆运算，作用是将一个数组转为用逗号分隔的参数序列。console.log(...[1,2,3]);//该运算符主要用于函数调用 function push(arr,...item){ arr.push(...item); co...

2018-08-09 14:16:03 915

原创关于跳出while(1)死循环问题

最近也是再看题的时候看到了这个东西。同样也是再写需求中出现的东西。也就是while(1)死循环，有时候我们想让一个while一直循环。到需要的时候跳出循环。这种要怎么办？？？来看一道题：while(1){ switch("a"){ case "a" : console.log(true); //修改代码不让while死循环，...

2018-08-07 18:31:33 30347 1

原创 JavaScriptES6函数的尾调用优化

什么是尾调用尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚。就是指某个函数的最后一步是调用另一个函数。 function g(x){ console.log(x);} function f(x){ return g(x); } console.log(f(1));//上面代码中，函数f的最后一步是调用函数g，这就是尾调...

2018-08-06 22:06:07 1414

原创 JavaScriptES6箭头函数

ES6允许使用箭头（=>）定义函数var f = v => v;//等同于var f = function(v){ return v;}如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。var f = () => 5;console.log(f());//相当于var f = function(){ return ...

2018-08-06 21:47:22 355

原创 JavaScriptES6函数的扩展

ES6中的函数相当于前面的版本发生了翻天覆地的变化。目录函数的默认值解构赋值与默认值结合使用参数默认值的位置函数的length属性作用域参数默认值和独立作用域的应用rest参数严格模式name属性函数的默认值ES6允许为函数的参数设置默认值，即直接写在形参定义的后面function log(x,y = 'World'){ console...

2018-08-06 21:26:27 479

原创 JavaScriptES6字符串拓展

JavaScriptES6上新增了很多字符串的方法。目录includes()startsWith()endsWith()repeat()padStart()、padEnd()模板字符串标签模板String.raw在以前版本中也有查找的方法，比如说indexOf(),就可以查找是否含有，但是这个方法返回的索引位，当找不到的时候返回的是-1，显然是很麻烦的。...

2018-08-06 14:20:37 820

原创 JavaScriptES6之解构赋值及其用途

目录 1.数组的解构赋值 2.对象的解构赋值3.字符串的解构赋值4.数值与布尔值的解构赋值5.函数参数的结构赋值6.解构赋值中的圆括号问题7.解构赋值的用途1.数组的解构赋值 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。在ES5之前，为变量赋值，只能直接指定值。let a ...

2018-08-05 00:43:09 1665 1

原创 jQuery键盘事件

先来说一下一些常用的键的key值，当然也是可以查到每个键的key值的 Backspace 8 Tab 9 Clear 12 Enter 13 Shift 16 Control 17 Alt 18 Caps Lock 20 Esc 27 空格...

2018-08-01 10:57:00 322

原创 jQuery鼠标事件

jQuery在鼠标事件上和JS也是那么多，绑定事件上变的更加方便。目录click()dblclick()hover()mousedown()mouseup()mouseenter()mouseleave()mouseout()mouseover()mousemove()click()描述：点击事件(function(){ $("di...

2018-08-01 10:28:18 1157

原创 jQuery浏览器事件及文档加载事件

目录浏览器事件error()resize()scroll()文档加载事件ready事件load事件文档加载的过程浏览器事件error()描述：这个已经被弃用，表示出现错误的处理事件。$('img').error(function(){ console.log(1);})resize()描述：页面大小发生改变的时候触发:绑...

2018-07-31 14:15:03 715

原创 jQuery表单事件

jQuery在处理表单上也做了事件处理目录focus()blur()change()select()submit()focus()描述：获取焦点出发事件：适用于所有元素。$(function(){ $('#target').focus(function(){ console.log(123); })})blur()...

2018-07-31 14:05:33 618

原创 jQuery绑定事件处理器

事件绑定相对于交互页面是一个非常重要的一个技术，jQuery在事件绑定上面也做了很多。目录bind()delegate()on()off()one()unbind()undelegate()bind()描述：为一个元素绑定一个事件,有三个参数,第一个为事件类型,第二个为处理函数,第三个是布尔值,当为false的时候,阻止冒泡,为true为冒泡事件。$(...

2018-07-31 13:58:37 304

原创 jQuery表单选择器

jQuery在选择器方面也做了一个关于表单的选择器，方便选择表单元素目录:button Selector:checkbox Selector:checked Selector:disabled Selector:enabled Selector:file Selector:focus Selector:image Selector:input Selecto...

2018-07-31 13:24:38 2772 2

原创 jQuery树遍历

我们知道在HTML结构中元素的嵌套形成了树形结构，在查找节点的时候当然也可以用树形查找的方法，jQuery提供了树形遍历的方法。更加方便的进行遍历节点目录children()closest()find()next()nextAll()nextUnitl()parent()parents()offsetParent()parentsUntil()pre...

2018-07-30 12:20:40 1444

原创 jQuery遍历-其他遍历

jQuery遍历中的其他遍历中包含着很重要的操作目录add()content()end()add()描述：添加元素到匹配的元素集合中。这个也是经常用到的，如果我们要设置div和p相同的的样式而div又有单独的样式的时候。可以用这个<div></div><p></p><script> $(fun...

2018-07-29 22:20:08 361

原创 jQuery遍历-过滤

我个人感觉jQuery中最大的好处就是选择Dom元素方面了。选择Dom中除了选择器、过滤，当然还有遍历了。总结一下遍历中的过滤目录eq()filter()first()last()has()is()not()map()slice()eq()描述：减少匹配元素的集合为指定的索引的哪一个元素索引值可以是负值，也可以是正值，<p&gt...

2018-07-29 22:03:39 559

原创 jQueryDom操作全解

说到底，jQuery是一个JavaScript库，离不开对Dom的操作。今天就总结一下jQuery中的Dom操作目录Dom插入并包裹现有内容wrap(wrappingElement)unwrap()wrapAll(wrappingElement)wrapInner(wrappingElement)Dom插入现有元素内append()appendTo()htm...

2018-07-29 16:53:25 990

原创 jQueryDom属性

前面总结完了jQuery的选择器和过滤，在jQuery中比较重要是还是操控Dom属性。目录addClass(className)attr(attributeName)hasClass(className)html()prop(propertyName)removeAttr(attributeName)removeClass([className])removeP...

2018-07-28 14:22:24 362

原创 jQuery可见性过滤

在jQuery的扩展过滤里面由于选择元素性能不是很好，所以当在使用jQuery过滤的时候通常是配合着基础选择器来使用。目录:hidden Selector:visible Selector:hidden Selector描述：选择所有隐藏的元素语法：$(":hidden")或者jQuery(":hidden")补充：元素可被认为隐藏有一下几种情况 1...

2018-07-28 12:05:45 299

原创 jQuery子元素过滤

今天总结一下jQuery中的子元素过滤目录:first-child Selector:last-child Selector:first-of-type Selector:last-of-type Selector:nth-child() Selector:first-child Selector描述：选择所有父级元素下的第一个子元素语法：$(":first-c...

2018-07-28 11:30:09 368

原创 jQuery内容过滤

上节总结了jQuery中的基础过滤，这节总结一下内容过滤目录:contains() Selector:empty Selector:has() Selector:parent Selector:contains() Selector描述：选择所有包含指定文本的元素。语法：$(":contains("text")")或者jQuery(":contains("text"...

2018-07-28 10:52:25 616

原生JS实现别踩白块

空空如也