pt20JavaScript
一、 JavaScript 基础
一、 JavaScript 概述
JS 介绍
简称JS，是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等。
JS 组成
- 核心语法 -ECMAScript 规范了JS的基本语法
- 浏览器对象模型 -BOM：Browser Object Model，提供了一系列操作浏览器的方法
- 文档对象模型 -DOM：Document Object Model ，提供了一系列操作的HTML文档的方法
使用方式
元素绑定事件onclick
- 事件 ：指用户的行为（单击，双击等）或元素的状态（输入框的焦点状态等）
- 事件处理：元素监听某种事件并在事件发生后自动执行事件处理函数。
- 常用事件：onclick (单击事件)
- 语法 ：将事件名称以标签属性的方式绑定到元素上，自定义事件处理。
<button onclick="console.log('Hello World');">点击button>
文档内嵌 script
使用标签书写 JS 代码
<script type="text/javascript">
alert("alert是弹窗");
script>
注意 ：标签可以书写在文档的任意位置，书写多次，一旦加载到script标签就会立即执行内部的JS代码，因此不同的位置会影响代码最终的执行效果
外部链接
创建外部的JS文件 XX.js，在HTML文档中使用引入
<script src="index.js">script>
注意 ：既可以实现内嵌 JS 代码，也可以实现引入外部的 JS 文件，但是只能二选一。
使用举例demo
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js代码书写方式title>
<script>
console.log('在head中执行的JavaScript')
script>
<script src="demo.js">script>
head>
<body>
<button onclick="alert('hello world')">
click me
button>
<script>
// js代码单行注释
/* 多行注释 */
// 浏览器F12,查看console控制台，显示hello world
console.log('hello world')
script>
body>
html>
//demo.js文件
// 外部JS文件
console.log('外部JS文件加载成功');
// 浏览器F12,查看console控制台，
在head中执行的JavaScript
外部JS文件加载成功
hello world
二、基础语法
1. JS是由语句组成,语句由关键字,变量,常量,运算符,方法组成.分号可以作为语句结束的标志,也可以省略
2. JS严格区分大小写
3. 注释语法 单行注释使用 // 多行注释使用 /* */
JS的变量与常量
变量
- 作用 : 用于存储程序运行过程中可动态修改的数据
- 语法 : 使用关键var声明，自定义变量名
var a; //变量声明 a = 100; //变量赋值 var b = 200; //声明并赋值 var m,n,k; //同时声明多个变量 var j = 10,c = 20; //同时声明并赋值多个变量 - 命名规范 :
- 变量名,常量名,函数名,方法名自定义,可以由数字,字母,下划线,$组成,禁止以数字开头
- 禁止与关键字冲突(var const function if else for while do break case switch return class)
- 变量名严格区分大小写
- 变量名尽量见名知意,多个单词组成采用小驼峰,例如：“userName”
- 使用注意 :
- 变量如果省略var关键字，并且未赋值，直接访问会报错
- 变量使用var关键字声明但未赋值，变量初始值为undefined
- 变量省略var关键字声明，已被赋值，可正常使用.影响变量作用域
常量
- 作用 : 存储一经定义就无法修改的数据
- 语法 : 必须声明的同时赋值
const PI = 3.14; - 注意 :
- 常量一经定义,不能修改,强制修改会报错
- 命名规范同变量,为了区分变量,常量名采用全大写字母
以上浏览器 console控制台即可操作
数据类型
基本数据类型
数值类型（不区分整数小数）
整数
- 十进制表示
var a = 100;
- 八进制表示
以0为前缀
var b = 021; //结果为十进制的 17
- 十六进制
以0x为前缀
var c = 0x35;//结果为十进制的 53
使用 : 整数可以采用不同进制表示,在控制台输出时一律会按照十进制输出
小数
- 小数点表示
var m = 1.2345;
- 科学计数法
例 : 1.5e3
e表示10为底,e后面的数值表示10的次方数
1.5e3 等价于 1.5 * 10(3)
string 字符串类型
字符串 : 由一个或多个字符组成,使用""或’'表示,每一位字符都有对应的Unicode编码
var s = "100";
var s1 = "张三";
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<script>
// 接收用户输入的姓名
// 如果用户输入内容后点确定 会将用户输入的结果以字符串的形式返回 如果用户点取消 会返回null
var uname = prompt('请输入姓名');
// console.log(uname);
var salary = prompt('请输入薪资');
// console.log(uname+'的工资为'+salary+'元');
//python代码
// '%s的工资为%s元' % (uname,salary)
// f'{uname}的工资为{salary}元'
console.log(`${uname}的工资为${salary}元`);
script>
body>
html>
boolean 布尔类型
只有真和假两个值，布尔值与number值可以互相转换。true 为 1，false 为 0
var isSave = true;
var isChecked = false;
undefined (程序返回的值)
特殊值，变量声明未赋值时显示undefined
var a;
console.log(a);//undefined
null 空类型 (主动使用的)
解除对象引用时使用null,表示对象为空
引用数据类型
主要指对象，函数
数据类型转换
不同类型的数据参与运算时,需要转换类型
强制类型转换
转换字符串类型
方法 : toString() 返回转换后的字符串
var a = 100;
a = a.toString(); //"100"
var b = true;
b = b.toString(); //"true"
转换number类型
- Number(param)
参数为要进行数据类型转换的变量或值，返回转换后的结果:
如果转换成功,返回number值
如果转换失败,返回NaN,(Not a Number)，只要数据中存在非number字符,一律转换失败，返回 NaN
Number("abc")
typeof NaN
Number(undefined)
Number(null)
- parseInt(param)
参数为要解析的数据， 作用 : 从数据中解析整数值
过程 :
1. 如果参数为非字符串类型，会自动转成字符串
2. 从左向右依次对每一位字符转number，转换失败则停止向后解析，返回结果 - parseFloat(param)
作用 : 提取number值，包含整数和小数部分
隐式类型转换（自动转换）
- 当字符串与其他数据类型进行"+"运算时,表示字符串的拼接，不再是数学运算
转换规则 ：将非字符串类型的数据转换成字符串之后进行拼接，最终结果为字符串 - 其他情况下，一律将操作数转number进行数学运算
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数据类型转换title>
head>
<body>
<script>
// 1.强制转换
// 强制转字符串
// var a = 100;
// console.log(a.toString());//'100'
// var a = true;
// console.log(a.toString());//'true'
// var a = undefined;
// console.log(a.toString());//Uncaught TypeError: Cannot read property 'toString' of undefined
// var a = null;
// console.log(a.toString());//Uncaught TypeError: Cannot read property 'toString' of null
// 强制转数值
console.log(Number(''));// 0
console.log(Number(' '));// 0
console.log(Number('123'));// 123
console.log(Number('abc'));// NaN
// typeof NaN 检测数据类型
console.log(Number(true));// 1
console.log(Number(false));// 0
console.log(Number(undefined));// NaN
console.log(Number(null));// 0
// '123abc' --> 123
parseInt('123abc'); // 123
// 3.14-->'3.14'-->3
parseInt(3.14);// 3
parseFloat('123.456.789');//123.456
// 2.隐式转换
// 字符串 做 +运算 所有内容自动转字符串做拼接
// 其他情况 自动转数值做数学计算 如果转number出现NaN，NaN参与数学运算的结果也是NaN
var age = prompt('请输入年龄');
// '20' + 10 --> '20' + '10' --> '2010'
// '20' - 10 --> 20 - 10 --> 10
console.log(`十年之前${age-10},十年之后${age+10}`);
script>
body>
html>
运算符
赋值运算符
= 将右边的值赋给左边变量
算数运算符
+ - * / % 加 减 乘 除 取余
复合运算符
+= -= *= /= %=
自增或自减运算符
++ -- 变量的自增和自减指的是在自身基础上进行 +1或-1 的操作
注意：
- 自增或自减运算符在单独与变量结合时，放前和放后没有区别
- 如果自增或自减运算符与其他运算符结合使用，要区分前缀和后缀,做前缀，那就先++/–,再进行赋值或其他运算，如果做后缀，就先结合其他运算符，再进行++ / –
关系运算符/比较运算符
> <
>= <=
==(相等) !=(不相等)
===(全等) !==(不全等)
-
关系运算符用来判断表达式之间的关系,结果永远是布尔值 true/false
-
使用
- 字符串与字符串之间的比较
依次比较每位字符的Unicode码，只要某位字符比较出结果，就返回最终结果 - 其他情况
一律将操作数转换为number进行数值比较，如果某一操作数无法转换number，则变成NaN参与比较运算，结果永远是false
null和其他数据类型做等值比较运算 不转换成数字， null和undefined相等 但是 null和undefined不全等
- 字符串与字符串之间的比较
-
相等与全等
- 相等 : 不考虑数据类型,只做值的比较(包含自动类型转换)
- 全等=== : 不会进行数据类型转换，要求数据类型一致并且值相等才判断全等
逻辑运算符
- && 逻辑与 条件1&&条件2
表达式同时成立,最终结果才为true; - || 逻辑或 条件1||条件2
表达式中只要有一个成立,最终结果即为true; - ! 逻辑非 !条件
对已有表达式的结果取反
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>运算符title>
head>
<body>
<script>
var a = 10;
// a = a+1;
// a += 1;
// console.log(a);
// a++ 后缀 先返回a的值 然后让a自增
// ++a 前缀 先让a自增 然后返回a的值
// a的值 10 11 12
// console.log(a++ + a++); //21
// 返回值 10 11
// console.log(a);//12
// a的值 10 11 12
// console.log(++a + a++); //22
// 返回值 11 11
// console.log(a); //12
// 接收用户输入的年份 判断是否为闰年
// var y = prompt('请输入年份');
// y能被4整除 同时不能被100整除 或者能被400整除
// Python代码
// y % 4 == 0 and y % 100 != 0 or y % 400 == 0
// console.log(y % 4 == 0 && y % 100 != 0 || y % 400 == 0);
// 对于 && 只有两个条件同时满足 结果为true 一假则假
// 对于 || 只要有一个条件满足 结果为true 一真俱真
// 接收用户输入的年龄
// 如果年龄小于18 显示禁止访问
var age = prompt('请输入年龄');//'25'
// 如果输入的结果小于18 前面的表达式的结果为true 对于 && 运算来说不能得到最终结果 会执行后面的表达式
// 如果输入的结果大于等于18 前面的表达式的结果为false
// 对于&&来说 一假则假最终结果就是false 不会执行后面的表达式
age < 18 && console.log('禁止访问');
// 使用 || 完成上面的功能
script>
body>
html>
三目运算符
语法 :
表达式1 ? 表达式2 : 表达式3;
过程 :
判断表达式1是否成立,返回布尔值
如果表达式1成立,执行表达式2;
如果表达式1不成立,执行表达式3;
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三目运算title>
head>
<body>
<script>
// 接收用户输入的年龄 如果年龄小于18
// 显示禁止访问
// 否则显示允许访问
var age = prompt('请输入年龄');
// age<18?console.log('禁止访问'):console.log('允许访问');
console.log(age<18?'禁止访问':'允许访问');
script>
body>
html>
三、流程控制
控制代码的执行顺序
分类
顺序结构
从上到下依次执行代码语句
分支/选择结构
if语句
简单if结构
if(条件表达式){
表达式成立时执行的代码段
}
注意 : 除零值以外，其他值都为真，以下条件为假值false
if(0){}
if(0.0){}
if(""){} //空字符串
if(undefined){}
if(NaN){}
if(null){}
特殊写法 :
{ }可以省略,一旦省略，if语句只控制其后的第一行代码
if - else结构
if(条件表达式){
//条件成立时执行
}else{
//条件不成立时选择执行
}
多重分支结构
if(条件1){
//条件1成立时执行
}else if(条件2){
//条件2成立时执行
}else if(条件3){
//条件3成立时执行
}...else{
//条件不成立时执行
}
练习
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>if语句title>
head>
<body>
<script>
// var age = prompt('请输入年龄');
// if(age<18){
// console.log('禁止访问');
// }else{
// console.log('允许访问');
// }
// console.log('程序结束');
var s = prompt('请输入成绩');
/*
90+ --> S
80+ --> A
70+ --> B
60+ --> C
60- --> D
超过100或小于0 --> 有误
*/
if(s>100 || s<0){
console.log('输入有误');
}else if(s >= 90){
console.log('S');
}else if(s >= 80){
console.log('A');
}else if(s >= 70){
console.log('B');
}else if(s >= 60){
console.log('C');
}else if(s < 60){
console.log('D')
}
script>
body>
html>
switch语句
switch(value){
case 值1 :
//value与值1匹配全等时,执行的代码段
break; //结束匹配
case 值2 :
//value与值2匹配全等时,执行的代码段
break;
case 值3 :
//value与值3匹配全等时,执行的代码段
break;
default:
//所有case匹配失败后默认执行的语句
break;
}
使用 :
1. switch语句用于值的匹配，case用于列出所有可能的值；只有switch()表达式的值与case的值匹配全等时，才会执行case对应的代码段
2. break用于结束匹配，不再向后执行；可以省略，break一旦省略，会从当前匹配到的case开始，向后执行所有的代码语句，直至结束或碰到break跳出
3. default用来表示所有case都匹配失败的情况，一般写在末尾，做默认操作
4. 多个case共用代码段
case 值1:
case 值2:
case 值3:
//以上任意一个值匹配全等都会执行的代码段
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<script>
var m = prompt('请输入月份');
// if(m == 1){
// console.log('31天')
// }else if(m == 2){
// console.log('28天')
// }
switch(m){
case '1':
case '3':
case '5':
case '7':
case '8':
case '10':
case '12':
console.log('31天');
break;
case '2':
console.log('28天');
break;
case '4':
case '6':
case '9':
case '11':
console.log('30天');
break;
default:
console.log('月份输入有误');
}
script>
body>
html>
循环结构
根据条件，重复执行某段代码
while循环
定义循环变量;
while(循环条件){
条件满足时执行的代码段
更新循环变量;
}
do-while循环
do{
循环体;
更新循环变量
}while(循环条件);
与 while 循环的区别 :
- while 循环先判断循环条件，条件成立才执行循环体
- do-while 循环不管条件是否成立，先执行一次循环体
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<script>
// console.log(0);
// console.log(1);
// console.log(2);
// python
// i = 0
// while i<10 :
// print(i)
// i+=1
// var i = 0;
// while (i<10){
// console.log(i++);
// }
// var upwd = prompt('请输入密码');
// 如果密码不是123456就让用户继续输入
// while(upwd != '123456'){
// upwd = prompt('请输入密码');
// }
// while (true){
// var upwd = prompt('请输入密码');
// if(upwd == '123456'){
// break
// }
// }
do{
var upwd = prompt('请输入密码');
}while(upwd != '123456')
script>
body>
html>
for 循环
for(1定义循环变量;2循环条件;4更新循环变量){
3循环体;
}
循环控制 break continue
- break 强制结束循环
- continue 结束当次循环，开始下一次循环
循环嵌套 : 在循环中嵌套添加其他循环
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<script>
// var i = 0;
// while(i<10){
// console.log(i);
// i++;
// }
// for(var i = 0;i<10;i++){
// console.log(i);
// }
// 使用for循环 打印0~20之间的偶数
// for(var i = 0;i<21;i++){
// if (i % 2 == 0){
// console.log(i)
// }
// }
// 通过continue语句 跳过所有的奇数实现上面效果
for(var i = 0;i<21;i++){
if(i%2){
continue
}
console.log(i);
}
script>
body>
html>
四、函数
作用： 封装一段待执行的代码
语法
//函数声明
function 函数名(参数列表){
函数体
return 返回值;
}
//函数调用
函数名(参数列表);
使用
函数名自定义，见名知意，命名规范参照变量的命名规范。普通函数以小写字母开头，用于区分构造函数(构造函数使用大写字母开头，定义类)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>function——函数title>
head>
<body>
<button onclick="fun();">点击输入用户名button>
<script>
function fun(){
var uname = prompt('请输入用户名');
alert(`欢迎${uname}`);
}
console.log(fun);
fun();
// function fun(){
// // console.log('hello world');
// // return undefined
// return 'hello world'
// }
// fun()
// console.log(fun());
// function fun(uname){
// console.log(`hello ${uname}`);
// }
// fun();//hello undefined
// fun('shibw');
// function fun(a,b,c=15){
// console.log(a,b,c)
// }
// fun()
// fun(10.20)
// fun(10,20,25);
// 定义一个函数 接收两个数字 返回比较大的数字
function myMax(a,b){
// if(a>b){
// return a
// }
// return b
return a>b?a:b;
}
console.log(myMax(10,20));
// 定义一个函数 接收一个数字 如果数字在0～9之间 将数字补零然后返回
// 传入 0 返回 '00'
// 传入 1 返回 '01'
// ...
// 传入 9 返回 '09'
// 传入 19 返回 '19'
function addZero(num){
// if(num<10){
// return '0'+num //补零
// }
// return ''+num //转字符串
return num<10?'0'+num:''+num;
}
console.log(addZero(9));
console.log(addZero(19));
script>
body>
html>
匿名函数
匿名函数：省略函数名的函数。语法为：
- 匿名函数自执行
(function (形参){
})(实参);
- 定义变量接收匿名函数
var fn = function (){};
fn(); //函数调用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>匿名函数title>
head>
<body>
<button id="btn">click mebutton>
<script>
// doctument通过id属性值查找页面中唯一的元素，即上面button的id
var btn = document.getElementById('btn');
// btn 页面元素的节点对象
// console.log(btn);
// console.dir(btn);
// 对页面元素的节点对象进行操作 使用 .语法
// 对象.属性 获取对象的属性值
console.log(btn.onclick);
// 对象.属性=值 设置对象的属性值
btn.onclick = function(){
console.log('这是匿名函数赋值给变量');
};
// 匿名函数自执行,上方的函数要加下;结尾
// (function(){
// console.log('hello world');
// })()
// 在代码执行之前 浏览器会先创建执行上下文
// 执行上下文会将当前作用域中var 声明的变量和function声明的函数 提前到当前作用域的最上方 然后从上向下逐行执行每一条语句
// 函数名提前时 函数主体也会一同提前 可以在当前作用域任意位置调用函数
// 变量名提前时 赋值语句不会提前 此时变量只有初始值undefined
fun();//这是正常声明的函数
// console.log(fun2);//undefined
// fun2();//fun2 is not a function
function fun(){
console.log('这是正常声明的函数');
}
// fun();
var fun2 = function(){
console.log('这是匿名函数赋值给变量');
}
// fun2();
script>
body>
html>
作用域
JavaScript 中作用域分为全局作用域和函数作用域，以函数的{ }作为划分作用域的依据
- 全局变量和全局函数
- 只要在函数外部使用 var 关键字定义的变量，或函数都是全局变量和全局函数，在任何地方都可以访问
- 所有省略 var 关键字定义的变量，一律是全局变量
- 局部变量/局部函数
- 在函数内部使用 var 关键字定义的变量为局部变量，函数内部定义的函数也为局部函数，只能在当前作用域中使用，外界无法访问
- 作用域链
局部作用域中访问变量或函数，首先从当前作用域中查找，当前作用域中没有的话，向上级作用域中查找，直至全局作用域
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>作用域title>
head>
<body>
<script>
var a = 10;
function fun(a){
// a是参数 对参数的修改不会影响全局变量
a = a + 1;
console.log(a);// 11
}
fun(a);
console.log(a);// 10
// var a = 10;
// function fun(){
// // a++;
// // 函数内部变量如果没有声明但是有值时 为全局变量
// a = a + 1;
// console.log(a);// 11
// }
// fun();
// console.log(a);// 11
// var a = 10;
// function fun(){
// // 执行上下文
// // var a
// console.log(a);//undefined
// var a = 1;
// }
// fun();
// console.log(a);//10
// var a = 10;
// function fun(){
// console.log(a);//10
// }
// fun();
// console.log(a);//10
// var a = 10;
// function fun(){
// var a = 1;
// console.log(a);//1
// }
// fun();
// console.log(a);//10
script>
body>
html>
五、DOM节点操作
DOM全称为 “Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。）
节点对象
JavaScript 会对 html 文档中的元素、属性、文本甚至注释进行封装，称为节点对象，提供相关的属性和方法。
访问节点
- 元素节点 ( 操作标签）
- 属性节点（操作标签属性）
- 文本节点（操作标签的文本内容）
标签属性都是元素节点对象的属性,可以使用点语法访问，例如：
h1.id = "d1"; //set 方法
console.log(h1.id); //get 方法
h1.id = null; //remove 方法
注意 :
- 属性值以字符串表示
- class属性需要更名为 className，避免与关键字冲突，例如：
h1.className = “c1 c2 c3”；
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<ul>
<li>item1li>
<li>item2li>
<li>item3li>
ul>
<script>
// 通过标签名查找页面元素
var lis = document.getElementsByTagName('li');
// 如果查找的内容可能是多个对象 多个对象会放在节点列表中返回
console.log(lis);
// 可以通过索引获取列表中指定位置的对象
// console.log(lis[0]);
// console.log(lis[1]);
// console.log(lis[2]);
// 遍历节点列表
for(var i=0;i<lis.length;i++){
console.log(lis[i]);
// 每个li被点击时 打印ok
lis[i].onclick = function(){
console.log('ok');
}
}
script>
body>
html>
为全部 初级 中级 高级添加点击事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
a{
color: #222;
text-decoration: none;
}
ul{
margin: 0;
padding: 0;
/* 清除列表样式 */
list-style: none;
overflow: hidden;
}
li{
float: left;
}
.first>a{
color: #999;
}
.item{
margin-left: 30px;
padding: 0 5px;
}
.active{
background-color: red;
/* color: #fff; */
}
.active>a{
color: #fff;
}
style>
head>
<body>
<ul>
<li class="first"><a href="#">难度：a>li>
<li class="item"><a href="javascript:;">全部a>li>
<li class="item"><a href="#">初级a>li>
<li class="item active"><a href="#">中级a>li>
<li class="item"><a href="#">高级a>li>
ul>
<script>
// 为全部 初级 中级 高级添加点击事件
// 查找页面中className值为item的页面元素
var items = document.getElementsByClassName('item');
// 获取 li中级 的class属性
// console.log(items[2].className); //item active
// 删除中级标签的active
// items[2].className = 'item';
// 为高级标签添加active 切换颜色变化
// items[3].className = 'item active';
// 遍历节点列表 添加点击事件
for(var i = 0;i<items.length;i++){
items[i].onclick = function(){
// 当item被点击时 先找到当前页面中带有class active的页面元素(通过class属性值查找) 然后删除它的class active
// getElementsByClassName获取的是一个节点列表 想要获取列表中的对象需要通过索引值获取
var befor = document.getElementsByClassName('active')[0];
//var befor = document.getElementsByClassName('active');
// console.log(befor); //返回一个节点列表[li.item.active]
befor.className = 'item';
// 为当前正在被点击的元素添加class active
// console.log(this);//调用函数的当前对象
this.className = 'item active';
}
}
script>
body>
html>
获取多个DOM元素和控制属性
- 根据标签名获取元素节点列表
var elems = document.getElementsByTagName("");
/*
参数 : 标签名
返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。
*/
- 根据 class 属性值获取元素节点列表
var elems = document.getElementsByClassName("");
/*
参数 : 类名(class属性值)
返回值 : 节点列表
*/
- 元素节点对象提供了以下属性来操作元素内容
innerHTML : 读取或设置元素文本内容,可识别标签语法，使用较多
innerText : 设置元素文本内容,不能识别标签语法
value : 读取或设置表单控件的值
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>操作页面元素的内容title>
head>
<body>
<input id="wd" type="text" placeholder="请输入内容">
<h1 id="show">
操作页面（页面显示，清空本行，实验）
h1>
<script>
var wd = document.getElementById('wd');
var show = document.getElementById('show');
// 获取用户在输入框中输入的内容
// 将内容放在页面中h1标签中显示
// 对于普通双标签 h1~h6 div p span a... 可以通过innerHTML或者innerText获取内容
// innerHTML既识别HTML标签也识别文本内容,使用较多
// innerText只识别文本内容
// 对象.innerHTML 获取内部的HTML
// 对象.innerHTML = 'xxx' 修改内部的HTML
console.log(show.innerHTML) //注释下面的onpinput事件测试
// show.innerHTML = 'baidu'
// 对于表单控件 input select button... 可以通过value属性获取表单控件的值
// console.log(wd.value);
// wd.onfocus = function(){
// console.log('获取焦点事件，鼠标点入，操作')
// }
// wd.onblur = function(){
// console.log('失去焦点事件，鼠标离开，操作')
// }
wd.oninput = function(){
// console.log('输入内容改变事件，内容改变，操作')
show.innerHTML = wd.value;
}
// wd.onchange = function(){
// console.log('值发生改变事件，值变化，操作')
// }
script>
body>
html>
- 操作 DOM 树中的属性值：
elem.getAttribute("attrname");//根据指定的属性名返回对应属性值
elem.setAttribute("attrname","value");//为元素添加属性,参数为属性名和属性值
elem.removeAttribute("attrname");//移除指定属性
- 操作元素样式：
为元素添加 id、class属性，或操作元素的行内样式，访问元素节点的style属性，获取样式对象；样式对象中包含CSS属性，使用点语法操作。
p.style = "width:300px;";
p.style.color = "white";
p.style.fontSize = "20px";
注意 :
- 属性值以字符串形式给出，单位不能省略
- 如果css属性名包含连接符，使用JS访问时，一律去掉连接符,改为驼峰， font-size -> fontSize
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>操作页面元素的样式title>
<style>
.red{
color: #f00;
font-size: 20px;
}
style>
head>
<body>
<h1 id="title">hello worldh1>
<script>
var title = document.getElementById('title');
// 为页面标签添加属性class,使用较多
title.className = 'red';
// 使用style属性
// html: border-left-color --> js: borderLeftColor，js中style属性的样式声明
console.log(title.style);
// title.style.fontSize = '20px'; 太复杂，不能补全
// title.style = "font-size:20px;color:red;";
script>
body>
html>
JS常用事件
| 属性 | 发生事件的场景 |
|---|---|
| onabort | 图像加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onerror | 当加载文档或图像时发生某个错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下或按住 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或图像被完成加载 |
| onmousedown | 某个鼠标按键被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onreset | 重置按钮被点击 |
| onresize | 窗口或框架被调整尺寸 |
| onselect | 文本被选定 |
| onsubmit | 提交按钮被点击 |
| onunload | 用户退出页面 |