front
前端
艾斯比的日常
简单,快乐,分享
展开
-
css 的 word-wrap word-break 区别
word-wrap, word-break 都是用来单词换行的word-break 表示如果容器剩余宽度不足单词的长度, 那么默认该单词会换行. 如果指定 break-all 那么表示, 单词会折行显示word-wrap 表示单个单词宽度如果超过容器宽度, 默认会横向超出容器. 如果指定 break-word 那么单词会折行显示习惯上, 推荐这两个都要设置* { word-break: break-all; overflow-wrap: break-word;}原创 2021-10-27 17:51:51 · 114 阅读 · 0 评论 -
js 如何获取下周一
let date = new Date();// 下周一date.setDate(date.getDate() + (1 + 7 - date.getDay()) % 7);原创 2021-10-11 00:36:28 · 953 阅读 · 0 评论 -
dom 上如何保存包含特殊字符的数据
背景有时我们想在 dom 上自定义属性加一些内容, 这些内容可能是一个 json 对象字符串, 里面很可能涉及双引号或者其他特殊字符串, 直接拼接到 dom 自定义属性里会有问题思路我们可以增加把数据内容 base64 编码再保存到节点自定义属性上, 避免出现特殊字符串的情况获取时, 再 base64 解码还原字符串内容即可...原创 2021-08-18 22:33:13 · 154 阅读 · 0 评论 -
css 伪类如何表示非
使用 :not() 表示非, 里面是选择器:not(class='abc')原创 2021-08-17 23:53:56 · 328 阅读 · 0 评论 -
jquery 如何判断元素是否隐藏
jquery 如何判断元素是否隐藏// true 表示隐藏, false 表示显示$('#username').is(':hidden')原创 2021-08-03 23:15:11 · 270 阅读 · 0 评论 -
jquery 如何查找自己的祖先元素
jQuery 使用 .parents(selector) 查找自己的祖先元素.总会查找出所有匹配的祖先元素这里举例, 查找 .parent 元素<div class="parent" data-msg="你好鸭2"> <div class="parent" data-msg="你好鸭3"> <div class="son"> <div class="grandson"></div> </div>原创 2021-07-27 00:30:09 · 524 阅读 · 0 评论 -
如何判断两个 jQuery 对象相同
使用 jQuery 提供的 is() 方法即可, 注意不能直接使用 === 判断, 即便是相同元素, 也是 false, 因为构造了两个 jQuery 对象 /* 判断元素是否相同, 使用 is() 方法 不能直接 === 判断, 其实不是同一份 jquery 对象 */ let container1 = $('.container') let container2 = $('.container')// false console.log(container1 =原创 2021-07-23 23:41:04 · 1266 阅读 · 0 评论 -
nodejs 的 require 查找逻辑
nodejs 的 require 查找逻辑先查找当前目录下, 是否有 node_modules 目录, 寻找模块如果没有, 则一直向上级目录查找 node_modules 目录, 再寻找模块原创 2021-07-10 22:46:20 · 232 阅读 · 0 评论 -
npx 命令作用
npx 是 node 内置的命令用于解决命令全局安装的问题即使用 npx 调用当前项目依赖版本的命令, 而不是总是使用全局的固定版本的命令会去当前项目的 node_modules/.bin 下找 webpack 命令npx webpack原创 2021-07-10 00:46:21 · 357 阅读 · 0 评论 -
常见的前端打包工具
gruntgulpwebpack原创 2021-07-08 21:02:37 · 2196 阅读 · 0 评论 -
npm 的 --save 和 --save-dev 区别
--save 表示应用在运行时依赖--save-dev 表示应用只在开发目的依赖例如安装 babel, 需要指定 --save-dev 即把代码从 es6 语法转为 es5 语法此时都是项目运行前的处理, 在项目真正运行在客户端浏览器上时, 就不再需要 babel 了...原创 2021-07-08 00:04:22 · 143 阅读 · 0 评论 -
commonjs 服务端实现
commonjs 每个文件都是单独的模块, 有自己的作用域在服务端执行一般选择 nodejs同步执行使用 module.exports 或者 exports 暴露模块使用 require 引入模块module1.jsmodule.exports = { msg: 'modules1', foo() { console.log(this.msg, '...') }}index.jslet module1 = require('./modules/module1')原创 2021-07-06 13:01:49 · 86 阅读 · 0 评论 -
es6 数组 扩展
es6 数组扩展Array.from 伪数组转数组Array.of 把多个元素构造为一个数组Array.prototype.find 获取匹配到的第一个元素, 没有则 undefinedArray.prototype.findIndex 获取匹配到的第一个元素的索引值, 没有则 false/* Array.from 伪数组转数组 Array.of(a, b, c) 将一组值转为数组 */ // 伪数组 let btns = document.getElementsBy原创 2021-07-04 14:08:00 · 73 阅读 · 0 评论 -
es6 number 扩展
es6 Number 对象扩展 /* 0b 二进制 0o 八进制 */ console.log(0b111) console.log(0o111) // 是否是有限大的数 console.log(Number.isFinite(1)); console.log(Number.isFinite(Infinity)); // 是否是 NaN. 注意 非数字直接返回 false console.log(Number.isNaN(NaN)); cons原创 2021-07-03 23:44:15 · 63 阅读 · 0 评论 -
js 中是否需要使用分号
如果换行了, 那么分号不是必要的推荐尽量不使用分号, 节省编码量特例: 有两种情况即便换行也需要分号, 否则报错小括号开头的语句, 前面需要分号中括号开头的语句, 前面需要分号 let age = 13// iife ;(function () { })() // Uncaught TypeError: Cannot read property '2' of undefined ;[1, 2].forEach((value, index) => { co原创 2021-07-02 00:16:48 · 871 阅读 · 0 评论 -
js 如何实现深拷贝
一般地, js 中的常见方法都是浅拷贝, 我们可以使用 JSON 的 api 实现深拷贝JSON.parse(JSON.stringify(obj))也可以使用下面的函数实现深拷贝本质是新创建数组或者对象属性. 避免原对象/数组修改后, 影响新对象/数组其中用到了递归function deepClone(target) { let dataType = getDataType(target) let result // 对象 if (dataType === '原创 2021-06-30 21:27:32 · 315 阅读 · 0 评论 -
js 的浅拷贝方式
浅拷贝即修改数据, 影响原对象浅拷贝方式基本数据类型赋值Object.assignArray.prototype.concatArray.prototype.slice let obj = {username: 'wj', age: 13} // 修改基本数据类型是浅拷贝 obj.username = 'wwj' console.log(obj); // Object.assign 和原有的对象是同一份 let obj2 = Object.assign(obj);原创 2021-06-29 23:35:31 · 159 阅读 · 0 评论 -
es6 字符串的扩展
includes 是否包含某字符串startsWith 以某字符串开头endsWith 以某字符串结尾repeat 重复 n 次 /* string includes 是否包含某字符串 startsWith 以某字符串开头 endsWith 以某字符串结尾 repeat 重复 n 次 */ let str = 'abc' console.log(str.includes('b')); console.log(str.startsWit.原创 2021-06-28 21:49:00 · 84 阅读 · 0 评论 -
es6 的 class
class 用于创建类, 类似于之前的构造函数// 旧版构造函数function Person() {}let person = new Person();使用 constructor 创建构造方法class Person() { constructor(name, age) { this.name = name; this.age = age; } showName() { console.log(this.name) }} let person = new P原创 2021-06-26 23:20:41 · 59 阅读 · 0 评论 -
es6 的 aysnc 函数
async 函数语法async function foo() { // foo2 异步执行完成后, 才会继续执行 foo3 的异步逻辑 // 通过 resolve() 可以传入实参, 之后会作为 wait 的返回值 let result = wait foo2(); wait foo3();}function foo2() { return new Promise(resolve => { // resolve('aaaaa')})}async 函数是 generato原创 2021-06-25 22:37:16 · 267 阅读 · 0 评论 -
es6 箭头函数语法
箭头函数语法 () => {}如果形参只有 1 个, 那么可以省略小括号如果函数语句只有一句, 那么可以省略大括号. 如果函数语句只有一句并且作为返回值, 那么还可以省略 return (注意 return 和 大括号需要同时省略才行)es6 箭头函数没有自己的 this, 在箭头函数内使用 this, 有两种情况箭头函数外面有普通函数, 那么箭头函数 this 和普通函数 的 this 相同箭头函数外面没有普通函数, 那么箭头函数 this 与 window 对象等效// 普通箭原创 2021-06-24 21:29:13 · 196 阅读 · 0 评论 -
es6 对象属性/方法简写
es6 对象属性 / 方法简写对象属性简写变量名会作为对象属性名 let username = 'wj' let age = 123 let obj5 = { username, age }对象方法简写原来是 foo: function(param1, param2) {}, es6 写法: foo(param1, param2) {} let obj5 = { getName() { return 'wj' } } co原创 2021-06-23 20:58:47 · 451 阅读 · 0 评论 -
es6 的变量解构赋值
解构赋值, 更简洁的获取对象属性值或数组元素值, 并且支持同时获取多个获取对象属性值与属性名对应的局部变量 // 获取对象属性值 let obj = {username: '你好', age: 39, gender: 1} let {username, age} = obj; console.log(username, age);获取数组元素值与元素索引值对应的局部变量如果要跳过前面的元素, 使用逗号进行占位 let arr = [1, 3, 'abc', true] le原创 2021-06-22 22:24:13 · 71 阅读 · 0 评论 -
ES5 的 Array 新增方法
indexoOf 返回第一个匹配元素的索引值lastIndexOf 返回最后一个匹配元素的索引值map 映射每个元素为新的元素. 返回值是这些新元素组成的新数组filter 过滤元素, 保留 true 的元素, 返回新数组 let arr = [1, 2, 3, 3, 4, 5, ] console.log(arr.indexOf(3)); console.log(arr.lastIndexOf(3)); arr.forEach((value, index, arr.原创 2021-06-20 23:17:56 · 109 阅读 · 0 评论 -
ES5 的 Object.create 方法
Object.create 使用现有的对象来提供新创建的对象的__proto__let obj = { username: 'wj' } let obj3 = Object.create(obj, { // 添加属性 sex: { value: '男', // 默认是只读的, 这里指定为可写 writable: true, // 默认不允许删除, 这里指定为可删除 configurable: true,原创 2021-06-20 00:40:29 · 191 阅读 · 0 评论 -
css 内联元素浮动
css 内联元素浮动后, 会转为块元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>内联元素浮动</title> <style> a { float: left; width: 100px; border: 1px solid black; } </styl原创 2021-06-18 00:31:45 · 235 阅读 · 0 评论 -
CSS 外边距折叠如何解决
子元素和父元素视觉贴着时, 设置子元素 margin-top, 那么实际效果是父元素级的 margin-top, 而子元素和父元素仍然贴在一起解决: 设置父元素 before 伪类, display: table; content: '';<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <sty原创 2021-06-16 23:34:42 · 184 阅读 · 0 评论 -
css spirit 雪碧图介绍
css spirit 雪碧图是一种图片技术, 把所有小图标都合并到同一图片文件里, 这样前端请求图片时, 节省 http 请求次数和请求内容大小.前端利用设置宽高, 指定 background-position 实现显示指定小图标原创 2021-06-16 00:14:57 · 188 阅读 · 0 评论 -
css 的 opacity 属性
opacity 用于指定元素透明度, 支持 0~1 之间的小数.默认值 1-完全不透明, 0-完全透明<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>opacity</title> <style> /* opacity 默认 1, 完全不透明 0 完全透明原创 2021-06-14 21:52:36 · 6446 阅读 · 0 评论 -
css 清除浮动的方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box31 { border: 10px greenyellow solid; } .clear-fix:after { /* https://develop.原创 2021-06-13 12:37:58 · 65 阅读 · 0 评论 -
css 实现简单导航栏
css 实现简单导航栏注意点设置 ul 的 list-style:none; 去掉左边圆点li 浮动 float: left; 使所有 li 都在同一行父元素 ul 设置 overflow:hidden; 避免由于子元素浮动, 导致父元素高度塌陷a 元素设置 text-decoration: none; 去掉下划线样式设置 a 元素为块元素 display: block; 才能设置其宽度<!DOCTYPE html><html lang="en"><hea原创 2021-06-12 21:44:19 · 574 阅读 · 0 评论 -
css 浮动导致的父元素高度塌陷
css 子元素设置浮动后, 父元素高度不会被子元素撑开, 导致父元素高度塌陷我们可以设置父元素 overflow: hidden; 来解决<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 高度塌陷 默认情况下子元素撑开父元素原创 2021-06-11 23:25:21 · 155 阅读 · 0 评论 -
css 的 float 属性
float 属性表示浮动, 会脱离文档流 /* 浮动元素不会挡住文字 */ .box1 { width: 100px; height: 100px; /* 向左浮动 */ float: left; background-color: #01AAED; } p { background-color: #BDEBEE; }<div class="box1">&l原创 2021-06-10 23:14:38 · 88 阅读 · 0 评论 -
display: none 和 visibility: hidden 区别
display: none 和 visibility: hidden 都可以用于隐藏元素display: none 不再占用原有空间, visibility: hidden 仍然占用原有空间原创 2021-06-10 00:50:12 · 54 阅读 · 0 评论 -
css 的行高 line-height 属性
line-height 属性有 3 种单位px 像素, 例如 20px% 百分比, 例如 150%, 表示是字体大小的 150% 普通数值, 例如 1.5, 表示行高是字体大小的 1.5 倍行间距 = 行高 - 字体大小.p1 { font-size: 20px; line-height: 40px; } .p2 { font-size: 20px; line-height: 2; } .p3 { fo原创 2021-06-09 00:10:19 · 1036 阅读 · 0 评论 -
a 元素的 css 伪类顺序
a 元素的 css 伪类需要遵守顺序, 否则会有问题 /* a 伪类声明务必遵守顺序, 否则会有问题 l v h a */ /*普通*/ a:link { color: red; } /*访问过*/ a:visited { color: #6cb31d; } /*悬浮*/ a:hover { color: gold; } /*点击不松手*/ a:act原创 2021-06-07 21:50:41 · 130 阅读 · 0 评论 -
html 如何设置访问页面自动重定向到新页面
在 head 元素中加入 meta 属性这里举例, 自动跳转到百度首页<html><head> <!--0s 后, 重定向到百度--> <meta http-equiv="refresh" content="0;url=https://www.baidu.com"> </head> <body> </body> </html>...原创 2021-06-06 22:09:07 · 974 阅读 · 0 评论 -
js 操作元素的 class 属性
使用 js 可以操作元素的 class 属性 /* https://developer.mozilla.org/zh-CN/docs/web/api/element/classlist */ let p = document.querySelector('p') // 重新赋值 class 属性 p.className = 'class3' // 如果 class33 类值已存在, 则移除它, 否则添加它 p.classList.toggle("class33");原创 2021-06-05 20:12:54 · 1192 阅读 · 0 评论 -
js 的 json 对象
js 有内置的 JSON 对象, 可以解析字符串为对象, 或者把对象转为 json 字符串 /* json 字符串 key 务必是双引号包裹, 否则解析报错 value 支持 字符串 / 数字 / null / 对象 / 数组 / boolean JSON.parse 解析 json 字符串 JSON.stringify 把 json 对象转为 json 字符串 */ let jsonStr = '{ "username": "wj", "pwd原创 2021-06-04 22:45:20 · 128 阅读 · 0 评论 -
js 如何设置定时执行函数
js 使用 setInterval 函数实现定时执行函数功能clearInterval 函数停止某个 setInterval 函数的定时<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><span class="time"></span原创 2021-06-04 22:07:33 · 2885 阅读 · 0 评论