JavaScript
文章平均质量分 68
w狼子
自己的学习经验总结与记录。
展开
-
Javascript中的事件捕获、事件冒泡与事件委托
看以下简单的三层div结构。<div id="grandparent"> <div id="parent"> <div id="child"></div> </div></div>根据以上三层div嵌套结构,我来根据我的理解解释下什么叫事件捕获、事件冒泡、事件委托原创 2018-03-25 18:04:44 · 247 阅读 · 0 评论 -
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 · 1443 阅读 · 0 评论 -
扩展运算符
首先点明,ES6的新特性之扩展运算符(spread)就是三个点(...),和ES6的可变参数形式一样。扩展运算符是很强大的一个运算符,它能简化很多在ES5中会比较繁杂的操作。对于这个运算符,概念性的东西不多,所以这里我就简明扼要的给出一些它的常用场景:1:可变参数。(虽然可变参数严格说不是扩展运算符(spread),而是剩余运算符(rest),但是鉴于它也是三个点:...,我就写在了一起以便记忆)...原创 2018-05-18 21:53:56 · 481 阅读 · 0 评论 -
滚轮事件总结
原生js: 滚轮事件主要是火狐浏览器和其他浏览器的区别,而不是IE与其他浏览器的区别。 在Chrome等其他浏览器中(以下简称Chrome),滚轮事件是mousewheel。而在火狐中是DOMMouScroll,即使Firefox59。在滚轮事件中,“Chrome”有一个event.wheelDelta属性,而“Firefox”中有一个event.detail属性。二者区别: event.whee...原创 2018-05-07 21:30:32 · 2733 阅读 · 0 评论 -
JavaScript数组常用方法归纳
不做完整的介绍,只介绍自己用的比较多的数组方法,ES3、ES5、ES6都有涉及。ES3中常用:join:将数组的所有元素都转换成字符串并拼接在一起,返回最后生成的字符串。默认使用逗号。reverse:将数组中的元素颠倒顺序,返回逆序的数组(不是新数组)。sort:传递比较函数,将数组元素进行排序。concat:返回新数组。var a = [1,2,3];console.lo...原创 2018-06-04 23:20:01 · 487 阅读 · 0 评论 -
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 · 563 阅读 · 0 评论 -
原生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 · 434 阅读 · 0 评论 -
ES5、ES6中继承的实现
继承在JavaScript中也是比较重要的概念。如果仔细讲解会需要比较多的篇幅,所以这里我就列举两种使用比较多,比较被推荐的继承写法。在JavaScript中,实现继承的最根本的思想肯定是原型链,不管怎样都离不开它,所以如果你对原型链理解非常好,那么继承对于你来说只是代码层面的事。 ES5中的两种非常经典的继承第一种:组合继承指的是将原型链和构造函数的技术组合到一起来实现继承。其...原创 2018-08-03 15:52:16 · 4155 阅读 · 0 评论 -
JavaScript中的假值归纳
在公司实习一段时间,过程中,发现有很多时候在if()判断语句时,总是出现真假值判断错误的情况。所以特意想总结一下JavaScript中的一些真假值,让自己以后能更快速的判断。在JavaScript中,所有的值都能转换成真值(truthy)和假值(falsy)中的一种.所以我们只要记住所有的假值,那么剩下的就是真值。列出我总结的假值:0, +0, -0, null, undefined, ...原创 2019-01-07 14:50:13 · 385 阅读 · 1 评论 -
Javascript中宽高和偏移
原生JavaScriptclientHeight/Width:Element.clientHeight==>元素包括padding的高度,不包括滚动条Element.clientWidth==>元素包括padding的宽度,不包括滚动条document.body/documentElement.clientWidth/Height==>:代表视口的宽高scrollHei...原创 2019-09-09 15:21:16 · 270 阅读 · 0 评论 -
JSON语法以及json与JavaScript对象的转换
JSON是JavaScript的一个严格的子集,利用了JavaScript中的一些模式来表示结构化数据。理解JSON,最重要的是理解它是一种数据格式,而不是一种编程语言。JSON虽然利用了JavaScript的一些模式,但JSON并不从属于JavaScript,很多编程语言都可以用JSON来传递数据。 JSON的语法: 学习JSON的语法,你只需知道以下三种类型的值。 1.简单值:也就是J...原创 2018-04-19 20:11:10 · 198 阅读 · 0 评论 -
JavaScript操作文档样式(css)的方法
一、修改文档元素的style属性。例如:e.stye.backgroundColor = "red"; 注意点: 1.一次只能操作一个属性。 2.被操作的属性的书写要符合驼峰命名法。 3.属性值有单位的必须带上单位。 4.属性值是字符串。 5.由于操作的是style属性,所以设置样式很有用,但是获取...原创 2018-04-18 22:57:05 · 378 阅读 · 0 评论 -
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 · 7066 阅读 · 1 评论 -
数据结构之JavaScript实现List
利用数组实现列表。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript实现列表</title></head><body> &a原创 2018-04-15 18:10:10 · 749 阅读 · 0 评论 -
JavaScript对象的创建和对象属性操作详解
在正式介绍对象创建和属性操作之前,先普及几个概念: 三类JavaScript对象: 1.内置对象:由ECMAscript规范定义的对象。例如array、date对象。 2.宿主对象:由js解释器所嵌入的宿主环境(如web浏览器)所定义的对象。 3.自定义对象:这大家肯定都知道,是有运行中的js代码创建的对象。 两类js对象属性: 1.自由属性:直接在本对象中定义的属性。 2.继承属性;在...原创 2018-03-27 22:37:12 · 785 阅读 · 0 评论 -
javascript中关于宽高、位置、坐标等相关属性和方法介绍:
开篇前,我直接了当地写出几个常用的操作:1.获取窗口右侧滚动条的宽度window.innerWidth-document.documentElement.clientWidth2.获取HTML元素的尺寸(包含边框和内边距)element.offsetWidth和element.offsetHeight3.获取窗口滚动条的位置document.documentElement.scrollTop和wi...原创 2018-04-03 22:29:55 · 165 阅读 · 0 评论 -
详细解释JavaScript中三元表达式
三元表达式的基本格式:布尔表达式?语句1:语句2简单解释:如果布尔表达式返回结果为真就执行语句1,如果布尔表达式返回结果为假就执行语句2。但是在实际应用中并没有这么简单,还是有些需要注意的地方,比如布尔表达式只能是布尔表达式吗?语句1和语句2中有多条语句需要执行又怎么办?等。鉴于以上细节问题,我总结了几条便于使用三元表达式应该熟知的知识点:1,布尔表达式的值或者返回值是计算值。比如1==1返回tr...原创 2018-04-04 14:38:46 · 2223 阅读 · 0 评论 -
怎样获取网址(url)中的字符串参数
在正式介绍之前先普及几个其他参数获取的指令: “window.location.pathname”;设置或获取对象指定的文件名或路径。“window.location.href”;设置或获取整个 URL 为字符串。“window.location.port”;设置或获取与 URL 关联的端口号码。如果采用默认的80端口(即使添加了:80),那么返回值并不是默认的80而是空字符“window.loc...原创 2018-04-04 15:29:01 · 3705 阅读 · 0 评论 -
详解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 · 11498 阅读 · 0 评论 -
JavaScript中,文档结构遍历
js中,文档结构遍历有两套很相似的API分别只是是否包括文本节点和注释节点:1.作为节点树遍历:(包括文本节点和注释节点)Document对象、Element对象和文档中表示文本的Text对象都是Node对象。Node定义了以下重要属性:parentNode:该节点的父节点。没有父节点就是null。childNodes:只读的类数组对象(NodeList),它是该节点的子节点的实时表示。first...原创 2018-04-05 20:48:26 · 254 阅读 · 0 评论 -
JavaScript的数据类型
写在前面: 本文只是简单介绍一下,不会深入探究。 js总共有6种数据类型:五个基本类型Number、String、Boolean、Null、Undefined和一个混合对象Object。 typeof操作符可以用来检测变量的数据类型(输出是一个关于数据类型的字符串), 返回如下6种字符串:number、string、boolean、undefined、object、function。 注意:Nul...原创 2018-04-18 19:38:14 · 173 阅读 · 0 评论 -
原生JavaScript之Object对象常用方法
Object对象—详见:MObject.assign(target,…sources):将源对象的所有自身可枚举的属性和值复制到目标对象。并返回目标对象。Object.create(obj,[propertiesObject]):创建一个新对象,obj作为新对象的原型。propertiesObject(可选)为新对象的可枚举属性描述器。 o2 = Object.create({}, {...原创 2019-09-23 15:37:52 · 460 阅读 · 0 评论