if分支结构
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>分支结构</title> </head> <body> 分支结构 </body> <script type="text/javascript"> // if分支结构
// var tq = prompt("今天天气(晴|雨)"); // if (tq == '雨') { // alert("带伞上学!"); // }
// 语法 /* if (条件表达式) { 代码块; } */
// 条件表达式可以为普通表达式 // 表达式:由常量,变量组成的合法式子 1 | 1+a | ""+0("0") // 0 "" null undefined NaN 为假 // var temp = " "; // 为真 // if (temp) { // alert("表达式为真!"); // }
// 双分支 // var tq = prompt("今天天气(晴|雨)"); // if (tq == '雨') { // alert("带伞上学!"); // } else { // alert("不上学!"); // }
// 多分支 // var tq = prompt("今天天气(晴|雨|多云)"); // if (tq == '雨') { // alert("带伞上学!"); // } else if (tq == '晴') { // alert("不上学!"); // } else // alert("睡觉!"); // alert("恶龙咆哮!"); // 该语句不属于if结构 // 1.else分支可以省略 // 2.else if分支可以为多个
// 注: 当某个分支只有一条逻辑语句,可以省略{}
// if嵌套 var jijie = prompt("季节(春夏秋冬):"); if (jijie == '冬') { var wd = prompt("今天温度(-5|5)"); // 接收到的是字符串 wd = Number(wd); if (wd < 0) { alert('穿羽绒服!'); } else { alert('穿短袖!'); } } // else if 春夏秋
</script> </html>
switch分支结构
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>switch分支</title> </head> <body> switch分支 </body> <script type="text/javascript"> var month = prompt('请输入月份:');
// month = + month; // switch (month) { // // case 1: alert("31天"); break; // case 1: alert("31天"); // default: alert("28天"); // }
// switch (month) { // case '1': alert("31天"); break; // default: alert("28天"); // }
month = + month; switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: { alert('31天'); break; };
case 4: case 6: case 9: case 11: alert("30天"); break;
default: alert("28天"); }
// 总结: // 1.break结束最近的case,跳出switch结构 // 2.表达式与值进行的是全等比较,所以表达式与值得类型需要统一 (字符串 | 整数值) // 3.多个case可以共用逻辑代码块 // 4.default分支为默认分支,需要出现在所有case之下,也可以省略
</script> </html>
循环结构
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>循环结构</title> </head> <body> 循环结构 </body> <script type="text/javascript"> // 1.for循环 // 语法: /* for (循环变量①; 条件表达式②; 循环变量增量③) { 代码块④; } */ // 执行的逻辑顺序 ① ②④③ ... ②④③ ② (②④③个数[0, n]) // for (var i = 0; i < 5; i++) { // document.write("</br><h1 style='margin: 0'>学习使我快乐!</h1>"); // } // 一条逻辑语句可以省略{}
// 2.while循环 // var i = 0; // while (i < 5) { // document.write("</br><h1 style='margin: 0'>学习使我快乐!</h1>"); // i++; // } // while可以解决不明确循环次数但知道循环出口条件的需求
// 3.do...while循环 // var i = 0; // do { // document.write("</br><h1 style='margin: 0'>学习使我快乐!</h1>"); // i++; // } while (i < 5); // do..while循环,循环体一定会被执行,至少执行一次
// 4.for...in循环 obj = {"name": "zero", "age": 8, 1: 100}; for (k in obj) { console.log(k, obj[k]) } // 对象的简单使用 console.log(obj["name"]); console.log(obj[1]); // 用于遍历对象：遍历的结果为key，通过[]语法访问对应的value
// 5.for...of迭代器 // iter = ['a', 'b', 'c']; iter = 'abc'; for (v of iter) { console.log(v) } // 1.用于遍历可迭代对象：遍历结果为value // 2.ES6新增，可迭代对象有 字符串、数组、Map、Set、Anguments、NodeList等
// 6.关键词 // break:结束本层循环 // continue:结束本次循环,进入下一次循环 </script> </html>
异常处理
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>异常处理</title> </head> <body> 异常处理 </body> <script type="text/javascript"> while (1) { var num1 = + prompt("请输入第一个数字:"); var num2 = + prompt("请输入第二个数字:");
var res = num1 + num2;
try { if (isNaN(res)) throw "计算有误!"; alert(res); break; } catch (err) { console.log("异常:" + err); } finally { console.log('该语句一定会被执行,一次try逻辑执行一次'); } }
</script> </html>
函数初级 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>函数初级</title> </head> <body> 函数初级 </body> <script type="text/javascript"> // 0.函数的调用 // 函数名(参数列表)
// 1.ES5函数定义 function fn1() { console.log("fn1 函数"); } fn1();
var fn2 = function () { console.log("fn2 函数"); } fn2();
// 2.ES6函数定义 let fn3 = () => { console.log("fn3 函数"); } fn3();
// 3.匿名函数 // (function () { // console.log("匿名函数"); // })
// 匿名函数定义后,无法使用,所以只能在定义阶段自调用 let d = "匿名"; (function (t) { console.log(t + "函数"); })(d);
</script>
<script type="text/javascript"> // 函数的参数 // 注:js参数都是位置参数
// 参数不统一 function fun1 (a, b, c) { console.log(a, b, c); // 100 undefined undefined } fun1(100);
function fun2 (a) { console.log(a); // 100 } fun2(100, 200, 300); // 200,300被丢弃
// 默认值参数 function fun3 (a, b=20, c, d=40) { console.log(a, b, c, d); // 100 200 300 40 } fun3(100, 200, 300);
// 不定长参数 function fun4 (a, ...b) { console.log(a, b); // 100 [200 300] } fun4(100, 200, 300); // ...变量必须出现在参数列表最后
</script>
<script type="text/javascript"> // 返回值 // 1.空返回 var func1 = function (num) { if (num == 0) return; // 用来结束函数 console.log('num: ', num); } func1(100);
// 2.返回值类型任意,但只能为一个值 var func2 = function (a, b) { // return a, b, a + b; // 不报错,但只返回最后一个值 return a + b; } // 注:函数返回值就是函数的值,外界可以用变量结束函数执行后的函数值 var res = func2(10, 20); console.log("和:%d", res);
</script>
</html>
事件初级 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>事件初级</title> <script type="text/javascript"> // 事件需要绑定具体执行函数(方法) // 通过事件满足的条件触发绑定的函数(方法) // 函数(方法)完成具体的功能
// onload事件附属于window // onload触发条件:页面加载完毕(DOM文档树及页面资源) // 行间式方式可以书写在body标签 window.onload = function () { div.style.color = 'red'; } </script> </head> <body> 事件初级 <div id="div" onclick="div.style.color = 'orange';" onmouseover="overAction()">123</div> <!-- 1.直接将js代码块书写在行间事件中, 不提倡 --> <!-- 2.行间事件调用函数, 不提倡(比较直接) --> </body>
<script type="text/javascript"> var overAction = function () { div.style.color = 'blue'; }
// 3.为目的对象绑定事件方法,内部可以使用this关键词 // this就是绑定的对象本身 div.onmouseout = function () { this.style.color = 'pink'; }
</script>
</html>
js选择器 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js选择器</title> <style type="text/css"> /*css选择器*/ #d { 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="d" class="dd">123</div> <div id="d" class="dd">123</div> <div id="e1" class="ee">123</div> <div id="e2" class="ee">123</div> <div id="e3" class="ee">123</div> </body>
<script type="text/javascript"> // 1.直接可以通过id名,确定页面元素对象(id一定要唯一) // d.style.color = "cyan";
// 2.getElement方式 // document:所有标签都存在于文档中,所有通过document对象就可以找到指定的页面元素对象
// id var d1 = document.getElementById('d'); d1.style.backgroundColor = "pink";
// class var d2 = document.getElementsByClassName('dd'); console.log(d2); // HTMLCollection 类数组类型 console.log(d2[0].style); d2[0].style.backgroundColor = "cyan"; d2[1].style.backgroundColor = "blue";
// tagName var d3 = document.getElementsByTagName('div'); d3[1].style.backgroundColor = "#333";
// 注:只有getElementById只能由document调用
var body = document.getElementsByTagName('body')[0]; body.style.backgroundColor = "#eee"; var d4 = body.getElementsByClassName('dd')[0]; d4.style.backgroundColor = "orange"; var d5 = body.getElementsByTagName('div')[1]; d5.style.backgroundColor = "brown";
</script>
<script type="text/javascript"> // 参数为css语法的选择器
// 找满足条件的第一个 // 可以被document调用,也可以被普通对象调用 var e1 = document.querySelector('#e1'); // id为e1的标签,唯一一个 e1.style.backgroundColor = "#f7f";
var e2 = document.querySelector('body .ee'); // body标签下的class为ee的 第一个标签 e2.style.backgroundColor = "#ff6700";
var e3 = document.querySelector('body .ee:nth-of-type(5)'); console.log(e3) e3.style.backgroundColor = "#ff6700";
// 找满足条件的所有 var es = document.querySelectorAll('.ee'); console.log(es); // NodeList es[1].style.backgroundColor = "tomato";
</script>
</html>
js操作页面内容 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>JS操作页面内容</title> </head> <body> <div class="sup"> sup的文本 <div class="sub">sub的文本</div> </div> <form action=""> <input class="input" type="text" /> <button class="btn" type="button">获取</button> </form> </body>
<script type="text/javascript"> // 通过js获取页面需要操作的元素对象 var sup = document.querySelector('.sup'); var sub = sup.querySelector('.sub');
// 获取
// 自身及所有子级的文本 console.log(">>>>>" + sup.innerText); // sup的文本 sub的文本 console.log(">>>>>" + sub.innerText); // sub的文本
// 自身文本及所有子级的所有(包含标签的所有信息:标签名,id名,class名,样式,事件,文本...) console.log(">>>>>" + sup.innerHTML); // <div class="sub">sub的文本</div> console.log(">>>>>" + sub.innerHTML); // sub的文本
// 赋值 sub.innerText = "<b>修改的sub文本</b>"; sub.innerHTML = "<b style='color: red'>修改的sub文本</b>"; // Text不解析标签语法,原样作为文本赋值给目标对象 // HTML可以解析标签语法
console.log("-------------------------------------------------"); console.log(sub.innerHTML); // <b style='color: red'>修改的sub文本</b> console.log("-------------------------------------------------"); console.log(sub.outerHTML); // <div class="sub"><b style='color: red'>修改的sub文本</b></div> console.log("-------------------------------------------------");
var btn = document.querySelector('.btn'); var ipt = document.querySelector('.input'); btn.onclick = function () { // 获取表单元素的文本值
// 获取文本 var v = ipt.value; console.log(v);
// 清空文本 ipt.value = ""; // 赋值空文本 }
</script>
</html>
js操作页面样式 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js操作页面样式</title> <style type="text/css"> div#div.div { 200px; height: 200px; background-color: red; } </style> </head> <body> <!-- style="" 行间式优先级高于任何css选择器 --> <!-- 低于!important --> <!-- <div id="div" class="div" style=""></div> --> <div id="div" class="div"></div> <button class="btn">切换</button> </body> <script type="text/javascript"> var div = document.querySelector('.div'); // js操作的就是行间式 // div.style.backgroundColor = 'orange';
// 需求:切换背景颜色 红 <=> 黄 // 1.获取原来的颜色 // 2.判断颜色 // 3.修改颜色
// 因为页面一般采用css样式布局,css布局的样式叫 计算后样式 // 而ele.style.样式只能获取行间式样式 // var bgColor = div.style.backgroundColor; // console.log(bgColor);
// 获取计算后样式 // getComputedStyle参数: 页面对象 伪类 // getPropertyValue参数: css语法的样式字符串 // var bgColor = getComputedStyle(div, null).getPropertyValue('background-color'); var bgColor = getComputedStyle(div, null).backgroundColor; console.log(bgColor); // rgb(255, 0, 0)
var btn = document.querySelector('.btn'); // 点击一下 btn.onclick = function () { // 获取当前颜色一次 bgColor = getComputedStyle(div, null).backgroundColor; console.log(bgColor); // 判断并修改 if (bgColor == 'rgb(255, 0, 0)') { div.style.backgroundColor = 'orange'; } else { div.style.backgroundColor = 'red'; } }
</script> </html>
js操作类名 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js操作类名</title> <style type="text/css"> .div { 200px; height: 200px; background-color: red; display: none; } .show { 200px; height: 200px; background-color: red; display: block; } .hidden { display: none; } .border { border: 1px solid black; } </style> </head> <body> <button class="btn1">显示</button> <button class="btn2">加边框</button> <button class="btn3">改颜色</button> <button class="btn4">加文本</button> <button class="btn5">隐藏</button> <div class="div"></div> </body> <script type="text/javascript"> var div = document.querySelector('.div'); var b1 = document.querySelector('.btn1'); var b5 = document.querySelector('.btn5'); var b2 = document.querySelector('.btn2'); var b4 = document.querySelector('.btn4');
b1.onclick = function () { div.className = 'show'; } b5.onclick = function () { div.className = 'hidden'; } b2.onclick = function () { div.className += ' border'; } b4.onclick = function () { div.innerText += "文本"; }
</script> </html>