js
Feolu
这个作者很懒,什么都没留下…
展开
-
moment 获取指定时间零点或23:59
moment 获取指定时间零点或23:59原创 2022-07-04 14:57:20 · 3360 阅读 · 0 评论 -
前端性能优化
个人学习总结:从html、css、js、网络请求等方面入手HTML浏览器渲染顺序使用link引入外部css(避免闪屏,提高用户体验)css放在head中(加快浏览器解析,html解析器和css解析器可以同时工作)style放在html文档底部,或者使用defer(要放在css文件后,因为JS可以操作dom和sss)body中间尽量不写style标签和script标签CSS提取公共样式避免多层嵌套选择器使用transform代替对left,top的操作压缩CSS文件的体积(加快网络原创 2021-06-01 21:28:09 · 104 阅读 · 0 评论 -
history对象
window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。back() 可以后退功能forward() 前进功能go(参数) 前进后退功能 参数如果是1,前进1个页面,如果是**-1**,后退1个页面...原创 2021-03-04 09:27:32 · 135 阅读 · 1 评论 -
DOM navigator对象
navigator对象包含有关浏览器的信息,它有很多属性,最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。navigator属性navigator属性及方法介绍地址举例用PC端打开京东模拟手机打开京东前端代码判断用户哪个终端打开页面,实现跳转,解决在PC端和手机端显示不同页面布局的一种方式。if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Andr原创 2021-03-04 09:13:47 · 170 阅读 · 0 评论 -
BOM location对象
location对象的属性location.href :获取或者设置整个URLlocation.host:返回主机名(域名)location.port:返回端口号,如果未写,返回空字符串location.pathname:返回路径location.search:返回参数location.hash:返回片段 #后面内容 常见于链接、锚点...原创 2021-02-26 08:50:28 · 135 阅读 · 0 评论 -
JS执行机制
JS支持同步和异步问题引出 <script> console.log(1); setTimeout(() => { console.log(3); }, 0); console.log(2); </script>以上代码执行结果是什么呢?答案是 1 2 3原理解释JS执行时分同步任务和异步任务同步任务:在主线程上执行,形成一个执行栈异步任务:通过回调函数实现,JS执行时相关回调函数会被放原创 2021-02-21 18:25:16 · 95 阅读 · 0 评论 -
JS中this的指向问题
一般情况下,谁调用了当前函数,this就指向谁定时器里的this指向window构造函数里的this 指向实例对象原创 2021-02-21 18:03:12 · 84 阅读 · 0 评论 -
JS倒计时--发送短信案例
代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>发送短信案例</title> </head> <body> &l原创 2021-02-21 17:55:32 · 305 阅读 · 0 评论 -
JS实现倒计时效果
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>倒计时效果</title> <style> div { wid原创 2021-02-21 17:09:06 · 1258 阅读 · 0 评论 -
事件高级(DOM)
注册事件(绑定事件)给元素添加事件,称为注册事件或者绑定事件注册事件有两种方式:传统方式和方法监听注册方式传统方式利用on开头的事件btn.onclick = function() {}特点:注册事件的唯一性同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数 <button>传统方式</button> <button>方法监听注册方式</button> <script> var原创 2021-02-21 14:02:39 · 201 阅读 · 0 评论 -
注册事件兼容性解决方案
兼容性处理的原则:首先照顾大多数浏览器,再处理特殊浏览器function addEventListener(element, eventName, fn) { // 判断当前浏览器是否支持 addEventListener 方法 if (element.addEventListener) { element.addEventListener(eventName, fn) // 第三个参数 默认是false }else if (element.attach原创 2021-02-20 15:13:42 · 157 阅读 · 0 评论 -
DOM文档对象模型(重点核心内容)
DOM (Document Object Model) 文档对象模型,是W3C组织推荐的处理可扩展标记语言的标准编程接口DOM树文档: 一个页面就是一个文档,DOM中使用document表示元素:页面中的所有标签都是元素,DOM中使用element表示节点:网页中所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示DOM把以上内容都看做是对象获取元素通过ID获取document.getElementById(‘id’)通过标签名document.getElement原创 2021-02-19 18:30:13 · 200 阅读 · 0 评论 -
js三种动态创建元素的区别
document.write()element.innerHTMLdocument.createElement()区别document.write 是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘,简单知道即可,使用的很少。innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘,创建多个元素效率更高(采用数组形式拼接,而不是字符串形式拼接),结构稍微复杂createElement()创建多个元素效率比innerHTML字符串形式高,比innerHTML数.原创 2021-02-19 18:26:26 · 115 阅读 · 0 评论 -
html 阻止a标签链接跳转
阻止链接跳转需要添加javascript:void(0)或者javascript:; <a href="javascript:;"></a> <a href="javascript:void(0)"></a>原创 2021-02-19 16:36:47 · 885 阅读 · 0 评论 -
js创建节点、添加节点
创建节点:document.createElement("li")在后面添加节点:node.appendChild(child) node父级 child 子级在前面添加节点:node.insertBefore(child,指定元素) node父级 child 子级 <body> <ul> <li>123</li> </ul> <script> var ul = document.q原创 2021-02-18 22:22:44 · 4262 阅读 · 0 评论 -
纯JS实现checkbox全选和取消全选
思路:获取全选按钮及其他按钮组全选和取消全选 按钮组的选中状态同全选按钮设置一个flag变量,全选按钮的状态为flag 。点击一个按钮时遍历按钮组中所有的按钮状态,按钮组中有一个为未被选中状态,flag = false .反之 flag = true全部代码 <body> <div> <label for="">全选</label> <input type="checkbox" name="" id="ch原创 2021-02-18 18:57:42 · 857 阅读 · 0 评论 -
纯js案例 --鼠标移入表格某一行变色
CSS代码 table,td { border: 1px solid #ccc; } td { width: 100px; } .bg { background-color: pink; }HTML代码<table cellspacing = 0> <thead> <tr> <td>序号</td> <td&g原创 2021-02-18 16:03:17 · 693 阅读 · 0 评论 -
JS内置对象
定义内置对象:指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)Math数学对象Math数学对象不是一个构造函数,所以不需要new来调用,而是直接使用里面的属性和方法即可。Math.max() // 返回 -Infinity封装自己的Math对象 var myMath = { PI: 3.141592653, max: function() { var max = arguments[0]原创 2021-02-15 20:58:11 · 123 阅读 · 0 评论 -
JS对象
JS数据类型String 字符串Number 数值Boolean 布尔值Null 空值Undefined 未定义以上五种属于基本数据类型,除此之外都是对象Object 对象对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性对象的分类内置对象由ES标准中定义的对象,在任何的ES的实现中都可以使用,比如:Math String Numver 等宿主对象由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象。比如:BOM DOM自定义对象由开原创 2021-02-09 19:55:03 · 83 阅读 · 0 评论 -
JS作用域、预解析
概念Javascript作用域 就是代码名字(变量)在某个范围内起作用和效果 目的是为了提高程序的可靠性更重要的是减少命名冲突全局作用域:整个script标签,或者是一个单独的js文件局部作用域:在函数内部就是局部作用域,这个代码的名字只是在函数内部起作用和效果。变量的作用域定义全局变量:在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)全局变量在代码的任何位置都可以使用2.特殊情况下,在函数内不使用var声明的变量也是全局变量(不建议使用)局部变量:在局部作用域下原创 2021-02-06 19:56:39 · 122 阅读 · 0 评论