0.复习
1.导入 <div id="div1" onclick="this.style.color = 'red';">12345</div> <!--最好出现在body的最下方 => 将js代码块放在body与html结束标签之间--> <script> div1.onclick = function(){ this.style.color = 'red'; } </script> js/index.js div1.onclick = function(){ this.style.color = 'red'; } index.html <script src="js/index.js"> // 内部代码会屏蔽 </script> <!-- 2.js操作页面元素对象 1.通过选择器获取元素对象 2.为对象绑定事件 3.在事件中完成功能(修改内容,样式,类名,全局属性...) --> <script> var box = document.getElementById('div1'); | getElementsByClassName() | getElementsByTagName() var box = document.querySelector('div#div1'); | querySelectorAll('css选择器'); box.ondblclick = function(){} box.innerText|innerHTML box.className getComputedStyle(box, null).属性名 // 只读 box.style.属性名 // 可读可写 img的src属性 var img = document.querySelector('img'); img.setAttribute("src", "https://www.baidu.com/img/baidu_jgylogo3.gif"); console.log(img.getAttribute("src")); </script> number | string | undefined | boolean | function | object | null Array | Date | RegExp | Math
1. 值类型之间的相互转换
1.转字符串：String() | .toString() | "" + // 123..toString() | 重点是 "" + // 总结: // 1.最快转化为数字类型 +"123" | +true // 2.最快转化为字符串形式 "" + 123 | "" + true var n1 = +"123"; console.log(n1, typeof n1); //n1被转换成数字类型 console.log(+s2,typeof +s2); var nn1 = 123; var ss1 = String(nn1); var ss2 = nn1.toString(); var ss3 = "" + nn1; console.log(ss1, ss2, ss3);//都是字符串string类型 // 了解(转换字符型的方法) var ss4 = 123..toString();//123.代表小数点,后续的.是调用toString方法 console.log(ss4); // 弱语言类型 console.log(3 + "5"); // "35" console.log(3 - "5"); // -2 2.转数字：Number(a) | parseFloat() | parseInt() | + // +'123' // parseFloat('3.14.15') => 3.14 | parseInt('3.14.15') => 3 console.log(Number(false), Number(true), true + true + true); 对于布尔型true代表的数字就是1 var s1 = "123"; var s2 = "3.14"; var s3 = "123abc"; var s4 = "3.14.15"; var s5 = "abc123"; // 123 3.14 NaN NaN NaN console.log(Number(s1), Number(s2), Number(s3), Number(s4), Number(s5)); 3.转布尔：Boolean(a) var num = 10; var s = "123"; console.log(num,s); num = 0; s = ""; var b1 = Boolean(num); var b2 = Boolean(s); console.log(b1, b2); // 后期我们会在if分支结构中的判断以及循环中的判断中使用boolean类型, // 以上两种情况下, 系统都会把非boolean的数据自动转换为boolean // 0 | "" | null | undefined | NaN => false, 其他都会转化为true 非数字：NaN // 当一个其他类型转化为数字类型的产物 // 任何判断一个结果是否是NaN, isNaN(运算)
2.运算符
/* 算数运算符：+ - * / % ++ -- 赋值运算符：+= -= *= /= %= 比较运算符：> < >= <= == === != !== 逻辑运算符：&& || ！ 三目运算符：结果 = 条件表达式 ? 结果1 : 结果2; */ <!--需求: box的内容是123,则将文字颜色修改为red,负责不做操作--> <div id="box">1234</div> <script> var box_ctx = box.innerText; // 前者满足,则做后者操作;前者不满足,后者被短路,不做操作 box_ctx == '1234' && (box.style.color = 'red'); </script> // js中不区分整形和浮点型, 结果为什么就是什么 var res = 5 / 2; // 2.5 // 任何正整数对n取余 结果为: [0, n-1] // num++ | ++num => num = num + 1; => 自增1 // ++在后先赋值再自增 | ++在前先自增再赋值 var num = 10; var r1 = ++num; console.log(r1); // ++num => re=11 | num++ => re=10 console.log(num); // 11 x += 10; // => x = x + 10 console.log(y == z); // 只做值比较 => true console.log(y === z); // 全等: 值与类型都必须相等 => false // 逻辑与: 条件1 && 条件2 => 全为真则真,否则为假 // 逻辑或: 条件1 || 条件2 => 全为假则假,否则为真 // 逻辑非: 非真即假,非假即真 // 逻辑与的短路效果, 条件1为假, 条件2就不会被执行 // 逻辑或的短路效果, 条件1为真, 条件2就不会被执行 // 逻辑运算符的短路效果 var res1 = a1 == a3 && a2++; // => res1结果 即 a2的结果 console.log(res1, a2); // 20, 21 // 逻辑与的短路效果, 条件1为假, 条件2就不会被执行 var res1 = a1 === a3 && ++a2; // => res1结果 即 a2的结果 console.log(res1, a2); // false 20 // 逻辑或的短路效果, 条件为真, 条件2就不会被执行 var res2 = a1 == a3 || a2++; console.log(res2, a2); // true 20 // 三目运算符：结果 = 条件表达式 ? 结果1 : 结果2; // 条件满足, 执行:前的结果1, 否则执行:后的结果2 var xx = 10; var yy = '10'; // 条件满足, 执行:前的结果1, 否则执行:后的结果2 var res = xx == yy ? "xx与yy的值相等" : "xx与yy的值不相等"; console.log(res) console.log(NaN == NaN, isNaN(NaN)) //False,True(NaN与Nan值不相等)
3.if条件判断
// +做类型转换 var salary = +prompt("请输入工资:"); if (salary > 88888) { console.log("开始还账!"); salary -= 50000; console.log("开始购物 30000!"); salary -= 30000; // 最少剩8888 if (salary > 10000) { console.log("旅游!"); } else if (salary > 9000) { console.log("花200学习!"); salary -= 200; } else { console.log("吃土!") } } else { console.log("要求提薪"); } // if可以省略else if, 也可以省略else // if可以嵌套 // if(条件){ 逻辑体 } else if(条件){ 逻辑体 } else{ 逻辑体 }
4.循环
// 循环比较 // 1.for: 解决已知循环次数的 // 2.while: 可以解决所有for循环可以解决的问题,也可以解决不知道循环次数但知道结束条件 // 3.do...while: 无论条件是否满足,循环体都会被执行一次 for (循环变量①; 条件表达式②; 循环变量增量③) { 代码块④; } = while (条件表达式) { 代码块; } do { 代码块; } while (条件表达式); // break：结束本层循环 // continue：结束本次循环进入下一次循环
5.函数
// js函数的重点: 如何给事件提供功能 // 1.函数的定义 // function 函数名(形参列表) { // 函数体; // } // 2.函数的调用 // var res = 函数名(实参列表); 例子: // 函数定义与调用(调用可以写在定义前) function fn1() { console.log("函数fn1"); } var res = fn1(); console.log(res);//fn1函数没有返回值,res类型为undefined // 3.函数的参数 // i.个数不需要统一 function fn2(a, b) { console.log(a, b); } fn2(10, 20, 30);//传参数量超出形参个数,只接受形参的个数,不会报错 fn3("abc");//函数在定义前调用,因为代码会提前编译,会读取到函数定义部分,所有不会有问题 function fn3() { // 不需要参数就不接收, 需要就接收 console.log("自己玩") } // ii.可以任意位置具有默认值 function fn4(a, b=10, c, d=20) { console.log(a, b, c, d); } fn4(); // undefined 10 undefined 20 fn4(100) // 100 10 undefined 20 fn4(100, 200) // 100 200 undefined 20 fn4(100, null, 200) // 100 null 200 20//没有按关键字传参,只按照位置进行传参 // iii.通过...语法接收多个值 function fn5(...arr) { // 以数组形式接受多个值 console.log(arr) } fn5(1, 2, 3, 4, 5); // 4.返回值讲解 // i.可以空return操作，用来结束函数 function fn6(a) { if (a == 10) { return; } console.log("参数不为10"); } // ii.返回值可以为任意js类型数据 function fn7() { return { name: 'egon', age: 79 } } var res = fn7(); console.log(res) //返回一个数组的对象类型 console.log(res.age) // iii.函数最多只能拥有一个返回值 function fn8() { // return 10, true; // 了解: 有多个返回值时,JS只将最后一个值返回 // 解决方案 return [10, true]; } res = fn8(); console.log(res); // 5.匿名函数: 没有名字的函数, 函数只能在定义的时候自己来调用一次, 之后在也无法被调用 // 匿名函数 自定义 (function () { // 产生具备名称空间(局部作用域), 并且可以随着匿名函数调用完毕, 被回收 var aaa = 1000; console.log("匿名函数的自调用") })()