![](https://img-blog.csdnimg.cn/2019092715111047.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
JavaScript
liun_n
这个作者很懒,什么都没留下…
展开
-
JavaScript 防抖、节流:限制事件回调函数的调用次数
因为 JS 中的一些事件会不断的调用事件绑定的回调函数,降低性能,为了优化体验,需要对这类事件进行调用次数的限制。防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。节流 :在触发事件的n秒后会执行一次回调,在n秒内再触发事件的话不会执行回调。固定时间间隔执行。原创 2021-12-16 20:30:00 · 1852 阅读 · 1 评论 -
JavaScript 事件处理程序
HTML 事件处理程序、DOM0级处理事件程序、DOM2级处理事件程序...DOM0级处理事件程序就是将一个函数赋值给一个事件处理程序属性,可以认为是元素的方法,在这个事件处理程序的作用域中,可以用this访问到该元素的任何方法和属性。DOM2级事件处理程序定义了两个方法:`addEventListener()`和`removeEventListener()`,所有DOM节点都包含这两个方法。原创 2021-12-14 21:07:31 · 806 阅读 · 0 评论 -
JavaScript 事件流(事件捕获、事件冒泡)
事件流即页面接受事件的顺序: ``捕获阶段 => 目标阶段 => 冒泡阶段``。事件捕获认为某个事件发生时,父元素最先接收到事件,目标元素(事件发生所在的节点)最后接收到事件。事件冒泡认为事件发生时,目标元素先接受到事件,再逐级传播到父元素。原创 2021-12-14 21:03:51 · 1508 阅读 · 0 评论 -
ES6 新增的主要特性
let、const;模板字符串;箭头函数;函数参数默认值;扩展字符串...原创 2021-11-28 23:38:37 · 509 阅读 · 0 评论 -
清除父节点中所有子节点的三种方法
1.innerHTMLNode.innerHTML = ""将Node节点的innerHTML置为空,就清空了Node节点innerHTML 是一个字符串,用来设置或获取位于对象起始和结束标签内的HTML2.remove() + 循环获取Node节点里的第一个子节点,子节点调用remove()删除自己,循环执行直到Node没有子节点。while(Node.firstChild){ Node.firstChild.remove()}3.removeChild() + 循环获取No原创 2021-11-18 23:31:50 · 5642 阅读 · 1 评论 -
ES5中的类
1.简单示例function Person(){ this.name = "lily"}let p = new Person()console.log(p.name);2.构造函数和原型链里面增加方法原型链上的属性会被多个实例共享,构造函数不会??function Person(str){ this.name = "lily" this.sleep = function(){ return `${this.name}在睡觉` }}let p = new Perso原创 2021-11-10 09:58:10 · 277 阅读 · 0 评论 -
JS事件对象属性e.target、e.currentTarget和this
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。如下图,给 ul 绑定点击事件,然后点击其中某个 li,输出当前的 e.target、e.currentTargete.target 获取的是实际点击的元素e.currentTarget 获取的是绑定点击事件的元素事件中的this也是指向当前绑定事件的元素,所以:e.currentTarge === this是一定的,而e.target===this不一定...原创 2021-11-09 23:59:28 · 2740 阅读 · 0 评论 -
HTML5 本地存储 localStroage、sessionStroage
在HTML5中,本地存储是window的属性,包括localStorage和sessionStorage,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)。localStroage和sessionStroage相同点:都用于在浏览器中以key-value对形式存储数据。存储大小都约为 5M都只能存储字符串类型的对象不同点:localStroage:永久性存储,数据永远保留,除非主动删除sessionStroage:会话型存储,临时保存窗口数据,在关闭原创 2021-11-09 23:59:01 · 283 阅读 · 0 评论 -
输入框聚焦以及判断输入框是否聚焦
<input id="input"></input>使输入框聚焦:document.getElementById('#input').focus()判断输入框是否聚焦:if( document.getElementById('#input')==document.activeElement ){ // 聚焦状态}原创 2021-11-09 23:58:46 · 4123 阅读 · 0 评论 -
jsonp 解决跨域
创建index.html,因为<script>、<img>、<iframe>、<link>标签不受同源策略的限制,所以通过生成 script 标签,然后给标签的 src 属性设置为请求接口地址的方法来请求数据但是由于浏览器 CORB 策略,必须通过请求接口的回调函数获取到数据,因此需要在请求地址后加上后台规定的 jsonp 请求参数名和前端定义的回调函数名,并且前端写一个同名函数,函数参数即为请求的响应数据?jsonpCallback(后台规定)= c.原创 2021-10-23 12:39:46 · 156 阅读 · 0 评论 -
CORS解决跨域
准备工作:创建 server.js 文件,使用 node.js 写一个简单的接口,并运行服务创建一个 index.html 页面,页面内使用 fetch 请求上面写的接口(http:127.0.0.1:8000/api/data),获取数据并输出到控制台创建 client.js 文件,使用 node.js 开启一个本地服务器,部署index.html代码:server.jsconst http = require('http');const PORT = 8000;http.creat原创 2021-10-23 11:08:17 · 204 阅读 · 0 评论 -
JavaScript 声明数组
声明数组1.数组字面量let arr1 = [] //[]let arr2 = [1,2,3] //[1,2,3]2.Array 构造函数let arr3 = new Array() //[]let arr4 = new Array(3) //[,,]let arr5 = new Array(1,2,3) //[1,2,3]let arr5 = new Array(3).fill(true) //[true,true,true]如果参数传一个正整数n,则会创建原创 2021-09-15 19:12:36 · 4512 阅读 · 0 评论 -
getElementsByclassName与querySelectorAll的对比
getElementByclassName与querySelectorAll的对比<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i原创 2021-08-30 13:02:04 · 244 阅读 · 0 评论 -
原生JS操作class属性
原生JS操作class属性1. classListElement.classList: DOMTokenList通过classList获取元素的class属性值,使用以下方法操作class值方法:add(className:String) 添加一个class值remove(className:String)删除一个class值replace(oldclassName: string, newclassName: string) 将一个class属性替换为另外一个contains(cla原创 2021-08-27 13:25:06 · 3745 阅读 · 0 评论 -
原生JS操作DOM常用方法
原生JS操作DOM常用方法获取节点:document.getElementById(elementId: string)通过元素id属性来获取元素,返回值:一个元素对象document.getElementsByClassName(className: string)通过元素class属性来获取元素,返回值:一个元素对象数组document.getElementsByTagName(TagName: string)通过元素标签来获取元素,返回值:一个元素对象数组document.query原创 2021-08-27 13:23:13 · 510 阅读 · 0 评论