TwinkleG

2021年8月11日

1. 原理：（1）获取需要添加动画的元素（2）为此元素设置一个定时器（3）动画效果代码书写（4）当达到某种条件后，取消定时器实例：一个方块盒子左移到一定位置停止. <style> .box { position: absolute; left: 50px; margin-top: 30px Read More

posted @ 2021-08-11 15:32 TwinkleG Views(310) Comments(0) Diggs(0)

mouseover 和 mouseenter 【鼠标经过】区别

1. mouseover 可以事件冒泡，因此若父盒子添加事件，父盒子内有一个子盒子，则鼠标经过子盒子也会触发事件 2. mouseenter 不可以事件冒泡，因此在经过子盒子时不会触发事件，搭配 mouseleave 使用【同样不会冒泡的鼠标离开事件】 Read More

posted @ 2021-08-11 14:59 TwinkleG Views(94) Comments(0) Diggs(0)

2021年8月10日

JavaScript offset 和 style 的区别

1. offset 系列属性简介 element.offsetWidth ：获取自身元素的宽度【padding + border + width】 element.offsetHeight ：获取自身元素的高度【padding + border + height】 element.offsetL Read More

posted @ 2021-08-10 15:27 TwinkleG Views(319) Comments(0) Diggs(0)

ES6 String 扩展方法

1. startswith() 方法，判断字符串是否以...开头 endswith() 方法，判断字符串是否以...结尾还可以有第二个参数，表示position，从指定位置开始判断 let str = "Hello Webpack, nice to meet u"; console.log(str Read More

posted @ 2021-08-10 14:34 TwinkleG Views(50) Comments(0) Diggs(0)

Array 扩展方法

1. find()方法 find()方法查找数组中符合条件的第一个元素，并将其返回；若未查找到，则返回undefined. let arr = [{ id: 1, name: "James" }, { id: 2, name: "Messy" }, { id: 3, name: "Messy" }] Read More

posted @ 2021-08-10 14:22 TwinkleG Views(61) Comments(0) Diggs(0)

ES6 扩展运算符

1. 扩展运算符可以将数组拆分成以逗号分隔的序列 let arr = ['blue', 'pink', 'green']; ...arr // blue, pink, green console.log(...arr); // blue pink green 联想到 join() 方法 consol Read More

posted @ 2021-08-10 14:09 TwinkleG Views(216) Comments(0) Diggs(0)

2021年8月9日

ES6 解构赋值和剩余参数

1. 解构分为解构数组和解构对象参考 https://www.runoob.com/w3cnote/deconstruction-assignment.html 【仅作为个人学习转载记录】 2. 结合剩余参数代码示例： // 解构数组 let arr = ['blue', 'pink', 'g Read More

posted @ 2021-08-09 17:43 TwinkleG Views(241) Comments(0) Diggs(0)

ES6 箭头函数中this指向问题

【this一般指向自身所处函数的调用者】箭头函数自身不具备this，箭头函数中的this等于定义箭头函数位置的this let obj = { name: "James" }; function funcThisTest() { console.log(this); return function Read More

posted @ 2021-08-09 17:18 TwinkleG Views(60) Comments(0) Diggs(0)

ES6 箭头函数

1. 若函数体只有一句代码，且代码执行结果为返回值，则函数体大括号以及return可省略正常函数形式： let normal_func = function (num1, num2) { return num1 + num2; }; 使用箭头函数形式： let arrow_func = (num1 Read More

posted @ 2021-08-09 17:10 TwinkleG Views(53) Comments(0) Diggs(0)

ES6 let关键字

let的特性：【ES6是指ES2015以及之后的更新版本，即ES2016、ES2017......】 1. 具有块级作用域 if (true) { var num = 10; console.log(num); // 10 } console.log(num); // 'num' is not d Read More

posted @ 2021-08-09 16:35 TwinkleG Views(80) Comments(0) Diggs(0)

公告