JavaScript课程笔记
一、JavaScript简介
1. 什么是JavaScript?
JavaScript简称JS,由网景公司开发的客户端
脚本语言,不需要编译,可以直接执行
补充:
机器语言(0,1代码)—>汇编语言(助记符)—>高级语言(①解释,②编译)
高级语言—>编译.obj
目标程序文件—>连接link.exe
可执行性文件
解释
WEB前端三层:
- 结构层HTML,定义页面的结构
- 样式层CSS,定义页面的样式
- 行为层JavaScript,用来实现交互,提升用户体验
2. JavaScript作用
- 在客户端动态的操作页面
- 在客户端可以做数据的校验
- 在客户端发送异步要求
二、引用方式
1. 内联方式
在页面中使用script标签,在script标签的标签体重编写JS代码
<script>
alert("hello JavaScript");
</script>
2. 行内方式
在普通标签中编写JS代码,一般需要结合事件
属性,如onclick、onmouseover等
对象:客观存在的,并且可以相互区别的事物---->如:各种标签
eg:对象:
- 外观—>宽度、高度、背景色—>CSS
- 事件—>
多态性
同一个事件发生的对象不同,所引发的反应也不相同
<a href="" onclick="alert('我的魔法开始了!')">我会神奇的魔法,带你周游世界</a>
<!--使用超链接的href属性执行JS脚本时,必须添加javascript前缀-->
<a href="javascript:alert('我一定会回来的!')">我又出来了</a>
3. 外部方式
使用单独的.js
文件定义,然后在页面中使用script标签引入外部脚本文件
<script type="text/javascript" src="/js/hello.js"></script>
注意:如果某个script标签用于引入外部的.js
文件,则该script标签的标签体中不能再写js代码
<!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"></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>
三、基本用法
1. 变量
js是一门弱类型的语言,声明变量时使用var关键字,不需要指定变量的类型
语法:var 变量名=常量或表达式;
注意:变量名的命名规则
- 由字母,数字,汉字,下划线组成
- 由字母,汉字,下划线开头
- 不能和保留字同名
- 大小写敏感
回忆:
数据类型:常量和变量
常量:具体的量,不变的量—>常数项
变量:变化的量,存放常量的量—>容器
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中配置EX版本settings—>Language&FrameWorks—>JavaScropt—> JavaScropt Version
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//变量
var name;
name = '张无忌';
name = '123456';
// 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(变量名)
将字符串转换为数值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//输出
//alert('你好啊');
//console.log('欢迎光临');
//document.write('你在干嘛呢');
//输入
// var name=prompt('你叫什么名字');
// console.log(name);
// var age=prompt('你几岁啦');
// console.log(age,typeof age);
// console.log(age+2);
// age = Number(age);
// console.log(age+2);
//转义字符
console.log('he\'llo\n boy');
console.log('welcome to\t JS');
//单行注释
/*
多行注释
*/
</script>
</head>
<body>
</body>
</html>
3. 转义字符
常用转义字符:
-
\n
换行 -
\t
制表位,缩进 -
\"
双引号 -
\'
单引号 -
\a
响铃,警告
4. 注释
单行注释://
多行注释:/* */
5. 编码规范
代码区分大小写
每条语句以分号结尾
代码缩进
四、核心语法
1. 数据类型
常量:具体的值 eg:‘abc’ ‘abc’ 3.14 100
变量:存放常量的量—>容器
基本数据类型:
- string 字符串
- number 数值(NaN表示非数字NOT a Number,其自身是number类型,表示数值是不正常状态)
- boolean 布尔
- null 空类型
- undefined 未定义类型
数据类型转换:
- 转换为number
使用Numner(); ParsInt(); parseFloat(); - 转换为string
拼接空字符串 - 转换为布尔
使用Boolean();
注意:0、空字符串、undefined、null 、NaN会被转换为逻辑假false,其他类型在转化为布尔时,转换为true
<!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();
//
// var sex;//只定义了变量,但是未赋值;
// 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);
//方式1:使用Number();
//a = Number(a);//=号左边的A代表的是容器本身 右边的A代表容器中的值
// a = Number('12.5');
// a = Number('12abc');//不同类型
// a = Number('ab12');
// console.log(a,typeof a);
//方式2:使用ParsInt();
// a = parseInt(a);
// a = parseInt('12.5');
// a = parseInt('12abc');//按照字符顺序解析
// a = parseInt('abc12');//因为开头不是数字
//方式3:使用parseFloat();
// a = parseFloat(a);
// a = parseFloat('12.5');
// a = parseFloat('12abc');
// a = parseFloat('abc12');//因为开头不是数字
//将布尔值转换为数值
// a = Number(true);//JS中true用1或者非0表示
// a = Number(false);//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('abc');
// console.log(a,typeof a);
var name='tom';
if(name)
{
console.log(name);
}
</script>
</head>
<body>
</body>
</html>
2. 运算符
算数运算符:+、-、*、/、%、**、++、–
比较运算符:>、>=、<、<=、、=、!=
赋值运算符:=、+=、.=、*=、/=、%=、**=、
逻辑运算符:&&并且、||或、|与
条件运算符:条件?表达式1:表达式2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<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 d = true;//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+d);
// console.log(a-b);
// console.log(a+b);//将数值a转换为字符串,然后和b进行字符串的首尾相联
// 赋值运算符:=、+=、-=、*=、/=、%=、**=、
// 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>
</body>
</html>
使用Math对象进行数学运算,用法:Math.方法名(参数)
<!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的最大整数
//5.生成一个[0,0,1)之间的随机小数
console.log(Math.random());
//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>
3. 选择结构
if…else、swich
<!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'星期三':
console.log('吃面条');
break;
case'星期四':
console.log('吃面条');
break;
case'星期五':
console.log('吃油饼');
break;
default:
console.log('不吃了');
break;
}
</script>
</head>
<body>
</body>
</html>
4. 循环结构
white、do…white、for、for…in
break、continue
break:退出整个循环
continue:结束本次循环。返回到条件判断数继续进行下一次是否执行循环的条件判断
var str = 'welcome to js'
for(var s in str)
console.log(str[s]);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// var i = 1;
// var sum = 0;
// var cnt = 0;
// while(i<=100)
// {
// sum += i;
// i++;
// }
// console.log(sum);
// var i = 1;
// var sum = 0;
// for(i=1;i<=100;i++)
// {
// if(i%7==0)
// sum++;
// }
// console.log(sum);
var i = 1;
var sum = 0;
var cnt = 0;
do{
if(i%7==0){
sum+=i;
cnt++;
}
i++;
}while(i<=100)
console.log(sum,cnt);
var sum = 0;
var cnt = 0;
for(var i=1;i<=100;i++)
if(i%7==0){
sum += i;
cnt++;
}
console.log(sum,cnt);
var str = 'welcome to js';
for(var s in str)
console.log(str[s]);
</script>
</head>
<body>
</body>
</html>
5. 数组
5.1 定义方式
语法:
var arr = new Array();
var arr = new Arrar(值1,值2,.....);
var arr = [值1,值2,.....];
注意:
- 数组长度会自动扩展
- 数组中元素的默认值为undefined
- 使用数字的lenght属性可以获得数字的长度(数组中有多少个元素)
<!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);
// console.log(arr[0]);
// console.log(arr[1]);
//
// var arr=new Array('tom','jack','alice');
// console.log(arr);
// console.log(arr[2]);
// console.log(arr[arr.length]);
//
// var arr=new Array('tom','jack','alice','mike');
// console.log(arr[arr.length-1]);
// console.log(arr[0]);
//将1到100之间所有能被3整除的数字,放到数组number中,输出这个数组,并统计个数
// var nums=[];
// for(var i=1;i<=100;i++){
// if(i%3==0) {
// nums[nums.length] = i;
// }
// }
// console.log(nums);
// var arr=['tom','jack','alice','mike','admin']
// console.log(arr);
// arr.sort();
// console.log(arr);
var arr=['tom','jack','alice','mike','admin','jack']
console.log(arr);
//arr.reverse();
// 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.2 常用方法
方法 | 描述 |
sort() | 排序,默认按字符编码的顺序排序,非string类型会自动转换为string,可自定义比较规则 |
reverse() | 反转,将数组元素倒序排列 |
join(separator) | 将数组中元素使用指定的分隔符连接成字符串,默认通过逗号进行 连接 |
indexOf() | 返回指定元素在数组中首次出出的位置 |
slice(beign,end) | 截取数组中索引从begin到end的元素,左闭右开,如果省略第二个 参数,则表示截取到末尾 |
toString() | 将数组转换为字符串 |
5.3 二维数组
二维数组可以认为是特殊的一维数组,即一维数组中的每个元素又是一个一维数组
语法:
arr = new Array();
arr[0] = new Array();
arr[1] = new Array();
arr[][]=值;
var arr = [
[值1,值2,...],
[值1,值2,...],
[值1,值2,...]
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// var arr=new Arssssray();
// arr[0]=new Array();
// arr[1]=new Array();
// arr[0][0]=12;
// arr[0][1]=9;
// arr[1][0]=10;
//
// console.log(arr);
var arr=[
[12,54,2,67],
[1,32,12,5],
[6,43,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>')
}
</script>
</head>
<body>
</body>
</html>
6. 函数
6.1 自定义函数
function 函数名(参数1,参数2,...)
{
函数体;
}
注意:
- 定义函数时不需要指定参数的类型
- 实参个数和形参个数可以不同,未给形参传入实参的,其默认值为undefined
- 不需要指定返回值的类型,如果有返回值,直接使用retrun返回
- 如果函数中没有使用return语句返回值,则默认返回undefined
变量的作用域:
- 局部作用域
在函数中声明的变量,只能在该函数内访问,函数运行结束后变量自动销毁 - 全局作用域
在函数外部声明的变量,在任何位置都可以访问 - 块级作用域
使用let关键字声明变量,只能在声明它的代码块内访问
<!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.调用函数 功能:①返回值return语句 ②执行函数体中的代码
//show()
// var result = calc(12,6,3);//12,6,3实际函数,简称实参
// console.log(result);
//3.变量的作用域
var c = 6;//全局变量
// function fn() {
// var a = 5;//局部变量
// console.log(a);
// console.log(c);
// }
function fn(){
if(true)
{
let a = 5;//局部变量
console.log(a);
}
}
fn();
// 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
调用时只写函数名,没有小括号()和参数
应用:
- 作为事件绑定的函数
- 作为另一个函数的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// function f1(){
// console.log('111');
// }
// //fl();
// //window.onclock=f1();
// // window.οnclick=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,4,23,6,26,86];
// conosle.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);
// for(var index = 0;index<arr.length;index++)
// console.log(index,arr[index]);
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);
})()
<!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,26,86];
function show (value,index) {
console.log(index,value)
}
// arr.forEach(show);
arr.forEach(function (value,index){
console.log(index,value);
});
// function () {
// console.log('111');
// }这是错误的
//2.自执行函数
// function fn() {
// console.log('333');
// }
// fn();
(function () {
console.log(333);
})();
</script>
</head>
<body>
</body>
</html>
6.4 箭头函数
ES6中允许使用箭头=>
定义函数,称为箭头函数,也叫lambda表达式,是一种特殊匿名函数
<!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 (x,y) {
return 5;
};
var a =()=>5;
// console.log(a(4));
//示例3:如果箭头函数的函数体多于一句话,则必须使用花括号{}将他们括起来
// var a=function (x,y) {
// var sum = x + y;
// return sum;
// return x + y;
// };
// 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() | 去除字符串前后两端的空格 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var str = ' hello world! welcome yo JS! ';
// 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('o'));
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','JavaScrip');
// 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(teat,month,day,hour,minute,second);;//参数 为指定的年,月,日,时,分,秒
var date = new Date(millSeconds);//参数为当前时间与1970-1-10:0:0相差的毫秒数
2.2 常用方法
方法名 | 说明 |
getFullyear() | 以四位数字返回年份 |
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至今相差的毫秒数 |
setXxx方法与getXxx方法类似,用于设置对应的值
<!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);
// var date = new Date(12343431);
var year = date.getFullYear();
var month = date.getMonth()+1;
var d = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
let minllseconds = date.getMilliseconds();
// console.log(minllseconds);
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(year,typeof year);
// console.log(month,typeof month);
// 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","statu s":1}, {"id":"9528","username":"tom","password":"111","status":1 }]' var obj = JSON.parse(users);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//定义一个JSON对象
var user ={
"id":1001,
"name":"yuanyulu",
"age":20,
"height":167,
"address":{
"province":"山西省",
"city":"晋城市",
"district":"泽州县",
},
"ismarried":false
};
//访问方式:对象名.属性名
console.log(user.name);
console.log(user.height);
console.log(user.address);
</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对象 ={
属性名:属性值,//属性名和方法名可不用加引号
属性名:属性值,
...
}
<!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(stu.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.show = function () {
console.log("正在学习....");
};
}
//Student('tom',20,'male');
var syudent = new Student('tom',20,'male');
//console.log(student.username,student.age,syudent.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操作
Dccument Object Model文档对象模型
浏览器加载html文档时,会将html文档解析为一个树形结构,称为DOM树
- HTML文档和DOM树中节点是一一对应的关系
- 当DOM树被改变时,与之对应的HTML文档会随之改变
- 当需要对HTML中的内容进行动态改变时,可以使用DOM来进行操作
- DOM提供了一组用来操作HTML文档的API,即提供了一套
属性,方法和事件
- 树上的每个节点都是一个DOM对象,树的顶层document
对象
,表示整个文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function query() {
// console.log(111);
// var objDiv = document.getElementById("mydiv");
// console.log(typeof objDiv,objDiv);
// var objs = docment.getElementsByName("hobby");
// console.log(typeof objs);
// for(var index in objs)
// console.log(objs[index]);
// var objs = document.getElementsByTagName("input");
// console.log(objs);
// for(var index in objs)
// console.log(objs[index]);
// var obj = document.querySelectorAll("#div2");
// var obj = document.querySelector(".aaa");
// var obj = document.querySelector("p.aaa");
// console.log(obj);
// var objs = document.querySelectorAll(".aaa");
// console.log(objs.length);
// for(var index in objs)
// console.log(objs[index]);
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">hello</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><li>tom</li><li id="second">jack</li><li>alice</li><li>mike</li></ul>
</body>
</html>
2. 查询操作
即获取DOM对象
方法和属性 | 含义 |
document.getElementByld(“id值”) | 根据id属性来查询节点,返回匹配的第一个节点 |
document.getElementsByName(“name属性值”) | 根据name属性来查询,返回所有匹配的节点集合 |
document.getElementsByTagName(“标签名”) | 根据标签名来查询,返回所有匹配的节点集合 |
document.guerySelector(“选择器”) | 根据css选择器来查询,返回匹配的第一个节点 |
document.querySelectorAll(“选择器”) | 根据css选择器来查询,返回所有匹配的节点集合 |
parentNode属性 | 查询当前节点的父节点 |
previousSibling属性 | 查询当前节点的上一个节点 |
nextSibling属性 | 查询当前节点的下一个节点 |
firstChild属性 | 查询当前节点的第一个节点 |
lastChild属性 | 查询当前节点的最后一节点 |
3. 访问操作
3.1访问属性
即获取/设置DOM对象的属性
DOM对象的属性和HTML标签的属性几乎是一样的,一般情况下DOM对象都会存在一个对应的HTML标签同名的属性
用法:DOM对象.属性
3.2访问内容
即获取/设置标签中的内容
- 使用innnerHTML
用法:DOM对象,innertHTML
将内容解析为HTML - 使用innertTEXT
用法:DOM对象.innerTEXT
将内容作为纯文本
3.3访问CSS
即可获取/设置CSS样式
两种方式:
- 使用style属性
用法:DOM对象.style.样式属性
如果CSS属性中有短横线-.需要在访问时去掉短横线,然后将其后的单词首字改为大写 - 使用className属性
用法:DOM对象.className
<!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);
// console.log(obj.checked);
// let obj = document.getElementById("male");
// obj.checked=true;
// var obj = document.getElementById("baidu");
// obj.href="https://www.taobao.com/"
}
function getContent() {
let obj = document.getElementById("mydiv");
// console.log(obj.innerHTML);
console.log(obj.innerText);
// obj.innerHTML="<h2>世界你好<h2>";
// obj.innerHTML="<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";
// onj.style.fontSize="20px";
obj.className="world";
console.log(obj.className);
}
</script>
</head>
<body>
<input type="button" value="获取属性" onclick="getProperty()">
<input type="button" value="访问内容" onclick="getContent()">
<input type="button" value="访问CSS" onclick="getStyle()">
<!--<a href="https://www.baidu.com" target="_blank" id="baidu">百度</a><br>-->
<a href="https://www.baidu.com" target="_blank" id="baidu">点我</a>
用户名:<input type="text" value="" name="username" id="username"><br>
性 别:<input type="radio" value="male" name="sex" id="male" >男
<input type="radio" value="female" name="sex" id="female">女<br>
<hr>
<div id="mydiv">
hello world
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#logo {
width: 20px;
height: 30px;
}
</style>
<script>
function change() {
if($("baidu").checked){
$("logo").src="images/baidu.png";
$("frmSearch").action="https://www.baidu.com/s";
$("txtSearch").name="wd";
$("btnSearch").value="百度搜索";
}
else if($("sogou").checked){
$("logo").src="images/sogou.png";
$("frmSearch").action="https://www.sogou.com/web";
$("txtSearch").name="query";
$("btnSearch").value="搜狗搜索";
}
else{
$("logo").src="images/360.png";
$("frmSearch").action="https://www.so.com/s";
$("txtSearch").name="q";
$("btnSearch").value="360搜索";
}
}
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<input type="radio" name="search" id="baidu" checked
onclick="change()"><label for="baidu">百度</label>
<input type="radio" name="search" id="sogou" onclick="change()"><label
for="sogou">搜狗</label>
<input type="radio" name="search" id="360" onclick="change()"><label for="baidu">360</label>
<form action="https://www.baidu.com/s" id="frmSearch">
<img src="images/baidu.png" id="logo">
<input type="text" name="wd" id="txtSearch" placeholder="请输入要查
询关键词">
<input type="submit" id="btnSearch" value="百度搜索">
</form>
</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) | 删除当前节点中指定的节点 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function doAdd() {
var li = document.createElement("li");
li.innerText="alice";
// console.log(li);
li.setAttribute("id","fourth");
// console.log(li.getAttribute("id"));
// console.log(li.id);
var ul = document.getElementById("myul");
// ul.appendChild(li);
// 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="btn">
<script>
var btn = docment.getElementByid("btn");
btn.onclink=function{
console.log("动态绑定");
};
</script>
注意:
- 可以通过事件回调函数的第一个参数获取事件对象event
- 在事件回调函数中,this表示事件源,即发生事件的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function f1() {
console.log('张晋超');
// var btn2 = document.getElementById("btn2");//由于代码执行到此时,该部分代码先执行,而后面的代码没有执行所以取不到
// console.log(btn2);
};
window.onload=function () {
var btn2 = document.getElementById("btn2");//当浏览器加载完成后引发的事件
// console.log(btn2);
// btn2.οnclick=function () {
// console.log('憨憨');
// };
//
// document.getElementById("btn2").οnclick=function () {
// console.log('憨憨');
// };
// document.getElementById("btn2").οnclick=f1;
document.getElementById("btn2").onclick=function (event) {
console.log('憨憨');
console.log(event);
console.log(event.srcElement);
console.log(this);//this表示事件源;简化
};
//为复选框绑定事件
var hobbies = document.getElementsByName("hobby");
// console.log(hobbies);
for(var i=0; i<hobbies.length;i++){
hobbies[i].onclick=function () {
// console.log('我');
console.log(i);
console.log(this.value);
};
}
};
</script>
</head>
<body>
<!-- 方式1:静态绑定-->
<!--<input type="button" value="按钮1" onclick="alert('哈哈')">-->
<input type="button" value="按钮1" onclick="f1()">
<!-- 方式二:动态绑定-->
<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>
<!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;
}
#mytable tfoot tr{
text-align: right;
}
tfoot tr td:first-child{
text-align: center;
}
</style>
<script>
window.onload=function(){
//为添加按扭绑定事件
$("btnAdd").onclick=function(){
//创建tr
var tr = document.createElement("tr");
//创建td
tdChk = document.createElement("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中
var chkDelete = document.createElement("input");
chkDelete.type="checkbox";
chkDelete.className="chk";
tdChk.appendChild(chkDelete);
chkDelete.onclick=function (){
var chks = document.querySelectorAll(".chk");
//统计已选中的数量
var cnt =0;
for(var j =0;j<chks.length;j++){
if(chks[j].checked) {
cnt++;
}
}
//判断是否全部选中
if(cnt==chks.length){
$("all").checked=true;
}
else{
$("all").checked=false;
}
};
tdName.innerText=$("name").value;
tdAge.innerText=$("age").value;
tdSex.innerText=$("m").checked?$("m").value:$("f").value;
tdPhone.innerText=$("phone").value;
//创建input按钮
var btnDelete = document.createElement("input");
btnDelete.type="button";
btnDelete.value="删除";
btnDelete.onclick=function () {
this.parentNode.parentNode.remove();
};
tdDelete.appendChild(btnDelete);
//将td添加tr中
tr.appendChild(tdChk);
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();
};
//为末行删除绑定事件
$("btnDeleteLast").onclick=function(){
var trs = $('tb').getElementsByTagName("tr");
trs[trs.length-1].remove();
};
//为全选绑定事件
$("all").onclick=function(){
if($("all").checked)
{
var chks = document.querySelectorAll(".chk");
for (var i = 0; i < chks.length; i++) {
chks[i].checked = true;
}
}
else{
var chks = document.querySelectorAll(".chk");
for(var i =0 ;i<chks.length;i++){
chks[i].checked=false;
}
}
};
//实现当选中下面所有的复选框时全选
var chks = document.querySelectorAll(".chk");
for(var i =0;i<chks.length;i++){
chks[i].onclick=function(){
// console.log(111);
//统计已选中的数量
var cnt =0;
for(var j =0;j<chks.length;j++){
if(chks[j].checked) {
cnt++;
}
}
//判断是否全部选中
if(cnt==chks.length){
$("all").checked=true;
}
else{
$("all").checked=false;
}
};
}
//为删除多个按钮绑定事件
$("btnDeleteMulti").onclick=function (){
var chks = document.querySelectorAll(".chk");
for(var i =0 ;i <chks.length;i++)
{
if(chks[i].checked){
chks[i].parentNode.parentNode.remove();
}
}
};
};
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<div id="container">
<table id="mytable">
<thead>
<tr>
<th>
全选 <input type="checkbox" id="all">
</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" class="chk"></td>
<td>tom</td>
<td>20</td>
<td>male</td>
<td>110</td>
<td><input type="button" value="删除" class="delete"></td>
</tr>
<tr>
<td><input type="checkbox" class="chk"></td>
<td>jack</td>
<td>22</td>
<td>male</td>
<td>119</td>
<td><input type="button" value="删除" class="delete"></td>
</tr>
<tr>
<td><input type="checkbox" class="chk"></td>
<td>alice</td>
<td>20</td>
<td>female</td>
<td>120</td>
<td><input type="button" value="删除" class="delete"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="button" value="删除多个"
id="btnDeleteMulti"></td>
<td colspan="5">
<input type="button" value="从首行删除"
id="btnDeleteFirst">
<input type="button" value="从末行删除"
id="btnDeleteLast">
</td>
</tr>
</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="female">女 <br>
电话:<input type="text" id="phone"> <br>
<hr>
<input type="button" value="添 加" id="btnAdd">
<input type="reset" 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表示阻止表单提交 |
<!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").οnkeydοwn=function(){
// console.log(111);
// };
// document.getElementById("username").οnkeyup=function(){
// console.log(222);
// };
//
document.getElementById("username").onkeypress=function(event){
// // console.log(222);
// console.log(event);
// };
/*
表单事件
*/
// document.getElementById("username").οnfοcus=function(){
// console.log(111);
//
document.getElementById("username").className="txtborder";
// }
// document.getElementById("username").οnblur=function(){
// console.log(222);
// document.getElementById("username").className="";
// };
document.getElementById("username").onselect=function(){
console.log(222);
// document.getElementById("username").className="";
};
// document.getElementById("head").οnchange=function(event){
// console.log(222);
// console.log(event);
//
document.getElementById("img").src=window.URL.createObjectURL(this.files[0]
);
// };
document.getElementById("frm").onsubmit=function(){
console.log(111);
// return false;//阻止表单提交
return true;
};
};
</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()
<!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 设置或返回下拉列表中选项的数量
selectedIndex 设置或返回下拉列表中被选中项的索引
value 返回下拉列表中被选中项的值
options 返回下拉列表中所有的选项,值为Option对象数组(当该数组改变时对应下拉列 表的选项也会跟着改变) - 方法:
add()向下拉列表中添加一个选项 - 事件:
onchange下拉列表的选项改变时触发
Option对象:表示HTML表单中下拉列表的一个选项
- 属性:
text 设置或返回在页面中显示的文本值
value 设置或返回传递给服务器的值 - 构造函数:
Option(文本值,服务器值) 创建一个选项
<!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);
// 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>
5.2 二级菜单联动
实现省市级联的效果
<!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-0Vo1o7Cj-1593076596921)(C:\Users\asus\Desktop\QQ截图20200623093846.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// document.getElementById();//简写
// window.document.getElementById();//完整写法
// window.location
// window.history
/*
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("test28.html","test28","width=500px,height=500pxresizable=no");//感觉和超链接类似
}
//5.setTimeout()
// function f2() {
// // setTimeout(show,3000);//单位为毫秒
// setTimeout(function(){
// console.log("BOM......");
// },3000);//单位为毫秒
// }
// function show() {
// console.log(111);
// }
//6.setInterval()
var timer_zq;
function f3() {
timer_zq = setInterval(function(){
console.log("起床啦......")
},1000)
}
//也可这样实现周期计时
var timer;//定义全局变量
function f2() {
// setTimeout(show,2000);//单位为毫秒---- 一对
// var timer = setTimeout(function(){//有问题? 局部变量
timer = setTimeout(function(){
console.log("BOM......");
},3000);//单位为毫秒
}
function show() {
console.log(111);
// setTimeout(show,2000);//也可这样周期计时---- 一对
}
//7.clearTimeout()
//讲f4时个改//也可以这样实现周期计时
function f4() {
clearTimeout(timer);
}
//8.clearInterval()
function f5() {
clearInterval(timer_zq);
}
/*
window常用事件
*/
// window.onload----很熟悉了
window.onscroll=function(){
console.log(111);
};
window.onclick=function(){
console.log(222);
};
window.onload=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>
<p style="background: #ccc; height: 2000px;"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var r=0,l=0;//全局变量时可以继续上次的结果
var timer;
function doStart() {
$("start").disabled=true;
$("stop").disabled=false;
// var r=0,l=0;//局部变量时每次重新开始
timer = setInterval(function () {
r++;
if(r>9){
r =0;
l++;
}
if(l>9){
r=0;
l=0;
}
$("imgr").src='images/number/'+r+'.bmp';
$("imgl").src='images/number/'+l+'.bmp';
},100)
}
function doStop() {
$("stop").disabled=true;
$("start").disabled=false;
clearInterval(timer);
}
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<!--table>(tr>td*2)*2-->
<table>
<tr>
<td><img src="./images/number/0.bmp" id="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>
3. location对象
常用属性:
- href 设置或返回地址栏中的url
常用方法:
- reload 重新加载当前页面
4. history对象
常用方法:
方法名 | 含义 |
back() | 后退,加载history列表中的上一个url |
forward() | 前进,加载history列表中的下一个url |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function f1() {
// console.log(location.href); //获取loaction的属性
// 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()"><br>
<input type="button" value="后退" onclick="f2()"><br>
<input type="button" value="前进" onclick="f3()"><br>
</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 基本用法
使用正则表达式对象的text方法
语法:
var flag =reg.text(字符串);
判断字符串是否符合正则表达式对象所指定的模式规则,返回true或false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//方式1:定义正则表达式
// var reg = /a/i;
// console.log(reg.test('heAllo'));
//方式2:定义正则表达式对象
// var reg = new RegExp('a','i');
// console.log(reg.test('helloA'));
//规则验证:
// var reg = /\sa/;//是否包含空白字符
// console.log(reg.test('he allo'));
// var reg = /a\s\d]/i;//是否包含数字字符
// console.log(reg.test('hea 8llo'));
// var reg = /a\s\d\w/i;//匹配任何字符 数字、字母、下划线
// console.log(reg.test('hea 888_llo'));
//量词
// var reg = /a\s\d{3}\w/i;//连续出现3个数字
// console.log(reg.test('hela 777_lo'));
// var reg = /a\s\d{0,3}\w/i;
// console.log(reg.test('hela 3a5b_lo'));
// var reg = /\d?/i;
// console.log(reg.test('hela 4a4_lo'));
//特殊符号
// var reg = /a/;//是否包含a字符
// console.log(reg.test('helalo'));
// var reg = /^a/;//是否以a开头
// var reg = /a$/;//是否以a结尾
// console.log(reg.test("helloa"));
// var reg = /\da$/;//以a结尾,且a的前面是数字
// console.log(reg.test('hello8a'));
// var reg = /^a$/;//以a开头,以a结尾
// console.log(reg.test('a'));
// var reg = /^a\da$/;//以a开头,且以a结尾,中间有一个数字
// console.log(reg.test('a7a'));
// var reg = /^a\d+a$/;//以a开头,且以a结尾,中间有一个数字,+表示数字可以出现多次
// console.log(reg.test('a7777a'));
// var reg = /^a\d*a$/;//以a开头,且以a结尾,中间有一个数字,*表示数字可有可无
// console.log(reg.test('a7a'));
// var reg = /^a\d?a[\dabc]$/;//[0-9abc]表示从数字、a、b、c中选1个结尾
// console.log(reg.test('a7abc'));
// var reg = /^a\d?a[\dabc]{2}$/;//[0-9abc]表示从数字、a、b、c中选2个结尾
// console.log(reg.test('a7a8a'));
// var reg = /^a\d?a[\dabc]{2}(\da){3}$/;//(\da){3}数字a可以连续出现3次
// console.log(reg.test('a7a2b8a9a6a'));
// var reg = /^a|b+%/;//b至少出现1次
// console.log(reg.test("aabb"));
var reg = /^[^abc]{2}/;//只要不是abc开头就行
console.log(reg.test('xw'));
</script>
</head>
<body>
</body>
</html>
2.表单校验
2.1 目的
客户端表单校检的目的
- 保证输入的数据符合要求
- 减轻服务器的压力
2.2 实现
通过onsubmit事件绑定回调函数,判断表单数据是否符合要求
- 如果不符合要求,则返回false
- 如果符合要求,则返回true
<!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>