下面是小凰凰的简介，看下吧！ 💗人生态度：珍惜时间，渴望学习，热爱音乐，把握命运，享受生活 💗学习技能：网络 -> 云计算运维 -> python全栈( 当前正在学习中) 💗您的点赞、收藏、关注是对博主创作的最大鼓励，在此谢过！ 有相关技能问题可以写在下方评论区，我们一起学习，一起进步。 后期会不断更新python全栈学习笔记，秉着质量博文为原则，写好每一篇博文。
JavaScript基础分为三个部分：
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。前面我们在javascript介绍章节说过js的三种书写方式：https://blog.csdn.net/weixin_44571270/article/details/106938617 如果采用内联式，一般我们的script标签写在body最下面，如果你非要把script标签放在head标签里面，和css放一起，由于代码执行是从上至下，因此你的动作（js）会先于html、css执行，这很不科学！人都没有，怎么做动作！因此这个时候就需要onload事件了！
onload事件详解： 当页面加载（文本和图片）完毕的时候，触发onload事件。 举例：
<script type="text/javascript"> window.onload = function () { console.log("小马哥"); //等页面加载完毕时，打印字符串 } </script>有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。
建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。
缺点：如果用户网很不好，图片无法加载出来，岂不是什么也不能做？我们应该让图片最后加载才对，js放在中间！
事件的三要素：事件源、事件、事件驱动程序。 比如：网页上弹出一个广告，我点击右上角的X，广告就关闭了。这件事情里，事件源是：X。事件是：onclick。事件驱动程序是：广告关闭了
总结如下：
事件源：引发后续事件的html标签。事件：js已经定义好了（见下图）。事件驱动程序：对样式和html的操作。也就是DOM。三者的实现代码如下：
<body> <div id="box1"></div> <script type="text/javascript"> // 1、获取事件源 var div = document.getElementById("box1"); // 2、绑定事件 div.onclick = function () { // 3、书写事件驱动程序 alert("我是弹出的内容"); } </script> </body>下面针对这事件的三要素，进行分别详细介绍。
我们可以看看这个标签数组到底长啥样： 代码如下：
<body> <div id="box1" class="haha">谢谢你长的这么好看，还光顾我的博客！</div> <p id="box2" class="haha">三连、三连！</p> <script type="text/javascript"> var arr1 = document.getElementsByTagName("div"); console.log(arr1) var arr2 = document.getElementsByClassName("haha"); console.log(arr2) //得到的是事件源对象的数组 </script> </body>我们看下控制台的输出： 我们主要看红色圈住的部分，它是一个看起来像字典的东西，但是它其实是一个伪数组（但我有听说它是一个集合，鬼知道这是个啥东西）！怎么取出来相应标签呢？
//只有一个直接取即可 var arr1 = document.getElementsByTagName("div")[0]; //因为得到的是事件源对象的数组，class为haha的有两个标签，因此0,1都可以！ var arr2 = document.getElementsByClassName("haha")[0]; var arr2 = document.getElementsByClassName("haha")[1]; 也可以采用for循环遍历： for(var i = 0;i < arr2.length;i++){ arr2[i].onclick = function(){ alert('我是弹出的内容') } }这里还可以看事件源下面可以做的操作！
注意第一行代码，绑定时，是写的"fn()"，不是写的"fn"。因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。
我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式。举例如下：
最开始我们是没有边框、没有背景，没有字体样式！ 实现效果：
只要出现了右边在闪动，那么一定用了js！ 总结操纵标签样式的方法共性：
所有标签样式的操作，都是通过对`div1.style.样式名`进行赋值达到操作的目的！ // 注意innertext修改的文本内容既不属于标签样式，也不属于标签属性，这是个特例！按理来说，我们的效果原来是本页面跳转，class属性为conn，链接名：点我有你好看！ 实现效果： 我们的事件驱动成功实现了操作标签属性，我们的href标签属性的值等等都可以修改哦！ 总结操纵标签属性的方法：
1. 记住一个特殊的，修改class属性conn.className 2. 其他的都是`conn.标签属性名`直接赋值修改即可！ 3. `其他标签也都是一样的道理！` 4. 上面说了修改标签的文本内容conn.innerText既不是标签属性，也不是标签样式！文本内容本就不是行内属性，所以它算是特例，为什么class，不能conn.class呢？因为class在js中是关键字，类嘛！所以不能使用它！
但要注意的是，我们在对标签样式进行操作的时候，使用div1.style.样式名样式名不再是以前的样子，比如样式font-family，变成了fontFamily，不能使用-连接，而且需要使用驼峰命名法！
对于行内标签属性的修改，js是直接修改的，这个在我们操作标签属性的动图里就可以看到！我们一般写标签样式，都在style标签里里，或者其他文件里写的！它又怎么修改呢？他其实是通过修改行内的style属性，由于行内的style优先级最高，会覆盖你的样式！
请看下图：
请注意看我圈的两处的变化！你应该就懂了！
如果在事件驱动阶段我把标签的id属性修改了，会有影响吗？不会！var conn = document.getElementById("d1");这个已经获取到了事件源对象了！后续的操作都在内存中执行，而不会程序从头到尾重新执行一边！
代码执行结果： 结论：innerText只获取标签里的文本，innerHTML获取标签里的文本和标签！ ，都可以赋值，只不过innerHTML还可以赋值标签！
value只是针对表单元素 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p id="demo">my first demo</p> <input id="input" type="text"> </body> <script> document.getElementById("input").value="<b>hello</b>" </script> </html>我们一个项目一般有很多标签，如果每个都要做如下操作：
var div1 = document.getElementById("box1"); var div2 = document.getElementById("box2"); var div3 = document.getElementById("box3"); var div4 = document.getElementById("box4"); var div5 = document.getElementById("box5"); // 这样看起来是不是特别臃肿？解决方案如下: function $(id){ return document.getElementById(id); } $("d1").onclick = function(){ alert("我是弹出的内容"); } $("d2").onclick = function(){ alert("我是弹出的内容"); } $("d3").onclick = function(){ alert("我是弹出的内容"); } // 看像上面这样就简洁方便多了吧！当然上面这个只能根据id选择标签 // 你可以根据你的项目情况，把其他选择方式也写上！如下： function $(cls){ return document.getElementsByClassName(cls)[0]; } function $(tagname){ return document.getElementsByTagName(tagname)[0]; }盒子隐藏两种方式，第二种方式我放在博客广告栏关闭中采用
<head> <style> #d1 { width: 200px; height: 200px; background: red; } </style> </head> <body> <button id="d2">隐藏</button> <div id="d1"> </div> <script> var btn=document.getElementById("d2"); var div=document.getElementById("d1"); var isdisplay = true btn.onclick=function(){ if (isdisplay === true){ div.style.display="none"; isdisplay = false; btn.innerText="显示"; }else{ div.style.display="block"; isdisplay = true; btn.innerText="隐藏"; } } </script>实现效果：
看，这该死的广告它又来了！ 幸好上面有个❌可以关闭！今天刚学习了js的盒子的隐藏，就想着自己来实践一下！代码如下：
<head> <style> #d1 { height: 90px; background-image: url("src.png"); } .active { display: none; } #d2 { position: relative; left: 1240px; background-color: #248df2; border: none; } </style> </head> <body> <div id="d1" class="app"> <button id="d2">❌</button> </div> <script> var btn = document.getElementById('d2'); var div = document.getElementById('d1'); var isdisplay=true btn.onclick=function(){ div.className='active'; } </script> </body>实现效果：
图片命名如下： 实现代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <link rel="stylesheet" href="style.css">--> <style> body { margin: 0; } #box1 { width: 236px; height: 354px; position: relative; left: 50%; top: 50%; margin-top: 177px; margin-left: -118px; background-image: url("1.jpg"); } </style> </head> <body> <div id="box1"></div> <script type="text/javascript"> var div=document.getElementById("box1"); div.onmouseover = function(){ var num = Math.floor(Math.random() * 5) + 1; div.style.backgroundImage="url("+"\""+num+".jpg\")"; } </script> </body> </html>除了字符串拼接的方法，你也可以采用数组实现，把所有的url存进数组，然后遍历一个，count++，下次就取到下一个了！
注意：数组应该把"url(\"1.jpg\")"整个存进去，到时候直接赋值给div.style.backgroundImage就行了！
