前端基础-03JS基础
01 js介绍
js:javascript
解释型语言
nodejs 本质以js为基础，开发后端的数据接口
js出现之前，所有逻辑在后端服务器完成。
1994年12月，Navigator发布了1.0版，市场份额一举超过90%。
面临问题：网速很慢而且上网费很贵，有些操作不宜在服务器端完成。比如，如果用户忘记填写“用户名”，就点了“发送”按钮，到服务器再发现就太晚了。最好发送前就提示
js代码真正执行的时机？
js代码由浏览器执行，js脚本控制form表单，js先做验证。
1 输入的内容格式有问题，验证的过程。
2 所有验证都在服务器端，服务器压力大
在客户端执行，基于事件的触发
网页小程序不需要Java这么“重”的语法。但是，同时也决定脚本语言的语法要接近Java，并且可以支持Java程序。
1995年5月，Brendan Eich只用了10天，就设计完成了这种语言的第一版。它是一个大杂烩，语法有多个来源：
基本语法： 借鉴C语言和Java语言。
数据结构： 借鉴Java语言，包括将值分成原始值和对象两大类。
函数的用法： 借鉴Scheme语言和Awk语言，将函数当作第一等公民，并引入闭包。
原型继承模型：借鉴Self语言（Smalltalk的一种变种）。
正则表达式： 借鉴Perl语言。
字符串和数组处理： 借鉴Python语言。
javascript和ECMAScript关系
javascript
ECMAScript 标准化JavaScript这种语言的基本语法结构
DOM document Object Model 文档对象模型（javascript操作html文件标签对象等）
BOM Browser object model 浏览器对象模型 (浏览器提供给javascript，操作浏览器对象)
javascript版本
2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”。
02 js引入
示例1 弹窗
服务于网页，BOM 控制浏览器，弹窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
alert(123)
</script>
</head>
<body>
<h1>welcome to JS!</h1>
</body>
</html>
顺序执行，执行完 点击确定时，才显示welcome to js!
-----
<a href="" onclick="return deleteInfo()">删除</a>
<script>
function deleteInfo() {
const r = confirm("确定删除此信息？");
if (r) {
alert("删除成功");
return true;
}
return false;
}
</script>
-----
示例2 console.log
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// alert(123)
console.log("hello user")
</script>
</head>
<body>
<h1>welcome to JS!</h1>
</body>
</html>
示例3 js文件引入
common.js
console.log("hello JS")
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// alert(123)
// console.log("hello user")
</script>
<script src="common.js"></script>
</head>
<body>
<h1>welcome to JS!</h1>
</body>
</html>
03 JS的变量声明赋值
1、变量
2、基本语法 注释方式 语句控制
3、数据类型
4、流程控制语句
5、函数
6、面向对象
变量
变量 数据的指代
格式:
// 方式1 先声明再赋值
var 变量名; // 声明的变量如果没有进行赋值,或者没有被定义的变量,值默认是undefined
变量名 = 变量值;
// 方式2 声明并赋值
var 变量名 = 变量值;
// 方式3 一行可以声明多个变量.并且可以是不同类型
var name="yuan", age=20, job="lecturer";
1 先声明再赋值
注意: 和go区别没有声明类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var name;
name="user"
console.log(name)
</script>
</head>
<body>
<h1>welcome to js!</h1>
</body>
</html>
声明数值型
<script>
var name;
name=12
console.log(name)
</script>
没加var 全局变量
<script>
// var name;
name=12
console.log(name)
</script>
注意：在函数中加var和不加var的区别
不添加var 引用全局的，加var声明局部的
<script>
var name;
name=12
console.log(name)
function foo(){
a=1
}
</script>
2 声明并赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//变量先声明再赋值
var name;
name=12
console.log(name)
//变量声明并赋值
var age = 22;
</script>
</head>
<body>
<h1>welcome to js!</h1>
</body>
</html>
3 一行声明多个变量
// 方式3 一行可以声明多个变量.并且可以是不同类型
var name="yuan", age=20, job="lecturer";
1、声明变量时 可以不用var. 如果不用var 那么它是全局变量
2、变量命名,首字符只能是字母,下划线,$美元符 三选一，余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写
驼峰命名
var FirstNameF ="hello"
S 字符串 I 整型 F 浮点型
注释
注释是不被解释器所执行的，浏览器是解释器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 变量先声明再赋值
var name;
name=12
console.log(name)
//变量声明并赋值
var age = 22;
//一行可以声明多个变量，并且可以是不同类型
var gender = "male",height=180;
var FirstNameS="hello";
</script>
</head>
<body>
<h1>welcome to JS!</h1>
</body>
</html>
使用let和 const
04 JS的基本数据类型
数字类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var num1 =3.14
var num2 =100
console.log(typeof num1,typeof num2)
</script>
</head>
<body>
</body>
</html>
字符串类型
字符串创建（两种方式）
变量="字符串"
字符串对象名称=new String(字符串)
var str1="hello world";
var str1=new String("hello word");
js中单双引号不区分
<script>
var s1="hello user1";
var s2='hello user2';
console.log(s1,s2)
</script>
.lenght属性
num2.length
<script>
var s1="hello user1";
var s2='hello user2';
console.log(s1,s2)
console.log(s2.length)
</script>
1 内置方法 toUpperCase toLowerCase
<script>
//内置方法
// 1) toUpperCase
console.log(s1.toUpperCase());
console.log(s1.toLowerCase());
</script>
2 slice 切片，顾头不顾尾
传的开头索引和结束索引
<script>
var s1="hello user1";
var s2='hello user2';
console.log(s1,s2)
console.log(s2.length)
//内置方法
// 1) toUpperCase
console.log(s1.toUpperCase());
console.log(s1.toLowerCase());
// 2) slice
var str="helloWorld"
var ret=str.slice(3,6);
console.log(ret)
</script>
3 split 和join
返回数组
<script>
// 3) split 正则分割，经常用于把字符串转换成数组
var str = "广东-深圳-南山";
var ret = str.split("-");
console.log(ret,typeof ret); // ['广东', '深圳', '南山'] 'object'
</script>
返回数组为，对象类型
<script>
//split 正则分割，经常用于把字符串转换成数组
var str = "广东-深圳-南山";
var ret = str.split("-");
console.log(ret,typeof ret); // ['广东', '深圳', '南山'] 'object'
ret2=ret.join(",")
console.log(ret2); //广东,深圳,南山
</script>
4 trim
<script>
// 4) trim
var password = " ge llo "
var ret=password.trim();
console.log(password.length) //12
console.log(ret.length) //6
</script>
5 substr 截断
位置0 长度3
<script>
// 5) substr
var str = "hello wold";
var ret = str.substr(0, 3);
console.log(ret); //hel
var s5 = "hello world";
var ret4 = s5.substr(3,4)
console.log(ret4); //lo w
</script>
6 indexof 查询索引
<script>
// 5) substr
var str = "hello wold";
var ret = str.substr(0, 3);
console.log(ret); //hel
var s5 = "hello world";
var ret4 = s5.substr(3,4)
console.log(ret4); //lo w
// 6) indexof 查询索引
var ret5 = s5.indexOf("e")
console.log(ret5)
var ret5 = s5.lastIndexOf("l")
console.log(ret5)
</script>
05 js的基本数据类型之bool
bool类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var ret=2>1
console.log(ret,typeof ret) //true 'boolean'
</script>
</head>
<body>
<h1>welcome to JS!</h1>
</body>
</html>
字符和数字比较
python中返回false，js中返回true
强类型和弱类型
仅从类型上判断 python是弱类型
是否有暗转换：js没有类型声明，又有暗转换 把2转换为字符串”2”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var ret=2>1
console.log(ret,typeof ret) //true 'boolean'
var ret2=2==1
console.log(ret2,typeof ret2) //false 'boolean'
var ret3=2=="2"
console.log(ret3,typeof ret3) //true 'boolean'
console.log(1+"2") //12
console.log(1-"2") //-1
</script>
</head>
<body>
<h1>welcome to JS!</h1>
</body>
</html>
转换为字符串 转换为1
使用===
<script>
var ret4 = 2 === "2"
console.log(ret4) //false
</script>
06JS的基本类型之undefined
空类型
<script>
// booleam: true false
// undefined: undefined
</script>
undefined
场景1
<script>
// booleam: true false
// undefined: undefined
var a;
console.log(a,typeof a) //undefined 'undefined'
</script>
场景2
函数中默认return返回undefined
<script>
function foo(){
}
var ret = foo()
console.log(ret)
</script>
07 js的类型转换
<script>
var num1="3.14"
var ret1=parseFloat(num1)
console.log(ret1,typeof ret1) //3.14 'number'
var num2="100件"
var ret2=parseInt(num2)
console.log(ret2,typeof ret2) //100 'number'
</script>
NaN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var num1="3.14"
var ret1=parseFloat(num1)
var num2="第100件"
var ret2 = parseInt(num2)
console.log(ret2,typeof ret2) //NaN 'number'
</script>
</head>
<body>
</body>
</html>
<script>
var num1="3.14"
var ret1=parseFloat(num1)
var num2="第100件"
var ret2=parseInt(num2)
console.log(ret2,typeof ret2) //NaN 'number'
//String(数据）
var box4=3.14;
var ret = box4.toString();
console.log(ret,typeof ret);
</script>
布尔型转换
字符串中 空字符串为false 其他为true
console.log(Boolean(""))
num类型 只有0为false 其他为true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log(Boolean(""));
console.log(Boolean(0));
console.log(Boolean("false"));
console.log(Boolean("0"));
console.log(Boolean(-1));
</script>
</head>
<body>
<h1>welcome to JS!</h1>
</body>
</html>
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log(Boolean(""),typeof Boolean(""))
console.log(Boolean(0))
console.log(Boolean("-1"))
console.log(Boolean("false"))
console.log(Boolean("0"))
</script>
</head>
<body>
</body>
</html>
08 运算符
算术运算
<script>
var x=10
x++ // x+=1 //x=x+1
console.log(x)
</script>
x++ 先赋值再计算
<script>
var x=10
var ret= x++ // x+=1 //x=x+1
console.log(x) //11
console.log(ret) //10
</script>
先把10赋给ret， ret是10
++x 先计算再赋值
<script>
var x=10
// var ret= x++ // x+=1 //x=x+1 //先赋值再计算
var ret= ++x // x+=1 //x=x+1 //先计算再赋值
console.log(x) //11
console.log(ret) //11
</script>
先计算 再赋给ret 11
比较运算
!== 不全等[不仅判断数值,还会判断类型是否一致]
=== 全等[不仅判断数值,还会判断类型是否一致]
&& 有假为假
|| 有真为真
2>1 && 2==”2”
<script>
//逻辑运算符
console.log(2>1&&2=="2") //true
</script>
<script>
//逻辑运算符
console.log(2>1&&2==="2") //false
console.log(2>1||2==="2") //true
</script>
条件运算符 三目运算符
<script>
console.log(Boolean(""));
//逻辑运算符
console.log(2>1&&2==="2") //false
console.log(2>1||2==="2") //true
//条件运算符[三目运算符]
// 条件?true:false
// 例如:
var age = 12;
var ret = age>=18?"成年":"未成年"; // 相当于 python中的"成年" if age >= 18 else "未成年"
console.log(ret);
</script>
<script>
// //条件运算符[三目运算符]
// // 条件?true:false
// // 例如:
// var age = 12;
// var ret = age>=18?"成年":"未成年"; // 相当于 python中的"成年" if age >= 18 else "未成年"
// console.log(ret);
var a = 100;
var b = 20;
console.log(a>b?a:b)
</script>
09 流程控制语句之分支语句
if语句
<script>
var age =20
if (age>18){
console.log("成年人观看")
}else{
console.log("未成年人观看")
}
</script>
<script>
var age =20
if (age>18){
console.log("成年人观看")
}else{
console.log("未成年人观看")
}
var score=100
if (score>100 && score<0) {
console.log("数字应该再0-100之间")
}else if (score>90) {
console.log("优秀")
}else if (score>80){
console.log("良好")
}else if(score>60){
console.log("及格")
}else{
console.log("不及格")
}
</script>
switch语句
<script>
var age =20
if (age>18){
console.log("成年人观看")
}else{
console.log("未成年人观看")
}
var score=100
if (score>100 && score<0) {
console.log("数字应该再0-100之间")
}else if (score>90) {
console.log("优秀")
}else if (score>80){
console.log("良好")
}else if(score>60){
console.log("及格")
}else{
console.log("不及格")
}
var week = 3
switch (week) {
case 0:console.log("星期日");break
case 1:console.log("星期一");break
case 2:console.log("星期二");break
case 3:console.log("星期三");break
case 4:console.log("星期四");break
case 5:console.log("星期五");break
case 6:console.log("星期六");break
}
</script>
值映射
不加break，会继续执行
<script>
var week = 3
switch (week) {
case 0:console.log("星期日");break
case 1:console.log("星期一");break
case 2:console.log("星期二");break
case 3:console.log("星期三");
case 4:console.log("星期四");break
case 5:console.log("星期五");break
case 6:console.log("星期六");break
default:console.log("非法输入");
}
</script>
什么时候用switch
1 简介
2 性能 查询性能好
3 值判断 值=
空间换时间，得建一个表
09 流程控制语句之循环语句
两大类循环：条件循环 遍历循环
条件循环，条件成立与否
遍历循环，有多少元素，遍历多少次
while循环
<script>
//条件循环 遍历循环
//while for
//无限循环
/* while (true) {
console.log("OK")
} */
count=0;
while(count<10){
console.log("OK")
count++
}
</script>
初始语句，条件判断，步进语句
<script>
count=0; //初始语句
while(count<10){ //条件判断
console.log("OK") //循环体
count++ //步进语句
}
</script>
问题代码
continue会导致一直执行不到count++
<script>
count=0; //初始语句
while(count<10){ //条件判断
if (count===8){
continue //结束当次循环
}
console.log("OK") //循环体
count++ //步进语句
}
</script>
步进语句放在前面
<script>
count = 0; //初始语句
while (count < 10) { //条件判断
count++ //步进语句
if (count === 8) {
continue //结束当次循环
}
console.log("OK") //循环体
}
</script>
三要素for循环
三要素for循环
<script>
// 三要素for循环
for (i=0;i<10;i++) {
if (i===8) {
continue
}
console.log(i)
}
// for (var i in 数据）{}
var arr = [111,222,333]
for (i=0;i<arr.length;i++){
console.log(arr[i])
}
</script>
用for in循环
<script>
//条件循环 遍历循环
var arr = [111,222,333]
for (var i in arr){
console.log(i,arr[i])
}
</script>
break
<script>
// 三要素for循环
for (i=0;i<10;i++){
if (i===8){
break
}
console.log(i)
}
</script>
作业 求100的阶乘和
练习：方法1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1-100
var sum=0;
for (var i=1;i<=10;i++) {
var product=1
for (var j=1;j<=i;j++){
product*=j
}
sum+=product
}
console.log(sum)
</script>
</head>
<body>
</body>
</html>
练习：方法2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1-100
var sum=0;
var product=1
for (var i=1;i<=100;i++) {
product*=i
sum+=product
}
console.log(sum)
</script>
</head>
<body>
</body>
</html>
下午10 数组的使用和内置方法
<script>
var arr=["yuan",23,true]
console.log(arr.length) //3
console.log(arr[1]) //23
console.log(arr[2]) //true
console.log(arr.slice(0,2)) // ['yuan',23]
for (var i in arr){
console.log(i,arr[i]) // 0 yuan 1 23 2 true
}
</script>
数组的内置方法
append
增删改查
1 push pop
<script>
//数组的内置方法
// 1)psuh pop
var arr01 = [10,11,12,13]
arr01.push(14)
console.log(arr01) //[10, 11, 12, 13, 14]
arr01.pop()
console.log(arr01)
</script>
2 shift unshift
转移
<script>
//数组的内置方法
// 2) shift unshift
arr01.unshift(9)
console.log(arr01)
arr01.shift()
console.log(arr01)
</script>
3 splice 针对任意位置删除、添加
从索引2位置开始删，删2个元素
<script>
// (3) splice:针对任意位置删除、添加操作
var arr02 = [10,11,12,13,14,15]
arr02.splice(2,2)
console.log(arr02)
</script>
<script>
// (3) splice:针对任意位置删除、添加操作
var arr02 = [10,11,12,13,14,15]
// arr02.splice(2,2)
// console.log(arr02) // [10, 11, 14, 15]
arr02.splice(2,0,100,200)
console.log(arr02) //[10, 11, 100, 200, 12, 13, 14, 15]
</script>
示例2 添加
<script>
// (3) splice:针对任意位置删除、添加操作
var arr02 = [10,11,12,13,14,15]
arr02.splice(2,0,[100,200])
console.log(arr02) //
</script>
示例3 替换
<script>
// (3) splice:针对任意位置删除、添加操作
var arr02 = [10,11,12,13,14,15]
// arr02.splice(2,2)
// console.log(arr02) // [10, 11, 14, 15]
arr02.splice(2,2,120,130)
console.log(arr02) //[10, 11, 120, 130, 14, 15]
</script>
4 sort
排序
<script>
var arr = [3,4,1,2,5,10]
console.log(arr);
arr.sort();
//这是字符的排序，部署数值的排序
console.log(arr); //[1, 10, 2, 3, 4, 5]
</script>
sort配合函数 按从小到大排序
<script>
function foo(x,y) {
return x-y
}
var arr03=[3,4,1,2,5,10,100];
arr03.sort(foo)
console.log(arr03) //[1, 2, 3, 4, 5, 10, 100]
</script>
示例2
<script>
var arr04=[3,4,1,2,5,10,100]
arr04.sort(function (a,b){
return a-b
})
console.log(arr04) //[1, 2, 3, 4, 5, 10, 100]
</script>
concat
<script>
// concat()把2个或者多个数组合并
var arr1=[1,2,3];
var arr2=[4,5,7];
var ret=arr1.concat(arr2);
console.log(ret); //[1, 2, 3, 4, 5, 7]
</script>
go语言合并切片
package main
import "fmt"
func main() {
l:=[]int{1,2,3}
l2:=[]int{4,5,6}
fmt.Println(append(l, l2...)) //[1 2 3 4 5 6]
}
l = [1,2,3]
l2 = [4,5,6]
print(l+l2)
l.append(l2)
print(l)
打印结果
C:\Users\zhu\Urils\urils>python test.py
[1, 2, 3, 4, 5, 6]
[1, 2, 3, [4, 5, 6]]
示例
<script>
// // concat()把2个或者多个数组合并
var arr1=[1,2,3];
var arr2=[4,5,6];
var ret=arr1.concat(arr2)
console.log(arr1); //[1, 2, 3]
console.log(ret); //[1, 2, 3, 4, 5, 6]
</script>
下午11 object对象
类的成员变量
var obj=new
<script>
// var attr="age"
// console.log(":::",obj2[attr])
//方式1
var obj=new Object()
obj.name = "user"
obj.age = 23
console.log(obj.name)
console.log(obj.age)
</script>
{name: 'user2', age: '22'}
<script>
var obj2={
name:"user01",
"age":"22"
}
obj2.name="xxx"
console.log(obj2) //{name: 'xxx', age: '22'}
console.log(obj2.name) //xxx
console.log(obj2["name"]) //xxx
console.log(obj2.age) //22
console.log(obj2["age"]) //22
</script>
<script>
var obj2={
name:"user01",
"age":"22"
}
obj2.name="xxx"
console.log(obj2) //{name: 'xxx', age: '22'}
var attr = "name"
console.log(obj2[attr]) //xxx
</script>
拿不到 length
<script>
var obj2={
name:"user01",
"age":"22"
}
obj2.name="xxx"
console.log(obj2) //{name: 'xxx', age: '22'}
for (var k in obj2){
console.log(k,obj2[k])
}
// 拿不到lengh
console.log(obj2.lengh) //undefined
</script>
json
JSON(JavaScript Object Notation, JS 对象表示法)
序列化
console> obj3 = {name:'xxx',age:'22'}
{name: 'xxx', age: '22'}
console> JSON.stringify(obj3)
'{"name":"xxx","age":"22"}'
6个数据类型
反序列化
console> s='{"name":"xxx","age":"22"}'
'{"name":"xxx","age":"22"}'
console> JSON.parse(s)
{name: 'xxx', age: '22'}
<script>
var obj2={
name:"user01",
"age":"22"
}
// 序列化方法：JSON.stringify()
var jsonData = JSON.stringify(obj2)
// 反序列化方法：JSON.parse(jsonData)
JSON.parse(jsonData)
</script>
s={name:'user',age:undefined}
{name: 'user', age: undefined}
JSON.stringify(s)
'{"name":"user"}'
下午12 日期
<script>
// 获取当前日志对象
var date = new Date()
console.log(date) //Tue Mar 29 2022 23:11:48 GMT+0800 (中国标准时间)
// 获取时间片
console.log(date.getFullYear()) //2022
console.log(date.getMonth()) //2 注意1月为0
console.log(date.getDay()) //2
console.log(date.getDate()) //29
console.log(date.toString()) //Tue Mar 29 2022 23:16:12 GMT+0800 (中国标准时间)
console.log(date.toLocaleDateString()) //2022/3/29
// 构建日期对象
var date2=new Date("2012/12/12")
console.log(date2.getFullYear()) //2012
console.log(date2.getMonth()) //11
console.log(date2.getDate()) //12
</script>
获取当前日期的字符串
下午13 math
Math build-in对象 不是类型
ceil 向上取整
<script>
console.log(Math.abs(-100)) //100
console.log(Math.ceil(3.14)) //4
console.log(Math.floor(3.94)) //3
console.log(Math.round(3.94)) //4
console.log(Math.round(3.14)) //3
//随机
//0-1随机浮点数
console.log(Math.random()) //0.11625013339293555
console.log(Math.random()*100) //65.98690327610836
</script>
下午14 Function对象
声明调用
预加载
函数参数
位置参数
默认参数
arguments对象
匿名函数
注意分号隔开
函数的作用域
清理掉了
重新赋值
test()
后面打印 10
下午15 BOM对象
window对象
alert
confirm
配合用户行为做操作
prompt
定时器方法
每隔1秒，执行一次函数
先间隔1秒钟，才第一次执行。
clearInterval取消定时器
只执行1次
clearTimeout()
下午16 计时器案例
事件控制代码的行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
</script>
</head>
<body>
<input type="text" value="user">
<input type="button" value="start" onclick="alert(123)">
</body>
</html>
绑定时间
1、查找input标签
2、修改值
查找标签
querySelector
dom对象
点击start
示例2
自动更新时间
setInterval 停1秒才开始执行，先调用一次show()函数
end按钮
修改
局部变量，修改为全局的
多次点击start 再点end结束不掉问题？
增加if 判断 id不等于undefined
再修改ID为undefined
增加css
下午17 事件绑定
绑定事件
onclick=”调用函数” 不推荐
注意 doms 是数组对象
如果多个，返回第一个查到的
querySelectorAll查询所有
修改
点击没有反应？
放在后面
this关键字
在绑定事件中，this表示当前触发事件的标签
这个this，是当前正在点的标签
当前触发事件的标签
点222 this指的是222的标签
下午 18 DOm操作
查询dom对象的文本
示例3 文本操作
css操作
通过触发事件，改变css颜色
希望通过事件完成
属性操作
设置属性
点击，添加进来一个属性
获取属性
使用 句点号赋值和 atrribuld比较
下午19 提交事件
鼠标悬浮上面 就弹窗
示例
对提交的内容做审核
拿到 。value
修改
返回false 不是返回undefined ，后边被拦截了，不会再执行了
修改2
下午 20 基于dom的table切换
查找标签 绑定事件 控制行为
table切换案例
基本的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="tab">
<div class="title">
<div class="item">商品介绍</div>
<div class="item">评价</div>
<div class="item">规格包装</div>
<div class="item">售后</div>
</div>
<div class="content">
<div class="item">商品介绍内容...</div>
<div class="item">评价介绍内容...</div>
<div class="item">规格包装介绍内容...</div>
<div class="item">售后介绍内容...</div>
</div>
</div>
</body>
</html>
css
1、绑定click事件
1点击标签 激活样式
取消掉active
2 显示对应内容
拿到索引
修改显示
再添加显示前，隐藏所有
