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
```javascript
<!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('哈哈')
效果
三、基本用法
- 变量
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>
效果
- 输入和输出
输出:
alert() 弹出警告框
console.log() 输出到浏览器的控制台
document.write() 输出到页面
输入:
prompt() 弹出一个输入框,获取用户输入的数据
使用typeof 变量名
判断变量的类型
使用Number(变量名)
将字符串转换为数值
- 转义字符
常用转义字符
\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 定义方式
语法
```javascript
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表示阻止表单提交
<!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>
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20200621222307834.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM5NzA0MA==,size_16,color_FFFFFF,t_70)