day5
-
02.函数的预解析（函数的执行过程）
//cosole.log(a);不会预解析函数内部的变量，会报错，a is no defined function fun(){ //函数内部也有自己的预解析 //也会预解析var声明的变量和声明式定义的函数 //var a; 19--- console.log(a); 20----- var a =10; //a=10 } 23---fun(); /* 外部的预解析： 预解析func这个函数，会把fun这个函数名提前，并且给这个函数名赋值了一个函数地址 外部的代码执行： 执行23代码，fun()根据函数外找到函数的地址 进入函数的内部，执行函数内部的代码 函数内部的预解析： 预解析var声明的变量a 函数内部代码的执行： 19行console.log(a)//undefined 20行 a=10 给变量a赋值 销毁扫行空间 *///函数预解析的第二种情况 function fun(n){ console.log(n); n(); //这个预解析会预解析n这个变量，不会给n赋值 //n=20不是一个函数 //var n = funciont(){ // console.log(1) // } //预解析 n并且给n赋值一个函数地址 //n=这个函数 n()可以调用。 function n(){ console.log(1); } /* 当var 声明的变量和声明式函数的变量一样的。会预解析，声明式定义的函数 var n = 20; var n = function (){} function n(){} */ 40-----fun(20); /* function fun (n){ console.log(n); n(); var n=20 } fun(function (){ console.log(1); }) 函数外部的预解析： fun这个函数会把函数地址赋值给fun 函数外部的代码执行： 40行 fun()，根据fun找到函数地址 去执行函数里面的代码 函数内部的执行过： 【1】先预解析（形参 和 函数中的变量的预解析） + 预解析的选择（形参名 和 函数内部变量一样的时候） + 有限有预解析 声明式定义函数 【2】执行函数的代码 【3】函数执行空间的销毁 */
-
03.常见的事件
事件：浏览器响应 用户操作的一个机制 常见的事件类型： 鼠标事件： onclick === 单击事件，按下事件和抬起事件的组合 ondblclick ===双击事件 onmousedown ===鼠标按下事件 onmouseup === 鼠标抬起事件 onmouseover === 鼠标移入事件 onmouseenter === 鼠标移入事件 onmouseout === 鼠标移出事件 onmouseleave === 鼠标移出事件 onmousemove === 鼠标移动事件 input事件： oninput === 输入框输入事件，只要输入就会触发 onchange === 输入改变事件,只有input的内容改变的时候才会触发 onblur ===失去焦点事件 onfocus === 获取焦点事件 键盘事件： onkeydown === 键盘按下的事件 onkeyup === 键盘抬起事件 浏览事件： window.onload === 页面资源加载完成之后执行的事件 window.onscroll === 滚动条滚动事件 window.onresize === 窗口大小改变事件
-
04.input事件案例
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box { width: 300px; height: 200px; background: red; } </style> </head> <body> <div id="box"></div> <p> <span>价格：</span> <span id="price">998</span> </p> <p> <span>数量：</span> <input type="number" id="btn" min="0" max="10" value="0"> </p> <p> <span>总价：</span> <span id="total">0</span> </p> <script> btn.onchange = function () { // 获取 价格的值 和 数量的值 // 相乘 在赋值给 总价 console.log(price.innerHTML); console.log(btn.value); console.log(price.innerHTML * btn.value); total.innerHTML = price.innerHTML * btn.value } </script> </body> </html>
-
05.函数中的this
<script> /* this 函数中的关键字 this 是一个对象，主要跟调用函数的有关系 直接调用函数，函数中的this指向的是 window 事件驱动调用函数，函数中的this指向的是 绑定事件的元素 总结：在调用函数的表达式中 函数中this指向的是点(.) 前面的对象 */ function fun() { // this 指向的是为window console.log(this); } // fun(); // fun() <===> window.fun() window.fun(); btn.onclick = fun; </script>
-
06.获取元素的方法
<div id="box" class="div1">我是div元素</div> <p class="div1">wer34t45t</p> <script> /* 【1】通过标签名来获取 document.getElementsByTagName("标签名div") 会获取到页面中所有的同类型的标签 返回值：一个伪数组（里面的数据就是获取到这些元素） 【2】通过元素的id名来获取 document.getElementById("id名") 会获取到的是这个id名为 括号中的呢个元素 返回值：标签（dom元素） 【3】通过class名获取 document.getElmentsByClassName("class名"); 返回值：一个伪数组（满足class这个条键的所有元素） */ // var box = document.getElementById("box"); // console.log(box); var box = document.getElementsByClassName("div1"); console.log(box); // 不可以直接使用box绑定事件，因为box是一个伪数组 // 必须通过索引的形式把伪数组中的是数据取出来才可以使用 // box[0] 拿到索引为0 的那个数据 box[1].onclick = function () { console.log(1); } </script> //this指向案例 <body> <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> <button id="btn3">按钮3</button> <button id="btn4">按钮4</button> <script> // 需要获取元素 // 通过标签名来获取元素（会获取到页面中的所有button元素） // 使用一个伪数组 // length 属性 表示 获取到元素的个数 // 索引：可以通过索引获取某一个元素 var btn = document.getElementsByTagName("button"); for (var i = 0; i < btn.length; i++) { btn[i].onclick = function () { // console.log(i); // btn[i] 不可以 ，因为i = 4 ,在点击之前 for循环已经结束 // for循环结束的时候 i= 4 btn[4] 不存在 // this.innerHTML 来获取，this指向的就是你当前点击的这个元素 console.log(this.innerHTML); } } </script> </body>
-
07.给元素添加class 和 样式
<div>我是div，需要用js给我添加样式</div> <script> /* 【1】先获取你要添加样式的元素 【2】dom元素.style.你要添加的属性 = 属性值（样式中需要有单位的必须添加px） */ var div = document.getElementsByTagName("div"); div[0].style.width = "200px"; div[0].style.height = "200px"; div[0].style.background = "red"; div[0].style.fontSize = "20px"; </script>
-
08.table切换案例
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 200px; height: 200px; background: pink; color: #fff; font-size: 20px; } </style> </head> <body> <div class="aa">千锋教育哈哈哈</div> <button>点击添加样式</button> <button>点击移出样式</button> <script> // 先获取你要操作的元素 // div : 需要操作，给他添加样式 // button : 绑定点击事件 var box = document.getElementsByTagName("div"); var btn = document.getElementsByTagName("button"); btn[0].onclick = function () { // 元素添加class名 会把之前的class名覆盖 box[0].className = "box"; } btn[1].onclick = function () { // 表示把class名移出 box[0].className = ""; } </script> </body> </html>08.tab切换
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } ul, li { list-style: none; } button { width: 80px; height: 30px; border: 1px solid #ccc; } ul { border: 1px solid red; width: 400px; height: 400px; } ul li { width: 100%; height: 100%; display: none; } .hover { background: orange; } ul .active { display: block; } </style> </head> <body> <button class="hover">按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <ul> <li class="active">11111111111111</li> <li>22222222222222</li> <li>33333333333333</li> <li>44444444444444</li> </ul> <script> // 获取元素 var btn = document.getElementsByTagName("button"); var li = document.getElementsByTagName("li"); // 给btn绑定点击事件 for (var i = 0; i < btn.length; i++) { // 给每一个btn元素添加一个index的属性，属性值为 索引 btn[i].index = i; btn[i].onclick = function () { // 给当前点击的这个元素 添加hover class名 // 其他的元素都移出 // 排他思想 /* 把其他的元素都移出 ，只给自己添加 */ // 通过循环把所有的btn的class都移出 for (var j = 0; j < btn.length; j++) { btn[j].className = ""; } // 然后给当前点击的这个元素添加 // this就指向当前点击的这个元素 this.className = "hover"; // 排他思想 把所有li的active移出，在给当前点击对应的li添加 for (var k = 0; k < li.length; k++) { li[k].className = ""; } // 把对应li显示出来 // btn中的元素 和 li中元素 对应的元素下标一样 // 需要获取点击这个元素的索引值 console.log(this.index); // 通过this.index 来获取当前点击这个元的索引 li[this.index].className = "active"; } } </script> </body>
1356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
