目前网站开发主要有哪些工具,黄骅港邮编号是多少,杭州哪家网站建设比较好,学校建设网站的意义1. window.onload
窗口或者页面的加载事件#xff0c;当文档内容完全加载完成会触发的事件#xff08;包括图形#xff0c;JS脚本#xff0c;CSS文件#xff09;#xff0c;就会调用处理的函数。
button点击/button
script btn document.q…1. window.onload
窗口或者页面的加载事件当文档内容完全加载完成会触发的事件包括图形JS脚本CSS文件就会调用处理的函数。
button点击/button
script btn document.querySelector(button);btn.addEventListener(click, function() {console.log(button点击了)});
/script网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行否则可能导致无法获取对象的情况为了避免类似情况的发生可以使用以下两种方式:
1将脚本代码放在网页的底端运行脚本代码的时候可以确保要操作的对象已经加载完成。
2通过window.onload来执行脚本代码。
举例子当文档内容完全加载完成会触发的事件
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyscriptwindow.onload function(){console.log(页面加载以后)console.log(a);}/scriptscriptvar a 10;console.log(a);/script
/body
/htmlwindow.load传统注册事件的方式只能写一次如果有多个会以最后一个window.load为主。
window.addEventListener 方式除外
关于window.onload事件处理函数绑定
window.onload事件默认只执行最后一次绑定的函数例如
window.onload funcA;
window.onload funcB那么当window加载完成后只会执行funcB
如果想在window加载完毕后执行多个函数可以自己封装一个函数 window.onload必须等待网页中所有内容加载完毕后包括图片才能执行 $(document).ready()在网页所有DOM结构绘制完毕后就执行可能DOM元素关联的东西并没有加载完但网页的所有元素对jQuery是可以访问的等价于DOMContentLoaded $(document).load()
需要注意一点使用$(document).ready()方法注册的事件由于元素关联的文件可能未下载完比如与图片有关的HTML下载完毕但是图片还未加载完此时访问图片的高度和宽度这样的属性不一定有效
所以可以使用$(document).load()方法如果处理函数绑定给window对象则会在窗口、框架、对象、图片等加载完毕后触发。
如果绑定在元素上则会在元素内容加载完毕后触发等价于Javascript中的 window.onload function(){ }
2. window.onresize
在实现一个项目需求的时候需要监听到某个div元素的宽高变化第一时间想到的是resize事件但是很不幸运的是resize事件只能加在window对象上并不能监听具体某个DOM元素。
window.onresize function() {console.log(窗口大小变化)
}window.addEventListener(resize, function(){console.log(窗口大小变化);
})3. window.innerWidth
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv stylewidth: 100px;height: 100px;background-color: black;/divscriptvar div document.querySelector(div);console.log(div.innerWidth); ## undefinedconsole.log(div.innerHeight); ## undefinedconsole.log(div.style.width); ## 100pxconsole.log(div.style.height); ## 100pxconsole.log(window.innerWidth); ## 能够输出console.log(window.innerHeight); ## 能够输出/script
/body
/html4. setTimeout( )
window.setTimeout(function(){console.log(2 秒后执行);
},2000)setTimeout 举例子5 秒钟后关闭图片展示
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg srchttps://img0.baidu.com/it/u4280883260,2294162798fm26fmtautogp0.jpg altscriptsetTimeout(function (){document.querySelector(img).style.visibility hidden;},5000)/script
/body
/html运行效果 定时器清除
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodybutton点击停止炸弹/buttonscriptvar timer setTimeout(function(){alert(boom~~~~~);},3000);document.querySelector(button).addEventListener(click, function(){window.clearTimeout(timer);})/script
/body
/html5. setInterval( )
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg srchttps://img0.baidu.com/it/u4280883260,2294162798fm26fmtautogp0.jpg alt width500px height300pxscriptvar img [https://img0.baidu.com/it/u4280883260,2294162798fm26fmtautogp0.jpg,https://img1.baidu.com/it/u2132884305,1901513314fm26fmtautogp0.jpg,https://img0.baidu.com/it/u150891675,3914340408fm26fmtautogp0.jpg]var i 1;setInterval(() {document.querySelector(img).srcimg[i];i;if(i2) i0;}, 1000)/script
/body
/html运算符的介绍 运算符(数值运算符)会将表达式转换为数字。针对右侧表达式的值进行数字转换类似于 Number() 的转换规则 ToNumber。返回一个新值不会改变原始变量值。 new Date() 定时器案例
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headstylediv{background-color: black;color: white;width: 150px;height: 100px;float: left;margin-right: 20px;font-size: 80px;line-height: 100px;text-align: center;letter-spacing: 10px;text-indent: 10px;}/style
bodydiv/divdiv/divdiv/divscriptvar div document.querySelectorAll(div);var inputTime new Date(2021-9-8 19:00:00)function showTime(){var nowTime new Date();inputTime new Date(inputTime);var seconds (inputTime - nowTime) / 1000;var H parseInt(seconds / 60 / 60 % 24);if(H 10) H 0 H;var M parseInt(seconds / 60 % 60);if(M 10) M 0 M;var S parseInt(seconds % 60);if(S 10) S 0 S;div[0].innerText H;div[1].innerText M;div[2].innerText S;}showTime();setInterval(showTime, 1000);/script
/body
/html6. this 指向问题
使用 JavaScript 开发的时候很多开发者会被 this 的指向搞蒙圈但是实际上关于 this 的指向记住最核心的一句话哪个对象调用函数函数里面的this指向哪个对象。
普通函数调用
let usernamecn
function fn(){alert(this.username); ## undefined
}
fn();可能大家会困惑为什么不是输出CN但是在细看一看我声明的方式是let不会是window对象 如果输出CN要这样写
var usernamecn
function fn(){alert(this.username); ### cn
}
fu();window.usernamecn
function fn(){alert(this.username); ### cn
}
fn();
### 可以理解为 window.fn();对象函数调用
这个相信不难理解就是那个函数调用this指向哪里
window.b2222
let obj{a:111,fn:function(){alert(this.a); ### 111alert(this.b); ### undefined}
}
obj.fn();let obj1{a:222
};
let obj2{a:111,fn:function(){alert(this.a);}
}
obj1.fn obj2.fn;
obj1.fn(); ### 222这个相信也不难理解虽然obj1.fn是从obj2.fn赋值而来但是调用函数的是obj1所以this指向obj1。
构造函数调用
let TestClassfunction(){this.name111;
}
let subClassnew TestClass();
subClass.namecn;
console.log(subClass.name); ### cn
let subClass1new TestClass();
console.log(subClass1.name); ### 111这个也是不难理解回忆下new的四个步骤就差不多了
但是有一个坑虽然一般不会出现但是有必要提一下。
在构造函数里面返回一个对象会直接返回这个对象而不是执行构造函数后创建的对象
apply和call调用
apply和call简单来说就是会改变传入函数的this。
let obj1{a:222
};
let obj2{a:111,fn:function(){alert(this.a);}
}
obj2.fn.call(obj1);
此时虽然是 obj2 调用方法但是使用 了call动态的把 this 指向到 obj1。相当于这个 obj2.fn 这个执行环境是 obj1 。apply 和 call 详细内容在下面提及。
箭头函数调用
首先不得不说ES6 提供了箭头函数增加了我们的开发效率但是在箭头函数里面没有 this 箭头函数里面的 this 是继承外面的环境。
let obj{a:222,fn:function(){ setTimeout(function(){console.log(this.a)})}
};
obj.fn();//undefined不难发现虽然 fn() 里面的 this 是指向 obj 但是传给 setTimeout 的是普通函数 this 指向是 window window 下面没有 a 所以这里输出 undefined。
换成箭头函数
let obj{a:222,fn:function(){ setTimeout((){console.log(this.a)});}
};
obj.fn();//222这次输出 222 是因为传给 setTimeout 的是箭头函数然后箭头函数里面没有 this 所以要向上层作用域查找在这个例子上 setTimeout 的上层作用域是 fn。而 fn 里面的 this 指向 obj 所以 setTimeout 里面的箭头函数的 this 指向 obj 。所以输出 222 。
call和apply call 和 apply 的作用完全一样唯一的区别就是在参数上面。 call 接收的参数不固定第一个参数是函数体内 this 的指向第二个参数以下是依次传入的参数。 apply接收两个参数第一个参数也是函数体内 this 的指向。第二个参数是一个集合对象数组或者类数组
let fnfunction(a,b,c){
console.log(a,b,c);
}
let arr[1,2,3];let obj1{a:222
};
let obj2{a:111,fn:function(){alert(this.a);}
}
obj2.fn.call(obj1);call 和 apply 两个主要用途就是
1.改变 this 的指向把 this 从 obj2 指向到 obj1
2.方法借用 obj1 没有 fn 只是借用 obj2 方法
7. JavaScript 执行机制
在 JavaScript 中我们经常要处理那些需要大量时间的操作比如网络请求读取文件等等。这些操作是异步的因为如果我们等待他们完成那么会导致应用的其它部分被阻塞。为了处理这些异步操作JavaScript 提供了几种异步编程模式。
回调函数Callback Functions这是 JavaScript 异步编程的最基本模式。在 Node.js 中很多函数都使用了这种模式。回调函数的基本思想是将一个函数作为另一个函数的参数。当异步操作完成时将调用这个回调函数。例如
fs.readFile(/etc/passwd, utf-8, function (err, data) {if (err) throw err;console.log(data);
});在上面的例子中fs.readFile() 函数接收一个文件路径一个选项以及一个回调函数。当文件读取完毕或者出现错误时回调函数将被调用。
PromisesPromises 是一种更高级的异步编程模式它返回一个表示异步操作结果的对象。Promises 可以解决回调函数的一些问题比如回调地狱Callback Hell。一个 Promise 可以处于以下三种状态之一pending进行中、fulfilled已成功和 rejected已失败。一旦 Promise 的状态从 pending 变为 fulfilled 或 rejected就不会再次改变。例如
let promise new Promise(function(resolve, reject) {### ··· some async operationsetTimeout(() resolve(done!), 1000);
});promise.then(result console.log(result), error console.log(error)
);在上面的例子中我们创建了一个新的 Promise它在 1 秒后 resolve。我们使用 .then() 方法来处理这个 Promise 的结果。
Async/AwaitAsync/Await 是基于 Promises 的一种更现代和更简洁的异步编程模式。一个函数如果被声明为 async那么它会隐式返回一个 Promise。我们可以在 async 函数内部使用 await 来暂停和恢复该函数的执行直到 Promise 完成并返回结果。例如
async function example() {let promise new Promise((resolve, reject) {setTimeout(() resolve(done!), 1000)});let result await promise; ### until promise is resolvedconsole.log(result);
}
example();在上面的例子中我们创建了一个 async 函数它等待一个 Promise 完成并打印结果。注意await 只能在 async 函数内部使用。
同步与异步
HTML5 提出了 WEB Worker 标准运行 JavaScript 创建多个线程于是 JavaScript 出现了同步与异步。Web Workers 是 Web API 的一部分允许在 Web 浏览器中运行后台线程。它们可以进行 I/O例如 AJAX 请求或进行其他长时间运行的操作而不会阻塞或影响页面的主线程。 详细介绍 8. JS 回调函数理解
首先从英文介绍开始 A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. 字面上理解下来就是回调就是一个函数的调用过程。那么就从理解这个调用过程开始吧。函数a有一个参数这个参数是个函数b当函数a执行完以后执行函数b。那么这个过程就叫回调。
其实中文也很好理解回调回调就是回头调用的意思。函数a的事先干完回头再调用函数b。
举个现实的例子约会结束后你送你女朋友回家离别时你肯定会说“到家了给我发条信息我很担心你。”对不然后你女朋友回家以后还真给你发了条信息。小伙子你有戏了。
其实这就是一个回调的过程。你留了个函数b要求女朋友给你发条信息给你女朋友然后你女朋友回家回家的动作是函数a。她必须先回到家以后函数a的内容执行完了再执行函数b然后你就收到一条信息了。这里必须清楚一点函数b是你以参数形式传给函数a的那么函数b就叫回调函数。
也许有人有疑问了一定要以参数形式传过去吗我不可以直接在函数a里面调用函数b吗确实可以。求解中
解惑如果你直接在函数a里调用的话那么这个回调函数就被限制死了。但是使用函数做参数就有下面的好处当你a(b)的时候函数b就成了回调函数而你还可以a©这个时候函数c就成了回调函数。如果你写成了function a(){…;b();}就失去了变量的灵活性。
9. window.location
window.location对象可以用于获取当前页面地址url,并把浏览器重定向到新页面
location对象的属性与对应的属性值
- window.location.href 返回当前页面的href(url)
- window.location.hostname 返回web主机的域名
- window.location.pathname 返回当前页面的路径或者文件名
- window.location.protocol 返回使用的web协议http或者https:
- window.location.assign 加载新文档页面的url改变跳到新页面但是存在后退按钮可以返回到未跳转前的页面即保留了上个页面的路径。
- window.location.replace 加载新文档但是不存在后退按钮新页面的url地址将老url地址覆盖掉所以不可以返回上个页面统一资源定位符概述 location的属性 案例
input typetext name id
button点击跳转/buttonscriptdocument.querySelector(button).addEventListener(click, () {let prams document.querySelector(input).value;window.location.href http://127.0.0.1:5500/xxx.html?prama prams;})
/scripth1welcome /h1
scriptlet pramas window.location.search.slice(1,-1).split();### substr(起始的位置, 截取几个字符);document.querySelector(h1).innerHTML welcome pramas[1];
/scriptlocation 对象方法 10. navigater对象
BOM(Browser Object Model)浏览器对象模型它提供了一组对象让开发者可以通过JS来操作浏览器。
BOM中的浏览器对象
- Window浏览器的整个窗口window也可以作为全局对象进行使用。
- Navigator字面翻译为航海家这个对象中包含有浏览器的信息可以通过其中的信息来对浏览器进行识别。
- Location浏览器的地址栏信息可以通过其来获取地址栏的信息或者操作浏览器跳转页面。
- History浏览器中的历史记录可以通过这个对象来对浏览器的历史记录进行操作。
- Screen屏幕的信息可以通过该对象来获取用户显示器的相关信息。详细信息展示 navigator.userAgent11. history对象
history对象记录了用户曾经浏览过的页面(URL)并可以实现浏览器前进与后退相似导航的功能。
注意从窗口被打开的那一刻开始记录每个浏览器窗口、每个标签页乃至每个框架都有自己的history对象与特定的window对象关联。 使用length属性当前窗口的浏览历史总长度代码如下
script typetext/javascriptvar HL window.history.length;document.write(HL);
/scriptwindow.history.back(); ### 返回上个页面
window.history.go(-1); ### 返回上个页面window.history.forward(); ### 加载 history 列表中的下一个 URL。
window.history.go(1); ### 加载 history 列表中的下一个 URL。12. 元素偏移量 offset offset 和 study的区别 13. 鼠标坐标值 拖拽 scriptdocument.addEventListener(click, function(e){console.log(x ,e.pageX,y ,e.pageY);})
/script里面的 e 是鼠标事件 html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headstylediv{height: 100px;width: 100px;background-color: rgb(211, 233, 16);margin: 10px;}input{width: 80px;height: 20px;margin-top: 10px;margin-left: 10px;}/style
bodydivinput typetext name id/divscriptvar div document.querySelector(div);div.addEventListener(mousedown, function(e){### 当鼠标按下的时候获取鼠标在盒子中的坐标var x e.pageX - this.offsetLeft;var y e.pageY - this.offsetTop;### 鼠标移动时动态更新 div 的坐标function move(e) {div.style.marginLeft e.pageX - x px;div.style.marginTop e.pageY - y px;}document.addEventListener(mousemove, move)### 鼠标弹起让鼠标移动事件移除document.addEventListener(mouseup, function(e) {document.removeEventListener(mousemove, move)})})/script
/body
/html14. sroll mouseover
client 翻译过来就是客户端我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
scroll 翻译过来就是滚动的我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 mouseenter 和 mouseover 区别
曾经一度认为mouseover 和 mouseenter是不是js设计者弄多余的印象中这两个的效果都是一样的吧
直到去面试的时候被面试官提出了说说 mouseover 和 mouseenter 有什么区别整个人都愕然了用了那么就js还真没有去认真思考过这个问题。那到底这两个事件的触发有什么不同他们的存在又有何意义呢通过两个栗子来解析一下。
不论鼠标指针穿过被选元素或其子元素都会触发 mouseover 事件 | 对应 mouseout只有在鼠标指针穿过被选元素时才会触发 mouseenter 事件 | 对应 mouseleave
hover 悬停事件
模仿悬停事件鼠标移动到一个对象上面及移出这个对象的方法。这是一个自定义的方法它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时会触发指定的第一个函数。当鼠标移出这个元素时会触发指定的第二个函数。而且会伴随着对鼠标是否仍然处在特定元素中的检测例如处在div中的图像如果是则会继续保持“悬停”状态而不触发移出事件修正了使用mouseout事件的一个常见错误。
mouseover和mouseout当鼠标移入移出元素或子元素都会触发事件。支持冒泡mouseenter和mouseleave当鼠标移入移出元素才会触发事件。不支持冒泡hover的效果等同于mouseentermouseleave。
15. 动画函数封装
function animate(obj, target, callback) { ### obj动画执行者 target移动位置calback用于回调的函数### 防止重复进行动画命令完成一次动画再绑定新动画### 先清除以前的定时器再进行心得定时器clearInterval(obj.timer)obj.timer setInterval(function() {var step (target - obj.offsetLeft) / 10;### 处理上述步长算数精度的问题step step 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft target) {clearInterval(obj.timer);if (callback) {callback();}}### 步长公式用于缓动画step (target - obj.offsetLeft) / 10### 匀速动画就是当前位置加上固定步长obj.style.left obj.offsetLeft step px}, 15);
}!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./static/js/animation.js/script
/headbody stylepadding: 0;margin: 0;button classright前进500px/buttonbutton classleft后退500px/buttondiv styleposition: relative;width: 100px;height: 100px;background-color:red;margin-top:20px/div
/body
scriptvar divbox document.querySelector(div);var btnr document.querySelector(.right);var btnl document.querySelector(.left);btnr.addEventListener(click, function() {animate(divbox, 500, function() {divbox.style.backgroundColor green})})btnl.addEventListener(click, function() {animate(divbox, 0, function() {divbox.style.backgroundColor red})})
/script/html16. JQuery 特点概述
快速获取文档元素
jQuery的选择机制构建与CSS的选择器它提供了快速查询DOM文档中元素的能力而且大大强化了JavaScript中获取页面元素的方式
提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果可以开发出非常漂亮的网页许多网页都使用jQuery的内置的效果比如淡入淡出元素移除等动态特效。
创建AJAX无刷新网页
AJAX是异步的JavaScript和XML的简称可以开发出非常灵敏无刷新的网页特别是开发服务器网页时比如PHP网站需要往返地与服务器通信如果不使用AJAX每次数据更新不得不重新刷新页面而使用AJAX特效后可以对页面进行局部刷新提供动态的效果。
提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强比如元素迭代和数组处理等操作。
增强的事件处理
jQuery提供了各种页面事件它可以避免程序员在HTML中添加太多时间处理代码最重要的是它的事件处理器消除了各种浏览器兼容性问题。
更改网页内容
jQuery可以修改网页中的内容比如更改网页中的文本、插入或者翻转网页图像jQuery简化了原本是用JavaScript代码需要处理的方式。
jQuery中的隐式迭代
17. 数据可视化
echartshttps://echarts.apache.org/zh/index.html
官方文档https://echarts.apache.org/en/tutorial.html#Get%20Started%20with%20ECharts%20in%205%20minutes
Apache ECharts
ECharts是一款基于JavaScript的数据可视化图表库提供直观生动可交互可个性化定制的数据可视化图表。ECharts最初由百度团队开源并于2018年初捐赠给Apache基金会成为ASF孵化级项目。 [1]
2021年1月26日晚Apache基金会官方宣布ECharts项目正式毕业。1月28日ECharts 5线上发布会举行。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图用于统计的盒形图用于地理数据可视化的地图、热力图、线图用于关系数据可视化的关系图、treemap、旭日图多维数据可视化的平行坐标还有用于 BI 的漏斗图仪表盘并且支持图与图之间的混搭。
script crossoriginanonymous integritysha512-avZBaO59S3QHZ7OtZ6pWKQHrBLZ1rax/eUQq03uLqQ85tu8ZjEM0Y37RsiF1Me3EWjYUlaHHtnAYBJM/9PUK7w srchttps://lib.baomitu.com/echarts/5.1.2/echarts.common.js/scripthttps://lib.baomitu.com/echarts/5.1.2/echarts.common.min.js !DOCTYPE html
html
headmeta charsetutf-8titleECharts/titlescript srchttps://lib.baomitu.com/echarts/5.1.2/echarts.common.min.js/script
/head
bodydiv idmain stylewidth: 600px;height:400px;/divscript typetext/javascript### based on prepared DOM, initialize echarts instancevar myChart echarts.init(document.getElementById(main));### specify chart configuration item and datavar option {title: {text: ECharts entry example},tooltip: {},legend: {data:[Sales]},xAxis: {data: [shirt,cardign,chiffon shirt,pants,heels,socks]},yAxis: {},series: [{name: Sales,type: bar,data: [5, 20, 36, 10, 10, 20]}]};### use configuration item and data specified to show chartmyChart.setOption(option);/script
/body
/htmlinstance例子实例; 情况; 要求建议; [法]诉讼手续
specify指定; 详述; 提出…的条件; 使具有特性 18. English 技术文档
prepare a DOM container with width and height
准备一个具有宽度和高度的DOM容器
specify chart configuration item and data
指定图表配置项和数据
use configuration item and data specified to show chart
使用刚指定的配置项和数据来显示图表
Get Started with ECharts in 5 minutes
First, install Apache EChartsTM using one of the following methods
词汇
**instance例子实例; 情况; 要求建议; [法]诉讼手续****specify指定; 详述; 提出…的条件; 使具有特性****chart图表; 海图; (唱片销售量的)排行榜****item条条款; 项目; 一则; 一件商品或物品****Responsive Mobile-End响应式移动端**
