无JS验证场景
JS验证场景
JS语法组成
JS输出--->控制台
<head><meta charset="utf-8" /><title>JS输出</title><script>console.log("hello world");</script>
</head>
console.log("helloworld")
<head><meta charset="utf-8" /><title>引入外部js文件</title><script src="js/index.js"></script><script>console.log("hello前端");</script>
</head>
JS变量
变量声明
<head><meta charset="utf-8" /><title>变量声明</title><script>/*变量在一次运行中可以改变数值的量1.变量名必须以字母(包含大小写字母)、下划线(_)、$和数字组成，变量不能以数字开头；2.不能使用JavaScript中的关键字作为变量名(var、true等)； 3.JavaScript变量名是严格区分大小写的； 4.变量命名使用“小驼峰”命名法则，第一个单词首字母小写，第二个单词起首字母大写，例如userName*/var user;var userName;</script>
</head>
变量赋值
<head><meta charset="utf-8" /><title>变量赋值</title><script>/*变量赋值1.先定义后赋值var age;age = 18; 2.定义时赋值var age = 18;3.同时声明多个变量,随后分别进行赋值var name,age;name = "张三";age = 18;4.同时声明多个变量，并同时赋值var name="张三",age=18;*//* var age;age = 18;console.log(age);age = 20;console.log(age); *//* var age = 18;console.log(age); *//* var name, age;name = "张三";age = 18;console.log(name);console.log(age); */var name = "张三", age = 18;console.log(name);console.log(age);</script>
</head>
JS数据类型
number类型
<head><meta charset="utf-8" /><title>number类型</title><script>var age = 18;console.log(age); // 18console.log(typeof age); // numbervar price = 11.8;console.log(price); // 11.8console.log(typeof price); // numbervar max = -1 / 0;console.log(max); // -Infinityconsole.log(typeof max); // numbervar num = parseFloat("a111");console.log(num);console.log(typeof num);// NaN number// 如果是111a,那么就转为111</script>
</head>
boolean类型
<head><meta charset="utf-8" /><title>boolean类型</title><script>var b1 = true;var b2 = false;console.log(b1);console.log(b2);console.log(typeof b1); // booleanconsole.log(typeof b2); // booleanvar num1 = 5;var num2 = 3;var b3 = num1 > num2;console.log(b3);console.log(typeof b3); // boolean</script>
</head>
undefined类型
<head><meta charset="utf-8" /><title>undefined类型</title><script>var num;console.log(num);console.log(typeof num);</script>
</head>
string类型
<head><meta charset="utf-8" /><title>string类型</title><script>//var str = "helloworld";var str = 'helloworld';console.log(str);console.log(typeof str);</script>
</head>
null类型
<head><meta charset="utf-8" /><title>null类型</title><script>var obj = null;console.log(obj);console.log(typeof obj);</script>
</head>
强制类型转换
Number
<head><meta charset="utf-8" /><title>Number转换</title><script>var num = Number("123.5a");console.log(num); // NaNconsole.log(typeof num); // number</script>
</head>
Boolean
<head><meta charset="utf-8" /><title>Boolean转换</title><script>/* 当value其值为 0、-0、null、""、false、undefined 或 NaN 时，那么Boolean()转换成Boolean类型的值为 false。其他值会被转为true*/var b = Boolean(0);console.log(b);console.log(typeof b);console.log(Boolean(-0));console.log(Boolean(null));console.log(Boolean(undefined));console.log(Boolean(""));console.log(Boolean(NaN));console.log(Boolean(false));console.log(Boolean(1));</script>
</head>
String
<head><meta charset="utf-8" /><title>String转换</title><script>var num = 10;var str = String(num);console.log(str);console.log(typeof str);console.log(String(true)); // trueconsole.log(String(undefined)); // undefinedconsole.log(String(null)); // trueconsole.log(String(NaN)); // NaN</script>
</head>
ParseInt转换
<head><meta charset="utf-8" /><title>parseInt转换</title><script>console.log(parseInt("123")); // 123console.log(parseInt("123powernode")); // 123console.log(parseInt("123powernode456")); // 123console.log(parseInt(" 123 ")); // 123</script>
</head>
ParseFloat转换
<head><meta charset="utf-8" /><title>parseFloat转换</title><script>console.log(parseFloat("123.45")); // 123.45console.log(parseFloat("123.45powernode")); // 123.45console.log(parseFloat("123.45powernode456")); // 123.45console.log(parseFloat(" 123.45 ")); // 123.45console.log(parseFloat("p123.45owernode")); // NaN</script>
</head>
运算符分类
数字运算符
<head><meta charset="utf-8" /><title>算数运算符</title><script>var num1 = 7;var num2 = 2;console.log(num1 + num2); // 9console.log(num1 - num2); // 5console.log(num1 * num2); // 14console.log(num1 / num2); // 3.5console.log(num1 % num2); // 1</script>
</head>
自增自减运算符
<head><meta charset="utf-8" /><title>自增自减运算符</title><script>/*自增自减运算符：作用是对于变量做自增1的操作，或者自减1的操作自增++自减--【1】单独使用在前在后没有区别【2】组合使用在前：先做自增，然后将自增后的结果带入参与运算在后：先将原来的值带入参与运算，运算完毕以后，立即自增*/var num = 1;num--; //单独使用console.log(num); // 0var num = 1;var num2 = num++;console.log(num); // 2console.log(num2); // 1var num1 = 2;var num2 = 3;console.log(num1++ + ++num2); //6console.log(num1); //3console.log(num2); //4</script>
</head>
赋值运算符
<head><meta charset="utf-8" /><title>赋值运算符</title><script>var num1 = 10;var num2 = num1;console.log(num1); // 10console.log(num2); // 10// += -= *= /= %=var num1 = 10;var num2 = 20;num1 += num2; //num1 = num1 + num2;console.log(num1); // 30</script>
</head>
条件运算符
<head><meta charset="utf-8" /><title>比较运算符</title><script>/*比较运算符：比较的是两个数据的关系> 大于>= 大于或等于< 小于<= 小于或等于== 等于（值）!= 不等于=== 全等于（值和类型）*/console.log(3 > 5); // falseconsole.log(5 >= 5); // trueconsole.log(3 < 5); // trueconsole.log(5 <= 5); // trueconsole.log(5 == 5);console.log(5 == "5"); // trueconsole.log(5 === "5"); // false</script>
</head>
字符串运算符
<head><meta charset="utf-8" /><title>字符串运算符</title><script>/*++=完成字符串拼接*/var str = "hello";var str2 = str + "world";console.log(str2); // helloworldvar str2 = str + 100;console.log(str2); // hello100console.log(typeof str2); // stringstr += "world"; // str = str + "world"console.log(str); // helloworldconsole.log(typeof str) // string</script>
</head>
逻辑运算符
<head><meta charset="utf-8" /><title>逻辑运算符</title><script>/*逻辑运算符：表示两个布尔值的逻辑关系与：与运算符表示并且的关系，两个参与运算的布尔值，都为true，结果才是true。只要有false，结果就是false或：或运算符表示或者的关系，两个参与运算的布尔值，有一个为true，结果即为true,都为false，结果就是false*/console.log(true && true); // trueconsole.log(true && false); //falseconsole.log(false && false); // falseconsole.log("----------------");console.log(true || true); // trueconsole.log(true || false); //trueconsole.log(false || false); // falsevar num = 10;//逻辑运算符布尔值的来源，可以来源于条件表达式的运算结果console.log(num >= 5 && num <= 15);//非：取反操作console.log(!true); //falseconsole.log(!false); //true</script>
</head>
三元运算符
<head><meta charset="utf-8" /><title>三目运算符</title><script>/*三目运算符条件表达式 ? 满足条件执行 : 不满足条件执行*/var num1 = 12;var num2 = 15;//var result = num1 > num2 ? "成立" : "不成立";var max = num1 > num2 ? num1 : num2;console.log(max);</script>
</head>
break和continue
<head><meta charset="utf-8" /><title>break和continue语句</title><script>/*break跳出循环continue跳过本次循环，执行下一次循环*//* for (var i = 0; i < 5; i++) {console.log(i); // 0 1 2if (i == 2) {break;}} */for (var i = 0; i < 5; i++) {if (i == 2) {continue;}console.log(i); // 0 1 3 4}</script>
</head>
隐式转换
<head><meta charset="utf-8" /><title>隐式转换</title><script>/*隐式转换指的是，我们没有使用转换语法完成转换，而是在运算的过程中，完成的转换我们来看一下常见的隐式转换场景1. 一侧有string，+会发生字符串拼接，会将数据转换字符串类型2. 一侧有number，另一侧是基本类型 +号运算的时候会将数据转换number类型有意义的转为1true无意义的转为0false null注意NaN undefined特殊 不会转换3. 在使用判断逻辑时null undefined '' false 0 -0 NaN这几个是false，其他情况都是true4.==（1） NaN 和其他任何类型比较，永远返回false（2） string 和number 比较，先将string转为number类型（3） null和undefined比较，结果是true。除此之外，null、undefined和其他任何结果比较，值都为false*/var str = "hello" + 100;console.log(str);var num = 1 + undefined;console.log(num); // NaNvar num = 10;if (num) {console.log("条件成立");}if (NaN) {console.log("条件成立");}var b = NaN == NaN;console.log(b); // FALSEvar b = 1 == '1';console.log(b); // TRUEvar b = null == undefined;console.log(b); // truevar b1 = undefined == 0;var b2 = undefined == false;console.log(b1); // falseconsole.log(b2); // false</script>
</head>
函数
<head><meta charset="utf-8" /><title>函数</title><script>/*函数的定义function 函数名(参数1, 参数2, ... , 参数3) {// 需要执行的代码块 }1、function是一个关键字, 和var、typeof一样, 都是关键字, 后面要加空格;2、函数名的命名规范和变量命名一样, 只能是字母、数字、下划线、美元符号, 不能以数字开头, 一般采用驼峰式命名;3、函数名后的()中放置函数形参, 形参可以为任意多个(意味着可以没有形参), 如有有多个形参用","隔开;4、函数{}中就是需要执行的代码块。函数的调用函数名(实参1, 实参2, ... , 实参3);*/function add(a, b) {return a + b;}var num = add(2, 3);var num2 = add(20, 30);console.log(num);console.log(num2);</script>
</head>
函数表达式
<head><meta charset="utf-8" /><title>函数表达式</title><script>var fun = function (a, b) {return a + b;}var num = fun(2, 3);console.log(num);</script>
</head>
函数arguments对象
<head><meta charset="utf-8" /><title>函数arguments对象</title><script>/*实参：函数在调用的时候实际传入的参数 1, 2, 3形参：函数在定义时，声明的变量 fun(a, b, c)使用实参给对应的形参进行赋值，形参具备了实参的值arguments封装的是实参的对象*/function fun(a, b, c) {console.log(arguments);console.log(arguments.length); // 实参个数：4console.log(fun);/* 方法函数的引用，和上条语句输出一致 */console.log(arguments.callee);console.log(a);console.log(b);console.log(c);console.log(arguments[0]);console.log(arguments[1]);console.log(arguments[2]);console.log(arguments[3]); // 传入实参数据:4}fun(1, 2, 3, 4);</script>
</head>
变量的作用范围
<head><meta charset="utf-8" /><title>变量的作用范围</title><script>/*变量的分类局部变量：在函数内部声明的变量，只能在函数内部访问全局变量：在函数外声明的变量，全局都可以访问注意，js中没有代码块的概念*/function fun() {var num = 10;console.log(num);}fun(); // 10console.log(num); // undefinedvar num = 10;function fun01() {console.log(num);}fun01(); // 10console.log(num); // 10if (true) {var num = 10;}console.log(num); // 10</script>
</head>
JS内置对象
String对象
<head><meta charset="utf-8" /><title>string对象</title><script>/*string表示字符串使用 "" '' 就是一个字符串对象使用字符串对象的属性和行为实现功能*/var str = "helloworld";var str2 = 'helloworld';console.log(str.length); // 10var ch = str.charAt(9);console.log(ch); // dvar str3 = "Hello world, welcome to the universe.";var index = str3.indexOf("java");console.log(index); // -1var index01 = str3.indexOf("world");console.log(index01); // 6</script>
</head>
array数组对象
<head><meta charset="utf-8" /><title>array对象创建</title><script>/*在程序语言中数组的重要性不言而喻。JavaScript中数组也是最常使用的对象之一，数组是一个有序集合。由于弱类型的原因，JavaScript中数组十分灵活、强大。不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素，JavaScript在同一个数组中可以存放多种类型的元素，而且是长度也是可以动态调整的，可以随着数据增加或减少自动对数组长度做更改。*///创建一个空数组var arr1 = [];console.log(arr1)//创建数组，并带有指定元素var arr2 = ["11", "22", "33", "44"];//可以在数组中指定不同类型的元素var arr3 = [11, "22", undefined, true, null];console.log(arr3)var arr4 = new Array();//创建一个指定长度的数组var arr5 = new Array(10);console.log(arr5)//创建一个数组，在创建时指定元素var arr6 = new Array(10, 20, 30, 40);console.log(arr6)</script>
</head>
array常见属性
<head><meta charset="utf-8" /><title>array常见属性</title><script>/*length属性 长度1.获取数组元素的个数2.操作数组元素，改变数组的长度var arr = [1,2,3,4,5,6];*/var arr = [1, 2, 3, 4, 5, 6];console.log(arr.length);// arr.length = 3;// console.log(arr.length);// console.log(arr);arr.length = 10;console.log(arr.length);console.log(arr); // (10) [1, 2, 3, 4, 5, 6, empty × 4]</script>
</head>
array操作
<head><meta charset="utf-8" /><title>array操作</title><script>var arr = ["11", "22", "33", "44"];//访问数组元素 数组名[索引值] 如果索引存在，返回对应索引的元素，如果索引不存在，就会返回undefinedconsole.log(arr[10]); // undefined//根据索引修改数组元素arr[0] = "111";console.log(arr[0]); // 111var arr2 = [];arr2[0] = "11";arr2[1] = "22";console.log(arr2);//遍历就是将数组的元素，依次取出，进行处理console.log(arr[0]); // 111console.log(arr[1]); // 22console.log(arr[2]); // 33console.log(arr[3]); // 44for (var i = 0; i < arr.length; i++) {console.log(arr[i]);}</script>
</head>
array方法
<head><meta charset="utf-8" /><title>array方法</title><script>var arr = [11, 22, 33, 44];//pushvar len = arr.push(55);console.log(len); // 5console.log(arr); // Array(5)//unshift 将0插入数组前边,之后向前添加var len = arr.unshift(0);// var len = arr.unshift(1);console.log(len); // 6console.log(arr); // Array(6)//pop 移除末尾元素var value = arr.pop();console.log("删除的最后一个元素为:" + value); // 55console.log(arr); // Array(5)//shift 移除开头元素var value = arr.shift();console.log(value); // 0console.log(arr); // Array(4)</script>
</head>
数学对象
<head><meta charset="utf-8" /><title>数学对象</title><script>//常见属性console.log(Math.PI); //3.141592653589793//常见方法//roundconsole.log(Math.round(1.4)); // 1console.log(Math.round(1.5)); // 2//floor向下取整console.log(Math.floor(1.8)); // 1console.log(Math.floor(-1.8)); // -2//ceil向上取整console.log(Math.ceil(-1.2)); // -1//abs取绝对值console.log(Math.abs(5)); // 5console.log(Math.abs(-5)); // 5//min 最小值console.log(Math.min(20, 30)); // 20//max 最大值console.log(Math.max(20, 30)); // 30//pow 次方console.log(Math.pow(2, 4)); // 16//random 随机数 0-1之间console.log(Math.random()); // 0.4828493597190001</script>
</head>
日期时间
<head><meta charset="utf-8" /><title>日期对象</title><script>//表示的是当前的系统时间var d = new Date();console.log(d);//时间参数 1月是0 年 月 日 时 分 秒 毫秒var d = new Date(2018, 11, 24, 10, 33, 30, 0);console.log(d);//毫秒值 1970-01-01 00:00:00 UTC为准,在中国GMT时区是早上八点var d = new Date(0);console.log(d);var d = new Date(-1000 * 60 * 60 * 24);console.log(d);//字符串创建方式var d = new Date("October 13, 2014 11:13:00");console.log(d);</script><body>
日期方法
<head><meta charset="utf-8" /><title>日期对象方法</title><script>var d = new Date(2018, 11, 24, 10, 33, 30, 0);var year = d.getFullYear();var month = d.getMonth(); // 从0开始var day = d.getDate();console.log(year);console.log(month);console.log(day);d.setFullYear(2008);d.setMonth(0);console.log(d);</script>
</head>
正则对象
<head><meta charset="utf-8" /><title>正则对象</title><script>/*var reg = /正则表达式/;var reg = new RegExp("正则表达式");正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。正则表达式是和语言无关的。很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则对象来使用正则表达式。正则表达式常用的规则如下：- ^：表示开始- $：表示结束- [ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符- .：代表任意单个字符，除了换行和行结束符- \w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]- \d：代表数字字符： 相当于 [0-9]量词：- +：至少一个- *：零个或多个- ？：零个或一个- {x}：x个- {m,}：至少m个- {m,n}：至少m个，最多n个*/var reg = /^\w{6,12}$/; // 字母，数字，下划线 6-12个var str = "abcdef";var flag = reg.test(str);console.log(flag); // true</script>
</head>
警告框
<head><meta charset="utf-8" /><title>警告框</title><script>// windows.alert("警告框，windows可省略");alert("开始秒杀了，赶紧！");</script>
</head>
询问框
<head><meta charset="utf-8" /><title>询问框</title><script>var key = prompt("您请输入会员key");console.log(key);</script>
</head>
确认框
<head><meta charset="utf-8" /><title>确认框</title><script>var flag = confirm("您确认登录么?");if (flag) {console.log("确认登录");} else {console.log("不确认登录");}</script>
</head>
定时器
<head><meta charset="utf-8" /><title>定时器</title><script>/* function fun() {console.log("定时任务执行了一次");}// 间隔时间：2秒setInterval(fun, 2000); */function fun() {console.log("定时任务执行了一次");}// 炸弹定时器，10秒之后再执行,只会触发一次setTimeout(fun, 10000);</script>
</head>
清除定时器
<head><meta charset="utf-8" /><title>清除定时器</title><script>// 设置一个定时器var timeOutId = setInterval(function () {console.log("这段文字还会输出吗？");}, 1000);clearInterval(timeOutId);</script>
</head>
自定义对象
<head><meta charset="utf-8" /><title>创建自定义对象一</title><script>/*new关键字创建对象*/var obj = new Object();obj.name = "张三";obj.sleep = function () {console.log("学生" + this.name + "在睡觉");}console.log(obj.name);obj.sleep();</script>
</head>
字面量创建对象
<head><meta charset="utf-8" /><title>创建自定义对象二</title><script>/*通过字面量创建对象*/var obj = {name: "张三",age: 18,show: function (girlfriend) {console.log(this.name + "的女朋友是:" + girlfriend);}}console.log(obj.name);console.log(obj.age);obj.show("new 对象");</script>
</head>
DOM对象
<body><div id="pn" class="cls">动力节点</div> <br><div class="cls">powernode</div> <br><input type="checkbox" name="hobby"> 抽烟<input type="checkbox" name="hobby"> 喝酒<input type="checkbox" name="hobby"> 烫头<script>/*由于加载顺序的原因，所以才要将script标签放在body标签中Document对象getElementById 根据id属性值获取，返回单个Element对象getElementsByTagName 根据标签名称获取，返回Element对象数组getElementsByClassName 根据class属性值获取，返回Element对象数组getElementsByName 根据name属性值获取，返回Element对象数组*//* var ele = document.getElementById("pn");console.log(ele); *//* var eles = document.getElementsByTagName("input");console.log(eles);console.log(eles[0]); // <input type="checkbox" name="hobby"> */var eles = document.getElementsByClassName("cls");console.log(eles);for (var i = 0; i < eles.length; i++) {console.log(eles[i]);}var eles = document.getElementsByName("hobby");console.log(eles);for (var i = 0; i < eles.length; i++) {console.log(eles[i]);}</script>
</body>
Element对象
<body><div id="pn" class="cls">动力节点</div> <br><div class="cls">powernode</div> <br><input type="checkbox" name="hobby"> 抽烟<input type="checkbox" name="hobby"> 喝酒<input type="checkbox" name="hobby"> 烫头<script>var ele = document.getElementById("pn");//获取属性的属性值/* var attr = ele.getAttribute("class");console.log(attr); *///判断属性是否存在/* var flag = ele.hasAttribute("name");console.log(flag); *///设置或者添加属性ele.setAttribute("name", "powernode");ele.setAttribute("name", "power");//移除属性ele.removeAttribute("name");</script>
</body>
元素内容操作
<body><div id="pn" class="cls"><span>动力节点</span></div><script>/*innerHTML 获取元素内容，包括标签innerText 获取元素内容，不包含标签*/var ele = document.getElementById("pn");var inner = ele.innerHTML;// var inner = ele.innerText;console.log(inner);ele.innerHTML += "<span>powernode</span>";ele.innerText = "powernode";</script>
</body>
元素关系操作
<body><div id="parent"><button id="child1">子节点1</button><button id="child2">子节点2</button></div><script>var ele = document.getElementById("child1");var ele2 = ele.parentNode;console.log(ele2);var ele = document.getElementById("parent");var eles = ele.children;for (var i = 0; i < eles.length; i++) {console.log(eles[i]);}</script>
</body>
节点操作
插入节点
<body><div id="parent"><h1 id="title">我是标题</h1></div><script>//p标签对象var p = document.createElement("p");// <p></p>p.innerText = "动力节点,powernode";//父节点var parent = document.getElementById("parent");//父节点中的指定节点var title = document.getElementById("title");// 将p标签放在title节点之前parent.insertBefore(p, title);</script>
</body>
删除节点
<body><div id="parent"><h1>我是标题</h1><p id="title">好好学习,天天向上</p><a href="http://www.baidu.com">百度一下</a></div><script>var parent = document.getElementById("parent");var title = document.getElementById("title");parent.removeChild(title);var title = document.getElementById("title");title.parentNode.removeChild(title);</script>
</body>
表单操作
<body><div id="parent"><form action="#" method="get">姓名:<input type="text" name="username" id="username"><br>性别:女<input type="radio" class="sex" value="woman" id="1">男<input type="radio" class="sex" value="man" id="2"><br>故乡：<select id="city"><option value="023" id="chongqing">重庆</option><option value="021" id="beijing">北京</option><option value="027" id="wuhan">武汉</option><option value="020" id="shanghai">上海</option></select><br><input type="submit"></form></div><script>//获取或者设置表单的value信息var ele = document.getElementById("username");ele.value = "张三";console.log(ele.value);//获取单选框选中状态，或者设置选中状态var ele = document.getElementById("1");ele.checked = true;//设置下拉框var ele = document.getElementById("beijing");ele.selected = true;//设置禁用效果var ele = document.getElementById("2");ele.disabled = true;</script>
</body>
事件
单击事件
<body><div id="one">动力节点</div><input type="button" id="btn" value="点我改变内容"><script>/*事件源:按钮事件：点击驱动程序：将div中的标签体内容改变*/var btn = document.getElementById("btn");//将事件源和事件绑定，并指定了驱动程序btn.onclick = function () {document.getElementById("one").innerHTML = "powernode";}</script>
</body>
焦点事件
<body>昵称: <input type="text" name="username" id="username"> <span id="info"></span><script>var ele = document.getElementById("username");ele.onfocus = function () {document.getElementById("info").innerHTML = "请输入6-12位的昵称";}// 离焦事件ele.onblur = function () {var reg = /^\w{6,12}$/;var flag = reg.test(ele.value);if (flag) {document.getElementById("info").innerHTML = "验证通过";} else {document.getElementById("info").innerHTML = "验证不通过";}}</script>
</body>
改变事件
<body>故乡：<select name="city" id="city"><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option><option value="4">武汉</option><script>var city = document.getElementById("city");city.onchange = function () {// this指的是触发事件的DOM元素，也就是selectconsole.log("选中的城市是:" + this.value);}</script>
</body>
鼠标移入移出事件
<head><meta charset="UTF-8"><title>移入移出事件</title><style>.red {background-color: red;}.green {background-color: green;}</style>
</head><body><div id="one" class="red">内容</div><script>var ele = document.getElementById("one");ele.onmouseover = function () {ele.setAttribute("class", "red");}ele.onmouseout = function () {ele.setAttribute("class", "green");}</script>
</body>
页面加载事件
<head><meta charset="UTF-8"><title>页面加载事件</title><!-- <script>var ele = document.getElementById("one");console.log(ele);</script> --><script>window.onload = function () {var ele = document.getElementById("one");console.log(ele);console.log("页面加载完毕");}</script></body>
</head><body><div id="one">内容</div>
表单事件
<body><form action="#" id="form"><input type="text" name="username" placeholder="请输入用户名..."> <br><input type="password" name="password" placeholder="请输入密码..."> <br></form><button id="submit">提交数据</button><button id="reset">重置数据</button><script>var form = document.getElementById("form");var submit = document.getElementById("submit");submit.onclick = function () {form.submit();}var reset = document.getElementById("reset");reset.onclick = function () {form.reset();}</script>
</body>
BOM对象
Window对象
<body><script>//1.window对象，可以调用其他的内置对象，但是window可以省略// window.location;// window.history;//2.window对象，访问内置函数window.alert();</script>
</body>
Location对象
<body><!-- 控制当前页面跳转资源 --><script>/* alert("跳转百度页面");location.href = "https://www.baidu.com"; */setTimeout(function () {location.href = "https://www.baidu.com";}, 3000);</script>
</body>
History对象
<body><a href="68BOM-History对象.html">点我跳转</a><button id="btn">下一页</button><script>var ele = document.getElementById("btn");ele.onclick = function () {history.forward();}</script>
</body><body><a href="67BOM-History对象.html">点我跳转</a><button id="btn">上一页</button><script>var ele = document.getElementById("btn");ele.onclick = function () {history.back();}</script>
</body>
关键字
let
<head><meta charset="UTF-8"><title>let关键字</title><script>/*let关键字用于声明变量，和var有一定的区别1.用let声明的变量不能重复声明2.用let声明的变量，有代码块的概念3.var如果使用没有声明的变量，是undefined，而let会报错*//* var a = 10;var a = 20;console.log(a); */ // 20/* let a = 10;let a = 20;console.log(a); */ // 报错/* if (true) {var a = 10;}console.log(a); */ // 10/* if (true) {let a = 10;}console.log(a); */ // a is not defined/* console.log(a);var a = 10; */console.log(a);let a = 10; // 报错</script>
</head>
const
<head><meta charset="UTF-8"><title>const关键字</title><script>// const定义的量不能更改// const a = 5;// a = 10;// console.log(a);const arr = [1, 2, 3, 4, 5];arr = [10, 20, 30];arr[0] = 100; // 数组元素可以更改console.log(arr);const b = {name: "张三",age: 23}/* b = {name: "李四",age: 24} */b.name = "zhangsan";console.log(b); // 报错</script>
</head>
构造函数创建对象
<head><meta charset="UTF-8"><title>构造函数创建对象</title><script>/*function 构造方法(参数,参数){this.属性 = 值;this.方法 = function(){方法体;}}*/function Person(name, age) {this.name = name;this.age = age;this.eat = function () {console.log("吃饭");}}var person = new Person("张三", 23);console.log(person.name);console.log(person.age);person.eat();</script>
</head>
原型对象
<head><meta charset="UTF-8"><title>原型</title><script>/*原型是什么？每个对象都有一个他的原型对象,他可以使用原型对象中的所有的属性和方法*/let stu = {name: "张三"}//获取他的原型对象stu.__proto__.eat = function () {console.log("吃饭");}stu.eat();</script>
</head>
原型继承和继承链
<head><meta charset="UTF-8"><title>原型继承和继承链</title><script>/*继承：子类继承父类，子类拥有父类的属性和方法js继承：对象继承另一个对象，对象中拥有另一个对象的属性和方法js对象 拥有 原型的属性和方法 -> 对象*//* Person和Student是构造函数Person.prototype是Person构造函数的原型对象Student.prototype是Student构造函数的原型对象（被重写为Person实例）Object.prototype是所有对象的最终原型*/function Person(name, age) {this.name = name;this.age = age;/* this.eat = function () {console.log("吃东西");} */}function Student(score) {this.score = score;}Object.prototype.eat = function () {console.log("Object原型中的eat方法");}Student.prototype = new Person("张三", 23);var stu = new Student(80); // stu是Student的实例对象console.log(stu.score);console.log(stu.name);console.log(stu.age);stu.eat();</script>
</head>
