技术标签: # JavaScript学习记录
目录
目录
- BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
- BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
- BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。
DOM
- 文档对象模型
- DOM 就是把「文档」当做一个「对象」来看待
- DOM 的顶级对象是 document
- DOM 主要学习的是操作页面元素
- DOM 是 W3C 标准规范
BOM
- 浏览器对象模型
- 把「浏览器」当做一个「对象」来看待
- BOM 的顶级对象是 window
- BOM 学习的是浏览器窗口交互的一些对象
- BOM 是浏览器厂商在各自浏览器上定义的,兼容性较差
- window 对象是浏览器的顶级对象,它具有双重角色。
- 它是 JS 访问浏览器窗口的一个接口。
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
- 在调用的时候可以省略 window,前面学习的对话框都属于 window 对象方法,如 alert()、prompt() 等。
- 注意:window下的一个特殊属性 window.name
window.onload = function(){} 或者 window.addEventListener("load",function(){});
- window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
- 注意:
- 有了 window.onload 就可以把 JS 代码写到页面元素的上方,因为 onload 是等页面内容全部加载完毕,再去执行处理函数。
- window.onload 传统注册事件方式 只能写一次,如果有多个,会以最后一个 window.onload 为准。
- 如果使用 addEventListener 则没有限制
document.addEventListener('DOMContentLoaded',function(){})
- DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。
- Ie9以上才支持
- 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现,必然影响用户的体验,此时用 DOMContentLoaded 事件比较合适。
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> window.addEventListener('load', function() { var btn = document.querySelector('button'); btn.addEventListener('click', function() { alert('点击我'); }) }) window.addEventListener('load', function() { alert(22); }) document.addEventListener('DOMContentLoaded', function() { alert(33); }) // load 等页面内容全部加载完毕,包含页面dom元素 图片 flash css 等等 // DOMContentLoaded 是DOM 加载完毕,不包含图片 falsh css 等就可以执行 加载速度比 load更快一些 </script> </head> <body> <button>点击</button> </body> </html>
window.onresize = function(){} window.addEventListener("resize",function(){});
- window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
- 注意:
- 只要窗口大小发生像素变化,就会触发这个事件。
- 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <script> window.addEventListener('load', function() { var div = document.querySelector('div'); window.addEventListener('resize', function() { console.log(window.innerWidth); console.log('变化了'); if (window.innerWidth <= 800) { div.style.display = 'none'; } else { div.style.display = 'block'; } }) }) </script> <div></div> </body> </html>
window.setTimeout(调用函数, [延迟的毫秒数]);
- setTimeout() 方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。
- 注意:
- window 可以省略。
- 这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
- 延迟的毫秒数省略默认是 0,如果写,必须是毫秒。
- 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符
案例
<script> // 1. setTimeout // 语法规范: window.setTimeout(调用函数, 延时时间); // 1. 这个window在调用的时候可以省略 // 2. 这个延时时间单位是毫秒 但是可以省略,如果省略默认的是0 // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()' // 4. 页面中可能有很多的定时器,我们经常给定时器加标识符 (名字) // setTimeout(function() { // console.log('时间到了'); // }, 2000); function callback() { console.log('爆炸了'); } var timer1 = setTimeout(callback, 3000); var timer2 = setTimeout(callback, 5000); // setTimeout('callback()', 3000); // 不提倡这个写法 </script>
回调函数介绍
window.setTimeout(调用函数, [延迟的毫秒数]);
- setTimeout() 这个调用函数我们也称为回调函数 callback
- 普通函数是按照代码顺序直接调用。
- 而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数。
- 简单理解: 回调,就是回头调用的意思。上一件事干完,再回头再调用这个函数。
- 以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的 函数也是回调函数。
- 案例分析
① 核心思路:5秒之后,就把这个广告隐藏起来 ② 用定时器setTimeou
<body> <img src="images/ad.jpg" alt="" class="ad"> <script> var ad = document.querySelector('.ad'); setTimeout(function() { ad.style.display = 'none'; }, 5000); </script> </body>
window.clearTimeout(timeoutID)
- clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。
- 注意:
- window 可以省略。
- 里面的参数就是定时器的标识符 。
案例
<body> <button>点击停止定时器</button> <script> var btn = document.querySelector('button'); var timer = setTimeout(function() { console.log('爆炸了'); }, 5000); btn.addEventListener('click', function() { clearTimeout(timer); }) </script> </body>
window.setInterval(回调函数, [间隔的毫秒数]);
- setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。
- 注意:
- window 可以省略。
- 这个调用函数可以直接写函数,或者写函数名或者采取字符串 '函数名()' 三种形式。
- 间隔的毫秒数省略默认是 0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。
- 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
- 第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次。
案例
<body> <script> // 1. setInterval // 语法规范: window.setInterval(调用函数, 延时时间); setInterval(function() { console.log('继续输出'); }, 1000); // 2. setTimeout 延时时间到了,就去调用这个回调函数,只调用一次 就结束了这个定时器 // 3. setInterval 每隔这个延时时间,就去调用这个回调函数,会调用很多次,重复调用这个函数 </script> </body>
案例分析
① 这个倒计时是不断变化的,因此需要定时器来自动变化(setInterval) ② 三个黑色盒子里面分别存放时分秒 ③ 三个黑色盒子利用innerHTML 放入计算的小时分钟秒数 ④ 第一次执行也是间隔毫秒数,因此刚刷新页面会有空白 ⑤ 最好采取封装函数的方式, 这样可以先调用一次这个函数,防止刚开始刷新页面有空白问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { margin: 200px; } span { display: inline-block; width: 40px; height: 40px; background-color: #333; font-size: 20px; color: #fff; text-align: center; line-height: 40px; } </style> </head> <body> <div> <span class="hour">1</span> <span class="minute">2</span> <span class="second">3</span> </div> <script> // 1. 获取元素 var hour = document.querySelector('.hour'); // 小时的黑色盒子 var minute = document.querySelector('.minute'); // 分钟的黑色盒子 var second = document.querySelector('.second'); // 秒数的黑色盒子 var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数 countDown(); // 我们先调用一次这个函数,防止第一次刷新页面有空白 // 2. 开启定时器 setInterval(countDown, 1000); function countDown() { var nowTime = +new Date(); // 返回的是当前时间总的毫秒数 var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 var h = parseInt(times / 60 / 60 % 24); //时 h = h < 10 ? '0' + h : h; hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子 var m = parseInt(times / 60 % 60); // 分 m = m < 10 ? '0' + m : m; minute.innerHTML = m; var s = parseInt(times % 60); // 当前的秒 s = s < 10 ? '0' + s : s; second.innerHTML = s; } </script> </body> </html
window.clearInterval(intervalID);
- 注意:
- window 可以省略。
- 里面的参数就是定时器的标识符 。
案例
<body> <button class="begin">开启定时器</button> <button class="stop">停止定时器</button> <script> var begin = document.querySelector('.begin'); var stop = document.querySelector('.stop'); var timer = null; // 全局变量 null是一个空对象 begin.addEventListener('click', function() { timer = setInterval(function() { console.log('ni hao ma'); }, 1000); }) stop.addEventListener('click', function() { clearInterval(timer); }) </script> </body>
- 点击按钮后,该按钮60秒之内不能再次点击,防止重复发送短信
案例解析
① 按钮点击之后,会禁用 disabled 为true ② 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改 ③ 里面秒数是有变化的,因此需要用到定时器 ④ 定义一个变量,在定时器里面,不断递减 ⑤ 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> 手机号码: <input type="number"> <button>发送</button> <script> // 按钮点击之后,会禁用 disabled 为true // 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改 // 里面秒数是有变化的,因此需要用到定时器 // 定义一个变量,在定时器里面,不断递减 // 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态 var btn = document.querySelector('button'); var time = 3; // 定义剩下的秒数 btn.addEventListener('click', function() { btn.disabled = true; var timer = setInterval(function() { if (time == 0) { // 清除定时器和复原按钮 clearInterval(timer); btn.disabled = false; btn.innerHTML = '发送'; } else { btn.innerHTML = '还剩下' + time + '秒'; time--; } }, 1000); }) </script> </body> </html>
- this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁
- 一般情况下this的最终指向的是那个调用它的对象
- 先了解一下几个this指向
- 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
- 方法调用中谁调用this指向谁
- 构造函数中this指向构造函数的实例
案例
<body> <button>点击</button> <script> // this 指向问题 一般情况下this的最终指向的是那个调用它的对象 // 1. 全局作用域或者普通函数中this指向全局对象window( 注意定时器里面的this指向window) console.log(this); function fn() { console.log(this); } window.fn(); window.setTimeout(function() { console.log(this); }, 1000); // 2. 方法调用中谁调用this指向谁 var o = { sayHi: function() { console.log(this); // this指向的是 o 这个对象 } } o.sayHi(); var btn = document.querySelector('button'); // btn.onclick = function() { // console.log(this); // this指向的是btn这个按钮对象 // } btn.addEventListener('click', function() { console.log(this); // this指向的是btn这个按钮对象 }) // 3. 构造函数中this指向构造函数的实例 function Fun() { console.log(this); // this 指向的是fun 实例对象 } var fun = new Fun(); </script> </body>
- JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。
- 这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之后再删除。
- 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。
- 这样所导致的问题是: 如果JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
案例
console.log(1); setTimeout(function () { console.log(3); }, 1000); console.log(2);
- 输出:1 2 3
- 为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程。于是,JS 中出现了同步和异步
同步 前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做 法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。 异步 你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做 饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。
- 他们的本质区别: 这条流水线上各个流程的执行顺序不同。
案例
console.log(1); setTimeout(function () { console.log(3); }, 0); console.log(2);
- 输出: 1 2 3
同步任务 同步任务都在 主线程 上执行,形成一个 执行栈。 异步任务
- JS 的异步是通过回调函数实现的。
- 一般而言,异步任务有以下三种类型:
- 普通事件,如 click、resize 等
- 资源加载,如 load、error 等
- 定时器,包括 setInterval、setTimeout 等
- 异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。
- 先执行执行栈中的同步任务。
- 遇到异步任务(回调函数)就放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
- 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop)。
- window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL 。 因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象。
- 统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。
- 互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
- URL 的一般语法格式为:
protocol://host[:port]/path/[?query]#fragment http://www.itcast.cn/index.html?name=andy&age=18#link
- location 对象的属性
- 重点记住: href 和 search
- 案例分析
① 利用定时器做倒计时效果 ② 时间到了,就跳转页面。 使用 location.href
<body> <button>点击</button> <div></div> <script> var btn = document.querySelector('button'); var div = document.querySelector('div'); btn.addEventListener('click', function() { // console.log(location.href); location.href = 'http://www.itcast.cn'; }) var timer = 5; setInterval(function() { if (timer == 0) { location.href = 'http://www.itcast.cn'; } else { div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页'; timer--; } }, 1000); </script> </body>
- 案例分析
① 第一个登录页面,里面有提交表单, action 提交到 index.html页面 ② 第二个页面,可以使用第一个页面的参数,这样实现了一个数据不同页面之间的传递效果 ③ 第二个页面之所以可以使用第一个页面的数据,是利用了URL 里面的 location.search参数 ④ 在第二个页面中,需要把这个参数提取。 ⑤ 第一步去掉? 利用 substr ⑥ 第二步 利用=号分割 键 和 值 split(‘=‘) ⑦ 第一个数组就是键 第二个数组就是值
- login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form action="index.html"> 用户名: <input type="text" name="uname"> <input type="submit" value="登录"> </form> </body> </html>
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div></div> <script> console.log(location.search); // ?uname=andy // 1.先去掉? substr('起始的位置',截取几个字符); var params = location.search.substr(1); // uname=andy console.log(params); // 2. 利用=把字符串分割为数组 split('='); var arr = params.split('='); console.log(arr); // ["uname", "ANDY"] var div = document.querySelector('div'); // 3.把数据写入div中 div.innerHTML = arr[1] + '欢迎您'; </script> </body> </html>
案例
<body> <button>点击</button> <script> var btn = document.querySelector('button'); btn.addEventListener('click', function() { // 记录浏览历史,所以可以实现后退功能 // location.assign('http://www.itcast.cn'); // 不记录浏览历史,所以不可以实现后退功能 // location.replace('http://www.itcast.cn'); location.reload(true); }) </script> </body>
- navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值。
- 下面前端代码可以判断用户那个终端打开页面,实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android| Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS |Symbian|Windows Phone)/i))) { window.location.href = ""; //手机 } else { window.location.href = ""; //电脑 }
- window 对象给我们提供了一个 history 对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的 URL。
案例
<body> <a href="list.html">点击我去往列表页</a> <button>前进</button> <script> var btn = document.querySelector('button'); btn.addEventListener('click', function() { // history.forward(); history.go(1); }) </script> </body>
<body> <a href="index.html">点击我去往首页</a> <button>后退</button> <script> var btn = document.querySelector('button'); btn.addEventListener('click', function() { // history.back(); history.go(-1); }) </script> </body>
文章浏览阅读651次。Apriori算法是一种用于关联规则挖掘的代表性算法,主要任务是用于发现事务之间的内在联系。举个大家都举烂的例子,超市购物清单,可以事先收集大量的超市购物数据信息。单号购买商品0001牛奶、泡面、火腿肠0002啤酒、洗衣粉、尿布、抹布0003巧克力,尿布,蔬菜,水果0004蛋糕,炸鸡,啤酒,馒头,矿泉水0005黄瓜,啤酒,尿布,黄瓜…..._如下数据中,抹布的支持度为多少
文章浏览阅读4.5k次,点赞3次,收藏18次。1、定义通过流从本地文件中读取数据,并通过网络传输上传到服务器。 服务器在接收到数据后再存储到本地2、示例客户端:public class FileClient { public static void main(String[] args) throws Exception{ Socket socket = new Socket("127.0.0.1", 7890); ..._客户端调用服务端上传接口
文章浏览阅读3k次,点赞2次,收藏8次。通信调试中,字节序是个常见概念,比如本地字节序、网络字节序。字节存储机制又分两种:大端(Big-Endian)和小端(Little-Endian)。MODBUS协议中同时存在字序概念,存储机制同字节序。不同的是,MODBUS数据帧中对关键字段(寄存器地址)都定义为大端字节序,但是数据部分在不同厂家的定义方式可能不同,甚至同一厂家某一型号设备中,对不同数据的字节序定义也不统一。基于MODBUS报文的字节排序,大端字节序即数据高字节在前,低字节在后,小端字节序相反。例如:01 03 04 1_modbus字节序hl
文章浏览阅读3k次,点赞3次,收藏14次。在linux系统中把设备和普通文件也都看做是文件,要对文件进行操作就必须先打开文件,打开文件后会得到一个文件描述符,它是一个很小的正整数,是一个索引值。 内核会为每一个运行中的进程在进程控制块pcb中维护一个打开文件的记录表,每一个表项都有一个指针指向打开的文件,上边的索引值是记录表的索引值。 文件描述符的优点:兼容POSIX标准,许多系统调用都依赖于它;缺点是不能移植到unix之外的系统上..._c语言file*fp是什么意思
文章浏览阅读4.2k次。在办公中使用合适的工作软件能够大大提高我们的工作效率,那么最热门的office2016与2019的到底应该选择哪一个呢,让我们来看看他们的区别之处吧!office2016与2019的区别详细说明office2016一、对于普通人来说,家庭版和学生版应该是最显眼的。一般来说,新一代Windows台式机和笔记本电脑大多也预装了此版本的Office,购买机器后可以免费使用。二、但是,此版本也是最小版本,..._vsio2016与2019哪个好用
文章浏览阅读5.4k次。前段转自 http://blog.sina.com.cn/s/articlelist_1249713681_14_1.html作者:很拽的土豆Bit Twiddling HacksBy Sean Eron [email protected], the code snippets here are in the public d_bit twiddling hacks
文章浏览阅读2.2k次。前提:提取的文件必须是应用服务生成PDF文件,而非扫描的pdf文档,当前pdfplumber的版本为0.5.28该开源包在github上面的地址:https://github.com/jsvine/pdfplumber第一步:在服务应用的终端中使用下述命令安装pdfplumber包poetry add pdfplumber在输入了上述命令后,会在终端中弹出下述相关安装信息PS D:\Code\python\poetry-demo> poetry add pdfplumber._python pdfplumber 提取目录
文章浏览阅读1.8k次。摘要:使用raft协议将influxdb组建三节点的raft集群, 1个leader2个follow.在leader上写, 然后在三个节点上分别读取,测试数据是否正常.三节点raft的influxdb集群:root@localhost:~/work/ndb-influxdb-instance/src/influxdb/influxdb-1.8.4# raftadmin 192.168.58.128:50051 leader2022/03/07 11:21:07 Invok.._raft读写
文章浏览阅读2.9w次,点赞8次,收藏40次。安装MySQL[root@localhost src]# rpm -ivh mysql57-community-release-el7-8.noarch.rpmerror: Failed dependencies:mysql57-community-release conflicts with (installed) mysql80-community-release-el7-1.noarc..._error: failed dependencies
文章浏览阅读2.4k次。原PRQA静态测试软件产品线(包括QAC、 QAC++、QA-Verify等),统一更名为“Helix QAC”,PRQA的代码静态分析工具能够帮助企业开发团队提高代码的质量和安全,缩短软件开发所需的时间,HelixQAC是作为其主打产品目前已广泛应用于汽车、航空航天、电子商务、医疗器械、生产和通信等领域。HelixQAC:HelixQAC是静态代码分析工具,依据C和C++编码规则自动扫描代码对规则的违背。开发团队在开发过程的早期就可以用它来检测缺陷,因为此时修改代码是最方便也最经济的。Helix QA_qac的 生成的报告如何解读
文章浏览阅读2.2k次。import jsonimport timefrom requests_html import HTMLSession# 判断是否是数字def is_number(s): try: float(s) return True except ValueError: pass try: import unicodedata unicodedata.numeric(s) return._爬取阳光高考
文章浏览阅读1.1k次。版权声明:本文为博主原创文章,遵循CC4.0BY-SA版权协议,转载请附上原文出处链接和本声明。本文链接:https://blog.csdn.net/wokuailewozihao/article/details/82021709-------------------------------------------------------------------------------..._谷歌翻译js插件 select替换成div