![](https://img-blog.csdnimg.cn/20190829092033973.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
Poetry Code
如果你正在学习前端,记得关注我噢~
展开
-
ECMAScript2020 可选链操作符(?.)的应用
一、前言 const programmer = { user: 'lin', department: { name: '技术部', getSite() { return '***' } } }在以前的语法中,想要获得深层次的属性或方法,如果不做前置校验的话,那么就很容易出现这种错误↓ 这可能会导致你整个应用奔溃…二、如果是你的话会以怎原创 2020-10-28 18:03:17 · 1872 阅读 · 4 评论 -
教你几招前端中的高级操作,你知道几种?
目录一、类型装换1.快速转Number2.快速转 Boolean3.混写二、连续解构1.最基本的解构2.解构嵌套对象一、类型装换1.快速转Numbervar a = '1'console.log(typeof a)console.log(typeof Number(a)) // 普通写法console.log(typeof parseInt()a) // 普通写法console.log(typeof +a) // 高端写法2.快速转 Booleanvar a = 0console.原创 2020-06-01 15:20:54 · 3667 阅读 · 2 评论 -
js判断是否为对象的几种方法
var obj = {};1、toString(推荐)Object.prototype.toString.call(obj) === '[object Object]'2、constructorobj.constructor === Object3、instanceof 需要注意的是由于数组也是对象,因此用 arr instanceof Object 也为true。obj ins...转载 2020-04-28 14:21:57 · 13789 阅读 · 2 评论 -
ES6 Promise用法总结
目录:一、Promise概述二、使用Promise的好处三、Promise基本用法四、基于Promise发送Ajax请求五、Promise 基本API实例方法.then().catch().finally()静态方法.all().race()一、Promise概述简单的来讲,Promise就是异步编程的一种解决方案。从语法上讲,Promise是一个对象,从它可以获取到异步操作的消息。二、使...原创 2020-02-08 18:30:35 · 1129 阅读 · 0 评论 -
快速上手Ajax【一篇文章就搞懂】【2】
目录:4.原生Ajax封装5. jQuery 中的 AJAX5.1 $.ajax5.2 $.get5.3 $.post5.4 全局事件处理4.原生Ajax封装/*** 发送一个 AJAX 请求* @param {String} method 请求方法* @param {String} url 请求地址* @param {Object} params 请求参数* @param {Fun...原创 2019-10-24 13:28:00 · 6336 阅读 · 11 评论 -
快速上手Ajax【一篇文章就搞懂】
目录:1.什么是 AJAX ?2.快速上手2.1 AJAX工作流程图2.2 readyState 和status3. 具体用法3.1 GET 请求3.2. POST 请求3.3选择GET还是POST?3.4 同步与异步1.什么是 AJAX ?AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使...原创 2019-10-20 12:47:22 · 20622 阅读 · 35 评论 -
JavaScript如何为同一个元素绑定多个不同事件,指向同一个事件处理函数
1.源码:<body><input type="button" value="点击" id="btn"><script> //为同一个元素绑定多个不同的事件,指向相同的事件处理函数 document.getElementById("btn").onclick = f1; document.getElementById("btn"...原创 2019-08-07 16:54:49 · 8768 阅读 · 0 评论 -
JavaScript中的location对象
location对象location对象是window对象下的一个属性,些的时候可以省略window对象。location可以获取或者设置浏览器地址栏的URL。URL统一资源定位符 (Uniform Resource Locator, URL)- URL的组成scheme://host:port/path?query#fragmentscheme:通信协议常用的http,ftp,...原创 2019-08-14 13:02:52 · 463 阅读 · 0 评论 -
原生js实现贪吃蛇大作战案例
贪吃蛇大作战面向对象的编程思想:地图: 宽,高,背景颜色,因为小蛇和食物都是相对于地图显示的,这里小蛇和食物都是地图的子元素,随机位置显示,脱离文档流的,地图也需要脱离文档流–css需要设置:宽,高,背景颜色,脱标。食物—div元素elements—>存储div的数组(将来删除的食物div时候,先从map中删除div,再从数组中移除div)食物:宽,高,背景颜色,横坐标,纵坐标一个...原创 2019-09-02 12:55:37 · 913 阅读 · 0 评论 -
js的offset、client、scroll三大系列
1.offset系列——用来获取元素的宽,高,left,top,offsetParent。它的值包括父级元素margin+父级元素padding+父级元素border+自己的margin1.1 offsetLeft:元素距离左边位置的值1.2 offsetTop: 元素距离上面位置的值1.3 offsetWidth : 获取元素的宽度(有边框)1.4 offsetHeight:获取元素...原创 2019-09-03 07:34:30 · 385 阅读 · 0 评论 -
js中的继承方式
目录:一、前言二、继承的几种方式1.借用构造函数继承(该方式主要解决属性的问题)一、前言面向对象特性:封装,继承,多态。继承,类与类之间的关系,面向对象的语言的继承是为了多态服务的。js不是面向对象的语言,但是可以模拟面向对象.模拟继承.为了节省内存空间。在js中我们可以通过原型来进行继承,它的原理是改变原型的指向。原型的两个作用:原型作用1: 数据共享 ,目的是:为了节省内存空间,...原创 2019-09-04 12:52:35 · 1538 阅读 · 0 评论 -
JavaScript中字符串与数字间的运算
JavaScript中字符串与数字间的运算分三种情况第一种:字符串+数字"12"+34="1234";带双引号的为字符串,如果和一个数字相加,那么它的结果为字符串。除非两个数字都不带双引号,则才可以实现两个数字的相加。12+34=46;第二种:第一个(无论是字串还是数字)前面有符号:+"12"+34=46;因为"12"前面有+号(或者叫连字符),+号前面没有别的东西了,所以就判...原创 2019-08-09 01:14:45 · 5430 阅读 · 0 评论 -
JavaScript 解绑事件方法和相应兼容代码!
目录:一、绑定事件的3种方式:1.2.3.二、绑定事件的兼容代码:三、总结:一、绑定事件的3种方式:注意:用什么方式绑定事件,就应该用对应的方式解绑事件。基础html代码如下:<body> <input type="button" value="触发事件" id="btn1"/> <input type="button" value="干掉第一个按钮的事件...原创 2019-08-06 18:01:55 · 7583 阅读 · 0 评论 -
Web前端开发人员要知道的——JavaScript预解析
预解析JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候,分为两个过程:预解析过程和代码执行过程预解析过程:把变量的声明提升到当前作用域的最前面,只会提升声明,不会提升赋值。把函数的声明提升到当前作用域的最前面,只会提升声明,不会提升调用。先提升var,在提升function(顺序var在最上...原创 2019-07-29 11:29:04 · 305 阅读 · 0 评论 -
JavaScript运算符的优先级
优先级从高到底1. () 优先级最高2. 一元运算符 ++ -- !3. 算数运算符 先* / % 后 + -4. 关系运算符 > >= < <=5. 相等运算符 == != === !==6. 逻辑运算符 先&& 后||7. 赋值运算符 = += -= *= /=...原创 2019-07-24 20:16:41 · 1241 阅读 · 0 评论 -
DOM快速入门——DOM获取元素对象的6种方式
目录:一、为什么要获取页面元素?二、获取元素的5种方式:1.根据id获取元素2.根据标签名获取元素3.根据name获取元素4.根据类名获取元素5.根据选择器获取元素三、总结:一、为什么要获取页面元素?例如:我们想要操作页面上的某部分(显示/隐藏,动画),需要先获取到该部分对应的元素,才进行后续操作。二、获取元素的5种方式:1.根据id获取元素document.getElementById...原创 2019-08-02 16:41:54 · 11395 阅读 · 1 评论 -
JavaScript如何设置hover属性?
hover就是选择鼠标指针浮动在其上的元素,并可以设置其样式的。但是在DOM操作中,我们并不可以直接设置hover属性。而要想有这个效果我们可以直接给元素注册一个onmouseover(鼠标进入)和onmouseout(鼠标离开)事件,然后在事件处理函数中改变标签的样式,这样就可以有hover属性了。例如:<body><ul> <li>雪花<...原创 2019-08-03 10:48:38 · 37123 阅读 · 1 评论 -
JavaScript如何自定义标签属性
目录:一、为何要自定义属性?二、自定义属性的2种方式第1种:直接在标签中添加想要的属性第2种:设置自定义属性:setAttribute("属性的名字","属性的值");三、总结:一、为何要自定义属性?因为html原生并没有给我们一些像要的属性,而我们可以给标签添加自己定义的属性,目的是为了存储一些数据。二、自定义属性的2种方式第1种:直接在标签中添加想要的属性例如:<ul id=...原创 2019-08-03 21:02:56 · 18560 阅读 · 0 评论 -
必知!JavaScript创建对象的三种方式
方式1:调用系统的构造函数创建对象表达式: var 变量名= new Object();例子: //实例化对象,创建对象 var obj = new Object(); //对象有特征和行为 (属性和方法) //添加属性-----如何添加属性? 对象.名字=值; obj.name = "小明"; obj.age = 38; obj.s...原创 2019-07-31 14:34:33 · 8159 阅读 · 0 评论 -
JavaScript的三个组成部分
JavaScript分三个部分:1、核心(ECMAScript):JavaScript的核心,描述了语言的基本语法和数据类型。ECMAScript是一套标准,定义了一种语言的标准与具体实现无关。2、文档对象模型DOM(Document Object Model) ----用于操作页面的元素。一套操作页面元素的APIDOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进...原创 2019-07-31 22:01:21 · 2173 阅读 · 0 评论 -
JavaScript创建元素的三种方式
第一种:document.write(“标签的代码及内容”);document.write('新设置的内容<p>标签也可以生成</p>');该方法的缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,会将页面原来的内容冲刷掉,从而只显示输出内容。(不推荐)第二种:对象.innerHTML=“标签代码及内容”;var box = document.getElem...原创 2019-08-05 16:03:27 · 8813 阅读 · 0 评论 -
JavaScript原生实现点击事件只创建一个元素
问题:注册点击事件的时候,多次点击会造成重复多次的创建相同的元素要求:无论点击多少次,元素只能建一个思路:触发点击事件时候,有则删除,无则创建。基础HTML代码如下:<body> <input type="button" value="创建元素" id="btn"/> <div id="dv"></div></body>...原创 2019-08-05 19:52:31 · 721 阅读 · 0 评论 -
js原生实现为元素绑定事件兼容代码
问题:为元素绑定多个事件,对象.addEventListener(“事件类型”,事件处理函数,false)方法中,谷歌和火狐支持,IE8不支持对象.attachEvent(“有on的事件类型”,事件处理函数)方法谷歌和火狐支持不支持,IE8支持要求:同时让每个浏览器都支持思路:封装兼容代码,判断浏览器是否支持具体实现代码如下:<body><input type="b...原创 2019-08-06 13:48:44 · 476 阅读 · 0 评论 -
JavaScript变量的命名规则和规范
1.规则 - 必须遵守的,不遵守会报错由字母、数字、下划线、$符号组成,不能以数字开头不能是关键字和保留字,例如:for、while。区分大小写2.规范 - 建议遵守的,不遵守不会报错变量名必须有意义遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。例如:userName、userPassword下面哪些变量名不合法良好的书写规范可以让你的JavaScript代码更上一...原创 2019-07-23 19:22:24 · 2657 阅读 · 0 评论