无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); // 18
console.log(typeof age); // number
var price = 11.8;
console.log(price); // 11.8
console.log(typeof price); // number
var max = -1 / 0;
console.log(max); // -Infinity
console.log(typeof max); // number
var 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); // boolean
console.log(typeof b2); // boolean
var 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); // NaN
console.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)); // true
console.log(String(undefined)); // undefined
console.log(String(null)); // true
console.log(String(NaN)); // NaN
</script>
</head>
ParseInt转换
<head>
<meta charset="utf-8" />
<title>parseInt转换</title>
<script>
console.log(parseInt("123")); // 123
console.log(parseInt("123powernode")); // 123
console.log(parseInt("123powernode456")); // 123
console.log(parseInt(" 123 ")); // 123
</script>
</head>
ParseFloat转换
<head>
<meta charset="utf-8" />
<title>parseFloat转换</title>
<script>
console.log(parseFloat("123.45")); // 123.45
console.log(parseFloat("123.45powernode")); // 123.45
console.log(parseFloat("123.45powernode456")); // 123.45
console.log(parseFloat(" 123.45 ")); // 123.45
console.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); // 9
console.log(num1 - num2); // 5
console.log(num1 * num2); // 14
console.log(num1 / num2); // 3.5
console.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); // 0
var num = 1;
var num2 = num++;
console.log(num); // 2
console.log(num2); // 1
var num1 = 2;
var num2 = 3;
console.log(num1++ + ++num2); //6
console.log(num1); //3
console.log(num2); //4
</script>
</head>
赋值运算符
<head>
<meta charset="utf-8" />
<title>赋值运算符</title>
<script>
var num1 = 10;
var num2 = num1;
console.log(num1); // 10
console.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); // false
console.log(5 >= 5); // true
console.log(3 < 5); // true
console.log(5 <= 5); // true
console.log(5 == 5);
console.log(5 == "5"); // true
console.log(5 === "5"); // false
</script>
</head>
字符串运算符
<head>
<meta charset="utf-8" />
<title>字符串运算符</title>
<script>
/*
+
+=
完成字符串拼接
*/
var str = "hello";
var str2 = str + "world";
console.log(str2); // helloworld
var str2 = str + 100;
console.log(str2); // hello100
console.log(typeof str2); // string
str += "world"; // str = str + "world"
console.log(str); // helloworld
console.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); // true
console.log(true && false); //false
console.log(false && false); // false
console.log("----------------");
console.log(true || true); // true
console.log(true || false); //true
console.log(false || false); // false
var num = 10;
//逻辑运算符布尔值的来源，可以来源于条件表达式的运算结果
console.log(num >= 5 && num <= 15);
//非：取反操作
console.log(!true); //false
console.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 2
if (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类型
有意义的转为1
true
无意义的转为0
false null
注意NaN undefined特殊 不会转换
3. 在使用判断逻辑时
null undefined '' false 0 -0 NaN这几个是false，其他情况都是true
4.==
（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); // NaN
var num = 10;
if (num) {
console.log("条件成立");
}
if (NaN) {
console.log("条件成立");
}
var b = NaN == NaN;
console.log(b); // FALSE
var b = 1 == '1';
console.log(b); // TRUE
var b = null == undefined;
console.log(b); // true
var b1 = undefined == 0;
var b2 = undefined == false;
console.log(b1); // false
console.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); // 实参个数：4
console.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(); // 10
console.log(num); // undefined
var num = 10;
function fun01() {
console.log(num);
}
fun01(); // 10
console.log(num); // 10
if (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); // 10
var ch = str.charAt(9);
console.log(ch); // d
var str3 = "Hello world, welcome to the universe.";
var index = str3.indexOf("java");
console.log(index); // -1
var 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"];
//访问数组元素 数组名[索引值] 如果索引存在，返回对应索引的元素，如果索引不存在，就会返回undefined
console.log(arr[10]); // undefined
//根据索引修改数组元素
arr[0] = "111";
console.log(arr[0]); // 111
var arr2 = [];
arr2[0] = "11";
arr2[1] = "22";
console.log(arr2);
//遍历就是将数组的元素，依次取出，进行处理
console.log(arr[0]); // 111
console.log(arr[1]); // 22
console.log(arr[2]); // 33
console.log(arr[3]); // 44
for (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];
//push
var len = arr.push(55);
console.log(len); // 5
console.log(arr); // Array(5)
//unshift 将0插入数组前边,之后向前添加
var len = arr.unshift(0);
// var len = arr.unshift(1);
console.log(len); // 6
console.log(arr); // Array(6)
//pop 移除末尾元素
var value = arr.pop();
console.log("删除的最后一个元素为:" + value); // 55
console.log(arr); // Array(5)
//shift 移除开头元素
var value = arr.shift();
console.log(value); // 0
console.log(arr); // Array(4)
</script>
</head>
数学对象
<head>
<meta charset="utf-8" />
<title>数学对象</title>
<script>
//常见属性
console.log(Math.PI); //3.141592653589793
//常见方法
//round
console.log(Math.round(1.4)); // 1
console.log(Math.round(1.5)); // 2
//floor向下取整
console.log(Math.floor(1.8)); // 1
console.log(Math.floor(-1.8)); // -2
//ceil向上取整
console.log(Math.ceil(-1.2)); // -1
//abs取绝对值
console.log(Math.abs(5)); // 5
console.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元素，也就是select
console.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>
扫一扫
802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
