一,if分支结构(条件语句)
语法 if (条件表达式) { 代码块; } else if { 代码块; } else if { 代码块; } else { 代码块; }注意:1,当某一个分支只有与一条逻辑语句时,可以省略{}
2,可以多分支使用,也可以相互嵌套使用,只要逻辑没有问题就可以
例子:输入春夏秋冬四个季节,和季节对应的温度,给出穿什么衣服的建议 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>if 分支结构</title> </head> <body> 分支结构 </body> <script> var jijie = prompt('季节:春夏秋冬:') if (jijie == '冬') { var wd = prompt('今天的温度:') wd = Number(wd) if (wd <= 0) { alert('穿羽绒服') } else if (wd > 0) { alert('穿长袖') } else { alert('请输入正确信息') } } else if (jijie == '夏') { var wd = prompt('今天的温度:') wd = Number(wd) if (wd >= 5) { alert('穿长袖!') } else if (wd < 5) { alert('穿半袖!') } else { alert('请输入正确内容') } } else if (jijie == '春') { var wd = prompt('今天的温度:') wd = Number(wd) if (wd >= 5) { alert('穿长袖!') } else if (wd < 5) { alert('穿半袖!') } else { alert('请输入正确内容') } } else if (jijie == '秋') { var wd = prompt('今天的温度:') wd = Number(wd) if (wd >= 5) { alert('穿长袖!') } else if (wd < 5) { alert('穿半袖!') } else { alert('请输入正确内容') } } </script> </html>
二,switch分支结构
1,一个条件也就是一种算法,可以获得多种结果
2,break结束最近的case,跳出switch结构
3,多个case可以共用逻辑代码块
4,表达式与值进行的是全等比较,所以表达式与值得类型需要统一 (字符串 | 整数值)
5,default:上面几种情况都不出现的时候就执行这条语句
语法: switch (一种条件) { case 结果1: 代码; break; case 结果2: 代码; break; case 结果3: 代码; break; case 结果4: 代码; break; default:代码块; }<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>switch分支结构</title> </head> <body> switch分支结构 </body> <script> var month = prompt('请输入月份'); 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天"); } </script> </html>
三,循环结构
一条逻辑可以省略{}
break:结束本层循环
continue:结束本次循环,进入下一次循环
1.for循环
语法: for (循环变量①; 条件表达式②; 循环变量增量③) { 代码块④; }2,while循环
while可以解决不明确循环次数但知道循环出口条件的需求
语法: 声明变量 while (条件) { 循环体代码 变量自增 }3,do...while循环
do..while循环,循环体一定会被执行,至少执行一次
语法: 声明变量 do { 循环体代码 变量自增 } while (条件)4,for...in循环
主要用于对字典的查找,遍历字典的每一个Key
例子: obj = {"name": "zero", "age": 8, 1: 100}; for (k in obj) { console.log(k, obj[k]) } // 对象的简单使用 console.log(obj["name"]); console.log(obj[1]);5,for...of迭代器
1>.用于遍历可迭代对象：遍历结果为value
2>可用于所有的可迭代对象
例子: iter = ['a', 'b', 'c']; iter = 'abc'; for (v of iter) { console.log(v) }
四,异常处理:
<!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 { //throw是用于抛出异常 if (isNaN(res)) throw "计算有误!"; alert(res); break; } catch (err) { console.log("异常:" + err); } finally { console.log('该语句一定会被执行,一次try逻辑执行一次'); } } </script> </html>
五,函数初级
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);4,函数的参数
注: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); // ...变量必须出现在参数列表最后5,返回值
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);
六,事件初级
onload：页面加载完毕事件，只附属于window对象
onclick：鼠标点击事件
onmouseover：鼠标悬浮事件
onmouseout：鼠标移开事件
onfocus：表单元素获取焦点
onblur：表单元素失去焦点
<!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> <!-- 事件初级 onclick:鼠标点击时 onmouseover：鼠标悬浮事件(这里调用了一个函数) --> <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 { width: 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方式(该方式查找id,class,标签时都存在各自的函数) // 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"; // 标签 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语法的选择器 //3,querySelector方法,id,class,标签时都用一种 // 找满足条件的第一个 // 可以被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> // 通过js获取页面需要操作的元素对象 var sup = document.querySelector('.sup'); var sub = sup.querySelector('.sub'); //获取自身以及所有子级的文本 console.log(">>" + sup.innerText); // sup的文本\n sub的文本 console.log(">>" + sub.innerText); // sub的文本 //自身文本及所有子级的所有(包含标签的所有信息:标签名,id名,class名,样式,事件,文本...) console.log(">>" + sup.innerHTML) //sup的标签下面的全部都显示 console.log(">>" + sub.innerHTML) //sub的文本 //给页面中的值赋值 sub.innerText = "<b>修改的sub文本</b>"//不解析标签语法,原样作为文本赋值给目标对象 sub.innerHTML = "<b style='color: red'>修改的sub文本</b>"//HTML可以解析标签语法 console.log(sub.innerHTML); // 除标签下面的东西全部赋值给目标对象 console.log(sub.outerHTML); // 连着标签里面的东西全部赋值给目标对象 var btn = document.querySelector('.btn'); var ipt = document.querySelector('.input'); //把input里面的内容提交给后台 btn.onclick = function () { // 获取表单元素的文本值 // 获取文本 var v = ipt.value; console.log(v); // 清空文本 ipt.value = ""; // 赋值空文本 } </script> </html>
九,操作页面样式
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js操作页面样式</title> <style type="text/css"> div#div.div { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <!-- style="background-color: orange;" 行间式优先级高于任何css选择器 --> <!-- 低于!important --> <!-- <div id="div" class="div" style="background-color: orange;"></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 { width: 200px; height: 200px; background-color: red; display: none; } .show { width: 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 () { //把b1中的类名改成show div.className = 'show'; } b5.onclick = function () { div.className = 'hidden'; } b2.onclick = function () { div.className += ' border'; } b4.onclick = function () { div.innerText += "文本"; } </script> </html>