![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 61
js学习
_ForeverYouth_
欲望以提升热忱,毅力以磨平高山
展开
-
BOM(浏览器对象模型)
BOM概述什么是BOMBOM即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是windowBOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性BOM缺乏标准,javascript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部份1.2 BOM的构成window对象是浏览器的顶级对象,它具有双重角色1.它是js访问浏览器窗口的一个接口2.它是一个全局对象,定义在全局作用域中的变量,函数都会变成wind原创 2020-06-03 20:33:34 · 4679 阅读 · 6 评论 -
一些常用正则
常用正则1. 数字价格千分位分割'123456789'.replace(/(?!^)(?=(\d{3})+$)/g, ',') // 123,456,789小数千分位支持const formatNum = numStr => { const regex = new RegExp(`(?!^)(?=(\\d{3})+${numStr.includes('.') ? '\\.' : '$'})`,'g') return numStr.replace(regex,',')}consol原创 2021-11-03 11:35:48 · 187 阅读 · 0 评论 -
WebSocket
WebSocketWebSocket 是一种数据通信协议也是用于客户端和服务端数据通信,类似于我们常见的 http既然有 http,为啥还要 WebSockethttp通信是单向的请求 + 响应没用请求也就没用响应初次接触WebSocket的人,都会问同样的问题:我们已经有了HTTP协议,为什么还需要另一个协议,它能带来什么好处?答案很简单,因为HTTP有一个缺陷:通信只能由客户端发起举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果。HTTP协议做不原创 2021-08-24 09:28:55 · 1345 阅读 · 0 评论 -
js四舍五入toFixed与Math.round
js四舍五入toFixed与Math.roundtoFixed()let num = 1.335num.toFixed(2) // num = 1.33原因:toFixed()使用的是银行家舍入规则,银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一Math.round()let num = 1.335num = Math.round(num * 100) / 1原创 2021-08-16 16:45:45 · 277 阅读 · 0 评论 -
前端本地存储
本地存储特性:数据存储在用户浏览器中设置,读取方便,甚至页面刷新不丢失数据容量较大,sessionStorage约5M,localStorage约20M只能存储字符串,可以将对象JSON.stringify()编码后存储sessionStorage和localStorage都存在四个方法存储数据:sessionStorage.setItem(key,value) || localStorage.setItem(key,value)获取数据:sessionStorage.getIte原创 2021-05-08 16:34:23 · 169 阅读 · 0 评论 -
JS基础
JS基础将之前的一些博客整合在了一起JS编程基础编程 :就是计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程计算机程序: 就是计算机所执行的一系列的指令的集合,而程序全部都是我们用所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出指令注意: 上面所定义的计算机指的是任何能够执行代码的设备计算机的组成硬件输入设备 键盘鼠标输出设备 显示器打印机cpu 负责处理数据和运算硬盘 负责存储数据,硬盘永久存储数据内存 内存暂原创 2021-04-25 10:46:07 · 511 阅读 · 0 评论 -
富文本数据处理
关于后台拿的富文本数据处理,及replace的妙用 昨天在写小程序的时候,从后台拿到了富文本数据。然后用了parser(小程序富文本插件),在页面展示的数据中包含有标签之类的。这时候我发现后台拿来的数据是这样的 我们可以看到,他并不是标签,而是一些转义字符,例如p标签就是 “<p>;” 这时候我们就不能直接用富文本插件了,需要对数据进行处理再使用,于是我想到了用replace方法,替换字符嘛。但是问题来了,replace方法不能替换所有的转义字符。然后我又去看原创 2020-11-13 09:24:23 · 664 阅读 · 0 评论 -
JS事件基础
// 1.事件由三部分组成 事件源 事件类型 事件处理程序 简称事件三要素 <button id="beibei">贝贝奇</button> <div id="dian1">123</div>// 事件源 就是事件被触发的对象var btn = document.getElementById('beibei');...原创 2020-04-24 09:27:47 · 112 阅读 · 0 评论 -
Promise
Promise1. promise是什么?1.1 理解抽象表达:Promise是 js 进行异步编程的新的解决方案具体表达:它语法上来说是一个构造函数功能上来说promise对象用来封装一个异步操作并可以获取其结果1.2 promise的状态改变 1. pending 变为 resolved 2. pending 变为 rejected说明:只有这两种,且一个promise对象只能改变一次,无论变为成功还是失败,都会有一个数据结果,成功的数据结果一般称为value,失败的结果数据一原创 2020-11-09 17:48:25 · 190 阅读 · 0 评论 -
JS闭包和递归以及浅拷贝和深拷贝
目录函数的定义和调用函数内this指向问题以及改变this指向高阶函数闭包递归浅拷贝和深拷贝函数的定义和调用 ^函数的定义我们函数的定义有三种定义方式函数的声明方式 function 关键字函数表达式(匿名函数)new Function()第三种定义函数的方式代码如下 let fn = new Function('a','b','console.log(a+b)'); fn(1,1); /*原创 2020-07-27 17:38:24 · 324 阅读 · 0 评论 -
ES5新增方法
目录数组方法字符串方法对象方法数组方法 ^迭代遍历方法: forEach(),map(),filter(),some(),every()那么这几种方法有什么区别呢?forEach()遍历数组 // 语法 array.forEach(function(currentValue,index,arr)) /* * currentValue 每一个数组元素 * index原创 2020-07-27 16:40:44 · 272 阅读 · 0 评论 -
JS构造函数和原型,原型链和继承
目录利用构造函数创建对象静态成员和实例成员原型对象原型__proto__原型constructor原型链继承利用构造函数创建对象 ^我们知道,创建对象有三种方式,那么是哪三种方式呢?第一种就是利用 new Object();创建对象,例如let obj = new Object();第二种就是利用对象字面量创建对象let obj = {}第三种也就是我们利用构造函数创建对象辣 function Sta原创 2020-07-27 14:23:37 · 175 阅读 · 0 评论 -
ES6新特性
letconstlet在es6中,我们可以用let来声明变量替换var,那么let声明的变量有什么特性呢?使用let声明的变量具有块级作用域在一个大括号中,使用let声明的变量才具有块级作用域,var不具备这个特点防止循环变量成为全局变量不存在变量提升,也就是说我们必须先声明,再使用暂时性死区,和当前块级作用域绑定var a = []; for (var i = 0;i<2;i++){ a[i] = function () { co原创 2020-07-23 10:11:49 · 225 阅读 · 0 评论 -
面向对象编程
面向对象编程介绍两大编程思想~ 面向过程~ 面向对象面向过程编程 POP (Process-oriented programming)~面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了~举个例子:将大象装进冰箱,面向过程做法1.打开冰箱门 -> 2.大象装进去 -> 3.关上冰箱门面向过程,就是按照我们分析好了的步骤,按照步骤解决问题面向对象编程 OOP (Object Oriented Programming)面原创 2020-07-16 15:51:05 · 92 阅读 · 0 评论 -
offsetWidth获取元素宽度不准确
关于offsetWidth获取元素宽度不准确的问题今天用js写轮播图的时候,发现使用offsetWidth获取foucs的宽度和我css设置的宽度不一致,如下:在谷歌控制台输出的确是722,一开始我以为代码哪里出了问题,后来发现,原来是foucs里面的margin左右设置的是auto,于是我将auto改成一个准确的数字之后控制台输出的终于是721和css设置的一致...原创 2020-06-09 21:08:13 · 3397 阅读 · 5 评论 -
立即执行函数
什么是立即执行函数?不需要调用,立马能够自己执行的函数 function fn() { console.log(1); } fn(); // 1. 写法 也可以传递参数进来 // (function(){})() 或者 (function(){}()) (function (a, b) { console.log(a + b); var原创 2020-06-09 20:50:05 · 140 阅读 · 0 评论 -
mouseenter和mouseover的区别
区别:mouseenter 鼠标事件 不会冒泡搭配鼠标离开mouseleave同样不会冒泡当鼠标移动到元素上时就会触发mouseenter事件类似mouseover,它们之间的差别是mouseover鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter只会经过自身盒子触发 <style> .father{ width: 100px; height: 100px; backg原创 2020-06-09 20:46:52 · 132 阅读 · 0 评论 -
JS offset,client,scroll三大系列对比
元素偏移量offsetoffset:offset 可以得到任意样式表中的样式值offset 系列获得的数值是没有单位的offsetWidth 包含padding+border+widthoffsetWidth 等属性是只读属性,只能获取不能赋值所以,我们想要获得元素大小位置,用offset更合适它以带有定位的父亲为准 如果没有父亲或者父亲没有定位 则以body为准style:style 只能得到行内样式表中的样式值 style.width 获得的是带有单位的字符串style.wid原创 2020-06-09 20:39:00 · 242 阅读 · 0 评论 -
js执行队列
1.1 js是单线程js语言的一大特点就是单线程,也就是说,同一时间只能做一件事,这是因为js这门脚本语言诞生的使命导致–js是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行,应该先进行添加,之后再删除1.2 同步和异步为了解决这个问题,利用多核CPU的计算能力,HTML5提出Wep Worker标准,允许js脚本创建多个线程,于是js中出现了同步和异步(1)同步前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的,原创 2020-06-03 20:46:57 · 580 阅读 · 0 评论 -
JS this指向问题
// this 指向问题 一般情况下this的最终指向的是那个调用它的对象 // 1. 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window) <button>点击</button> console.log(this); function fn(){ console.log(this) } window.fn(); window.原创 2020-06-03 20:45:25 · 114 阅读 · 0 评论 -
JS事件高级
注册事件两种方式 <button>传统方法注册事件</button> <button>方法监听注册事件</button> <script> var btns = document.querySelectorAll('button'); // 1. 传统方式注册事件 btns[0].onclick = function () { alert('hi');原创 2020-05-30 20:10:10 · 245 阅读 · 0 评论 -
JS 3种动态创建元素方式的区别
3种动态创建元素区别document.write()element.innerHTMLdocument.createElement()区别document.write 是直接将内容写入页面的内容流,但是文档执行完毕,则它会导致页面全部重绘innerHTML 是将内容写入某个 DOM 节点,不会导致页面全部重绘innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂 <button>点击</button> <p&g原创 2020-05-28 12:07:54 · 181 阅读 · 0 评论 -
JS节点操作
节点操作获取元素通常使用两种方式1.利用DOM提供的方法获取元素(逻辑性不强,繁琐)2.利用节点层级关系获取元素(逻辑性强,兼容稍差)节点概述网页中所有内容都是节点(标签,属性,文本,注释等),在DOM中,节点使用node表示HTML DOM树中的所有节点均通过js进行访问,所有HTML元素(节点)均可被修改,也可以创建或者删除一般地,节点至少拥有nodeType(节点类型),nodeName(节点名称)和nodeValue(节点值),这三个基本属性元素节点 nodeType 为原创 2020-05-21 15:13:44 · 335 阅读 · 0 评论 -
JS排他思想
排他思想 <div> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> </div> <scr原创 2020-05-18 18:27:14 · 250 阅读 · 0 评论 -
JS操作元素
- innerText和innerHTML<style> body { display: flex; flex-direction: column; } div { width: 100px; height: 100px; ...原创 2020-05-06 14:50:28 · 286 阅读 · 0 评论 -
JS获取元素的方法
DOM获取元素的方法ID获取元素 document.getElementById();Name获取元素 document.getElementsByTagName()H5新增方法获取元素:document.getElementsByClassName()document.querySelector()document.querySelectorAll()获取特殊...原创 2020-04-23 16:00:48 · 292 阅读 · 0 评论 -
JS简单数据类型和复杂数据类型
// 简单类型又叫做基本数据类型或者值类型,复杂数据类型又叫做引用类型// 值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型//string,number,boolean,undefind,null// 引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型//通过new关键字创建的对象(系统对象,自定义对象),如Object...原创 2020-04-23 15:47:52 · 639 阅读 · 0 评论 -
JS内置对象
js中的对象分为三种:自定义对象,内置对象,浏览器对象内置对象就是指js语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)内置对象最大的优点就是帮助我们快速开发多查阅MDN的内置对象文档学习对象中的方法查阅该方法的功能查看里面参数的意义和类型查看返回值的意义和类型通过demo进行测试常用的四种内置对象1.Math对象2.D...原创 2020-04-23 00:38:47 · 263 阅读 · 0 评论