JS
关注
分享
扫一扫
文章平均质量分 59
OGoodness
宁静致远
展开
-
你不知道的JS-Array，String，Number，特殊值
如果一个 Number 对象持有一个基本标量值 2，那么这个 Number 对象就永远不能再持有另一个值；复合值 —— object（包括 array，和所有的对象包装器(Number、String、Boolean等) ）和 function。简单值（也叫基本标量）：number、string、 boolean、null、undefined、symbol。-0与0的比较中,比较Infinity与-Infinity是否相等。null有定义，值为空；-0字符串化会自动变为0，当反向字符串化时返回本身-0。原创 2023-04-11 16:23:54 · 1009 阅读 · 0 评论 -
JS 节流
js 三种节流：时间戳版，束流版，定时器版原创 2022-06-20 10:13:35 · 570 阅读 · 0 评论 -
JS 防抖
JS防抖效果模拟实现原创 2022-06-20 09:01:36 · 162 阅读 · 0 评论 -
JS 定位父级和偏移量
JS 定位父级和偏移量样例代码 <style> * { margin: 0; padding: 0; } .box { position: relative; height: 200px; width: 200px; padding: 10px; margin: 10px; overflow: auto; border: 2px solid rebeccapurple; background-color: aqua;原创 2022-05-15 16:58:58 · 520 阅读 · 0 评论 -
JS 获取 元素自身区域尺寸
JS 获取 元素自身区域尺寸文章目录JS 获取 元素自身区域尺寸样例代码-便于区别1.content区域宽/高+paddingclientWidthclientHeight2.content区域宽/高+padding+滚动条+边框offsetWidthoffsetHeight3.content区域宽/高+padding+卷曲宽/高scrollWidthscrollHeight4.边框宽度样例代码-便于区别<style> * { margin: 0; padding: 0;原创 2022-05-15 16:11:31 · 297 阅读 · 0 评论 -
JS 视窗(window)位置和尺寸
JS 视窗(window)位置和尺寸文章目录JS 视窗(window)位置和尺寸1.window view视口宽高尺寸 :innerWidth,innerHeightouterWidth,outerHeight2.页面滚动位置(最外侧滚动条距离)(最常用)docuemnt.documentElement.scrollTop/scrollLeftwindow.pageYOffset/pageXOffsetwindow.scrollY和scrollX3.window view视口距离显示器位置(标配)wind原创 2022-05-08 21:43:54 · 1783 阅读 · 0 评论 -
JS 事件event坐标位置
JS事件event坐标位置文章目录JS事件event坐标位置实例:结果:window窗口和document的区别1.clientX clientY :以window窗口为标准2.offsetX offsetY 以目标元素边框为标准3.pageX pageX :以document文档为标准4.screenX screenY :以显示器(屏幕)为标准5.layerX layerY :以目标元素定位父级边框为标准实例:1.div标签设定 宽100px;高:100px;mar原创 2022-05-08 17:35:29 · 651 阅读 · 0 评论 -
JS setTimeOut实现定时器
JS setTimeOut实现定时器文章目录JS setTimeOut实现定时器第一种第二种第一种setTimeout(function fn() { setTimeout(function () { let time = new Date() console.log(time.toLocaleTimeString()); fn() }, 1000)})第二种function fn() { let time =原创 2022-05-08 16:27:10 · 663 阅读 · 1 评论 -
JS事件委托和事件分派
JS事件委托和事件分派JS事件委托定义:若需要对子元素进行统一的监听管理,可以将其委托给它们共同的父元素,通过event对象对指定子元素进行筛选和操作。<body> <ul class="wrap"> <li>1</li> <li>2</li> <li>3</li> </ul> <script> let oWrap = document原创 2022-05-04 21:47:16 · 573 阅读 · 0 评论 -
JS阻止冒泡和元素默认事件
JS阻止冒泡和元素默认事件文章目录JS阻止冒泡和元素默认事件1.JS阻止冒泡 :stopPropagation()2.阻止元素默认事件行为preventDefault()onclick + return false接管行为1.JS阻止冒泡 :stopPropagation()<body> <div class="wrap"> <div class="inner"></div> </div> <script> le原创 2022-04-24 17:49:46 · 354 阅读 · 0 评论 -
JS 事件触发后的三个阶段
JS 事件触发后的三个阶段文章目录JS 事件触发后的三个阶段1.事件捕获阶段2.目标阶段3.事件冒泡阶段过程图形说明1.事件捕获阶段事件由最不精确的目标对象(document)开始触发，一直触发到具体精确的目标元素对象（element）的过程2.目标阶段目标阶段的事件会触发该元素（即事件目标）上的所有监听器3.事件冒泡阶段事件由精确，特定的目标元素对象（element）开始触发,一致触发到最不精确的目标对象（docuemnt）的过程过程图形说明...原创 2022-04-24 17:21:41 · 797 阅读 · 0 评论 -
JS DOM常用 监听事件
JS DOM常用操作事件文章目录JS DOM常用操作事件鼠标相关事件onclickondblclickonmousedownonmousemoveonmouseuponmouseoutonmouseover键盘相关事件onkeydownonkeypressonkeyuponinput聚焦与失焦相关onbluronfocus加载错误或中断相关onerroronabort域内容改变相关onchangeonloadonunloadonresizeonselectonsubmitonreset鼠标相关事件on原创 2022-04-24 10:40:34 · 292 阅读 · 0 评论 -
JS DOM删除元素
JS DOM删除元素A.removeChild(B)在元素A中移除元素B<body> <div class="wrap"> <p class="one">张三 </p> </div> <span>王五</span> <script> var oWrap = document.querySelector('.wrap'); var oP = document.qu原创 2022-04-17 21:36:03 · 6172 阅读 · 0 评论 -
JS DOM标签元素 复制和替换
JS DOM标签元素 复制和替换文章目录JS DOM标签元素 复制和替换元素的复制 :A.CloneNode(B)元素的替换 :A.replaceChild(B,C)元素的复制 :A.CloneNode(B)A表示 需要被复制的元素对象B表示 参数,当传入true表示连带子节点一并复制,false表示复制节点本身,不包括子节点<body> <div class="wrap"> <p>小情歌</p> </div>原创 2022-04-17 21:29:05 · 3138 阅读 · 0 评论 -
JS DOM创建和添加元素节点
JS DOM创建和添加元素节点文章目录JS DOM创建和添加元素节点第一种: createElement() + createTextNode() + appdChild()第二种: innerHTML第三种: document.write()第四种 : A.insetBefore(B,C)第一种: createElement() + createTextNode() + appdChild()<body> <script> let oP = document.cr原创 2022-04-17 21:12:39 · 1512 阅读 · 0 评论 -
JS DOM获取 兄弟和子 元素节点
JS DOM获取 兄弟和子 元素节点children :返回 子节点 集合获取子元素节点,返回 标签节点 集合<body> <div class="wrap"> <p>小情歌</p> <p>小情歌</p> </div> <script> let oWrap = document.querySelector(".wrap") console.log(oWrap.原创 2022-04-17 20:48:31 · 4139 阅读 · 0 评论 -
JS DOM获取元素节点文本内容
JS DOM获取节点文本内容innerText获取纯文本<body> <div class="one"><p><span> 小情歌 </span></p></div> <script> let one = document.querySelector(".one") console.log(one.innerText); ==>"小情歌"</scrip原创 2022-04-17 20:02:42 · 9419 阅读 · 0 评论 -
JS DOM获取标签/元素style样式
JS DOM获取标签/元素style样式文章目录JS DOM获取标签/元素style样式.stylegetComputedStyle().style只能获取行内样式,不能获取style标签中class的样式<body> <div class="one" style="color:red;width:180px">小情歌</div> <script> let one = document.querySelector(".one")原创 2022-04-17 17:40:08 · 2904 阅读 · 0 评论 -
JS DOM获取元素属性+操作方法
JS DOM获取元素属性+操作方法文章目录JS DOM获取元素属性+操作方法基础属性title属性tagName属性 : 获取标签名className属性 : 获取类名Nodelist.Length : 获取元素集合长度Nodelist.item(index) : 获取集合中指定元素classList 获取类名集合获取标签文本内容textContent 和 innerText 和innerText获取属性 : getAttribute() 和 .属性名修改属性 setAttribute()检验属性是否存原创 2022-04-17 17:07:51 · 8489 阅读 · 0 评论 -
JS DOM操作 获取页面元素 / 标签
JS&DOM 获取页面元素对象文章目录JS&DOM 获取页面元素对象通过 id名 :getElementById()通过 类名 :getElementByClassName()通过 标签名 :getElementsByTagName()H5万能获取单个 :querySelector()H5万能获取多个 :querySelectorAll()直接获取body :document.body直接console.log打印id获取通过 id名 :getElementById()通过id获取元原创 2022-04-17 15:59:16 · 786 阅读 · 0 评论 -
JS 数据处理练习 10例
JS 数据处理案例1.统计字符串中,相同字符的数量let one = "abcabcabcaaa".split("")let two = one.reduce(function (acc, cur, index, arr) { if (!acc[cur]) { acc[cur] = 1 } else { acc[cur]++ } return acc}, {})console.log(two);==>{ a: 6, b: 3, c: 3 }2.找出数原创 2022-04-10 20:28:10 · 1158 阅读 · 0 评论 -
JS Date时间对象格式化+封装
JS Date时间对象+格式化封装文章目录JS Date时间对象+格式化封装首先：获取当前时间1.时间的4种格式化结果+ 和 valueOf() :转化为毫秒级toString() :获取日期和时分 字符串toDateString() :只获取日期 和toTimeString() ：只获取时分2.自定义时间 Date()处理3.毫秒级 转 正常Date格式4.Date.now():直接获取当下毫秒级时间5.获取日期 指定部分基础封装：获取当下时间 (函数)高级封装: 自定义格式化,获取当下时间 (函数)计原创 2022-04-10 15:05:29 · 1563 阅读 · 0 评论 -
JS String字符串方法
JS String字符串方法文章目录JS String字符串方法string.charCodeAt()string.replace()string.substring(<开始位置>,<结束位置>(不包括))string.split()string.slice()string.indexOf()string.includes()string.charCodeAt()charCodeAt() 方法返回 0 到 65535 之间的整数，表示给定索引处的 UTF-16 代码单元,如果原创 2022-04-03 21:39:06 · 294 阅读 · 0 评论 -
JS Array数组基础和高级遍历方法+练习检验
JS Array方法+练习检验简单方法:array.join()join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。简单理解:数组转为字符串let one = ["a","b","c",null,undefined]let val = one.join("")console.log(val);==>abc删除元素array.pop()pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。let on原创 2022-04-03 16:26:59 · 958 阅读 · 0 评论 -
JS Object对象方法+验证演示
JS Object方法文章目录JS Object方法Object.is()Object.freeze()Object.assign(target, ...sources)Object.keys()Object.values()Object.entries()Object.is()官方定义:简单理解:Object.is():判断两个值是否为同一个值验证演示：console.log(Object.is(NaN, NaN)); ==>trueconsole.log(NaN ==原创 2022-04-03 10:53:48 · 409 阅读 · 0 评论 -
JS this的三种指向+练习
JS this的三种指向+基础练习文章目录JS this的三种指向+基础练习事先提示:正常情况下:普通函数对象构造函数this指向练习：练习1练习2练习3练习4事先提示:this的三种指向:1.以构造函数调用2.以函数调用3.以对象方法调用构造函数默认执行操作:1.创建空对象,作为将要返回的对象实例2.将空对象的原型指向构造函数的prototype属性3.将空对象赋值给构造函数内部的this关键字4.开始执行构造函数内部的代码正常情况下:普通函数正常情况：指向windo原创 2022-04-03 09:22:40 · 839 阅读 · 0 评论 -
JS作用域详解-举例检验复盘
JS作用域详解-举例检验复盘文章目录JS作用域详解-举例检验复盘事先说明:正文开始--难度逐渐加深第一例+总结:第二例+总结:第三例+总结:第四例+总结:第五例+总结:第六例+总结:第七例+总结:第八例+总结:第九例+总结:第十例+总结:第十一例+总结:第十二例+总结:第十三例+总结:事先说明:规则:1.局部域可以访问全局域,全局域访问不了局部域2.暂时只有函数能够成 局部域3.私有变量: 局部域中声明的变量!4.变量首先需寻找到声明符(var等)!5.javaScript静态作用域 ,函原创 2022-03-29 21:48:12 · 277 阅读 · 0 评论 -
JS相等(==)和全等(===)区别
JS相等(==)和全等(===)区别相等(==)等于运算符（==）:1.检查其两个操作数是否相等，并返回Boolean结果。2.它会尝试强制类型转换并且比较不同类型的操作数。全等(===)全等运算符 (===) :1.会检查它的两个操作数是否相等，并返回Boolean结果。2.全等运算符总是认为不同类型的操作数是不同的。...原创 2022-03-27 16:34:13 · 928 阅读 · 0 评论 -
JS基础数据类型关系-检验判断复盘
JS基础数据类型关系复盘文章目录JS基础数据类型关系复盘typeof检验类型相互关系检验isNaN判断isFinite判断:表示某个值是否为正常的数值布尔值判断基础数据类型:number String Boolean undefined null NaN Object Symboltypeof检验类型console.log(typeof Number) ==>functionconsole.log(typeof String) ==>functionconsole.log(ty原创 2022-03-27 16:05:35 · 327 阅读 · 0 评论