JavaScript
一、JavaScript简介
1. 什么是JavaScript？
JavaScript简称JS，由网景分公司开发的客户端脚本语言，不需要编译，可以直接执行
补充：
机器语言（0,1代码）-----汇编语言（助记符)------高级语言（ ① 解释 ②编译）
高级语言---->编译obj目标程序文件---->连接link.exe可执行性文件
解释：
WEB前端三层：
- 结构层HTML，定义页面的结构
- 样式层CSS，定义页面的样式
- 行为层JavaScript，用来实现交互，提升用户体验
2. JavaScript作用
- 在客户端动态的操作页面
- 在客户端数据的校验
- 在客户端发送异步请求
二、引用方式
1. 内联方式
在页面中使用script标签，在script标签的标签中编写js代码
<script>
js代码；
</script>
2. 行内方式
在普通的标签中编写js代码，一般需要结合事件属性，如onclick、onmouseover等
对象：客观存在的，并且可以相互区别的事物----如：各种标签
eg:对象：
- 外观-----宽度、高度，背景色----CSS
- 事件------
多态性同一个事件发生的对象不同，所引发的反应也不同
3. 外部方式
使用单独的.js文件定义，然后在页面中使用script标签引入外部脚本文件
<script type="text/javascript" src="/js/hello.js"></script>
注意：如果某个script标签用于引入外部的js文件，则该script标签的标签中不能再写js代码
案例text01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1.内联方式 -->
<script>
//alert("hello JavaScript")
</script>
<!-- 3.引用外部的js脚本文件 -->
<script type="text/javascript" src="/js/hello.js">
alert('呵呵呵')
</script>
</head>
<body>
第一个JavaScript程序
<hr>
<!-- 2.行内方式 -->
<input type="button" value="点我" onclick="alert('我被点了，晕啦！')">
<!-- <div onmouseover="alert('走开')">把鼠标移上来</div> -->
<a href="" onclick="alert('超链接被触发了！')">我是超链接</a>
<!-- 使用超链接href属性执行JS时必须添加javascript -->
<a href="javascript:alert('超链接被触发啦！')">我是超链接</a>
</body>
</html>
hello.js
alert('哈哈')
效果
三、基本用法
1. 变量
js是一门弱类型的语言，声明变量时使用var关键字，不需要指定变量的类型
语法：var 变量名=常数或表达式；
注意：
1. 由字母，数字，汉字，下划组成
2. 由字母，汉字，下划线开头
3. 不能和保留字同名
4. 大小写敏感
回忆：
数据类型：常量和变量
常量：具体的值，不变的量----常数项
变量：变化的量，存放常量的是—容器
int a,b,c; //变量在使用前必须强制进行定义或声名
a= 10;//将整型常量10放到整型变量a
b= 20;
c= a + b;//将a+b的和赋值给整型变量c
print("c=%d",c)
在ECMAScript 6规范中新增let关键字，也用于声明变量
使用let声明的变量支持模块级作用域，而使用var声明的变量不支持模块级作用域
注：在IDEA中配置ES版本settings–>Language&FrameWorks–>JavaScript–>JavaScript Version
案例text02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//变量
var name
name='张无忌';
name='tom';
//alert('name');
var 姓名
姓名="赵敏"
alert=(姓名) //姓名是变量名
var age=18;
var a=5,b=2,c=7;
var age=18;
var Age=19;
alert('age');
sex = "male";//强烈不建议
alert('sex');
{
// var x = 6;
// alert(x);
let y =10;
// alert(y);
}
alert(y);
</script>
</head>
<body>
</body>
</html>
效果
2. 输入和输出
输出：
- alert() 弹出警告框
- console.log() 输出到浏览器的控制台
- document.write() 输出到页面
输入：
-
prompt() 弹出一个输入框，获取用户输入的数据
使用
typeof 变量名判断变量的类型使用
Number(变量名)将字符串转换为数值
3. 转义字符
常用转义字符
\n换行\t制表位，缩进\"双引号\'单引号\a响铃，警告
4. 注释
单行注释：//
多行注释：/* */
5. 编码规范
代码区分大小写
每条语句以分号结尾
代码缩进
案例text03.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//输出信息
// alert('呵呵);
// console.log('哈哈');
// document.write('嘻嘻);
//输入
//var name=prompt("请输入你的年龄");
//console.log(age,typeof age);
//console.log(age+2);
//age =Number(age);
//console.log(age+2);
//转义字符
console.log('he\'llo\nworld');
console.log('welcome to \n JavaScript');
//这是单行注释
/*
这是多行注释
这是多行注释
*/
</script>
</head>
<body>
</body>
</html>
四、核心语法
1. 数据类型
常量：具体的值 eg:‘abc’ ‘20’ 3.14 100
变量：存放常量的量—容器
基础数据的类型：
- string字符串
- number 数值（NaN表示非数字Not a Number,其自身是number类型,表示数值是不正常状态）
- boolean布尔
- null空类型
- undefined未定义类型
数据类型转换：
-
转换为number
使用Number()、parselnt()、parsFloat()
-
转换为string
拼接空字符串
-
转换为布尔
使用Boolean()
注意：0、空字符串、undefined、null、NaN会被转换为逻辑假false，其他的类型在转换为布尔时，转换为true
案例text04.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
数据类型
*/
//var name ='tom';
//var age = 18;
//var height = 180.5;
//var flag = true;
//var hobby =null;
//var date = new Date();
//var arr = new Array();
//console.log(typeof name);
//console.log(typeof age);
//console.log(typeof height);
//console.log('hello'-5);//返回NaN
//console.log(typeof flag);
//console.log(typeof hobby);//如果数据是null、Date、Array等返回值是object
//console.log(typeof date);
//console.log(typeof arr);
//console.log(typeof sex);//返回undefined
/*
类型转换
*/
//1.转换为数值
var a ='12';
console.log(a,typeof a);
//方式一，使用Number
//a = Number(a); 赋值号=左边的a代表的是容器或本身 右边的a代表的是容器中的值
//a = Number('12.5');
// a = Number('12abc');
// a = Number('ab12');
//console.log(a,typeof a);
//方式二：使用persInt()
//a=parseInt(a);
//a=parseInt('12.5');
//a=parseInt('12abc');//按字符顺序依次进行解析
//a=parseInt('abc12');
//方式三：使用parseFloat()
//a=parseFloat(a);
//a=parseFloat('12.5');
//a=parseFloat('12abc');//按字符顺序依次进行解析
//a=parseFloat('abc12');
//将布尔值转换为数值
//a = Number(false);//js中true用1或非0表示 false用0表示
//console.log(a,typeof a,typeof true);
//将数值转换为字符串
//var a= 12;
//console.log(a,typeof a);
//a = a + '';// # 后接空字符串 左边a---变量本身 右边a---值
//console.log(a,typeof a);
/*
将数值、字符串转换为布尔
*/
//var a = Boolean(0);
//var a = Boolean('');
//var a = Boolean(null);
//var a = Boolean(undefined);
//var a = Boolean(NaN);
//var a = Boolean(4);
//var a = Boolean('tom');
//console.log(a,typeof a);
var name ='tom';
if(name)
{
console.log(name);
}
</script>
</head>
<body>
</body>
</html>
2. 运算符
算术运算符：+、-、*、/、%、**、++、–
比较运算符：>、>=、<、<=、==、= = =、！=
赋值运算符：=、+=、-=、*=、/=、%=、**=
逻辑运算符：&&并且、||或、！非
条件运算符：条件？表达式1：表达式2
案例text05.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
算术运算符：+、-、*、/、%、**、++、--
*/
//var a= 5;
//var b = 3;
//var c = '2';//var c = 'aaa';
//var d = true;
//console.log(a+b);
//console.log(a-b);
//console.log(a*b);
//console.log(a/b);
//console.log(a%b);
//console.log(a**b);//a的b次方
// console.log(a-c);//会将数字字符c转换为数值，再进行算术运算
//var a = 1;
//var b = 2;
//console.log(a++);//表达式会返回变化前a的值，表达式执行完a自加a= a + 1
//console.log(a);
//console.log(++a);//表达式会返回变化后a吧值，表达式执行完a也是变化后的值
//console.log(a);
//console.log(b--);//先引用，后加减
//console.log(--b);//无自加减，后引用
/*
比较运算符：>、>=、<、<=、==、= = =、！=
*/
//var a = 5;
//var b = 5;
//var c = false;//js中true表示为1，false表示为0
//console.log(a>b);
//console.log(a<b);
//console.log(a>=b);
//console.log(a<=b);
//console.log(a==b);//只判断内容是否相等
//console.log(a===b);//全等于，既要判断内容、也要判断类型
//console.log(a+b);
//console.log(a-b);//会将数字字符b转换为数值，再进行算术减运算
//console.log(a+b);//会将数值a转换为字符串，然后进行字符串的首尾相联
/*
赋值运算符：=、+=、-=、*=、/=、%=、**=
*/
//var a = 2;
//console.log(a);
//a = 9;//将整数9赋值给a;
//console.log(a);
//var a = 1;
//a += 2;//a = a + 2
//a**=2;//a = a ** 2
//console.log(a);
//逻辑运算符：&&并且、||或、|与
//var x = true;
//var y = false;
//console.log(x&&y);//两边为真就是真，一边为假就是假
//console.log(x||y);//一边为真就是真，两边为假就是假
//console.log(!x);
//逻辑运算短路问题
//var a = 2;
//var b = 5;
//console.log(a && b);
//console.log(a || b);
/*
条件运算符：条件？表达式1：表达式2
*/
var a = 3;
var b = 2;
console.log(a>b?a+b:a-b)
</script>
</head>
<body>
</body>
</html>
3. 选择结构
if…else、switch
案例text06.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//使用Math对象进行数字运算，用法：Math.方法名（参数）
//1.求绝对值
console.log(Math.abs(-5));
//2.计算次方
console.log(Math.pow(2,3));
//3.四舍五入
console.log(Math.round(123.456));
//4.向上取整，向下取整
console.log(Math.ceil(3.5));//返回大于3.5的最小整数
console.log(Math.floor(3.4));//返回小于等于3.5的最大整数
//6.最大值，最小值
console.log(Math.max(23,1,54,2,-6));
console.log(Math.min(23,1,54,2,-6));
//7.圆周率
console.log(Math.PI);
</script>
</head>
<body>
</body>
</html>
案例text07.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var age = 25;
if(age>=60)
console.log('老年');
else if(age>=30)
console.log('中年');
else if(age>=16)
console.log('少年');
else
console.log('童年');
var day = '星期五';
switch(day)
{
case '星期一':
console.log('吃包子');
break;
case '星期二':
console.log('吃油条');
break;
case '星期三':
case '星期四':
console.log('吃面条');
break;
case '星期五':
console.log('吃油饼');
break;
default:
console.log('不吃了');
break;
}
</script>
</head>
<body>
</body>
</html>
4. 循环结构
while、do…while、for、for…in
break、continue
break:退出整个循环
continue:结束本次循环，返回到条件判断处继续进行下一次是否执行循环的条件判断
/*
for...in...对集合进行遍历
*/
var str = 'welcome to JavaScript';
for(var s in str)
// console.log(s);//输出字符串的索引或下标
console.log([s]);
案例text08.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//while
var i =1;//循环变量赋初值
var sum = 0;
while(i<=100)//循环控制条件
{
sum += i;
i++;//循环增量，使用循环趋于结束
}
console.log(sum);
//do-while
var i = 1;
var sum =0;
var cnt =0;
do{
if(i%7==0)
{
sum=sum+i;
cnt++;
}
i++;
}while(i<=100);
console.log(sum,cnt);
//for循环
var sum =0;
var cnt =0;
for(var i = 1;i<=100;i++)
if(i%7==0) {
sum += i;
cnt++;
}
console.log(sum,cnt);
/*
for...in...对集合进行遍历
*/
var str = 'welcome to JavaScript';
for(var s in str)
// console.log(s);//输出字符串的索引或下标
console.log([s]);
</script>
</head>
<body>
</body>
</html>
5.数组
5.1 定义方式
语法
var arr = new Array();
var arr = new Array(值1，值2,.....);
var arr = [值1，值2,.....]
注意：
- 数组长度会自动扩展
- 数组中元素的默认值为undefined
- 使用数组的length属性可以获得数组的长度（数组中有多少个元素）
5.2 常用方法
| 方法 | 描述 |
|---|---|
| sort() | 排序，默认按字符编码的顺序排列，非string类型会自动转换为string，可自定义比较规则 |
| reverse() | 反转，将数组元素倒序排列 |
| join(separator) | 将数组中元素使用指定的分隔符链接成字符串，默认通过逗号进行连接 |
| indexOf() | 返回指定元素在数组中首次出出的位置 |
| slice(beign,end) | 截取数组中索引从beign到end的元素，左闭右开，如果省略第二个参数，则表示截取到末尾 |
| toString() | 将数组转换为字符串 |
案例text09.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var arr = new Array();
arr[0]=12;
arr[1]=9;
//...
//console.log(arr.length);//length属性可以返回数值中有多个元素
//console.log(arr[0]);
//console.log(arr[1]);
//console.log(arr[arr.length]);
//var arr = new Array('tom','jack','alice');
//console.log(arr[0]);
//console.log(arr[arr.length-1]);
//console.log(arr);
//将1-100之间所有能被3整除的数字，放到数组nums中，输出这个数组，并统计个数
//var nums =new Array();
//var cnt =0;//cnt可以统计个数，也可以代表下标
//for(var i =1 ;i<=100;i++)
// if(i%3==0)
// {
// nums[cnt]=i;
// cnt++;
// }
//console.log(nums);
var nums = new Array();
for(var i =1; i<=100;i++)
if(i%3==0)
nums[nums.length]=i;//length属性是动态变化的，每当向数组中添加元素时，length属性值都会改变
console.log(nums);
//var arr =['tom','jack','alice','mike','admin'];
//console.log(arr);
//arr.sort();
//console.log(arr);
//var arr = [21,4,34,1,42,23,15,146];
//console.log(arr);
//arr.sort();
//console.log(arr);
var arr =['tom','jack','alice','mike','admin','jack'];
console.log(arr);
arr.reverse();
console.log(arr);
console.log(arr.join);
console.log(arr.join('-'));
console.log(arr.indexOf('jack'));
console.log(arr.lastIndexOf('jack'));
console.log(arr.slice(1,4));
console.log(arr.slice(1));
console.log(arr.toString());
</script>
</head>
<body>
</body>
</html>
5.3 二维数组
二维数组可以认为是特殊的的一维数组，即一维数组中的每个元素又是一个一维数组
语法：
var arr = new Array();
arr[0] = new Array();
arr[1] = new Array();
arr[][]=值;
var arr = [
[值1，值2...],
[值1，值2...],
[值1，值2...]
]
案例text10.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//var arr = new Array();
//arr[0] = new Array()；
//arr[1] = new Array();
//arr[0][0]=12;
//arr[0][1]=9;
//arr[1][0]=10;
var arr = [
[12,54,2,67],
[1,32,12,5],
[6,34,7,23]
];
//console.log(arr);
for(var i =0 ;i<arr.length;i++)
{
for(var j =0 ;j<arr[i].length;j++)
document.write(arr[i][j]+' ');
document.write('<br>');
}
//document.write(arr[i],'<br>');
</script>
</head>
<body>
</body>
</html>
效果
6. 函数
6.1 自定义函数
语法：
function 函数名（参数1，参数2...）
{
函数体；
}
注意：
- 定哟函数时不需要指定参数的类型
- 实参个数和形参个数可以不同，未给形参传入实参的，其默认值为undefined
- 不需要指定返回值的类型，如果有返回值，直接使用return返回
- 如果函数中没有使用return语法返回值，则默认返回undefined
变量的作用域：
-
局部作用域
在函数中声明的变量，只能在该函数内访问，函数运行结束后变量自动销毁
-
全局作用域
在函数外部声明的变量，在任何位置都可以访问
-
块级作用域
使用let关键字声明变量，只能在声明它的代码块内访问
案例text11.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
自定义函数
*/
//1.定义函数
function show() {
console.log('嘿嘿')
}
function calc(num1,num2,num3)//num1,num2,num3形式参数，简称形参
{
//console.log(num1,num2,num3);
var sum = num1+num2+num3;
console.log(sum);
//return sum;
}
//2.调用函数 功能：1返回值return
//show();
//var result = calc(12,6,3)//12,6,3实际参数，简称实参
//console.log(result);
//变量的作用域
//var c = 6;//全局变量
//function fn() {
// var a = 5;//局部变量
// console.log(a);
// console.log(c);
}
function fn() {
if(true)
{
let a = 5;//局部变量
console.log(a);
}
console.log(a);
}
{
var d = 2;//全局变量
let x = 4;//块级变量
console.log(x);
}
//console.log(d);
//fn();
//console.log(c);
//console.log(a);
</script>
</head>
<body>
</body>
</html>
6.2 回调函数
不会立即执行函数调用，满足一定条件时才会执行或者由别的代码调用执行，称为回调函数callback
调用时只写函数名，没有小括号（）和参数
应用：
- 作为事件绑定的函数
- 作为另一个函数的参数
案例text12.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function f1() {
console.log('111');
}
//f1();
//window.οnclick=f1();
window.onclick=f1;
/*
函数本身也是一种数据类型
数据类型：string、number、boolean、null、undefined、object、function
*/
//console.log(typeof f1);
//var a = f1;
//console.log(typeof a);
//a();
//将函数作为另一个函数的参数
function f2(x,y) {
console.log(x);
//console.log(y);
y();
}
//f2(5,f1);//当f1函数作为实参传递给形参y时，f1这个函数并没有执行,而是将函数体代码输出
/*
示例
*/
var arr =[12,43,5,6,7,9];
console.log(arr);
/*
定义一个比较器
升序：如果第一个参数大于第二个参数，则返回正数
如果第一个参数小于第二个参数，则返回负数
如果两个参数相等，则返回0
*/
function comapreFn(a,b) {
return b-a;
//if(a>b)
// return 1;
//else if(a<b)
// return -1;
//else
// return 0;
}
//arr.sort(comapreFn);
//console.log(arr);
function show(value,index) {
console.log(index,value);
}
arr.forEach(show);
</script>
</head>
<body>
</body>
</html>
6.3 匿名函数
没有名字的函数，称为匿名函数，一般用于回调
应用场景：
-
用于函数的回调
window.onclick=function () { console.log(111); }; -
用于一次性执行的函数，会自动执行，称为自动执行函数-----用于定义一个插件
(function () { console.log(333); })()
案例text13.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
1.用于回调
*/
//function show() {
// console.log('111');
//}
//window.οnclick=show;
window.onclick=function () {
console.log('111');
}
function f1() {
console.log(222);
}
//var a = f1;//如果单纯就要把f1这个函数赋值给a
var a =function () {
console.log(222);
}
//a();
var arr =[12,4,23,6,28,86];
function show(value,index) {
console.log(index,value);
}
//arr.forEach(show);
arr.forEach(function (value,index) {
console.log(index,value);
});
//function () {
// console.log('1111');
//}//这是错误的
//2.自执行函数
(function () {
console.log(333);
})()
</script>
</head>
<body>
</body>
</html>
6.4 箭头函数
ES6中允许使用箭头=>定义函数，称为箭头函数，也叫lambda表达式，也是一种特殊匿名函数
案例text14.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
箭头函数语法
参数=>返回值
*/
//var a = function (x) {
// return x*2;
//}
var a = x => x*2;//优点：语法更加简洁
console.log(a(4));
//例2：如果箭头函数没有参数或有2个以上的参数，则必须使用小括号（）表示参数部分（）
var a = function () {
return 5;
}
var a =() =>5;
console.log(a(4));
//示例3：如果箭头函数的函数体多于一句话，则必须使用大括号{}将它们括起来
//var a = function (x,y) {
// var sum = x + y;
// return sum;
//};
//var a = (x,y) =>{
// var sum = x+y;
// return sum;
//};
//console.log(a(12,34));
//var a =function (x) {
// console.log(x);
//};
var a = x => console.log(x);
a(5);
console.log(a(5));
//应用场景
var arr =[12,4,23,6,26,86];
arr.forEach((value,index)=>{
console.log(index,value);
});
window.onclick=()=>{
console.log(111);
};
</script>
</head>
<body>
</body>
</html>
五、复合数据
1. string
1.1 定义方式
语法:
var str = 'welcome';//基本数据类型string
var str = new String('welcome');//引用数据类型string
使用length属性获取字符串的长度
1.2 常用方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定索引位置的字符，也可以使用[索引]的方式 |
| indexOf() | 返回某个指定的字符串在原字符串中首次出现的位置 |
| lastindexOf() | 返回某个指定的字符串在原字符串中最后出现的位置 |
| toLowerCase() | 将字符串转换为小写字母 |
| toUpperCase() | 将字符串转换为大写字母 |
| subString() | 提取字符串两个指定的索引号之间的字符 |
| replace() | 将指定的字符串替换为新的字符串 |
| split() | 将字符串分隔为字符串数组 |
| trim() | 去除字符串前后两端的空格 |
案例text15.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var str = 'hello world!';
//var str = new String('hello world');
//console.log(typeof str);
//console.log(str);
//console.log(str.length);
console.log(str.charAt(0),str.charAt(3),str[0],str[str.length-1]);
console.log(str.indexOf('0'));
console.log(str.lastIndexOf('o'));
console.log(str.toLowerCase());
console.log(str.toUpperCase());
console.log(str.substring(1,4));//左闭右开 包含左边不包含边
console.log(str.substring(1));//直接取至末尾
//console.log(str);
//str = str.replace('JS','JavaScript');//由于replace()方法生成的是原字符串的副本，如果重新赋值，会改变字符串的内容
//console.log(str);
//console.log(str.split(' '));
//str = str.split(' ',3);
//console.log(str,typeof str);
console.log(str,str.length);
str = str.trim();
console.log(str,str.length);
</script>
</head>
<body>
</body>
</html>
2. Date
2.1 定义方式
语法：
var date = new Date();//定义一个日期对象，表示当前时间
var date = new Date(year,month,day,hour,minute,second);//参数为指定的年，月，日，时，分，秒
var date = new Date(millSeconds);//参数为当前时间与1970-1-1 0:0:0相差的毫秒数
2.2 常用方法
| 方法名 | 说明 |
|---|---|
| getFullyare() | 以四位数返回年份 |
| getMonth() | 返回月份[0,11]，0表示1月 |
| getDate() | 返回一个月中某一天（1-31） |
| getHours() | 返回小时（0,23） |
| getMinutes() | 返回分钟（0,59） |
| getSeconds() | 返回秒数（0,59） |
| getMillseconds() | 返回毫秒（0-999） |
| getDay() | 返回一周中某一天（0-6），0表示周数 |
| getTime() | 返回从1970-1-1 0:0:0至今相差的毫秒数 |
案例text16.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//var date = new Date();
//var date = new Date(2020,2,14,15,23,54);//月份的取值范围[0,11] 0表示1月
//var date = new Date(12343431);
var year = date.getFullYear();
var month =date.getMonth();
var d =date.getDate();
var hour = date.getHours();
var minute =date.getMinutes();
var second =date.getSeconds();
let millseconds = date.getMilliseconds();
//console.log(millseconds);
var weekday = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
let day = date.getDay();
//console.log(weekday[day]);
var currenttime = year + '年' + checkdate(month) + '月'+ checkdate(d) + '日' + checkdate(hour) + ':' +checkdate(minute)+':'+checkdate(second) +'.'+weekday[day];
console.log(currenttime);
let time = date.getTime();
console.log(time);
function checkdate(num) {
if(num<10)
return '0' + num;
else
return num;
}
//console.log(d,typeof d);
//console.log(date,typeof date);
</script>
</head>
<body>
</body>
</html>
3. JSON
3.1 JSON简介
JavaScript object Notation是一种轻量级的数据交换格式，用于表示JavaScript对象的一种方式
采用与编程语言无关的文本格式，易于阅读和编写，同时也易于解析和生成
3.2 基本用法
语法{"属性名"：属性值，"属性名"：属性值,.....}
注意：
- JSON结构是由一系列的键值对所组成的的，称为JSON对象
- 属性名必须用双引号括起来
使用：
- 简单的JSON对象
- 复合属性，属性的值为JSON对象
- JSON对象的集合
3.3 JSON转换
-
JSON转换为字符串
var person = { "name":"hector", "age":20, "height":180.5 }; var str = JSON.stringfy(person); -
字符串转换为JSON
var user = '{"name":"tom","age":20}'; var obj = JSON.parse(user); var users = '[{"id":"9527","username":"admin","password":"123","status":1}, {"id":"9528","username":"admin","password":"111","status":1}]' var obj = JSON.parse(users);
案例text17.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//定义一个JSON对象
var user = {
"id":"1001",
"name":"tom",
"age":20,
"height":180.5,
"address":{
"province":"山西",
"city":"太原",
"district":"迎泽区"
},
"ismarrid":true
};
//访问方式：对象名，属性名
//console.log(user.name);
//console.log(user.age)
//console.log(user.address.city);
//JSON对象数组
//var nums = [12,3,43,5,25,87];
var users =[
{
"id":"9527","username":"admin","password":"123","status":1
},
{
"id":"9528","username":"admin","password":"111","status":1
},
{
"id":"9529","username":"admin","password":"222","status":0
},
{
"id":"9527","username":"admin","password":"3333","status":1
},
]
for (var i =0;i<users.length;i++)
{
var u = users[i];
// console.log(u.username,u.password,u.status);
}
/*
JSON对象和字符串直接的转换
*/
//1.将JSON对象转换为这串
// console.log(typeof user);
// console.log(user);
//
// var str = JSON.stringify(user);
// console.log(typeof str);
// console.log(str);
/*
2.将字符串转换为JSON对象
*/
var str = '{"name":"hector","age":"20","height":180.5}';
// console.log(typeof str);
// console.log(str);
// var obj = JSON.parse(str);
// console.log(typeof obj);
// console.log(obj);
var str = '[{"id":"9527","username":"admin","password":"123","status":1},{"id":"9528","username":"admin","password":"111","status":1},]';
console.log(str,typeof str);
var obj = JSON.parse(str);
console.log(obj,typeof obj);
</script>
</head>
<body>
</body>
</html>
4. 对象类型
4.1 对象简介
补充：
1.对象：客观存在的并且可以互相区别的事物 eg：一个同学 一本书 页面上的命令按钮 复选框
2.描述一个对象
属性-----外观，长相
方法-----行为模式-----干什么
事件-----单击，双击
3.对象有三个基本特征：封装、继承和多态
对象类型可以理解为JAVA中的引用数据类型
JavaScript是面向对象的语言，但并不是人们常说的纯粹的面向对象的语言，因为它不支持某些特征
4.2 创建对象
三种方式
-
使用Object
//新创建的对象没有属性和方法 var 对象名 = new Object(); //为对象添加属性 对象名.属性名 = 属性值; //为对象添加方法 对象名.方法名 = function{ 方法体; }; //调用属性和方法 对象名.属性名 或 对象名['属性名']; 对象名.方法名 -
使用构造函数，模拟类的定义，相当于自定义了一个类型
function 构造函数名(形参1,形参2,....){//为了区别于普通函数，构造函数名建议首字母大写 this.属性名=形参1; this.属性名=形参2; this.方法名=function(){ 方法体; }; } -
使用JSON格式定义对象，一般只在JSON对象中定义属性
var JSON对象 ={ 属性名:属性值,//属性名和方法名可不用加引号 属性名:属性值, ... };
案例text18.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
1. 使用object
*/
var stu = new Object();
//添加属性
stu.name="tom";
stu.age=20;
stu.height=180.5;
//添加方法
stu.study = function () {
console.log(stu.name+"正在学习....");
};
stu.run = function () {
console.log(stu.name+"正在参加马拉松！");
};
//调用属性 和 方法
//console.log(stu.name,stu['age']);
//console.log(syu.age);
//stu.run();
//stu.study();
/*
2. 使用构造函数
*/
//var date = new Date(2020,5,20);
/console.log(date);
function Student(name,age,sex) {
//console.log(name,age,sex);
this.username = name；
this.age = age;
this.sex = sex;
//方法
this.show = function () {
console.log("我叫"+this.username+"正在学习..."+"年龄:"+this.age+"性别："+this.sex);
};
this.study=function () {
console.log("正在学习....");
};
}
//Student('tom','20','male');
var student= new Student('tom','20','male');
//console.log(student.username,student.age,student.sex);
//student.show();
//student.study();
/*
3,使用JSON对象
*/
var student ={
name:"tom",
age:19,
sex:"male",
study:function () {
console.log("正在学习....");
}
};
console.log(student.name);
console.log(student['age']);
student.study();
</script>
</head>
<body>
</body>
</html>
六、DOM操作
1. DOM简介
Document Object Model文档对象模型
浏览器加载html文档时，会将html文档解析为一个树形结构，称为DOM树
- HTML文档和DOM树节点是——对应的关系
- 当DOM树被改变时，与之对应的HTML文档会随之改变
- 当需要对HTML中内容进行动态改变时，可以使用DOM来进行操作
- DOM提供了一组用来操作html文档的API，即提供了一套属性、方法和事件
- 树上的每个节点都量一个DOM对象，树的顶层为documen对象，表示整个文档
2. 查询操作
即获取DOM对象
| 方法和属性 | 含义 |
|---|---|
| document.getElementById(“id值”) | 根据id属性来查询节点，返回匹配的第一个节点 |
| document.getElementsByName(“name属性值”) | 根据name属性来查询，返回所有匹配的节点集合 |
| document.getElementsByTagName(“标签名”); | 根据标签名来查询，返回所有匹配的节点集合 |
| document.querySelector(“选择器”) | 根据css选择器来查询，返回匹配的第一个节点 |
| document.querySelectorAll(“选择器”) | 根据css选择器来查询，返回所有匹配的节点集合 |
| parentNode属性 | 查询当前节点的父节点 |
| previousSibling属性 | 查询当前节点的上一个节点 |
| nextSibling属性 | 查询当前节点的下一个节点 |
| firstChild属性 | 查询当前节点的第一个节点 |
| lastChild属性 | 查询当前节点的最后一节点 |
案例text19.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function query() {
//console.log(111);
/*
1.根据id获取，返回单个值
*/
//var objDiv=document.getElementById("mydiv");
//console.log(typeof objDiv,objDiv);
/*
2.根据name获取，返回集合，也就是数组
*/
//var objs = document.getElementsByName("hobby");
//console.log(typeof objs);
//for(var index in objs)
//console.log(objs[index]);
/*
3.根据标签名和获取，返回集合
*/
//var objs = document.getElementsByTagName("input");
//console.log(objs);
//for(var index in objs)
// console.log(objs[index]);
/*
4.根据CSS选择器来获取单个对象
*/
//var obj = document.querySelectorAll("#div2");
//var obj = document.querySelector(".aaa");
//var obj = document.querySelector("p.aaa");
//console.log(obj);
/*
5.根据CSS选择器来获取多个对象
*/
var objs = document.querySelectorAll(".aaa");
console.log(objs.length);
for(var index in objs)
console.log(objs[index]);
/*
6.根据已有节点获取其他节点
*/
var obj = document.getElementById("second");
console.log(obj);
console.log(obj.parentNode);
console.log(obj.previousSibling);
console.log(obj.nextSibling);
console.log(obj.parentNode.firstChild);
console.log(obj.parentNode.lastChild);
}
</script>
</head>
<body>
<input type="button" value="获取页面中的元素" onclick="query()">
<hr>
<div id="mydiv" class="aaa">hello</div>
<div id="div2" class="aaa">world</div>
<p class="aaa">welcome</p>
爱好：<input type="checkbox" value="eat" name="hobby">吃饭
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="doudou" name="hobby">打豆豆
<ul>aaaa<li>tom</li><li id="second">jack</li><li>alice</li><li>mike</li></ul>
</body>
</html>
效果
3. 访问操作
3.1 访问属性
即获取/设置DOM对象的属性
DOM对象的属性和HTML标签的属性几乎是一样的，一般情况下DOM对象都会存在一个与应对的HTML标签同名的属性
用法：DOM对象、属性
3.2 访问内容
即获取/设置标签中的内容
两种方式：
-
使用innerHTML
用法：
DOM对象.innerHTML即内容解析为HTML -
使用innertText
用法：
DOM对象.innertText将内容作为纯文本
3.3 访问CSS
即获取/设置CSS样式
两种方式：
-
使用style属性
用法：
DOM对象.style.样式属性如果CSS属性中有短横线-.需要在访问时去掉短横线，然后将其后的单词首字改为大写
-
使用className属性
用法：
DOM对象.className
案例text20.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hello{
width: 300px;
height: 300px;
background:blue;
font-size:40px;
}
.world{
text-decoration: underline;
font-weight: blod;
}
</style>
<script>
function getProperty() {
//获取属性的值
//let obj = document.getElementById("baidu");
//console.log(obj,typeof obj);
//console.log(obj.href);
//console.log(obj.target);
//let obj = document.getElementById("female");
//console.log(obj.value);
//let obj = document.getElementById('male');
//console.log(obj.checked);//返回值true或false
//设置属性的值
//let obj = document.getElementById("male");
//obj.checked=true;
//var obj = document.getElementById("baidu");
//obj.href="https://www.sxgjpx.net";
//obj.target="_self";
}
function getContent() {
let obj = document.getElementById("mydiv");
// console.log(obj.innerHTML);
console.log(obj.innerText);
//设置内容
//obj.innerHTML="<h2>世界你好<h2>";
//obj.innerText="<h2>你好世界<h2>";
}
function getStyle() {
//var obj = document.getElementById('mydiv');
//console.log(obj.style);
//console.log(obj.style.width);
//console.log(obj.style.height);
//console.log(obj.style.background);
//console.log(obj.borderTopRightRadius);
//obj.style.width="300px";
//obj.style.background="blue";
//obj.style.fontSize="20px";
obj.className="world";
console.log(obj.className);
}
</script>
</head>
<body>
<input type="button" value="获取属性" onclick="getProperty()">
<input type="button" value="访问内容" onclick="getProperty()">
<hr>
<br>
<!-- <a href="https://www.baidu.com" target="_blank" id="baidu">百度</a><br> -->
<a href="https://www.baidu.com" target="_blank" id="baidu">点我</a><br>
用户名：<input type="text" value="" name="username" id="username"><br>
性 别：<input type="radio" value="male" name="sex" id="male " checked>男
<input type="radio" value="female" name="sex" id="female">女<br>
<div class="mydiv">
hello world
</div>
</body>
</html>
效果
案例text21.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#logo{
width: 100px;
height: 50px;
}
</style>
<script>
function change() {
if($("baidu").checked) {
$("logo").src = "images/baidu.png";
$("txtSearch").name="wd";
$("frmSearch").action="https://www.baidu.com/s";
$("btnSearch").value="百度搜索";
}else if($("sogou").checked) {
$("logo").src = "images/sogou.png";
$("txtSearch").name="query";
$("frmSearch").action="https://www.sogou.com/web";
$("btnSearch").value="搜狗搜索";
}else{
$("logo").src="images/360.png";
$("txtSearch").name="q";
$("frmSearch").action="https://www.so.com/s";
$("btnSearch").value="360搜索";
}
}
// 用来简化元素的获取
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<input type="radio" name="search" id="baidu" onclick="change"><label fro="baidu">百度</label>
<input type="radio" name="search" id="sogou" onclick="change"><label fro="sogou">搜狗</label>
<input type="radio" name="search" id="360" onclick="change"><label fro="baidu">360</label>
<fotm action="https://www.baidu.com/s">
<img src="images/baidu1.png" id="logo">
<br>
<input type="text" name="wd" id="txtSearch" placeholder="请输入查询关键字">
<input type="submit" id="btnSearch" value="百度搜索">
</fotm>
</body>
</html>
4.添加操作
| 方法 | 含义 |
|---|---|
| document.createElement(“标签名”) | 创建一个元素节点，即标签 |
| document.createTextNode(“文本内容”) | 创建一个文本节点，即标签中的文本内容 |
| node.appendChild(newNode) | 将一个新的节点newNode添加到指定的节点node中子节点的末尾 |
| node.insertBefore(newNode,refNode) | 将一个新的节点newNode添加到node节点中子节点refNode之前 |
| node.replaceChild(newNode,refNode) | 用一个新的节点newNode替换原有的node节点中的子节点refNode |
5. 删除操作
| 方法 | 含义 |
|---|---|
| node.remove() | 删除当前节点 |
| node.removeChild(refNode) | 删除当前节点中指定的节点 |
案例text22.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function doAdd() {
//创建一个li
//1.创建元素的节点
var li = document.createElement("li");
//2.设置文本内容
//var txt = document.createTextNode('alice');
//li.appendChild(txt);
li.innerText="alice";//设置文本
console.log(li);
//3.设置属性
//li.id="fourth";
li.setAttribute("id","fourth");//设置属性
//console.log(li.getAttribute("id"));//获取属尾
//console.log(li.id);
//将li放到ul的末尾，添加到节点
var ul = document.getElementById("myul");
ul.appendChild(li);
//5.将alice添加到jack的前面
// ul.insertBefore(li,document.getElementById("second"));
ul.replaceChild(li,document.getElementById("second"));
}
function doDelete() {
//删除当前节点
//document.getElementById("first").remove();
var ul = document.getElementById("myul");
// ul.removeChild(document.getElementById("first"));
ul.removeChild(ul.lastChild);
}
</script>
</head>
<body>
<input type="button" value="添加" onclick="doAdd()">
<input type="button" value="删除" onclick="doDelete()">
<ul id="myul">
<li id="first">tom</li>
<li id="second">jack</li>
<li>mike</li>
</ul>
</body>
</html>
七、事件处理
1. 简介
事件：发生在HTML元素上的事情，可以是用户的行为，也可以是浏览器的行为，如：
- 用户点击了某个HTML元素
- 用户将鼠标移动到某个HTML元素上‘
- 用户输入数据时光标离开
- 页面加载完成
事件源：事件触发的源头，即触发事件的元素，如按钮、输入框、超链接等
事件对象：当一个事件发生时，这个事件相关的详细信息会保存在一个对象中，称为event对象
事件监听：监听事件的发生，绑定事件函数，当事件被触发后执行该事件的函数，即回调函数
2. 绑定事件
两种方式：
-
静态绑定，通过标签的事件属性绑定
<input type="button" value="按钮1" onclick="f1()"> -
动态绑定，通过JS代码来绑定事件
<input type="button" value="按钮" id="brn"> <script> var btn = document.getElementById("btn"); btn.onclick=function{ console.log("动态绑定"); }; </script>注意： -
可以通过事件回调函数的第一个参数获取事件对象event
-
在事件回调函数中，this表示事件源，即发生事件的元素
案例text23.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function f1() {
console.log(111);
//var btn2 = document.getElementById("btn2");//由于代码执行到此时，该部分代码先执行，而后面的代码没有执行所以取不到
//console.log(btn2);
}
window.onload=function () {
//var btn2 = document.getElementById("btn2");//当浏览器加载完成后引发的事件
//console.log(btn2);
//btn2.οnclick=function () {
// console.log(222);
//};
//document.getElementById("btn2").οnclick=function () {
// console.log(222);
//};
//document.getElementById("btn2").οnclick=f1;
document.getElementById("btn2").onclick=function (event) {
console.log(222);
console.log(event);
console.log(event.srcElement);
console.log(this);//this表示事件源
};
//为复选框绑定事件
var hobbies = document.getElementById("hobby");
//console.log(hobbies[0]);
//console.log(hobbies[1]);
//console.log(hobbies[2]);
for(var i =0;i<hobbies.length;i++){
hobbies[i].onclick =function () {
//console.log(222);
console.log(this.value);
};
}
};
</script>
</head>
<body>
<!--方式1：静态绑定-->
<!--<input type="button" value="按钮1" onclick="alert('哈哈')">-->
<input type="button" value="按钮1" onclick="f1()">
<!--方式2：动态绑定-->
<input type="button" value="按钮2" id="btn2">
吃饭
爱好：<input type="checkbox" name="hobby" value="eat">吃饭
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="doudou">打豆豆
</body>
</html>
效果
案例text24.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
text-align: center;
}
#mytable{
width: 500px;
text-align: center;
border:1px solid #ccc;
margin: 0 auto;
}
#mytable td,#mytable th{
border:1px solid #ccc;
text-align: center;
}
#mytable tfoot td{
text-align: right;
}
#myform{
line-height: 30px;
}
</style>
<script>
window.onload=function () {
//为添加按钮绑定事件
$("btnAdd").onclick=function () {
//创建tr
var tr = document.createElement("tr");
//创建td
var tdName = document.createElement("td");
var tdAge = document.createElement("td");
var tdSex = document.createElement("td");
var tdPhone = document.createElement("td");
var tdDelete = document.createElement("td");
//将数据添加到td中
tdName.innerText = $("name").value;
tdAge.innerText = $("age").value;
tdSex.innerText = $("m").checked?$("m").value:$("f").value;
tdPhone.innerText = $("phone").value;
//创建一个input按钮
var bthDelete = document.createElement("input");
bthDelete.type="button";
bthDelete.value="删除";
tdDelete.appendChild(bthDelete);
//将td添加到tr中
tr.appendChild(tdName);
tr.appendChild(tdAge);
tr.appendChild(tdSex);
tr.appendChild(tdPhone);
tr.appendChild(tdDelete);
//将tr添加到tbody中
$("tb").appendChild(tr);
};
//为每行的删除按钮绑定事件
var btnDeletes = document.querySelectorAll(".delete");
for(var i=0;i<btnDeletes.length;i++)
{
btnDeletes[i].onclick=function(){
this.parentNode.parentNode.remove();
};
}
//为首行删除按钮绑定事件
$("btnDeleteFirst").onclick=function(){
$("tb").getElementsByTagName("tr")[0].remove();
//在tbody中找tr
};
//为末行删除按钮添加绑定事件
$("btnDeleteLast").onclick=function(){
var trs =$("tb").getElementsByTagName("tr");
trs[trs.length-1].remove();
};
};
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<div id="container">
<table id="mytable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>tom</td>
<td>20</td>
<td>male</td>
<td>110</td>
<td><input type="button" value="删除" class=＂delete＂></td>
</tr>
<tr>
<td>jack</td>
<td>22</td>
<td>male</td>
<td>119</td>
<td><input type="button" value="删除" class=＂delete＂></td>
</tr>
<tr>
<td>alice</td>
<td>20</td>
<td>female</td>
<td>120</td>
<td><input type="button" value="删除" class=＂delete＂></td>
</tr>
</tbody>
<tfoot>
<td colspan="5">
<input type="button" value="从首行删除" id="bthDeleteFirst">
<input type="button" value="从末行删除" id="bthDeleteLast">
</td>
</tfoot>
</table>
<form action="" id="myform">
姓名：<input type="text" id="name"><br>
年龄：<input type="text" id="age"><br>
性别：<input type="radio" name="sex" id="m" value="male" checked>男
<input type="radio" name="sex" id="f" value="male">女 <br>
电话：<input type="text" id="phone"> <br>
<hr>
<input type="button" value="添 加" id="btnAdd">
<input type="button" value="删 除">
</form>
</div>
</body>
</html>
效果
3.常用事件
3.1 鼠标事件
| 事件名 | 描述 |
|---|---|
| onclick | 鼠标单击 |
| ondblclick | 鼠标双击 |
| onmouseover | 鼠标移动某元素之上 |
| onmouseout | 鼠标从某元素上移开 |
| onmousedown | 鼠标按钮被按下 |
| onmouseup | 鼠标按键被松开 |
| onmousemove | 鼠标被移动 |
3.2 键盘事件
| 事件名 | 描述 |
|---|---|
| onkeydown | 某个键盘的键被按下去 |
| onkeyup | 某个键的盘被公开 |
| onkeypress | 某个键盘的键被按下去且松开 |
3.3 表单事件
| 事件名 | 描述 |
|---|---|
| onfocus | 元素获得焦点 |
| onblur | 元素失去焦点 |
| onchange | 域的内容发生改变，一般用于文件选择器和下拉列表 |
| onselect | 文本内容被选中 |
| onsubmit | 表单提交前触发，回调函数返回true表示允许表单提交，返回false表示阻止表单提交 |
案例text25.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#username{
outline: none;
}
.txtborder{
border: 1px solid red;
}
#img{
width:160px;
height:160px;
}
</style>
<script>
window.onload=function () {
/*
鼠标事件
*/
//document.getElementById("btn").οnclick=function (){
//document.getElementById("btn").οndblclick=function (){
//document.getElementById("btn").οnmοuseοver=function (){
//document.getElementById("btn").οnmοusedοwn=function () {
// console.log(111);
//};
//document.getElementById("btn").οnmοuseοut=function(){
//document.getElementById("btn").οnmοuseup=function (){
//document.getElementById("btn").οnmοusemοve=function () {
// console.log(222);
//};
/*
键盘事件
*/
//document.getElementById("username").onkeydown = function () {
// console.log(111);
//};
//document.getElementById("username").οnkeyup=function () {
document.getElementById("username").onkeypress=function (event) {
console.log(222);
console.log(event);
};
/*
表单事件
*/
//document.getElementById("username").οnfοcus=function (event) {
// console.log(222);
// this.className="txtborder";
//};
//document.getElementById("username").οnblur=function (event) {
// console.log(222);
// this.className="";//失去焦点时取消classname属性
//};
//document.getElementById("head").οnchange=function () {
// console.log(111);
// console.log(this.files);
// document.getElementById("img").src= window.URL.createObjectURL(this.files[0]);
//};
//document.getElementById("username").οnselect=function () {
// console.log(222);
//};
document.getElementById("frm").onsubmit=function () {
console.log(111);
return true;//允许提交
return false;//返回false禁止提交
}
}
</script>
</head>
<body>
<form action="" id="frm">
<input type="button" value="点 我" id="btn"> <br>
用户名：<input type="text" id="username" name="username"><br>
<img src="" id="img"> <br>
头像：<input type="file" id="head" multiple><br>
<input type="submit" value="提交">
</form>
</body>
</html>
效果
4. 事件操作
4.1 事件冒泡
概念：当一个HTML元素产生事件时，该事件会从当前元素（事件源）开始，往上冒泡直到页面的根元素，所有经过的节点都会收到该事件并执行
特点：先触发子级元素的事件，在触发父级元素的事件
阻止事件冒泡：event.stopPropagation()或event.cancelBubble=true;
4.2 事件默认行为
概念：当一个事件发生时浏览器自己默认做的事情，如：点击链接时默认会跳转，右键单击时默认会弹出菜单
阻止事件的默认行为：event.preventDefault()
案例text26.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background: pink;
}
p{
width: 100px;
height: 100px;
background:#ccc;
}
</style>
<script>
function f1(event) {
// console.log(event);
// event.stopPropagation();//阻止事件冒泡，W3C标准方式
// event.cancelBubble=true;
// alert(111);
}
window.onload=function(){
//绑定鼠标右键点击事件
document.getElementById("btn").oncontextmenu=function(){
event.preventDefault();//阻止默认行为
this.style.color="red";
};
document.getElementById("mya").onclick=function (event) {
event.preventDefault();//阻止事件默认行为
this.innerHTML="新浪";
};
};
</script>
</head>
<body>
<div onclick="alert(333)">
<p onclick="alert(222)">
<!--<input type="button" value="点我" onclick="alert(111)">-->
<input type="button" value="点我" onclick="f1(event)" id="btn">
</p>
</div>
<a href="https://www.baidu.com" id="mya" target="_blank">百度</a>
<a href="#" id="mya" target="_blank">百度</a>
</body>
</html>
效果
5. 示例：下拉列表
5.1 Select和Option对象
Select对象：表示HTML表单中的一个下拉列表
-
属性：
length 设置或返回下拉列表中选项的数量
selectedlndex 设置或返回下拉列表中被选中项的索引
value 返回下拉列表中被选中项的值
options 返回下拉列表中所有的选项，值Option对象数组（当该数组改变时对应下拉列表的选项也会跟着改变）
-
方法：
add()向下拉列表中添加一个选项
-
事件：
onchange 下拉列表的选项改变时触发
Option对象：表示HTML表单中下拉列表的一个选项
-
属性：
text 设置或返回在页面中显示的文本值
value 设置或返回传递给服务器的值
-
构造函数：
Option（文本值，服务器值）创建一个选项
5.2 二级菜单联动
实现省市级联动的效果
案例text27.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function getDegree() {
var degree =document.getElementById("degree")
// console.log(degree.length);
// console.log(degree.selectedIndex);
var opts = degree.options;
// console.log(opts);
//console.log(opts[opts.selectedIndex]);
// var opt =opts[degree.selectedIndex]
// console.log(opt);
// console.log(opt.text,opt.value);
// opts[1].text="中专";
// opts[1].value="zhongzhuan";
//当修改了opts数组中的内容时，下拉列表中的值也会改变
// console.log(opts[opts.length]);//由于是一个undefined所以会报错
// opts[opts.length].text="博士";//报错，为什么?
// opts[opts.length].value="boshi";
//前面学过的方法
// var option = document.createElement("option");
// option.innerText="博士";
// option.value="boshi";
// degree.appendChild(option);
//新知识1,更简单
// opts[opts.length]=new Option("博士","boshi");//实际上还是操作数组
//新知识2
// var option=new Option("博士","boshi");
// degree.add(option);
//在大专前面增加一个中专
var option = new Option("中专","zhongzhuan");
degree.add(option,degree.getElementsByTagName("option")[1]);
}
window.onload=function(){
document.getElementById("degree").onchange=function(){
// console.log(111);
// console.log(this.options[this.selectedIndex].value);
console.log(this.value);
};
};
</script>
</head>
<body>
<input type="button" value="操作下拉列表" onclick="getDegree()">
<hr>
学历：
<select id="degree">
<option value="0">---请选择学历---</option>
<option value="gaozhong">高中</option>
<option value="dazhuan">大专</option>
<option value="benke">本科</option>
<option value="yanjiusheng">研究生</option>
</select>
</body>
</html>
效果
案例text28.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var provinces = [
{
id:1001,
name:"山西省",
cities:[
{
id:1,
name:"太原市"
},
{
id:2,
name:"大同市"
},
{
id:3,
name:"长治市"
},
{
id:4,
name:"忻州市"
},
{
id:5,
name:"吕梁市"
}
]
},
{
id:1002,
name:"山东省",
cities:[
{
id:1,
name:"济南市"
},
{
id:2,
name:"青岛市"
},
{
id:3,
name:"威海市"
},
{
id:4,
name:"烟台市"
},
{
id:5,
name:"德州市"
}
]
},
{
id:1003,
name:"广东省",
cities:[
{
id:1,
name:"广州市"
},
{
id:2,
name:"东莞市"
},
{
id:3,
name:"青远市"
},
{
id:4,
name:"佛州市"
},
{
id:5,
name:"深圳市"
}
]
}
];
window.onload=function(){
//初始化省份
for(var i in provinces){
var p =provinces[i];
var option = new Option(p.name,p.id);
document.getElementById("province").add(option);
}
};
function change() {
//清空城市数据
document.getElementById("city").length=0;
//获取选择的省份
var pid = document.getElementById("province").value;
if(pid==0){
document.getElementById("city").add(new Option("--请选择城市--"));
return ;
}
for (var i in provinces){
var p = provinces[i];
if (p.id == pid) {
//添加城市
var cities = p.cities;
for (var j in cities) {
var option = new Option(cities[j].name,
cities[j].id);
document.getElementById("city").add(option);
}
return;
}
}
}
</script>
</head>
<body>
<!--注意：name可以不用，因为不用提交-->
省份：
<select id="province" onchange="change()">
<option value="0">--请选择省份--</option>
</select>
城市：
<select id="city">
<option value="0">--请选择城市--</option>
</select>
</body>
</html>
效果
八、BOM操作
1. BOM简介
JavaScript由三个部分组成
-
ECMAScript核心语法----JS简称ECMAScript，ES
-
DOM文档对象模型
-
BOM浏览器对象模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sm5y8OzB-1592559995199)(C:\Users\lenovo\Desktop\2020-06-19 15_08_35-PlayerPluginWnd.png)]
2. window对象
常用属性：
document、location、history等，都是子级对象
常用方法：
| 方法名 | 含义 |
|---|---|
| alert(text) | 显示一个带有提示信息和确认按钮的警告框 |
| prompt(text) | 显示一个带有提示信息、文本输入框、确定和取消按钮的输入框，返回值为输入的数据 |
| confirm(text) | 显示一个带有提示信息、确定和取消按钮的确认框，确定时返回true，取消时返回false |
| open(url,name,options) | 打开具有指定名称的新窗口，并加载给定url所指定的文档 |
| setTimeout(fn,delay) | 设置一次性计时器，在指定毫秒值后执行某个函数 |
| setInterval(fn,delay) | 设置周期性计时器，周期性循环执行某个函数 |
| clearTimeout(timer) | 清楚一次性计时器 |
| clearInterval(timer) | 清楚周期性计时器 |
常用事件：
| 方法名 | 描述 |
|---|---|
| onload | 页面加载完成 |
| onscroll | 窗口滚动条滑动 |
| onclick | 鼠标单击 |
注意：由于window对象是BOM结构的顶层对象，所以在调用window的属性和方法时可以省略window
案例text29.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//document.getElementById()
//window.history
//window.location
/*
window常用方法
*/
//1.alert()
//window.alert(111);
//alert(111);
//2.prompt()
//var name = window.prompt("请输入用户名","无名氏");
//console.log(name);
//3.confirm()
//var flag = confirm("确定要删除吗？");
//console.log(flag);
//4.open()
function f1() {
open("text28.html","text28","width=200px,height=200px,resizable=no");
}
//5.setTimeout
var timer_one;
var timer_zq;
function f2() {
timer_one = setTimeout(function () {
console.log(111);
},3000);//单位毫秒
}
//function show() {
// console.log(111);
//}
//6.setInterval
function f3() {
timer_zq = setInterval(function () {
console.log("起床啦....");
},1000)
}
//周期性计时器使用一次性计时器能否实现
//function f2() {
// setTimeout(show,1000);//单位毫秒
//}
//function show() {
// console.log(111);
// setTimeout(show,1000);
//}
//7.clearTimeout
function f4() {
clearTimeout(timer_one);
}
//8.clearInterval
function f5() {
clearInterval(timer_zq);
}
/*
window常用事件
*/
// window.onload
window.onscroll=function () {
console.log(222);
};
window.onclick=function () {
console.log(333);
};
window.onload=function () {
console.log(444);
};
//一个对象可以绑定对个事件，但是一个事件不能绑定多次
window.onload=function () {
console.log(555);
};
</script>
</head>
<body>
<input type="button" value="打开一个窗口" onclick="f1()"><br>
<input type="button" value="一次性计时器" onclick="f2()"><br>
<input type="button" value="周期性计时器" onclick="f3()"><br>
<input type="button" value="关闭一次性计时器" onclick="f4()"><br>
<input type="button" value="关闭周期性计时器" onclick="f5()"><br>
<hr>
<p style="background: #ccc;height: 2000px;">
hello world!
</p>
</body>
</html>
效果
3. location对象
常用属性：
- href 设置或返回地址栏中的url
常用方法：
- reload 重新加载当前页面
4. history对象
常用方法：
| 方法名 | 含义 |
|---|---|
| back() | 后退，加载history列表中的上一个url |
| forward() | 前进，加载history列表中的下一个url |
案例text30.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function f1() {
//console.log(location.href);//获取loaction的href属性
location.href="https://www.baidu.com";
//location.reload();
}
function f2() {
history.back();
}
function f3() {
history.forward();
}
</script>
</head>
<body>
<input type="button" value="操作location" onclick="f1()">
<input type="button" value="后退" onclick="f2()">
<input type="button" value="前进" onclick="f3()">
</body>
</html>
效果
案例text31.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var timer;
var l=0,r=0;//全局变量可以保留上一次调用结束时的值
function doStart() {
$("start").disabled=true;
$("stop").disabled=false;
timer =setInterval(function () {
r++;
if(r>9){
r=0;
l++;
}
if(l>9){
r=0;
l++;
}
$("imgr").src="images/number/"+r+".bmp";
$("imgl").src="images/number/"+l+".bmp";
},100);
}
function doStop() {
$("stop").disabled=true;
$("start").disabled=false;
}
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<!--table>(tr>td*2)*2-->
<table>
<tr>
<td><img src="images/number/0.bmp" alt="imgl"></td>
<td><img src="images/number/0.bmp" id="imgr"></td>
</tr>
<tr>
<td><input type="button" value="开始" id="start" onclick="doStart()"></td>
<td><input type="button" value="停止" id="stop" onclick="doStop()" disabled></td>
</tr>
</table>
</body>
</html>
效果
九、数据校验
1. 正则表达式
1.1 简介
正则表达式是一门独立的语言，有自已的语法，用于检测指定字符串是否符合特定规则 正则表达式就是用来定义规则的，称为Regular Expresstion
在JavaScript中提供了RegExp对象，表示正则表达式
1.2 定义方式
创建正则表达式对象，两种方式：
- 使用字变量
var reg = /pattern/attribute;
- 使用构造函数
var reg = new RegExp(pattern,attribute);
说明：
- pattern表示匹配模式，用于指定匹配规则，由元字符、量词、特殊符号组成
- attribute 表示匹配特征，取值：i忽略大小写、g全局匹配、m多行匹配
1.3 匹配规则
元字符：具有特殊含义的字符
| 符号 | 描述 |
|---|---|
| \s | 匹配任何的空白字符 |
| \S | 任何非空白字符 |
| \d | 匹配一个数字字符，等价于[0-9] |
| \D | 除了数字之外的任何字符 |
| \w | 匹配一个数字、下划线或字母字符 |
| \W | 任何非单字字符，等价于匹配非数字、非下划线或非字母字符 |
| . | 匹配除换行符之外的任意字符 |
量词：指定字符出现的次数
| 符号 | 描述 |
|---|---|
| {n} | 匹配前一项的n次 |
| {n,} | 匹配前一项n次，或者多次 |
| {n,m} | 匹配前一项至少n次，但不超过m次 |
| * | 匹配前一项0次或多次，等价于{0,} |
| + | 匹配前一项1次或多次，等价于{1,} |
| ？ | 匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1} |
特殊符号：具有特殊含义的符号
| 符号 | 描述 |
|---|---|
| /…/ | 代表一个模式的开始和结束 |
| ^ | 匹配字符串的开始，即表示行的开始 |
| $ | 匹配字符串的结束，即表示行的结束 |
| [ ] | 表示可匹配的列表 |
| ( ) | 用于分组 |
| | | 表示或者 |
| [^ ] | 在[ ]中的脱字符表示非 |
注： [\u4E00-\u9FA5] 用于匹配中文字符
1.4 基本用法
使用正则表达式对象的test方法
语法：
var flag =reg.test(字符串);
判断字符串是否符合正则表达式对象所指定的模式规是，返回true或false
案例text32.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//定义正则表达式对象
//var reg = /a/i;
//console.log(reg.text('heAllo'));
//方式2：定义正则表达式对象
//var reg = new RegExp('a''i');
//console.log(reg.text('helloA'));
//规则验证：
//var reg = /a\s/;//a字符后是否包含空白自带符
//console.log(reg.text('he allo'));
//var reg = /a\s\d/i;//是否包含数字字符
//console.log(reg.text('hea 8llo'));
//var reg = /a\s\d\w/i;//匹配任何字符 数字、字母、下划线
//console.log(reg.text('hela 8lo'));
//量词
//var reg = /a\s\d[3]\w/i;//连续出现3个数字
//console.log(reg.text('hela 7768_lo'));
//var reg = /a\s\d[0,3]\w/i;
//console.log(reg.text('hela 3a5b_lo'));
//var reg = /\d?/i;
//console.log(reg.text('hela 4a4_lo'));
//特殊符号
//var reg = /a/;//是否包含a字符
//console.log(reg.text('helalo'));
//var reg = /^a/;//是否以a开头
//var reg = /a$/;//是否以a结尾
//console.log(reg.text('helloa'));
//var reg = /\da$/;//以a结尾，且a的前面是个数字
//console.log(reg.text('hello9a'));
//var reg = /^a$/;
//console.log(reg.text('a'));
//var reg = /^a\da$/;//以a开头，且以a结尾，中间有一个数字
//console.log(reg.text('a7a'));
//var reg = /^a\d*a$/;//以a开头，且以a结尾，中间有一个数字，*表示数字可有可无
//console.log(reg.text('a7a'));
//var reg = /^a\d?a[\dabc]/;//[0-9abc]:表示从数字、a、b、c中选一个结尾
//console.log(reg.text('a7a8'));
//var reg = /^a\d?a[\dabc][2]$/;//[0-9abc]:表示从数字、a、b、c中选2个结尾
//console.log(reg.text('a7aa8'));
//var reg = /^a\d?a[\dabc]{2}(\da){3}$/;//(\da){3}数字a可连续出现3次
//console.log(reg.text('a7a2b8a9a6a'));
//var reg = /^a|b+%/;//b至少出现1次
//console.log(reg.text('aabb'));
var reg = /^[^abc]{2}/;//只要不是abc开头就行
console.log(reg.text('xw'));
</script>
</head>
<body>
</body>
</html>
2.表单校验
2.1 目的
客户端表单校检的目的
- 保证输入的数据符合要求
- 减轻服务器的压力
2.2 实现
通过onsubmit事件绑定回调函数，判断表单数据是否符合要求
- 如果不符合要求，则返回false
- 如果符合要求，则返回true
案例text33.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table tr td:first-child{
text-align: right;
}
.error{
font-size: 12px;
color:red;
}
.ok{
color: green;
}
</style>
<script>
function checkUsername() {
//用户名只能由数字、字母、下划线、横线、中文组成,且只能以数字或字母开头和结尾,长度为6-14位
var username = $("username").value;
var reg = /^[\da-z][\u4E00-\u9FA5\w-]{4,12}[\da-z]$/i;
if(!reg.test(username)){
$("usernameInfo").innerText="用户名只能由数字、字母、下划线、横线、中文组成";
$("usernameInfo").className="error";
return false;
}else{
$("usernameInfo").innerText="OK!";
$("usernameInfo").className="ok";
return true;
}
}
function checkPassword() {
//密码只能由数字、字母组成，长度为6-10位
var password = $("password").value;
var reg = /^[\da-z]{6,10}$/;
if(!reg.test(password)){
$("passwordInfo").innerText="密码只能由数字、字母组成，长度为6-10位";
$("passwordInfo").className="error";
return false;
}else{
$("passwordInfo").innerText="OK!";
$("passwordInfo").className="ok";
return true;
}
}
function checkRepassword() {
//两次输入的密码必须相同
var password = $("password").value;
var repassword = $("repassword").value;
if(repassword != password){
$("repasswordInfo").innerText="两次输入的密码必须相同";
$("repasswordInfo").className="error";
return false;
}else{
$("repasswordInfo").innerText="OK!";
$("repasswordInfo").className="ok";
return true;
}
}
function checkInput() {
console.log(111);
return checkUsername()&&checkPassword()&&checkRepassword();
}
function checkBirthday() {
var reg = /^\d{4}-\d{1,2}-\d{1,2}$/;
//实际开发中一般要用日期插件
}
function checkPhone() {
var reg = /^1\d{10}$/;
}
function checkEmail() {
//tom@sina.com.cn tom@baidu.com
var reg = /^\w+@\w+(\.[a-z]{2,3}){1,2}$/;// + 表示至少有1个字符点号不能直接写要转义\.
//身份证
var reg = /[1-9]\d{14}(\d{2}[\dx])?/i;//?表示可有可无 身份证有15位和18位2种
}
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<h2>用户注册</h2>
<form action="success.html" onsubmit="return checkInput()">
<!--table>(tr>td*2)*6-->
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="username" id="username"
placeholder="请输入用户名" onblur="checkUsername()">
<span id="usernameInfo"></span>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="password" id="password"
placeholder="请输入密码" onblur="checkPassword()">
<span id="passwordInfo"></span>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" name="repassword"
id="repassword" placeholder="请再次输入密码" onblur="checkRepassword()">
<span id="repasswordInfo"></span>
</td>
</tr>
<tr>
<td>出生日期：</td>
<td>
<input type="text" name="birthday" id="birthday"
placeholder="请输入出生日期" onblur="checkBirthday()">
<span id="birthdayInfo"></span>
</td>
</tr>
<tr>
<td>手机号：</td>
<td>
<input type="text" name="phone" id="phone"
placeholder="请输入手机号" onblur="checkPhone">
<span id="phoneInfo"></span>
</td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<input type="text" name="mail" id="mail"
placeholder="请输入邮箱">
</td>
</tr>
<tr>
<td colspan="2" style="text-align: left">
<input type="submit" value="注 册">
<input type="reset" value="重 置">
</td>
</tr>
</table>
</form>
</body>
</html>
success.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
注册成功！
</body>
</html>
效果
链接：https://pan.baidu.com/s/1giuzlJoDEDlBDTZqF3-suA
提取码：m7st
5318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
