js笔记+案例

最新推荐文章于 2023-04-12 11:11:45 发布

xiaoxinscholar

最新推荐文章于 2023-04-12 11:11:45 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/xiaoxinscholar/article/details/106995126

版权

Java Script

一、JavaScript简介

1.什么是JavaScript

简称JS，由网景公司开发的客户端脚本语言，不需要编译的，可以直接执行

web的前端的三个层次：

结构层HTML，定义页面的结构
样式层css，定义页面的样式
行为层JavaScript，用来实现交互，提升用户体验

2.JavaScript的作用

在客户端浏览器上动态的操作页面
可以在客户端的浏览器上做数据的校验
在客户端上发送异步请求

二、JavaScript的引用方式

1.内联方式

在页面中使用script标签，在script这个标签中编写js代码，可以出现任何位置，但一般放在head中

<script>
      alert("hello javascript!")
 </script>

2.行内方式

在普通标签中编写js代码，一般需要结合事件的属性，如onclick、onmouseover等

提示：什么是事件属性？—面向对象

eg：对象----外观修饰—css实现

行为、事件—某一事件发生的对象不一样，所引发的反应也不相同–对象的多态性

<!--2.行内模式-->
<input type="button" value="点我" onclick=alert("我晕了被点了")>
<!--<a href="" onclick=alert("超链接被触发")>超链接</a>-->
<a href="javascript:alert('超链接被触发')">超链接</a>

#####3.外部方式

使用单独的.js文件定义，然后在页面中使用script标签引入外部脚本文件

<!--3.外部方式-->
 <script type="text/javascript" src="javascript/hello.js"></script>

注意：如果某个script标签用于引入外部的js文件，则该script标签中不能写入alert标签

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:100px;
            height:100px;
            background:#ccc;
        }
    </style>
    <!--1.内联方式-->
    <script>
        // alert("hello javascript!")
    </script>
    <!--3.外部方式-->
    <script type="text/javascript" src="javascript/hello.js"></script>
</head>
<body>
    第一个JavaScript程序
    <hr>
    <!--2.行内模式-->
    <input type="button" value="点我" onclick=alert("我晕了被点了")>
    <!--<a href="" onclick=alert("超链接被触发")>超链接</a>-->
    <a href="javascript:alert('超链接被触发')">超链接</a>

     <div onmouseover="alert('走开')">把鼠标移上来</div>
</body>
</html>

三、JavaScript基本语法

1.变量

用来存放常量的量，常量就是固定值（常数项）

js是一门弱类型语言，声明变量时使用var关键字，不需要指定变量的类型

语法：var变量名= 常量或表达式

在ECMAScript 6规范中新增let关键字，也用于声明变量

正常情况下，可以使用let声明的变量支持块级作用域，而是用var声明的变量不支持块级作用域

注：在idea中配置es版本 setting–>language & frameworks–>javascript–>javascript language version

变量的命名规则：

由字母、数字、下划线、汉字组成
由字母、下划线开头
不能喝系统关键字重名
区分大小写

了解：变量名的命名规则：驼峰命名法

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        <!--变量-->
        var name;//定义了一变量name
        name = "tom";//将字符串常量tom赋值给变量name
        name="alice";
        alert(name)

        var age = 19;//定义一个变量age，并将整数19常量赋值给age
        //age是一个整型变量age存放的是整数，所以age是整型变量
        alert(age)

        var sex = "male";//不建议使用sex = "male"
        alert(sex)
        {
            var x = 8;
            alert(x)
            // let y = 7;
            // alert(y)
        }
        姓名 = "tom";
        alert(姓名)
        age = 18;
        Age = 19;
        alert(Age)
    </script>
</head>
<body>
</body>
</html>

2.输入和输出

输出：

alert()：会弹出警告框
console.log()：输出到浏览器的控制台
document()：输出到页面

输入：

prompt()：弹出一个输入框，获取用户输入的数据

使用typeof变量，来判断变量的类型

使用number(变量)，将字符串转换为数值

3.转义字符

常用的转义符：

\n 换行
\t 向右缩进一个制表位
\" 双引号
\'单引号
\ 斜杠

4.注释

单行注释：\

多行注释：/* 注释内容 */

5.编码规范

代码是区分大小写的

每个js代码，都要以分号结尾，代码要注意缩进

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        <!--alert()-->
        alert("嘿嘿");
        console.log("哈哈");
        document.write("嘻嘻");
    //    输入
    //     var name=prompt("请你输入你的姓名");
    //     console.log(name);
    //     var age=prompt("请你输入你的年龄")
    //     console.log(age,typeof age)
    //     age = Number(age)
    //     console.log(age,typeof age)
    //     console.log(age+2)
        //转义字符
        console.log("hello \n world")//斜杠n
       /*
       这是一个多行注释哦
       */
    </script>
</head>
<body>
</body>
</html>

四、核心语法

1.数据类型

常量：具体的值，不变的量----常数项

变量：变化的值，存储常量的量

基础数据类型：

string 字符串
number 数值

若返回NaN,则表示非数字类型，其自身是number类型，表示数值的不正常状态

boolean 布尔值
null 空类型
undefined 未定义类型

类型转换：

转换number

使用Number()、parselnt()、perseFloat()

转换为字符串

拼接字符串

转换为布尔类型boolean
使用Boolean()
注意：0、空字符串、null、undefined、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 = 165;
        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);
        // console.log(typeof date);
        // console.log(typeof arr);//如果数据时null，date array等，返回object
        // console.log(typeof sex);
        /*
        类型转换
         */
        var a = '12';
         console.log(a,typeof a);
         //方式一、使用number
        a = Number(a);
        console.log(a,typeof a);
        a = Number('12abc');
        console.log(a,typeof a);
        //2.方式二：parseint（）
        // a = parseInt('12');
        // a = parseInt('12.5');
        // a = parseInt('12abc');
        // a = parseInt('abc123');
        //方式三、parsefloat()
        // a = parseFloat('12');
        // a = parseFloat('12.5');
        // a = parseFloat('12abc');
        // a = parseFloat('abc12');
        //将数值转换为字符串
        // var a = 12;
        // a = a + '';
        // console.log(a,typeof a);
        //转换为布尔值,将布尔类型的值转换为数字
        var a;
        a = Number(true);
        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');
        var name;
        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>
    <script>
        //算术运算符
        // var a = 5;
        // var b = 3;
        // var c = '2';
        // var d = true;//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-c);//当变量c为数字字符时，会自动将数字字符转换为数值
        // console.log(a+d);
        // var a = 1;
        // console.log(a++);//先使用a中的值，在让a自加，表达式会返回变化前a的值，然后自加
        // console.log(a);
        // console.log(++a);//先自加，然后返回值
        // console.log(a);
        // console.log(a--);//输出原来的值后，在进行自减
        // console.log(a);
        // console.log(--a);//先进行自减，然后输出值
        // console.log(a);
        // var a = 1;
        // var b = 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);//全等于，既要判断内容，也要判断数据类型
        // console.log(a+b);
        // console.log(a==b);
        //赋值运算符
        // var a = 8;
        // 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);// || 或运算符，两边为假才是假
        a = 20;
        b = 5;
        // console.log(a && b);//0----false
        // console.log(a || b);
        //条件运算符
        console.log(a>b?a+b:a-b);
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //使用math对象进行数学运算，用法：math+方法名（参数）
        /*
        1.绝对值
        2.幂运算
        3.四舍五入，在js中不可以指定四舍五入到第几位
        4.向上取整，向下取整
        5.生成一个[0.0,1]之间的随机浮点数，以当前系统时间为随机数种子
        6.求最大值、最小值
        7.求圆周率的值
         */
        console.log(Math.abs(-5));
        console.log(Math.abs(2.4));
        console.log(Math.round(123.456));
        console.log(Math.ceil(3.5));//取最小整数
        console.log(Math.floor(3.5));//取最大整数
        console.log(Math.random());
        console.log(Math.max(23,1,45,98));
        console.log(Math.min(23,1,45,98));
        console.log(Math.PI);
    </script>
</head>
<body>
</body>
</html>

#####3.选择结构

if…else…、switch

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var age = 19;
        if(age>=60){
            console.log('老年');
        }
        else if(age >=30){
            console.log('中年');
        }
        else if(age >=10){
            console.log('童年');
        }
        else if(age >=3){
            console.log('幼年');
        }
        var day = '星期一';
        switch(day){
            case '星期一':
                console.log('吃包子');
                break;
            case '星期二':
                console.log('吃油条');
                break;
            case '星期三':
                console.log('吃面条');
                break;
            case '星期四':
            case '星期五':
                console.log('吃油饼');
                break;
            case '星期六':
                console.log('喝豆浆');
                break;
            default:
                console.log('今天不吃了！');
        }
    </script>
</head>
<body>
</body>
</html>

#####4.循环结构

while、do…while、for、for…in

break，continue

break：退出整个循环

continue：结束本次循环，返回到条件判断处继续进行下一次执行循环的条件判断

 var str = 'welcome';//可以将字符串看做是由多个字符组成的集合
 for(var index in str){
      //  console.log(index);//输出了str的索引
      console.log(str[index])
  }

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var i = 1;
        var sum = 0;
        while(i<=100){
            sum += i;
            i++;
        }
        console.log(sum);

        var sum2 = 0;
        do{
            sum2 += i;
            i++;
        }while(i<=100);
        console.log(sum2);

        // var b = 0;
        var sum = 0;
        for(var i = 1;i<=100;i++){
            if(i%7!=0)
                sum += i;
            console.log(sum);
        }
        // var d = 0;
        var str = 'welcome';
        for(var index in str){
            console.log(str[index])
        }
        s = 'abc';
        document.write(s[0]);
        document.write(s[1]);
        document.write(s[2]);

        for(var i=1;i<=10;i++) {
            if (i % 2 == 0)
                continue;
            console.log(i);
        }
    </script>
</head>
<body>
</body>
</html>

5、数组

5.1.定义方式

语法：

var arr = new Array();
var arr = new Array(值1,值2,……);
var arr = [值1,值2……];

注意：

数组的长度会自动扩展
数组中元素的默认值为undefined
使用length属性来获取数组的长度

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        <!--1.定义数组-->
        // var arr = new Array();
        // arr[0]=12;
        // arr[5]=14;
        // console.log(arr.length);
        // console.log(arr[5]);
        // console.log(arr[0]);
        //
        // var arr = new Array('tom','hello','alice');
        // console.log(arr);
        // console.log(arr[2]);
        // console.log(arr[arr.length-1]);

        // var arr = ['tom','jack','alice']
        // console.log(arr[arr.length-1]);
        // console.log(arr[0]);

        //将1-100之间所有能被3整除的数字放到数组number中，输出这个数组并统计个数
        // var num = [];
        // for(var i = 1;i<=100;i++)
        //     if(i%3==0){
        //         num[num.length]=i;//每当向数组中添加元素时，length属性值都会改变
        //         i++;
        //     }
        //     // console.log(num.length);
        // console.log(num);

        var arr = ['tom','alice','jack','ablin','jack'];
        console.log(arr);//未排序
        // 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	将数组中的元素使用指定的分隔符连成字符串，默认使用逗号隔开
indexOf()	返回指定元素在数组中出现的位置
slice(begin,end)	截取数组中索引从begin到end之间的元素，左闭右开，如果省略第二个参数，则表示截取到末尾
toString	将数组转化为字符串

5.3二维数组

二维数组可以看做是一个特殊一维数组，即一维数组中的每个元素又是一个一维数组

var arr = new Array();//定义了一个具有m行个元素的特殊一维数组
arr[0] = new Array();//第0行有n个元素
arr[1] = new Array();//第一行有n个元素
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 Array();
        // arr[0] = new Array();
        // arr[1] = new Array();
        // arr[0][0] = 12;
        // arr[0][1] = 15;
        // arr[1][0] = 18;
        // console.log(arr);

        var arr = [
                [12,45,68],
                [48,49,56],
                [58,48,19]
            ];
        // console.log(arr[0][2]);
        //遍历元素
        for(var i = 0;i<arr.length;i++){
            //循环输出每行的3个元素
            for(var j = 0;j<arr[i].length;j++)
                document.write(arr[i][j]+'&nbsp;&nbsp;');
            document.write('<br>');
        }
    </script>
</head>
<body>
</body>
</html>

6.函数

6.1 自定义函数

语法：

function 函数名(参数1,参数2,……)
{
    函数体;
}

注意：

定义函数时不需要指定参数的类型
实参个数和形参的个数可以不同，未指定实际参数时形参的默认值为undefined
不需要指定返回值的类型，如果有返回值，直接使用return语句返回即可
如果函数中没有return语句返回值，则默认返回undefined

变量的作用域：

局部作用域

在函数中声明的变量，只能在该函数内访问，函数运行结束变量自动销毁
全局作用域

在函数外声明的变量，在任何位置都可以访问
块级作用域

使用let关键字声明的变量，只能在声明它的代码块中访问

6.2回调函数

不立即执行的函数调用，满足一定条件时会执行或者由别的代码调用执行，称为回调函数callback

调用时只写函数名，没有小括号与参数

应用场景：

作为事件绑定的函数
作为另一个函数的参数

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1.定义函数
        // function show(){
        //     console.log('哈哈');
        // }
        // function calc(num1,num2,num3)//形式参数
        // {
        //     // console.log(num1,num2,num3)
        //     var sum = num1 + num2 + num3;
        //     // console.log(sum);
        //     // return sum;
        //  };
        //2.调用函数 有2个功能1.返回值 2.执行函数为目的的实现某一具体功能
        // show();
        // var result = calc(12,6,3);//实际参数
        // console.log(result);
        //3.变量的作用域
        // var c = 6;//全局变量
        // function fn() {
        //     var a = 5;//局部变量
        //     console.log(a);
        //     console.log(c);
        // }//定义函数
        // fn();//调用函数
        //
        // {
        //     var d = 8;//全局变量
        //     let x = 4;
        //     console.log(x);
        //
        // }
        // console.log(d);
        //
        // console.log(c);
        function fn() {
            if(true){
                var a = 5;
                var c = 5;
                console.log(a);
            }
            console.log(a);
        }
       fn();

    </script>
</head>
<body>

</body>
</html>

6.3匿名函数

没有名字的函数，称为匿名函数，一般用于回调

应用场景：

用函数的回调

  window.onclick = function () {
     console.log('1111');
  };

用于一次性执行的函数，会自动执行，

(function () {
    console.log(333);
})();//定义插件时使用

6.4箭头函数

ES6中允许使用箭头=>来表示函数，也叫作lambda表达式，是一种特殊的匿名函数

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1() {
            console.log('111');
        }
        // f1();
        //当我们单击窗口时执行f1
        // window.onclick = f1;
        /*
        函数本身就是一种数据类型
        数据类型：string，number，boolean,null,undefined,function
         */
        // console.log(typeof  f1);
        // var a = f1;
        // console.log(typeof a);
        // a();
        //将一个函数作为另一个函数的参数
        function f2(x,y)
        {
            console.log(x);
            // console.log(y);
            y();//这样就调用了f1函数
        }
        f2(5,f1);//当f1函数作为实际参数时，f1并没有执行，只是将f1函数体中的代码打印输出
        /*
        示例
         */
        var arr = [12,4,23,6,26,86];
        /*
        定义一个比较器
        升序，如果第一个参数大于第二个参数，则返回正数
              如果第一个参数小于第二个参数，则返回负数
              如果第一个参数等于第二个参数，则返回0
         */
        function compareFn(a,b)
        {
            return b-a;
            if(a>b)
            return 1;
        else if(a<b)
            return -1;
        else
            return 0;
        }
        console.log(arr);
        arr.sort(compareFn);
        console.log(arr);
        for(var index = 0;index<arr.length;index++)
            console.log(index,arr[index]);
            function show(value,index)
            {
                console.log(index,value);
                console.log(value);
            }
        arr.forEach(show);
    </script>
</head>
<body>
</body>
</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('1111');
        };
        function f1() {
            console.log(222);
        }
        // var a = f1;
        var a = function () {
            console.log(2222);
        }
        var arr = [12,24,236,2,86];
        // function show(value,index) {
        //     console.log(index,value);
        // }
        // arr.forEach(show);
        arr.forEach(function (value,index)
        {
            console.log(index,value);
        });
        // function fn() {
        //     console.log(333);
        // }
        // fn();
        (function () {
            console.log(333);
        })();
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        箭头函数的语法：
        参数 => 返回值

         */
        // var a = function (x) {
        //     return x * 2;
        // }
        // console.log(a(3));
        var a = x => x*2;//语法更加简洁
        // console.log(a(3));
        //示例2,如果箭头函数没有参数，或者有2个以上的参数，必须使用小括号表示参数部分
        var a = function (x,y) {
            return 5;
        }
        var a =(x,y) => 5;
        console.log(a());
        //示例3
        var a = function (x,y) {
            var sum = x + y;
            return sum;

        }
        var a = (x,y) => {
            var sum = x+y;
            return sum;
        }
        //  var a = function (x) {
        //      console.log(x);
        //  }
        var a = x => console.log(x);
         a(9);
        // console.log(a(9));

         //应用场景
        var arr = [12,24,236,2,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 to js';//基本数据类型
var str = new String('welcome');//引用数据类型String

使用length属性获取字符串的长度

1.2常用方法

方法名	说明
charAt()	返回在指定索引位置的字符，也可以使用`索引`的方式
index()	返回某个指定的字符串值在字符串中首次出现的值
lastIndexOf()	返回某个指定的字符串值在字符串中最后出现的位置
toUpperCase()	将字符串中的值都转换为大写字母
toLowerCase()	将字符串中的值都转换为小写字母
subString()	提取字符串中两个指定索引号之间的字符
replace()	将指定的字符串替换为新字符串
split()	将指定的字符串分隔字符串数组
trim()	去除字符串前后空格

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var str = '   welcome to js hello world   ';

        // console.log(str.charAt(0),str.charAt(9));
        //
        // console.log(str.indexOf('o'));
        // console.log(str.lastIndexOf('o'));
        //
        // console.log(str.toUpperCase());
        // console.log(str.toLowerCase());
        //
        // console.log(str.substring(1,4));//从左边开始，右边结束，不包含右边
        // console.log(str.substring(1));//从左边开始，取到末位
        //
        // str = str.replace('js','javascript');
        // console.log(str.replace('js','javascript'));
        console.log(str);
        console.log(str.length);
        str = str.trim();
        console.log(str.trim());
        // console.log(str.split(''));
        // console.log(str.split('',3));
        console.log(str.length);
        // var str = new String('welcome');
        // console.log(typeof str);
        // console.log(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(millSecond);//参数为当前时间与1970年1月1日0时0秒相差的秒数

2.2常用方法

方法名	说明
getFullyYear()	以四位数字返回年份
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相差的毫秒数

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,5,15,9,07,53);//月份的取值[0,11]
        // var date = new Date(123434253325);
        // console.log(typeof date);
        // console.log(date);
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();//返回当前的秒数
        console.log(year,month,day,hour,minute,second);
        //
        let millsecondes = date.getMilliseconds();//获得当前时间的毫秒数
        console.log(millsecondes);
        let day1 = date.getDay();//返回一周中的第几天
        let time = date.getTime();
        console.log(day1);
        console.log(time);
        console.log(year,month,day,hour,minute,second);
        var weekday = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var currentime = year + '年' + checkDate(month) + '月' + checkDate(day) + '日' + checkDate(hour) + ':' + checkDate(minute) + ':' + checkDate(second) +','+ checkDate(weekday[day1]);
        console.log(currentime);

        function checkDate(num) {
            if(num<10)
                return '0'+num;
            else
                return num;
        }

    </script>
</head>
<body>
</body>
</html>

3.JSON

3.1简介

JavaScript object Notation，一种轻量级的数据交换格式，用于表示js对象的一种方式，采用与编程语言无关的文本格式，易于阅读和编写，易于解析和生成

3.2基本用法

语法：

{"属性名":属性值,"属性名":属性值,……};

注意：

JSON结构是由一系列的键值对所组成的，称为JSON对象
属性名必须使用双撇号括起来

使用：

简单的JSON对象
复合属性，属性的值也是JSON的值
JSON对象的集合

3.3json转换

json转换为字符串

var person = {
    "name":"hector",
    "age":20,
    "height":180
};
var str = JSON.stringify

字符串转换为JSON

var str =  '{"name":"tom","age":20,"sex":"男"}';
var obj = JSON.parse(str);

var users = '[{"id":1,"username":"tom","password":"123"},                                 {"id":2,"username":"alice","password":"111"}]';
console.log(typeof users);
var objs = JSON.parse(users);

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义一个简单的json对象
        // var user = {
        //     "id":1000,
        //     "name":'tom',
        //     "age":20,
        //     "height":165,
        //     "address":{
        //         "province":"山西省",
        //         "city":"太原市",
        //         "district":"小店区",
        //     },
        //     "ismarried":true
        // };
        /*
        访问方式：对象名：属性名
         */
        // console.log(user.name);
        // console.log(user.age);
        // console.log(user.height);
        // console.log(user.address.city);
        //JSON对象的数组
        // var num = {12,3,46,56};
        // var users = [
        //      {"id":9527,"name":"tom","password":"123","status":1},
        //      {"id":9528,"name":"ton","password":"123","status":0},
        //      {"id":9529,"name":"alice","password":"123","status":0},
        //      {"id":9530,"name":"jack","password":"123","status":1}
        // ];
        // for(var i = 0;i<=users.length;i++){
        //     var u = users[i];
        //     console.log(u.name,u.password,u.status);
        // }
        // console.log(typeof user);
        // console.log(user);
        // var str = JSON.stringify(user);
        // console.log(typeof str);
        // console.log(str);
        var str = '{"name":"tom","age":20,"sex":"男"}';
        var obj = JSON.parse(str);
        // console.log(typeof str);
        // console.log(str);
        // console.log(typeof obj);
        // console.log(obj);
        var users = '[{"id":1,"username":"tom","password":"123"},{"id":2,"username":"alice","password":"111"}]';
            console.log(typeof users);
        var objs = JSON.parse(users);
        console.log(objs);
    </script>
</head>
<body>
</body>
</html>

4.对象类型

4.1对象简介

补充：

1.对象：客观存在的并且可以相互区别的事物。

2.描述一个对象：

属性(外观、长相)、方法（行为模式）、事件（单击，双击(多态性)）

3.对象有三个基本特征：封装**(体现了对象的隐蔽性)**、继承、多态

信息隐蔽是通过对象封装性来实现
类的继承性是类之间共享属性和操作的一种机制

对象类型可以理解为java中的引用数据类型

js是面向对象的语言，但并不是人们常说的纯粹的面向对象的语言，因为不支持某些特征

4.2 创建对象

三种方式：

使用object

//新创建的对象，并没有属性，也没有方法
var 对象名 = new object();
//为这个对象添加属性
对象名.属性名= 属性值；
//为对象添加方法
对象名.方法名 = function{
    方法体；
}
// 调用属性
对象名.属性名 或对象名['属性名']

使用构造函数，模拟类的定义，相当于自定义一个类型

function 构造函数名(形参1……){//为了区别于普通函数，构造函数名建议首字母大写
   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;
        //添加方法
        stu.study = function () {
            console.log('我叫'+stu.name+'正在学习');
        };
        stu.run=function () {
            console.log(stu.name+'正在参加马拉松');
        }
        //调用属性
        // console.log(stu.name,stu['age']);
        // stu.study();
        // stu.run();
        /*
        2.使用构造函数的方式
         */
        // var date = new Date(2020,5,20);
        // console.log(date,typeof date);
        function Student(name,age,sex) {
            // console.log(name,age,sex);
            this.name = name;
            this.age = age;
            this.sex=sex;
            this.show = function () {
                console.log(this.name+'正在学习');
            }
            this.study=function () {
                console.log("正在学习");
            }
        }
        Student('tom',20,'male')
        var student = new Student('tom',20,'male')
        console.log(student.name,student.age,student.sex);
        student.show();
        student.study();
        /*
        3.使用json对象
         */
        // var student ={
        //     "name":"alice",
        //     "age":20,
        //     "sex":"male",
        //     "study":function () {
        //         console.log(student.name+"正在学习...");
        //     }
        // }
        // console.log(student.name,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对象，树的顶层称为Document对象，表示整个文档

2.查询操作

即获取DOM对象

方法和属性	含义
document.getElementById(“ID值”)	根据ID属性来查询节点，返回匹配的第一个节点
document.getElementsByTagName(“name属性”)	根据name属性来查询，返回所有匹配的节点
document.getElementsByTagName(“标签名”)	根据标签名查询，返回所有匹配的节点集合
document.querySelector(“选择器”)	根据css选择器来查询，返回匹配的第一个节点
document.querySelectorAll(“选择器”)	根据css选择器来查询，返回的是所有匹配的节点
parentNode属性	查询当前节点的父节点
previousSibling属性	查询当前节点的上一个节点
nextSibling属性	查询当前节点的下一个属性
firstChild属性	查询当前节点的第一个节点
lastChild属性	查询当前节点的最后一个节点

3.访问操作

3.1 访问属性

即获取/设置DOM对象的属性

DOM对象的属性和HTML标签的属性几乎是一样的，一般情况下，DOM对象都会存在一个与对应HTML标签同名的属性

用法: DOM对象.属性

注：单击命令按钮就引发了命令按钮的单击事件onclick事件–>命令按钮的onclick事件被引发–>onclick属性所对应的函数或方法就会被执行

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html dom</title>
    <script>
        function query() {
            // console.log(111);
            /*
            1.根据ID属性获取，返回单个值(第一个)
             */
            // var obj = document.getElementById("mydiv");
            // console.log(typeof obj);
            // console.log(obj);
            /*
            2.根据name属性来获取，返回的是一个集合，即数组
             */
            // var objs = document.getElementsByTagName("hobby");
            // console.log(typeof objs);
            // console.log(objs);
            // for(var i in objs)
            //     console.log(objs[i]);
            /*
            3.根据标签名，返回集合
             */
            // var objs = document.getElementsByTagName("input");
            // for(var i in objs)
            //     console.log(objs[i]);
            /*
            4.根据css的选择器获取单个对象
             */
            // var obj = document.querySelector("#div2");
            // var obj = document.querySelector(".aaa");
            // var obj = document.querySelector("p.aaa")
            // console.log(typeof obj);
            // console.log(obj);
            /*
            5.根据css选择器来获取多个对象
             */
            // var objs = document.querySelectorAll(".aaa");
            // console.log(typeof objs);
            // console.log(objs);
            /*
            6.根据已有节点获取其他节点
             */
            var obj = document.getElementById("second");
            // console.log(typeof obj);
            // console.log(obj);
            // console.log(obj.parentNode);
            // console.log(obj.previousSibling);
            // console.log(obj.nextSibling);
            // console.log(obj.previousSibling.previousSibling);
            console.log(obj.parentNode.firstChild);
            console.log(obj.parentNode.lastChild);

        }
    </script>
</head>
<body>
    <input type="button" value="获取页面中的元素" onclick="query()">
    <div id="mydiv" class="aaa">hello</div>
    <!--<div id="mydiv">world</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="dadoudou" name=""hobby>打豆豆

    <ul><li>tom</li>
        <li id="second">jack</li>
        <li>alice</li>
        <li>mike</li> </ul>
</body>
</html>

3.2 内容访问

即获取/设置标签中的内容

两种方式：

使用innerHTML

用法：DOM对象.innerHTML即内容解析为HTML
使用innerText

用法：DOM对象.innerText即将内容作为纯文本

3.3 访问css

即获取/设置css样式

两种方式：

style属性

用法：DOM对象.style.样式属性
className属性

用法：DOM对象.className

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hello{
            width:500px;
            height:300px;
            background:yellow;
            font-size: 50px;
        }
    </style>
    <script>
        function getProperty() {
            // console.log(111);
            //获取属性的值
            // let obj = document.getElementById("baidu");
            // console.log(typeof obj,obj);
            // console.log(obj.href);//obj是一个对象
            // console.log(obj.target);
            // let obj = document.getElementById("username");
            // console.log(obj.value);
            // console.log(obj.checked);//返回值true或者false

            //设置属性的值
            // var obj = document.getElementById("baidu");
            // obj.href="https://www.bilibili.com/";
            // // console.log(obj.href);
            // // console.log(obj.target);

            // let obj = document.getElementById("female");
            // obj.checked=true;

        }
        function getContent() {
            var obj = document.getElementById("mydiv");
            //获取内容
            // console.log(obj.innerHTML);
            // console.log(obj.innerText);
            //设置内容
            obj.innerHTML="<h2>你好，世界</h2>";
            // obj.innerText="<h2>你好，世界</h2>";

        }
        function getStyle() {
            let obj = document.getElementById("mydiv");
            console.log(obj.style);
            //获取css样式属性
            // console.log(obj.style.width);
            // console.log(obj.style.height);
            // console.log(obj.style.background);
            // console.log(obj.style.fontSize);
            //设置css样式
            // obj.style.width='300px';
            // obj.style.height='400px';
            // obj.style.background='blue';
            // obj.style.fontSize='20px';
            // //一般设置类选择器来设置样式
            obj.className="hello";
            console.log(obj.className)
        }
    </script>
</head>
<body>
    <input type="button" value="获取属性" onclick="getProperty()">
    <br>
    <input type="button" value="访问内容" onclick="getContent()">
    <br>
    <input type="button" value="css" onclick="getStyle()">
    <hr>
    <!--<a href="https://www.baidu.com" targrt="_blank" id="baidu">百度</a>-->
    <!--<iframe src="" frameborder="0"></iframe>-->
    <a href="https://www.baidu.com" targrt="_blank" id="baidu">点我</a>
    <br>
    用户名：<input type="text" name="username" id="username" value="">
    <br>
    性别：<input type="radio" name="sex" id="male" value="male" checked>男
          <input type="radio" name="sex" id="female" value="female" >女
    <hr>
    <div id="mydiv" class="hello">
        <p>
            hello world
        </p>
    </div>

    <!--style="width:100px;height:100px;background:red;font-size: 30px;border-top-right-radius:10px;"-->
</body>
</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="image/baidu.png";
                $("txtserch").name="wd";
                $("fireserch").action="https://www.baidu.com/s";
                $("btn").value="百度搜索";
            }else if($("sougou").checked){
                $('logo').src="image/sougou1.png";
                $("txtserch").name="query";
                $("fireserch").action="https://www.sogou.com/web";
                $("btn").value="搜狗搜索";
            }else{
                $('logo').src="image/360.png";
                $("txtserch").name="q";
                $("fireserch").action="https://www.so.com/s";
                $("btn").value="360搜索";
            }
        }
        function $(id) {
            return document.getElementById(id);//简化函数的获取

        }
    </script>
</head>
<body>
    <input type="radio" name="search" id="baidu" checked onclick="change()" ><lable for="baidu">百度</lable>
    <input type="radio" name="search" id="sougou" onclick="change()" ><lable for="sougou">搜狗</lable>
    <input type="radio" name="search" id="360" onclick="change()"><lable for="360">360</lable>
     <form action="https://www.baidu.com/s" id="fireserch">
         <img src="image/baidu.png" id="logo">
         <input type="text" name="wd" id="txtserch" placeholder="请输入查询关键字">
         <input type="submit" id="btn" value="百度搜索">
     </form>
</body>
</html>

4.添加操作

方法	含义
document.createElement(“标签名”)	创建一个元素节点，即标签
document.createTextNode(“文本内容”)	创建一个文本节点，即标签中的文本内容
node.appendChild(新的节点)	讲一个新的节点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 daAdd() {
            // 创建一个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","forth");
            // console.log(li.getAttribute("id"));
            // console.log(li);
            //4.将li添加到ul中，添加到节点中
            // ul.appendChild(li);
            var ul = document.getElementById("myul");
            // ul.appendChild(li);

            //5.将li添加到Jack前
            ul.insertBefore(li,document.getElementById("second"));


            //6.替换节点  用ul中的Alice替换jack
            ul.replaceChild(li,document.getElementById("second"));

        }
        function daDelete() {
            //删除当前节点
            // 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="daAdd()">
     <input type="button" value="删除" onclick="daDelete()">

     <ul id="myul">
         <li id="first">tom</li>
         <li id="second">jack</li>
         <li>mack</li>
     </ul>
</body>
</html>

七、事件处理

1.简介

事件：发生在HTML元素上的事情，可以是用户的行为，也可以是浏览器的行为

用户点击了某个HTML元素
用户将鼠标移动到某个HTML元素上
用户输入数据时光标的离开
页面加载完成

事件源：事件触发的源头，即出发事件的元素，如按钮、输入框、超链接等

事件对象：当一个事件发生时，这个事件相关的信息将会保存在一个对象中，称为event对象

事件监听：监听事件的发生，一般是绑定一个时间函数，当事件被触发后执行该事件函数，即回调函数

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1() {
            console.log(111);

            //当页面加载完成后执行
            // window.onload = function () {
            //     var btn2 = document.getElementById("btn2");//由于代码执行到此时，该部分代码先执行，而后面按钮02没有执行加载
            //     console.log(btn2);
            //     btn2.onclick = function () {
            //         console.log(222);
            //     };
            // document.getElementById("btn2").onclick = function () {
            //     console.log(222);
            // }
            // document.getElementById("btn2").onclick = f1;//调用时不加括号
            //  //定义新的f2函数
            // function f2() {
            //     document.getElementById("btn2");
            //     console.log(222);
            //     console.log(event);
            //     console.log(this);//this表示事件源
            //     console.log(event.srcElement);
            //     var hobbies = document.getElementsByName("hobby");
            //     console.log(hobbies);
            //     for (var i = 0; i < hobbies.length; i++) {
            //         // console.log(hobbies[i]);
            //         hobbies[i].onclick = function () {
            //             // console.log(hobbies[i].value);
            //             console.log(this.value);
            //         }
            //     }
            document.getElementById("btn2").onclick = function () {

                console.log(222);
                console.log(event);
                console.log(this);//this表示事件源
                console.log(event.srcElement);
            };

            //为复选框绑定事件
            var hobbies = document.getElementsByName("hobby");
            console.log(hobbies);
            for (var i = 0; i < hobbies.length; i++) {
                // console.log(hobbies[i]);
                hobbies[i].onclick = function () {
                    // console.log(hobbies[i].value);
                    console.log(this.value);
                        }
                    }
        };
    </script>
</head>
<body>
   <!--1.静态绑定-->
   <!--<input type="button" value="按钮01" onclick="alert('哈哈哈')">-->
   <input type="button" value="按钮01" onclick="f1()">
  <!--2.动态绑定-->
   <input type="button" value="按钮02" id="btn2" onclick="f2()">
   <br>
    爱好：
   <br>
   <input type="checkbox" name="hobby" value="eat">  吃饭
   <input type="checkbox" name="hobby" value="sleep">  睡觉
   <input type="checkbox" name="hobby" value="dadoudou">  打豆豆
</body>
</html>

2.绑定事件

两种方式：

静态绑定，通过标签的事件属性绑定

<input type="button" value="按钮" onclick="fn()">

案例：

<!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 td
        {
            border:1px solid #ccc;
            text-align: center;
        }
        #mytable tfoot tr
        {
            text-align: right;
        }
        #myform
        {
            line-height: 30px;
        }
        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.parentElement.parentNode.remove();
                };//这是添加的按钮可以具备删除行的功能

                tdDelete.appendChild(btnDelete);
                // console.log(tdName.innerText);
                // 将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();
                    //在tbody中找tr
                };
                //末行删除按钮
                $("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 () {
                        //统计已选中的数量
                        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.parentElement.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>女</td>
            <td>120</td>
            <td><input type="button" value="删除" id="delete"></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="chk"></td>
            <td>alice</td>
            <td>20</td>
            <td>女</td>
            <td>120</td>
            <td><input type="button" value="删除"></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="chk"></td>
            <td>wenxin</td>
            <td>20</td>
            <td>女</td>
            <td>120</td>
            <td><input type="button" value="删除"></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="chk"></td>
            <td>huhuu</td>
            <td>20</td>
            <td>女</td>
            <td>120</td>
            <td><input type="button" value="删除"></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" value="男" id="m">男
              <input type="radio" name="sex" value="女" id="f" checked>女 <br>
        电话：<input type="text" id="phone"><br>
        <hr>
        <input type="button" value="添   加" id="btnAdd">
        <input type="button" value="删   除">
    </form>
</div>
</body>
</html>

动态标签，通过js代码绑定事件

<input type="button" value="按钮" id="btn">
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function (){
        console.log(222);
    }
</script>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #username{
            outline: none;
        }
        .txtborder{
            border: 2px solid red;
        }
        #img{
            width:160px;
            height: 160px;
        }
    </style>
    <script>
        window.onload=function () {
            //鼠标事件
            // document.getElementById("btn").οnclick=function () {
            //     console.log(121);
            // }
            // document.getElementById("btn").οndblclick=function () {
            //     console.log(121);
            // }
            // document.getElementById("btn").οnmοuseοver=function () {
            //     console.log(121);
            // }
            // document.getElementById("btn").οnmοuseοut=function () {
            //     console.log(121);
            // }
            // document.getElementById("btn").οnmοusedοwn=function () {
            //     console.log(121);
            // }
            // document.getElementById("btn").οnmοuseup=function () {
            //     console.log(121);
            // }
            // document.getElementById("btn").οnmοusemοve=function () {
            //     console.log(121);
            // }
            //键盘事件
            // document.getElementById("username").οnkeydοwn=function () {
            //     console.log(111);
            // };
            // document.getElementById("username").οnkeyup=function () {
            //     console.log(222);
            // };
            // document.getElementById("username").οnkeypress=function (event) {
            //     console.log(222);
            //     console.log(event);
            // };
            //表单事件
            // document.getElementById("username").οnfοcus=function () {
            //     console.log(222);
            //     this.className="txtborder";
            // };
            // document.getElementById("username").οnblur=function () {
            //     console.log(222);
            //     this.className="txtborder";//失去焦点时取消classname属性
            // };
            document.getElementById("head").onchange=function () {
                document.getElementById("img").src=window.URL.createObjectURL(this.files[0]);
            };
            // document.getElementById("username").οnselect=function () {
            //
            // }
            document.getElementById("frm").onsubmit=function () {
                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">
    <br>
    <input type="submit" value="提  交">
</form>
</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，阻止表单提交

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: #f0ff03;
        }
        p{
            width:100px;
            height: 100px;
            background: aqua;
        }
    </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.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" target="_blank" id="mya">百度</a>
</body>
</html>

5.实例：下拉列表

5.1 Select和Option对象

Select对象：表示HTML表单当中一个下拉列表

属性：

length：设置或者返回下拉列表中选项的数量
selecttedindex：设置或返回下拉列表中被选项中的索引
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 drgree = document.getElementById("degree");
            // console.log(degree.length);//返回选项的个数
            // console.log(degree.selectedIndex);
            // console.log(degree.value);
            var opts = degree.options;
            // console.log(opts);
            // console.log(opts[degree.selectedIndex]);

            // var opt = opts[degree.selectedIndex];
            // console.log(opt,opt.value);

            //修改opts数组中的内容,下拉列表中的值也会改变
            // var opt = opts[degree.selectedIndex];
            // console.log(opt.text,opt.value);

            // opts[1].text="中专";
            // opts[1].value="zhongzhuan";

            //向下拉列表中追加一条信息
            // opts[opts.length].text="博士";
            // opts[opts.length].value="boshi";
            // var option = document.createElement("option");
            // option.innerText="博士";
            // option.value="boshi";
            // degree.appendChild(option);

            // opts[opts.length]=new Option("博士","boshi");

            // var option=new Option("博士","boshi");
            // degree.add(option);

            //在高中前插入一个中专
            var option = new Option("中专","zhongzhuan");
            degree.add(option,document.getElementsByTagName("option")[3]);
        };
        window.onload=function () {
            document.getElementById("degree").onchange=function () {
                // console.log(this.option[this.selectedIndex].value);
                console.log(this.value);
            };
        }
    </script>
</head>
<body>
   <input type="button" value="操作下拉列表" onclick="getDegree()">
   <hr>
   学历：
   <select name="" id="degree">
       <option value="0">---请选择学历---</option>
       <option value="xiaoxue">小学</option>
       <option value="chuzhong">初中</option>
       <option value="gaozhong">高中</option>
       <option value="daxue">大学</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:1005,
                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>
   省份：
   <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-j5VGCPww-1593314233192)(D:\静态网页制作\笔记\笔记以及案例\4.png)]

2.window对象

常用属性：

（window.）document、location、history……都是window子级对象

常用方法：

方法名	含义
alert(text)	显示一个提示信息和确定按钮的警告框
prompt(text)	显示一个带有提示信息、文本输入框、确定和取消按钮的输入框，返回值为输入的数据
confirm(text)	显示一个带有提示信息、确定和取消按钮的确认框，确定时返回true，取消时返回false
open(url,name,options)	打开具有指定名称的新窗口，并加载给定url所指定的文档
setTimeout(fn,delay)	是指一次性计时器，在指定的毫秒值后执行某个函数
setInterval(fn,delay)	设置周期性计时器，周期性循环执行某个函数
clearTimeout(timer)	清除一次性计时器
clearInterval(timer)	清除周期性计时器

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // document.getElementById("")
        // window.history()
        // window.location
        /*
        *  window 的常用方法
        */
        //1.alert
        // window.alert(111);
        //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=200px,height=200px,resizable=no");
        }
        //5.setTimeout
        var timer_one;
        function f2() {
            timer_one = setTimeout(function () {
                console.log(111);
            },3000);//单位毫秒
        }
        // function show() {
        //     console.log(111);
        // }
        //6.setinterval
        var timer_zq;
        function f3() {
            timer_zq = setInterval(function () {
                console.log(222);
            },2000);
        }
        //7.clearTimeout
        function f4() {
            clearTimeout(timer_one);
            // console.log(timer);
        }
        //8.clearInterval
        function f5() {
            clearInterval(timer_zq);
            // console.log(timers);
        }
        //周期性计时器使用一次性计时器实现
        // function f2() {
        //     setTimeout(show,1000);//单位毫秒
        // }
        // function show() {
        //     console.log(111);
        //     setTimeout(show,1000);
        // }
        //window的常用事件
        // window.onload
        window.onscroll=function () {
            console.log(222);
        }
        window.onclick=function () {
            console.log(333);
        }
        window.onload=function () {
            console.log(444);
        }
        //一个对象可以绑定多个事件，但是一个事件不能绑定多次
        // window.οnlοad=function () {
        //     console.log(555);
        // }
    </script>
</head>
<body>
    <input type="button" value="打开一个新窗口" onclick="f1()"><br>
    <input type="button" value="一次性计时器" onclick="f2()"> <br>
    <input type="button" value="周期性计时器" onclick="f3()"> <br>
    <input type="button" value="关闭一次性计时器" onclick="f4()"> <br>
    <input type="button" value="关闭周期性计时器" onclick="f5()"> <br>
    <hr>
    <p style="backgroud:#ccc;height: 2000px">
        hello world
    </p>
</body>
</html>

常用事件：

事件名	描述
onload	页面加载完成时
onscroll	窗口的滚动条滑动时
onclick	鼠标单击时

注意：由于window对象是BOM结构的顶层对象，所以在调用window的属性和方法时可以省略window

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);//获取location的href属性
            // location.href="https://www.baidu.com";
            location.reload();
        }
        function f2() {
            history.back();
        }
        function f3() {
            history.forward();
        }
    </script>
</head>
<body>
    <input type="button" value="操作location" onclick="f1()"><br>
    <input type="button" value="后退" onclick="f2()"><br>
    <input type="button" value="前进" onclick="f3()"><br>

</body>
</html>

小练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var timer;
        var l = 0,r = 0;//全局变量可以保留上次调用结束时的值
        function doStart() {
            $("start").disabled=true;
            $("stop").disabled=false;
            // var l = 0,r = 0;
            timer = setInterval(function () {
                r++;
                if(r>9){
                    r=0;
                    l++;
                };
                if(l>9){
                    r=0;
                    l=0;
                }
                $("imgr").src="image/"+ r +".bmp";
                $("imgl").src="image/"+ l +".bmp";
            },900)
        };
        function doStop() {
            $("stop").disabled=true;
            $("start").disabled=false;
            clearInterval(timer);
        };
        function $(id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
<table>
    <tr>
        <td><img src="image/0.bmp" id="imgl"></td>
        <td><img src="image/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()" disable></td>
    </tr>
</table>
</body>
</html>

九、数据校验

1.正则表达式

1.1简介

正则表达式是一门独立的语言，有自己的特定语法，用于检测指定字符串是否符合特定的规则

正则表达式就是用来定义规则的，称为Regular Expresstion

在JavaScript中提供了RegExp对象，表示正则表达式

1.2 定义方式

创新正则表达式对象，两种方式：

使用字变量

var reg = /pattern/attribute;

使用构造函数

var reg = new RegExp(pattern,attribute);

说明：

pattern：匹配模式，用于指定匹配规则，由元字符、量词、特殊符号组成
attribute：匹配的特征，取值：i忽略大小写、g全局匹配、m多行匹配

1.3 匹配规则

元字符：具有特殊含义的字符

符号	描述
\s	匹配任何的空白字符
\S	任何非空白字符
\d	匹配一个数字字符，等价于[0-9]
\D	除了数字外的任何字符
\w	匹配一个数字、下划线或字母字符
\W	任何非单字字符，等价于匹配非数字、非下划线或非字母字符
.	匹配除换行符之外的任意字符

量词：指定字符出现的次数

符号	描述
{n}	匹配前一项的n次
{n,}	匹配前一项n次或者多次
{n,m}	匹配前一项至少n次，但不超过m次
*	匹配前一项0次或者多次，等价于{0,}
+	匹配前一项一次或者多次，等价于{1,}
?	匹配前一项0次或者1次，也就是说前一项是可选的，等价于{0,1}

特殊符号：具有特定含义的符号

符号	含义
/…/	代表一个模式的开始和结束
^	匹配字符串的开始，即表示行的开始
$	匹配字符串的结束，即表示行的结束
[]	可以匹配的列表
()	用于表示分组
\|	表示或者
[^ ]	在[]中的^(脱字符)表示非

注意：[\u4E00-\u9FA5]用于匹配中文字符

1.4 基本用法

使用正则表达式对象的test方法

语法规则:

var flag = reg.test(字符串);

判断字符串是否符合正则表达式对象所指定的模式规则是：返回true或false

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义正则表达式对象
        // var reg = /a/;
        // console.log(reg.test('faAwenxin'));
        //2.定义正则表达式对象
        // var reg = new RegExp('a','i');
        // console.log(reg.test('helloA'));
        //规则验证：
        // var reg = /a\s/;//a后是否包含空白字符
        // console.log(reg.test('heallo'));

        // var reg = /a\s[0-9]/i;//是否包含数字字符
        // console.log(reg.test('hea 3llo'));
        // var reg = /a\s\d\w/i;//匹配任何字符、数字、字母、下划线
        // console.log(reg.test('hea 8888llo'));

        //量词表示个数
        // var reg = /a\s\d{3}\w/i;//d{3}连续出现3个数字
        // console.log(reg.test('hela 7745_lo'));
        // var reg = /\d?/i;
        // console.log(reg.test('hela 4a5b_lo'));
        //特殊符号
        // var reg = /a/;
        // console.log(reg.test('helloa'));
        // var reg =/a$/;//是否以a结尾或开始
        // console.log(reg.test('helloa'));

        // var reg = /\da$/;//以a结尾，且a前是数字
        // console.log(reg.test('hello3a'));
        // var reg = /^a$/;
        // console.log(reg.test('a'));

        //以a开头，且以a结尾，中间有一个数字
        // var reg = /^a\da$/;
        // console.log(reg.test('a3a'));

        //以a开头且以a结尾，中间有一个数字，+表示数字可以出现多次
        // var reg = /^a\d+a$/;
        // console.log(reg.test('a333a'));

        // 以a开头且以a结尾，中间有一个数字，*表示数字可有可无
        // var reg = /^a\d*a$/;
        // console.log(reg.test('aa'));

        // var reg =/^a\d?a[\dabc]$/;//[0-9abc]表示从数字，a、b、c中选一个结尾
        // console.log(reg.test('a7abc'));

        // var reg =/^a\d?a[\dabc]$/;//[0-9abc]表示从数字，a、b、c中选2个结尾
        // console.log(reg.test('a7aa8'));

        // var reg =/^a\d?a[\dabc]{2}(\da){3}$/;//(\da){3}数字a可以连续出现3次
        // console.log(reg.test('a7aa79a8a9a'));

        // var reg =/^a|b+%/;//b至少出现1次
        // console.log(reg.test('ab'));

        //只要不是abc开头的
        var reg = /^[^abc]{2}/;
        console.log(reg.test('wyt'));
    </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-16位
            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-14位
            var password = $("password").value;
            var reg = /^[\da-z]{6,10}$/;
            if(!reg.test(password)){
                $("passwordInfo").innerText="密码只能由数字和字母组成";
                $("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 birthday = $("birthday").value;
            var reg = /^\d{4}-\d{1,2}-\d{1,2}$/;
            if(!reg.test(birthday)){
                $("birthdayInFo").innerText = "输入格式不正确";
                $("birthdayInFo").className = "error";
                return false;
            }else{
                $("birthdayInFo").innerText = "OK!";
                $("birthdayInFo").className = "OK";
                return true;
            }
        };
        function checkPhone() {
            var phone = $("phone").value;
            var reg = /^1\d{10}$/;
            if(!reg.test(phone)){
                $("phoneInFo").innerText = "输入格式不正确";
                $("phoneInFo").className = "error";
                return false;
            }else{
                $("phoneInFo").innerText = "OK!";
                $("phoneInFo").className = "OK";
                return true;
            }
        };
        function checkMail() {
            var mail = $("mail").value;
            var reg = /^\w+@\w+(\.[a-z]{2,3}){1,2}$/; // + 1个或多个 点号要转义 \.
            if(!reg.test(mail)){
                $("mailInFo").innerText = "输入格式不正确";
                $("mailInFo").className = "error";
                return false;
            }else {
                $("mailInFo").innerText = "OK!";
                $("mailInFo").className = "OK";
                return true;
            }
        };
            function $(id) {
                 return document.getElementById(id);
           }
    </script>
</head>
<body>
   <h2>用户注册</h2>
   <form action="success.html" onsubmit="return checkInput()">
       <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="请输入邮箱" onblur="checkMail()">
                   <span id="mailInfo"></span>
               </td>
           </tr>
           <tr>
               <td colspan="2" style="text-align: left">
                   <input type="submit" value="注   册">
                   <input type="reset" value="重   置">
               </td>
           </tr>
       </table>
     </form>
</body>
</html>

success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   注册成功！
</body>
</html>

(!reg.test(phone)){
$(“phoneInFo”).innerText = “输入格式不正确”;
$(“phoneInFo”).className = “error”;
return false;
}else{
$(“phoneInFo”).innerText = “OK!”;
$(“phoneInFo”).className = “OK”;
return true;
}
};
function checkMail() {
var mail = $KaTeX parse error: Undefined control sequence: \w at position 41: … var reg = /^\̲w̲+@\w+(\.[a-z]{2…$ /; // + 1个或多个点号要转义 .
if(!reg.test(mail)){
$(“mailInFo”).innerText = “输入格式不正确”;
$(“mailInFo”).className = “error”;
return false;
}else {
$(“mailInFo”).innerText = “OK!”;
$(“mailInFo”).className = “OK”;
return true;
}
};
function $(id) {
return document.getElementById(id);
}

用户注册

用户名：
密码：
确认密码：
出生日期：
手机号：
邮箱：

```

success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   注册成功！
</body>
</html>

附赠：
链接：https://pan.baidu.com/s/1k09HeSnc1ZWkRQEc8v7h4A
提取码：o7y4

xiaoxinscholar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js笔记+案例

Java Script一、JavaScript简介1.什么是JavaScript简称JS，由网景公司开发的客户端脚本语言，不需要编译的，可以直接执行web的前端的三个层次：结构层HTML，定义页面的结构样式层css，定义页面的样式行为层JavaScript，用来实现交互，提升用户体验2.JavaScript的作用在客户端浏览器上动态的操作页面可以在客户端的浏览器上做数据的校验在客户端上发送异步请求二、JavaScript的引用方式1.内联方式在页面中使用script标签，
复制链接

扫一扫