重庆推广网站的方法,长沙网站设计建设,跟建设通差不多额网站,河南建设信息网站1.❤️❤️前言~#x1f973;#x1f389;#x1f389;#x1f389; Hello, Hello~ 亲爱的朋友们#x1f44b;#x1f44b;#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章#xff0c;请别吝啬你的点赞❤️❤️和收藏#x1f4d6;#x1f4d6;。如果你对我的…1.❤️❤️前言~ Hello, Hello~ 亲爱的朋友们这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章请别吝啬你的点赞❤️❤️和收藏。如果你对我的内容感兴趣记得关注我以便不错过每一篇精彩。 当然如果在阅读中发现任何问题或疑问我非常欢迎你在评论区jj指正️️。让我们共同努力一起进步 加油一起CHIN UP 个人主页E绵绵的博客 所属专栏 1. JAVA知识点专栏 深入探索JAVA的核心概念与技术细节 2.JAVA题目练习 实战演练巩固JAVA编程技能 3.c语言知识点专栏 揭示c语言的底层逻辑与高级特性 4.c语言题目练习 挑战自我提升c语言编程能力 5.Mysql数据库专栏 了解Mysql知识点提升数据库管理能力 6.html5知识点专栏 学习前端知识更好的运用它 7. css3知识点专栏 在学习html5的基础上更加熟练运用前端 8.JavaScript专栏 在学习html5和css3的基础上使我们的前端使用更高级 持续更新中敬请期待❤️❤️ 2. BOM BOMBrowser Object Model是浏览器对象模型他提供了独立于内容而与浏览器窗口进行交互的对象其核心对象是window。 BOM 是由一系列相关的对象构成并且每个对象都提供了很多方法与属性。 3.窗口加载事件 window.onload是窗口页面加载事件当文档内容完全加载完成会触发该事件包括图像、脚本文件、css文件等就调用处理函数。 因为js是由上到下依次执行的一般来说我们需要按照先写标签然后将script标签写在标签的下面的方式但是我们可以通过window.onload来改变script标签的位置将其放在标签上面因为这个方法会在页面加载完毕之后才执行所以执行这个方法的时候页面中的DOM元素已经全部被渲染了。 bodyscriptwindow.onload function () {var btn document.querySelector(button);btn.addEventListener(click,function () {alert(你点我);})}/scriptbutton点击/button
/body在以上代码中我们没有按照之前的标准将script标签写在button标签下面但是依旧是可用的。 如果页面中存在多个window.onload会以最后一个为准最后一个会覆盖前面的事件 这是传统事件存在的弊端为了解决这一问题我们可以使用监听事件替换window.onload window.addEventListener(load,function () {}这样就可以添加多个事件。 如果页面的图片非常多那么用原来的onload要等很久等图片加载完才能执行该行为这就会造成错误了。那么推荐使用以下方式。 document.addEventListener(DOMContentLoaded,function () {})DOMContentLoaded 事件触发时仅当html中元素加载完成不包括css中代码、图片、flash等这样就很快了。 4.setTimeout 定时器和setInterval() 定时器 window.setTimeout(调用函数,延迟的毫秒数); window在调用的时候可以省略单位是毫秒省略是0秒也就是立马执行这个调用函数可以直接写函数还可以写函数名不需要带括号 window.setInterval(调用函数,间隔毫秒数) 语法规则上与上述很相似但与setTimeout()不同的是setTimeout只会执行一次但是setInterval会循环执行 5.清除定时器setTimeout()和setInterval() 使用clearTimeout(定时器名称)函数可以清除setTimeout定时器请看如下代码 bodybutton点我清除定时器/buttonscriptvar btn document.querySelector(button);var timer1 setTimeout(function () {alert(我是Jim.kk);},5000);btn.onclick function () {clearTimeout(timer1);}/script
/body注意在执行settimeout时给定时器名称很重要因为当要清除它时我们需要用到名称执行setinterval时同理。 使用clearInterval(定时器名称)函数可以清除setInterval定时器。这里同理 6.同步与异步 JavaScript是单线程所以同个时间只能处理同个任务所有任务都需要排队前一个任务执行完才能继续执行下一个任务但是如果前一个任务的执行时间很长后一个任务就不得不等着当用户向后台获取大量的数据时不得不等到所有数据都获取完毕才能进行下一步操作用户只能在那里干等着严重影响用户体验。 因此JavaScript在设计的时候就已经考虑到这个问题主线程可以完全不用等待时间长的任务可以先挂起处于等待中的任务先运行排在后面的任务再回过头执行挂起的时间长的任务。因此任务就可以分为同步任务和异步任务。 其实同步和异步 无论如何做事情的时候都是只有一条流水线单线程 同步和异步的差别就在于这条流水线上各个流程的执行顺序不同。 同步任务是指在主线程上排队执行的任务只有前一个任务执行完毕才能继续执行下一个任务 异步任务是指不进入主线程而进入任务队列的任务只有任务队列通知主线程某个异步任务可以执行了该任务才会进入主线程 注意如果要进入异步任务中必须为回调函数一般而言回调函数有以下三种类型: 1、普通事件如click、resize等 2、资源加载如load、error等 3、定时器包括setlnterval、setTimeout等 scriptsetTimeout(function(){console.log(3);},5000)console.log(1);console.log(2);/script执行顺序是这样的先输出1和2等待5秒后输出3. 1. 先执行执行栈中的同步任务2. 遇到异步任务回调函数就放入任务队列中3. 一旦执行栈中的同步任务执行完毕系统就会按次序读取任务队列中的异步任务被读取的异步任务结束等待状态进入执行栈开始执行。 总的来说JavaScript的异步机制包括以下几个步骤 1. 所有同步任务都在主线程上执行形成一个执行栈。 2. 主线程之外还存在一个任务队列只要异步任务有了结果就会在任务队列中放置一个事件 3. 一旦执行栈中的所有同步任务执行完毕系统就会读取任务队列将可运行的异步任务添加到可执行栈中然后执行。 4. 主线程不断的重复上面的第三步 7.窗口大小变化事件 window.onresize functoin(){}
或者
window.addEventListener(resize,function () {} )只要文档页面大小发生变化就会触发里面的处理函数。 bodybutton当宽度小于900px的时候我就消失啦/buttonscriptwindow.addEventListener(resize,function () {// console.log(变化了);// console.log(内高window.innerHeight\t内宽 window.innerWidth);var btn document.querySelector(button);if ( window.innerWidth 900 ) {btn.style.display none;} else {btn.style.display block;}})/script
/body以上代码的执行效果当我们改变浏览器框的大小的时候当宽度小于900px这个button按钮就会消失。 这种效果常用在一些页面元素渲染上比如原本有四个列的某种元素但是当页面较窄的时候我们会隐藏其中某个列以保证页面的正常显示。 注意innerheight指的是文档页面的高度innerwidth指的是文档页面的宽度。 8.location对象 window对象给我们提供了一个location属性用于获取或设置窗体的URL. 以下是它属性 这里我们只需要记住href和search 。 http://127.0.0.1:8848/testshare/location.html?langennamezhangsan#test/most 这是一个url地址。 href得到的就是这个全部url而我们search得到的便是后面的字符串。 href我们可以利用它去跳转页面将其他url赋值给它就行。 search我们可以利用它得到参数。 以下是它方法 Location.reload() 方法用来刷新当前页面。该方法只有一个参数当值为 true 时则强制刷新强制刷新不会保留缓存。当值为 false 或者未传参时浏览器刷新后内容依旧不变。 Location.assign()方法会触发窗口加载并显示指定的URL的内容 document.location.assign(https://www.baidu.com); Location.replace() 方法以给定的URL来替换当前的资源。 与assign() 方法不同的是调用 replace() 方法后之前页面不会保存到会话历史中这样用户点击回退按钮时将不会再跳转回该页面而assign可以回退到之前页面。 9.history对象 该对象可以控制历史记录。 back和forward均是前进和后退一格而go可以很多格它们前面均是history。
