JS
文章平均质量分 72
路漫漫
今天也是爱大大的一天吖
这个作者很懒,什么都没留下…
展开
-
js 踩了正则表达式的大坑!lastIndex属性
正则表达式原创 2022-12-12 15:01:20 · 659 阅读 · 0 评论 -
parseInt() 和 Number() 选哪个
parseInt和Number转载 2022-12-02 16:39:58 · 226 阅读 · 0 评论 -
js indexOf方法使用位运算符简化写法
按位运算符原创 2022-11-29 09:24:06 · 939 阅读 · 0 评论 -
js获取input框后的文本节点的文本内容
js获取input框后的文本节点的文本内容原创 2022-11-10 11:28:29 · 748 阅读 · 0 评论 -
js常见的的6种继承方式
js中常见的6种继承方式原创 2022-06-14 10:31:44 · 1729 阅读 · 0 评论 -
JS数组去重 代码实现
js数组去重的常用方法原创 2020-08-10 17:57:08 · 1078 阅读 · 0 评论 -
js 阻止移动端横屏工具方法
// 阻止移动端横屏 弹出提示 (function rotate() { var orientation = window.orientation; var pd = null; function createPd() { if (document.getElementById("preventTran") === null) { var imgData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADw转载 2021-09-22 12:20:27 · 1771 阅读 · 0 评论 -
js关于时间的工具类
js简单时间比较的方法https://www.cnblogs.com/diony/p/9223291.htmljs获取当前日期时间“yyyy-MM-dd HH:MM:SS”https://www.cnblogs.com/hanwenhua/articles/3853352.html原创 2021-09-22 12:00:14 · 705 阅读 · 0 评论 -
js验证手机号和邮箱号工具类
1. 验证手机号function validatePhone(phone) { const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/; return reg.test(phone);}2. 验证邮箱号function validateEmail(email){ const reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-原创 2021-09-22 11:49:38 · 244 阅读 · 0 评论 -
js复制指定文本内容工具方法
// 传入要复制的内容即可 copy(data) { let input = document.createElement("input"); // 直接构建input input.setAttribute("readonly", "readonly"); //设置只读,否则移动端会有键盘弹出 input.value = data; // 设置内容 document.body.appendChild(input); // 添加临时实例 i.原创 2021-08-12 12:29:47 · 317 阅读 · 0 评论 -
for...in 和for...of 遍历数组、对象和字符串时的区别
遍历数组使用for…in ➡ 遍历数组元素下标let items = ['alex', 18,'boy']for(let item in items){ console.log(item) //数组元素下标}for(let item in items){ console.log(item+":"+items[item]) //通过数组元素下标获取对应元素}使用for…of ➡ 遍历数组元素for(let item of items){ console.log(item)}原创 2020-09-23 10:39:44 · 1063 阅读 · 0 评论 -
JS 浏览器加载页面时间线
11原创 2020-09-09 20:46:19 · 213 阅读 · 0 评论 -
JS 异步加载js的三种方案
js文件加载的缺点:页面的js文件一般是同步加载,加载到js文件会阻断html和css的加载,要等到js文件加载完毕,才能继续向下执行,因为js可能会操作html和css;但有些js文件不会操作html和css,只是进行初始化数据或者引入工具包,我们希望这些js文件能够并行异步地加载,以免一个js文件加载失败,导致后续所有页面都加载不了,影响页面效率。有些工具方法需要按需加载,用到再加载,不用不加载。js异步加载的三种方案:1.defer 只有IE9以下能用异步加载,但要等到dom文档全部解析完(原创 2020-09-09 08:48:43 · 1691 阅读 · 0 评论 -
JS 事件类型之窗体操作类
窗体操作类(window上的事件)1 .scroll 窗口的滚动条滚动时触发获取滚动条当前位置window.onscroll = function(){ console.log(window.pageXOffset + ' ' +window.pageYOffset)}应用position:fixed 是将dom元素相对于视觉窗口进行定位,但IE6没有fixed定位,为了实现相同的效果,可使用position:absolute 相对于文档定位,top = 滚动条滚动距离 + 初始视窗高度原创 2020-08-29 17:07:26 · 196 阅读 · 0 评论 -
JS 事件类型之文本操作事件
文本操作事件1 .input 输入框内文本变化时触发input.oninput = function(){ console.log(this.value)}2 .change 输入框在聚焦和上次失去焦点这两个状态内容有所不同时触发 若输入框内容无变化则不触发3 .focus 输入框获取焦点时触发4 .blur 输入框失去焦点时触发<input type="text" value = '请输入用户名' onfocus="if(this.value ==原创 2020-08-29 16:09:10 · 475 阅读 · 0 评论 -
JS 事件类型之键盘事件
键盘事件1 . keydown2 . keyup3 . keypress != keydown + keyupdocument.onkeydown = function(){ console.log('keydown')}document.onkeyup = function(){ console.log('keyup')}document.onkeypress = function(){ console.log('keypress')}触发顺序:keydown → ke原创 2020-08-29 15:23:02 · 232 阅读 · 0 评论 -
JS 事件类型之鼠标事件
鼠标事件1 . click 鼠标左键点击 = mousedown + mouseup2 . mousedown 鼠标左/右键摁下3 . mouseup 鼠标左/右键松开document.onmousedown = function(e){ console.log('mousedown')}document.onclick = function(e){ console.log('click')}document.onmouseup = function(){ console.log原创 2020-08-28 17:57:35 · 1351 阅读 · 0 评论 -
JS 事件委托是什么
事件对象每个事件处理函数中,都可以有一个形参(IE中这个形参无效),系统会自动传递一个事件对象到函数中,这个对象的每个属性都代表事件被触发时的一些关键性数据IE浏览器中用window.event来记录触发事件时的关键数据所以我们如果希望拿到一个事件触发后的事件对象,需要用一种兼容性的写法div.onclick = function(e){ var event = e || window.event; console.log(event);}事件源对象<div class="wra原创 2020-08-28 09:42:28 · 171 阅读 · 0 评论 -
JS 两种事件处理模型:事件冒泡和事件捕获
JS 两种事件处理模型:事件冒泡和事件捕获原创 2020-08-27 19:17:51 · 486 阅读 · 1 评论 -
JS 取消冒泡和阻止默认事件
事件对象每个事件处理函数中,都可以有一个形参,系统会自动传递一个事件对象到函数中,这个对象的每个属性都代表事件被触发时的一些关键性数据div.onclick = function(e){//形参e就是系统传递的事件对象 console.log(e);}取消冒泡1 .W3C标准 event.stopPropagation();但不支持IE9以下版本document.onclick = function(){ console.log('aha');}div.onclick = fun原创 2020-08-27 19:16:19 · 1227 阅读 · 1 评论 -
JS 绑定事件处理函数三个方法 及 各自事件解绑方法
1 . ele.onxxx = function(event){}xxx:事件类型event:事件处理程序div.onclick = function(){ console.log(1);} 兼容性很好,但是一个元素的同一个事件上只能绑定一个处理程序div.onclick = function(){ console.log(1);} div.onclick = function(){ console.log(2);}这种写法基本等同与写在HTML行间上即div原创 2020-08-27 12:04:03 · 1439 阅读 · 0 评论 -
JS 切换dom元素的伪元素样式
改class比直接改属性:效率高 好维护.demo1::after{ content: ""; width: 50px; height: 50px; background-color: gold; display: inline-block;}.demo2::after{ content: ""; width: 50px; height: 50px; background-color: pink; display: inline-block;}</s原创 2020-08-25 19:05:22 · 399 阅读 · 0 评论 -
JS 脚本化CSS 之 获取dom元素样式(解决兼容性问题)
脚本化 == 控制读写dom元素的行间CSS属性dom.style 返回一个 封装着dom元素可用的行间CSS属性 的类数组<div style="width: 50px;height: 50px;background-color: orange;"></div><script> var div = document.getElementsByTagName('div')[0];</script>dom元素在非行间定义的CSS属性不会被显原创 2020-08-25 17:24:59 · 411 阅读 · 0 评论 -
JS 脚本化CSS 之 读写dom元素的行内CSS属性
脚本化 == 控制dom.styledom元素的style属性返回一个 封装dom元素可用行内CSS属性及开发者为其设置的属性值(不包括默认值) 的类数组<div style="width: 50px;height: 50px;background-color: orange;"></div><script> var div = document.getElementsByTagName('div')[0];</script>dom元素在原创 2020-08-25 17:18:59 · 144 阅读 · 0 评论 -
JS 与定时器有关的四个方法
setInterval(func(),间隔毫秒); 设置定时器,每隔一段时间执行一次函数,返回一个唯一的标识,用于清除这个定时器 var firstTime = new Date().getTime();var timer = setInterval(function(){ var lastTime = new Date().getTime(); console.log(lastTime - firstTime); firstTime = lastTime;},1000) clear原创 2020-08-23 19:47:07 · 1972 阅读 · 0 评论 -
JS DOM基本操作之创建、插入、删除、替换节点操作
创建dom节点(并未添加到页面中,一般配合插入方法使用)document.createElement(); 创建一个元素节点var div = document.createElement('div');可以看到虽然创建了div节点,但页面中并没有显示因为这里只是创建div节点,并没有把它添加到页面中document.createTextNode(); 创建一个文本节点var text = document.createTextNode('殷志源');没有添加到页面中do原创 2020-08-23 15:33:21 · 5342 阅读 · 0 评论 -
JS 元素节点的主要属性和方法
元素节点的一些属性innerHTML 获取或修改该元素节点的HTML结构内容<div></div><script>var div = document.getElementsByTagName('div')[0]</script>追加innerText(火狐不兼容)/ textContent(火狐兼容 老版本IE不兼容)获取或修改该元素节点的文本内容<div> <i>123</i>原创 2020-08-22 17:35:59 · 344 阅读 · 0 评论 -
JS DOM继承结构树+DOM基本操作之查找节点
什么是DOM?DOM(Document Object Model,文档对象模型)DOM是一套方法的集合的统称,提供了一系列方法,用来操作html和xml。也称DOM是对html以及xml的标准编程接口html和xml本质上是一个东西,xml是html最早的版本,也是脚本xml-xhtml-html任何东西都操作不了CSS(意思是操作样式表 可以操作行内样式,实际上还是操作的html间接的操作CSS)xml和html唯一的不同,xml中的标签可以自定义DOM基本操作对节点的增删查改查..原创 2020-08-20 23:13:02 · 344 阅读 · 0 评论 -
JS DOM节点的类型+属性+方法
什么是DOM?DOM(Document Object Model,文档对象模型)DOM是一套方法的集合的统称,提供了一系列方法,用来操作 html 和 xml(html和xml本质上都是一个脚本,xml是html最早的版本< xml -> xhtml -> html >,xml 和 html 唯一的不同,就是xml中的标签可以自定义),也称DOM是对html以及xml的标准编程接口。注: 任何东西都操作不了css(意思是操作样式表,操作行内样式,实际上还是操作的html间接的操原创 2020-08-17 15:59:50 · 585 阅读 · 0 评论 -
JS ES5的严格模式
从ES3到ES5版本的革新意味着要摒弃旧语法,产生新语法现在的浏览器是基于ES3的方法+ES5的新增方法,而两者产生冲突的语法部分(即ES3能用 ES5不能用,或ES5能用 ES3不能用,或两者产生的效果不同)遵循ES3的语法规则我们也可以使用ES5的严格模式,在这种模式下,ES3和ES5产生冲突的部分遵循ES5的语法规则,不再兼容ES3的一些不规则语法,使用全新的ES5规范启动ES5严格模式启动语句:"use strict";为什么写成字符串形式,而不写成方法呢?写成字符串形式,起到了一个向后原创 2020-08-12 19:27:55 · 157 阅读 · 0 评论 -
JS try...catch结构的作用
try…catch的作用:容纳、捕获错误我们都知道当程序的一行代码出问题,系统就会向控制台抛出错误,后面的代码也会因此无法执行console.log('a')console.log(b)console.log('c')//不执行为了解决这一问题,我们可以使用try…catch结构try…catch结构中,try代码块用于容错,允许在try代码块中出现错误代码,不会执行错误代码后的try里面的代码,不会向控制台抛出异常,异常会由catch结构捕获,也不影响try…catch结构后代码的正常执行原创 2020-08-12 16:50:45 · 1468 阅读 · 0 评论 -
JS数据类型 使用工具方法区分各种数据类型
JS数据类型js有8种数据类型,其中7种为基础类型(原始值),1种为引用类型(引用值)基础类型:undefined、Null、Boolean、String、Number、BigInt、Symbol引用类型:Object(Array、RegExp、Date、Math、Function)区分数据类型的几种方法1.typeoftypeof可以区分除null之外的原始数据类型(typeof null为object ,并不是说null是个对象,这是js存在已久的问题)typeof只能判断出functio原创 2020-08-10 17:06:15 · 203 阅读 · 0 评论 -
JS 什么是类数组
概念引入function test(){ console.log(arguments[0]); console.log(arguments); arguments.push(3)}test(1,2,4)arguments实参列表看着像是数组,能通过下标输出对应的数据,但数组能调用的方法它都不能调用,且其数据结构也和数组不同,实际上arguments是类数组类数组的组成部分类数组是可以当作数组来使用的对象索引(数字)属性,利用属性名(相当于数组下标)模拟数组的特性必须有len原创 2020-08-09 18:26:48 · 1617 阅读 · 0 评论 -
JS 数组的定义+常用方法
1111原创 2020-08-09 16:36:43 · 14389 阅读 · 0 评论 -
JS 对象的三种创建方法
11原创 2020-08-06 17:26:17 · 192 阅读 · 0 评论 -
JS对象的深浅拷贝
js对象的深浅拷贝原创 2020-08-05 23:40:24 · 2400 阅读 · 2 评论 -
JS 识别数组[]和对象{}(typeof 都为object)
例题:已知数组 [] 和对象 {} 的类型都是object现在给一个数据,这个数据可能是数组也可能是对象,怎么用机器来识别是数组还是对象?方法1:construtor方法2:instanceof方法3:toString+call原创 2020-08-04 10:46:07 · 1514 阅读 · 0 评论 -
JS sort()数组排序方法
java.util.Collection类的sort()方法 主要用来给数组拍排序 排序规则可以自己定 默认升序排序1.Arrays.sort(int[]数组名,int firstIndex起始下标,intlastIndex终止下标);2.Arrays.sort(int[]数组名);数组已初始化赋值3.Arrays.sort(int[]数组名,int firstIndex起始下标,intla...原创 2020-07-28 16:21:52 · 9808 阅读 · 2 评论 -
JS arguments的callee属性和func的caller属性
1.arguments.calleecallee是arguments(向函数传递的实参列表)的属性,callee指向该函数的引用(就是函数本身)function test(){ console.log(arguments.callee);}test()function test(){ console.log(arguments.callee == test);}test()在哪个函数里面的arguments就指向哪个函数的引用function test(){ console.原创 2020-06-28 23:58:23 · 563 阅读 · 0 评论 -
JS this在四个过程中的指向
1.函数预编译过程this --> window2.全局作用域里this --> window3.call/apply可以改变函数运行时this指向4.obj.func(); func()里面的this指向obj原创 2020-06-28 23:06:15 · 112 阅读 · 0 评论