jingluo7977

JavaScript相关笔记及案例

JavaScript

一、JavaScript简介

1 什么是JavaScript

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

Web前端三层：

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

2 JavaScript作用

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

二、引用方式

1 内联方式

在页面中使用script标签，在script标签中编写js代码

script标签可以放在页面的任意位置，一般放在head中

<script>
        js代码
</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="js/hello.js">		</script>

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

test01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    </style>
    <script>
        //alert("hello JavaScript")
    </script>
    <!--3.外部方式-->
    <script type="text/javascript" src="js/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>

三、基本语法

1 变量

变量是用来存储常量的量

常量就是固定的值—常数项

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

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

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

使用 let 声明的变量支持块级作用域，而使用var声明的变量不支持块级作用域

注：在IDEA中配置ES版本 settings---->language&frameworks—>javascript—>javascript language version—>ECMAScript 6

变量的命名规则：

由字母、数字、下划线、汉字组成

2）由字母、下划线开头

3）不能和系统关键字重名

4）区分大小写

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

test02

<!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=18;//定义age变量并赋值18给它
        //age为整型变量 age中存放的是整数 age是整型变量
        // alert(age);

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

2 输入和输出

输出：

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

输入：

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

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

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

3 转义字符

常用转义符：

\n换行
\t缩进
\"双引号
\'单引号
\\斜杠

4 注释

单行注释//

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

5 编码规范

代码是区分大小写的

每个语句以分号结尾

代码缩进

test03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //输出方式
        // alert("嘿嘿");
        // console.log("哈哈");
        // document.write("嘻嘻");

        //输入方式
        // var name=prompt("请输入你的姓名");
        // console.log(name);
        // var age=prompt("请输入你的年龄");
        // console.log(age,age+2,typeof age);
        // age = Number(age);
        // console.log(age,typeof age);
        // console.log(age+2);
        //转义字符
        console.log("he\'llo\n world");// \n表示换行
        //注释
        //这是一个单行注释
        /*
        这是多行注释
         */
    </script>
</head>
<body>
</body>
</html>

四、核心语法

1 数据类型

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

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

基础数据类型：

string字符串
number数值（NaN表示非数字 Not a Number，其自身是number类型）
boolean布尔
null空类型
undefined未定义类型

类型转换：

转换number

使用Number()、parseInt()、perseFloat()
转换为字符串

拼接空字符串
转换为布尔boolean()

使用Boolean()

注意：0、空字符串、null、undefined、NaN会被转换为false，其他值会被转换为true

test04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            数据类型
         */
        var name = 'tom';
        var age = 18;
        var height = 180.5;
        var flag = true;

        var hobby = null;

        var date = new Date();

        var arr = new Array();

        var sex;//定义了一个变量未赋值
        // console.log(typeof name);
        // console.log(typeof age);
        // console.log(typeof height);
        // console.log('hello'-5);//返回值NaN，表示非数值类型
        // console.log(typeof flag);
        // console.log(typeof hobby);//如果数据是null,Date,Array等，返回object
        // console.log(typeof date);
        // console.log(typeof arr);
        // console.log(typeof sex);

        /*
         *类型转换
         */

        //1.转换为number
        // var a = '12';
        // console.log(a,typeof a);
        //方式一 使用Number()
        // a = Number(a);
        // console.log(a,typeof a);
        // a = Number('12.5');
        // a = Number('12abc');
        // a = Number('abc12');

        //方式二 使用perseInt()
        // 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('abc123');

        //将数值转换为字符串
        // var a = 12;
        // console.log(a,typeof a);
        // a = a + '';//后接一个空字符串
        // console.log(a,typeof a);

        //转换布尔类型的值转换为数字
        // var a;
        // a = Number(false);//在js中true用1或非0表示，false用0表示
        /*
        转换为布尔
         */
        // 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);
        }
        // console.log(a,typeof a);
    </script>
</head>
<body>
</body>
</html>

2 运算符

算术运算符：+ - * / % **乘方 ++ –

比较运算符：>、>=、<、<=、、=、!=

赋值运算符：=、+=、-=、/=、%=

逻辑运算符：&&并且、||或者、!非

条件运算符：条件?表达式1:表达式2

test05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        算术运算符：+  -  *  /  %  **乘方  ++  --

        比较运算符：>、>=、<、<=、==、===、!=

        赋值运算符：=、+=、-=、/=、%=

        逻辑运算符：&&并且、||或者、!非

        条件运算符：条件?表达式1:表达式2

         */
        //1、算术运算符
        // var a = 5;
        // var b = 3;
        // var c = 'a';
        // var d = true;
        // console.log(a+b);
        // console.log(a-b);
        // console.log(a*b);
        // console.log(a/b);
        // console.log(a%b);
        // console.log(a**b);//a的b次方
        // console.log(a-c);//当表达式c为数字字符，会自动将数字字符转换为数值
        // console.log(a+d);
        // var a = 1;
        // console.log(a++);//先使用a的值，再让a自加，在原值的基础上加1，表达式返回变化前a的值，然后自加 a = a+1
        // console.log(a);
        // console.log(++a);//表达式返回变化后a的值，先自加减，再返回值
        // console.log(a);//自加自减表达式执行完a的值是多少

        //2、比较运算符
        // var a = 1;
        // var b = true;
        // console.log(a>b);
        // console.log(a
        // console.log(a>=b);
        // console.log(a<=b);//返回值为布尔值  ：true / false

        // console.log(a==b);//判断a和b的值是否相同  只判断a和b的内容是否相同
        // console.log(a===b);//全等于，既要判断内容，也要判断数据类型

        // console.log(a+b);
        // console.log(a==b);//在js中true表示为1，false表示为0
        //3、赋值运算符
        // var a = 8;
        // a += 2;//a = a+2
        // a -= 2;//a = a-2
        // console.log(a);

        //4、逻辑运算符
        var x = true;
        var y = false;
        // console.log(x && y);//&&并且运算符，两边为真才为真，一边为假则为假
        // console.log(x || y);// || 或运算 两边为假才为假，一边为真就是真
        //逻辑运算短路问题
        a = 1;
        b = 5;
        console.log(a && b);//0---false
        console.log(a || b);

        //5、条件运算符
        console.log(a>b?a+b:a-b);
    </script>
</head>
<body>
</body>
</html>

test06

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //使用math对象进行数学运算，用法，Math.方法名
        //1\绝对值
        console.log(Math.abs(-5));
        //2、幂运算
        console.log(Math.pow(2,4));
        //3、四舍五入
        console.log(Math.round(123.556));//在js中不能指定四舍五入到第几位
        //4、向上取整，向下取整
        console.log(Math.ceil(3.5));//取大于等于3.5的最小整数
        console.log(Math.floor(3.5))//取小于等于3.5的最大整数
        //5、生成一个[0.0.1]直接随机浮点数
        console.log(Math.random());
        //6、最大值，最小值
        console.log(Math.max(23,18,54,2,-6));
        console.log(Math.min(23,18,54,2,-6));
        //7、圆周率的值
        console.log(Math.PI);

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

3 选择结构

if…else…、switch

test07

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var age = 25;
        if (age>=60){
            console.log('老年');
        }
        else if(age>=30){
            console.log('中年');
        }
        else if(age>=16){
            console.log('少年');
        }
        else
        {
            console.log('童年');
        }

        var day = '星期五';
        switch (day){
            case '星期一':
                console.log('吃包子');
                break;
            case '星期二':
                console.log('吃油条');
                break;
            case '星期三':
            case '星期四':
                console.log('吃面条');
                break;
            case '星期五':
                console.log('吃油饼');
                break;
            default:
                console.log('不吃了');
        }
    </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]);
        }

test08

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

        //for...in
        var str = 'welcome';//将字符串看作是由多个字符组成的集合
        for (var c in str)
        {
            // console.log(index);//输出str的索引
            console.log(str[c]);
        }
        // s = 'abc';
        // document.write(s[0]);
        // document.write(s[1]);
        // document.write(s[2]);

        //break continue
        for (var i =1;i<=10;i++)
        {
            if(i%2==0)

            console.log(i);
            continue;
        }

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

5 数组

5.1 定义方式

语法：

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

注意：

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

test09

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arr = new Array();
        // arr[0] = 12;
        // arr[1] = 23;
        // //……
        // console.log(arr.length);
        // console.log(arr[0]);
        // console.log(arr[1]);

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

        // var arr = ['apple','pear','orange','banana'];
        // console.log(arr[arr.length-1]);
        // console.log(arr[0]);

        //将1-100之间所有能被3整除的数，放到数组number中，输出这个数组并统计个数
        // var number = [];
        // for (var i=1;i<=100;i++)
        //     // var index = 0;
        //     if (i%3==0)
        //         number[number.length]=i;
        // //每当向数组中添加元素时，length属性值都会改变
        //         // number[index] = i;
        //         // index++;
        // console.log(number);
        // var arr = ['tom','jack','alice','mike'];
        // // var arr = [21,34,43,12.132];
        // console.log(arr);//未排序
        // arr.sort();
        // console.log(arr);//排序后
        var arr = ['tom','jack','alice','mike','jack'];
        console.log(arr);
        // arr.reverse();
        // console.log(arr.join('-'));
        console.log(arr.indexOf('jack'));
        console.log(arr.indexOf('jack'));
        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（）	将数组转会为字符串

test10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arr = new Array();
        // arr[0] = new Array();
        // arr[1] = new Array();
        // arr[0][0]=12;
        // arr[0][1]=9;
        // arr[1][0]=11;
        //
        // console.log(arr);
        var arr = [
            [2,12,32,9],
            [1,5,11,44],
            [34,78]
        ]
        // console.log(arr);
        console.log(arr[2][1]);
        //遍历元素
        for (var i = 0;i<arr.length;i++)
        {
            //循环输出每行的4个元素
            for (var j = 0;j<arr[i].length;j++)
                document.write(arr[i][j]+'  ');
            //输出每行的换行
            document.write('
');
        }
    </script>
</head>
<body>
</body>
</html>

5.3 二维数组

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

var arr = new Array();//定义了一个具有m行个元素的特殊的一维数组
arr[0] = new Array();//第0行有n个元素
arr[1] = new Array();//第1行有n个元素
arr[][]=值;

var arr = [
    [值1，值2……],
    [值1，值2……],
    []
]

6 函数

6.1 自定义函数

语法：

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

注意：

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

变量的作用域：

局部作用域

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

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

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

test11

<!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();//调用函数
            function fn()
            {
                if (true)
                {
                    // var a = 5;//局部变量
                    let a = 5;//块级变量
                    console.log(a);
                }
                console.log(a);
            }
         fn();

        {
            var d = 2;//全局变量
            let x = 4;
            console.log(x);
        }
        // console.log(x);
        // console.log(a);
        // console.log(c);
    </script>
</head>
<body>
</body>
</html>

6.2 回调函数

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

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

应用：

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

test12

<!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,15,11,36,45];
        /*
            定义比较器
            升序：第一个参数大于第二个参数，返回正数
                  第一个参数小于第二个参数，返回负数
                  参数1=参数2，则返回0
         */
        function compareFn(a,b)
        {
            return b-a;
            // if (a>b)
            //     return 1;
            // else if (a
            //     return -1;
            // else
            //     return 0;
        }
        // console.log(arr);
        // arr.sort();
        // console.log(arr);

        // for (var index=0;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>

test13

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            1、用于回调
         */
        // function show()
        // {
        //     console.log('111');
        // }
        // window.οnclick=show;
        window.onclick = function () {
            console.log('111');
        };//分号不能丢

        function f1() {
            console.log(222);
        }
        // var a = f1;//把f1赋值给a
        // a();
        var a = function () {
            console.log(222);
        };

        var arr = [12,32,15,11,97];
        // function show(value,index) {
        //     console.log(index,value);
        // }
        // arr.forEach(show);

        arr.forEach(function (value,index) {
            console.log(index,value);
        });

        //2、自执行函数
        // function fn() {
        //     console.log(333);
        // }
        // fn();

        (function () {
            console.log(333);
        })();
    </script>
</head>
<body>
</body>
</html>

6.3 匿名函数

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

应用：

用于函数的回调

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

用于一次性执行的函数，会自动执行，称为自执行函数
```
(function () 
 {
       console.log(333);
 })();
```

6.4 箭头函数

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

test14

<!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));
        //示例1
        var a = x => x*2;//箭头函数优点：语法简洁
        // console.log(a(3));
        //示例2 如果箭头函数没有参数或者有2个以上的参数，则必须使用小括号表示参数部分
        var a = function () { //function();
            return 5;
        };
        var a = () => 5;//var a = () =>5;
        // console.log(a());

        //示例3
        var a = function (x,y) {
            var sum = x+y;
            return sum;
            // return x+y;
        };
        var a = (x,y) => {
            var sum = x+y;
            return sum;
        };

        // var a = function (x) {
        //     console.log(x);
        // };
        var a = x => console.log(x);
        a(5);
        // console.log(a(5));

        //应用场景
        var arr = [12,32,15,11,97];
        arr.forEach((value,index)=>{
            console.log(index,value)
        });
    </script>
</head>
<body>
</body>
</html>

五、复合类型

1 String

1.1 定义方式

var str = 'welcome to JS!';//基本数据类型
var str = new String('welcome');//引用数据类型String

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

1.2 常用方法

方法名	说明
charAt()	返回在指定索引位置的字符，也可以使用[索引]的方式
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置
lastindexOf()	返回某个指定的字符串值在字符串中最后出现的位置
toLowerCsae()	将字符串转换为小写字符
toUperCase()	将字符串转换为大写字符
subString()	提取字符串中两个指定索引号之间的字符
repalce()	将指定的字符串替换为新字符串
split()	把指定的字符串分隔字符串数组
trim（）	去掉字符串的前后空格

test15

<!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(3),str[0],str[str.length-1]);
        // 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));//从1开始取至末尾
        //
        // str = str.replace('JS','JavaSccript');//替换后将副本赋值给str
        // 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 to JS');
        // 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,seconnd);//参数为指定的年月日时分秒
var date = new Date(millSenconds);//参数为当前时间与1970-1-1相差的秒数

2.2 常用方法

方法名	说明
getFullyYear()	以四位数字返回年份
getMonth()	返回月份[0,11]0表示1月
getDate()	返回一个月中的某一天（1-31）
getHours()	返回小时[0,23]
getMinutes()	返回分钟[0,59]
getSecondss()	返回秒数[0-59]
getMillseconds()	返回毫秒[0-999]
getDay()	返回一周中的某一天(0-6),0表示周日
getTime()	返回当前时间与1970-1-1相差的毫秒数

setXxx方法与getXxx方法类似，用于设置对应的值

test16

<!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,08,53);//月份的取值[0,11]
        // var date = new Date(123312434215);

        // console.log(typeof date);
        // console.log(date);

        var year = date.getFullYear();
        var month = date.getMonth();
        var d = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();

        let millseconds = date.getMilliseconds();//获得当前时间的毫秒数
        console.log(millseconds);
        let day = date.getDay();//返回一周中的第几天
        // let time = date.getTime();//返回从1970-1-1至今相差的秒数
        // console.log(time);

        var weekday = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var currentime = checkdDate(year) + '年' + checkdDate(month) + '月' + checkdDate(d) + '日,' + checkdDate(hour) + ':' +  checkdDate(minute) + ':' + checkdDate(second) + ',' +weekday[day];
        console.log(currentime);

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

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

3 JSON

3.1 JSON简介

JavaScript Object Notation是一种轻量级的数据交换格式，用于表示JavaScript对象的一种方式

采用与编程语言无关的文本格式，易于阅读和编写，同时易于解析和生成

3.2 基本用法

语法：{"属性名":属性值,"属性名":属性值,……};

注意：

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

使用：

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

3.3 JSON转换

JSON转换为字符串

var person = {
    "name":"jingluo",
    "age":18,
    "height":180.5
};
var str = JSON.stringify(person);

字符串转换为JSON

 var str = '{"name":"tom","age":20,"sex":"男"}';
 var obj = JSON.parse(str);
 var users = '[
  	{"id":1,"username":"tom","passwprd":123},					{"id":2,"username":"jack","passwprd":456}
  	]';
 console.log(typeof users);
 var objs = JSON.parse(users);
 console.log(objs);

test17

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义一个ISON对象
        var user = {
            "id":1001,
            "name":"tom",
            "age":20,
            "height":180.5,
            "address":{
                "province":"山西省",
                "city":"太原市",
                "district":"小店区"
            },
            "ismarried":true
        };
        //访问方式：对象名，属性名
        // console.log(user.name);
        // console.log(user.height);
        // console.log(user.address);
        // console.log(user.address.city);

        //JSON对象的数组

        // var nums = {12,3,4,5,67,8};
        var users = [
                {
                    "id":9527,
                    "name":"tom",
                    "password":123,
                    "status":1
                },
                {
                    "id":9528,
                    "name":"admin",
                    "password":111,
                    "status":1
                },
                {
                    "id":9529,
                    "name":"jack",
                    "password":456,
                    "status":0
                },
                {
                    "id":9530,
                    "name":"alice",
                    "password":789,
                    "status":1
                }
        ];
        for (var i = 0;i<users.length;i++)
        {
            var u = users[i];
            console.log(u.name,u.password,u.status);
        }
        /*
         3 JSON对象和字符串之间的转换
         */
        //1、JSON转换为字符串
        // console.log(typeof user);
        // console.log(user);
        // var str=JSON.stringify(user);
        // console.log(typeof str);
        // console.log(str);

        //2、字符串转换为JSON
        var str = '{"name":"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","passwprd":123},{"id":2,"username":"jack","passwprd":456}]';
        console.log(typeof users);
        var objs= JSON.parse(users);
        console.log(objs);
    </script>
</head>
<body>
</body>
</html>

4 对象类型

4.1 对象简介

补充：

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

2、描述一个对象

属性------>外观，长相

方法------>行为模式

事件------>单击，双击

3、对象有三个基本特征：封装、继承和多态

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

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

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

4.2 创建对象

三种方式:

使用Object

//新创建的对象没有属性和方法
var 对象名 = new Objecct();
//为对象添加属性
对象名.属性名 = 属性值;
//为对象添加方法
对象名.方法名 = function{
    方法体;
};
//调用属性
对象名.属性名 或 对象名['属性名']
对象名.方法名

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

function 构造函数名 (形参1,形参2……){//为了区别于其他函数，构造函数名建议首字母大写
    this.属性名=形参1；
    this.属性名=形参2；
    this.方法名=function（）{
        方法体
    }；
}

使用JSON格式定义对象

var JSON对象 = {
    属性名:属性值,//属性名可不用加引号
    属性名:属性值,
    ……
};

test18

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            1、使用Object创建
         */
        var stu = new Object();
        //添加属性
        stu.name = "tom";
        stu.age = 20;
        stu.height = 180.5;
        //添加方法
        stu.study = function () {
            console.log("我叫"+stu.name+"正在学习")
        };
        stu.run = function () {
            console.log(stu.name+"正在参加马拉松")
        };
        //调用属性
        // console.log(stu.name,stu['age']);
        // 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.username = name;
            this.age = age;
            this.sex = sex;
            //方法
            this.show = function () {
                console.log(this.username+'正在学习');
            }
            this.study = function () {
                console.log("正在学习");
            }
        };
        // Student('tom',20,'male');
        // var student = new Student('tom',20,'male');
        // console.log(student.username,student.age,student.sex);
        // student.show();
        // student.study();

        /*
        3、使用JSON对象
         */
        var student = {
            "name":"admin",
            "age":18,
            "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文档和ODM树是一一对应结构
当DOM树被改变时，与之对应的HTML文档也会随之变化
当需要对HTML文档中的内容进行动态改变时，可以使用DOM来进行操作
DOM提供了一组用来操作HTML文档的API（应用程序接口），即提供了一套属性，方法和事件
树上的每一个节点都是一个DOM对象，树的顶层称为Document对象，表示整个文档

2 查询操作

即获取DOM对象

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

3 访问操作

3.1 访问属性

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

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

用法：DOM对象.属性

test19

<!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对象.inneTet即将内容作为纯文本

test20

<!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="你好，世界
";
            // obj.innerText="你好，世界
";

        }
        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>

3.3 访问CSS

即获取/设置CSS样式

两种方式

使用style属性

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

如果CSS属性中有短横线，需要在访问时去掉短横线，然后将其后的单词首字改为大写
使用className属性

用法：DOM对象.className

test21

<!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>

方法	含义
document.createElement(“li”)	创建一个元素节点，即标签
document.createTextNode(“mike”)	创建一个文本节点，即标签中的文本内容
node.appendChild(newNode)	将一个新的节点newNode添加到指定的节点node中子节点的末尾
ul.insertBefore(newNode,refNode)	将一个新的节点newNode插入到node节点的子节点refNode之前
ul.replaceChild(newNode,refNode)	用一个新的节点newNode替换原有的node节点中的子节点refNode

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()	删除当前节点的子节点

test22

<!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对象

事件监听：监听事件的发生，绑定事件函数，当事件被触发后执行该事件所对应的事件函数，即回调函数

test23

<!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 绑定事件

两种方式：

静态绑定：通过标签的事件属性绑定
动态绑定：通过JS代码绑定事件

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

注意：

可以通过事件回调函数的第一个参数获取事件对象event
在事件回调函数中，this表示事件源，即发生事件的元素

test24

<!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>

3 常用事件

3.1 鼠标事件

事件名	描述
onclick	鼠标单击
ondblclick	鼠标双击
onmouseover	鼠标移动到某个元素上
onmouseout	鼠标从某元素上移开
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动

3.2 键盘事件

事件名	描述
onkeydown	某个键盘的键被按下
onkeyup	某个键盘的键松开
onkeypress	某个键盘的键按下松开

3.3 表单事件

事件名	描述
onfocus	元素获得焦点
onblur	元素失去焦点
onchange	域的内容发生改变，一般用于文件列表和下拉选择器
onselect	文本内容被选中时
onsubmit	表单提交前触发，回调函数返回true，表示允许表单提交，返回false表示阻止表单提交

test25

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #username{
            outline: none;
        }
        .txtborder{
            border: 1px solid red;
        }
        #img{
            width: 160px;
            height: 160px;
        }
    </style>
    <script>
        window.onload=function () {
            /*
                鼠标事件
             */
            // document.getElementById("btn").οnclick=function () {
            // document.getElementById("btn").οndblclick=function () {
            // document.getElementById("btn").οnmοuseοver=function () {
            // document.getElementById("btn").οnmοuseοver=function () {
            //     console.log(111);
            // };
            // document.getElementById("btn").οnmοuseοut=function () {
            // document.getElementById("btn").οnmοusedοwn=function () {
            // document.getElementById("btn").οnmοuseup=function () {
            document.getElementById("btn").onmousemove=function () {
                console.log(222);
            };
            /*
                键盘事件
            */
            // document.getElementById("username").οnkeydοwn=function () {
            //     console.log(111);
            // };
            // document.getElementById("username").οnkeyup=function () {
            // document.getElementById("username").οnkeypress=function () {
            //     console.log(222);
            //     console.log(event);
            // };
            /*
                表单事件
             */
            // document.getElementById("username").οnfοcus=function () {
            //     console.log(111);
            //     this.className="txtborder";
            // };
            // document.getElementById("username").οnblur=function () {
            //     console.log(111);
            //     this.className="";//失去焦点时取消className属性即可
            // };
            // document.getElementById("head").οnchange=function () {
            //     console.log(222);
            //     document.getElementById("img").src=window.URL.createObjectURL(this.files[0])
            // };
            // document.getElementById("username").οnselect=function () {
            //     console.log(222);
            // };
            document.getElementById("frm").onsubmit=function () {
                console.log(111);
                return false;
            }
        };
    </script>
</head>
<body>
    <form action="" id="frm">
        <input type="button" value="点我" id="btn">
        用户名：<input type="text" id="username" name="username"><br>
        <img src="" id="img"><br>
        头像:<input type="file" id="head" multiple><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

4 事件操作

4.1 事件冒泡

概念：

当一个HTML产生事件时，该事件会从当前元素（事件源）开始，往上冒泡直到页面的根源，所有经过的节点都会收到该事件并执行

特点：先触发子级元素，再触发父级元素的事件

阻止事件的冒泡：event.stopPropagation()或者event.canclecancelBubble=true;

4.2 事件默认行为

当一个事件发生时浏览器自己默认做的事情，如：点击链接时会默认跳转，右键点击默认会弹出菜单

阻止事件默认行为：event.preventDefault();

test26

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: pink;
        }
        p{
            width: 100px;
            height: 100px;
            background:#000;
        }
    </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" id="mya" target="_blank">百度</a>-->
    <a href="#" id="mya" target="_blank">百度</a>
</body>
</html>

5 示例：下拉列表

5.1 Select和Option对象

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

属性：

length：设置或者返回下拉列表中选项的数量

selectedIndex：设置或返回下拉列表被选中项的索引

value：返回下拉列表被选中的值

options：返回下拉列表中所有的选项，值为Option对象数组（当该数组改变时对应下拉列表的选项也会改变）
方法：

add()向下拉列表添加一个选项
事件：

onchange：下拉列表的选项改变时触发

Option对象：表示HTML表单中的一个下拉列表的一个选项

属性：

text：设置或返回在页面中的文本值

value：设置或返回传递给服务器的值
方法：

Option（文本值，服务器值）创建一个选项

test27

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function getDegree() {
            var degree = document.getElementById("degree");
            // console.log(degree.length);
            // console.log(degree.selectedIndex);

            // 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";

            //向下拉列表中追加一条信息

            // console.log(opts[opts.length]);
            // 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")[2]);
        }
        window.onload=function () {
            document.getElementById("degree").onchange=function () {
                // console.log(111);
                // console.log(this.options[this.selectedIndex.value]);
                console.log(this.value);
            };
        };
    </script>
</head>
<body>
    <input type="button" value="操作下拉列表" onclick="getDegree()">
    <hr>
    学历：
    <select name="" id="degree">
        <option value="0">--请选择学历--</option>
        <option value="gaozhong">高中</option>
        <option value="dazhuan">大专</option>
        <option value="benke">本科</option>
        <option value="yanjiusheng">研究生</option>
    </select>
</body>
</html>

5.2 二级菜单联动

实现省市级联动的效果

test28

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
       var provinces = [
           {
               id:1001,
               name:"山西省",
               cities:[
                   {
                       id:1,
                       name:"太原市"
                   },
                   {
                       id:2,
                       name:"大同市"
                   },
                   {
                       id:3,
                       name:"长治市"
                   },
                   {
                     id:4,
                     name:"吕梁市"
                   },
                   {
                       id:5,
                       name:"晋中市"
                   }
               ]
           },
           {
             id:1002,
             name:"山东省",
               cities:[
                   {
                       id:1,
                       name:"济南市"
                   },
                   {
                       id:2,
                       name:"青岛市"
                   },
                   {
                       id:3,
                       name:"威海市"
                   },
                   {
                       id:4,
                       name:"烟台市"
                   },
                   {
                       id:5,
                       name:"德州市"
                   }
               ]
           },
           {
               id:1003,
               name:"广东省",
               cities:[
                   {
                       id:1,
                       name:"广州市"
                   },
                   {
                       id:2,
                       name:"东菀市"
                   },
                   {
                       id:3,
                       name:"青远市"
                   },
                   {
                       id:4,
                       name:"佛州市"
                   },
                   {
                       id:5,
                       name:"深圳市"
                   }
               ]
           }
       ];

       window.onload=function () {
           //初始化省份
           for(var i in provinces){
               var p = provinces[i];
               var option = new Option(p.name,p.id);
               document.getElementById("province").add(option);
           }
       };

       function change() {
           //清空城市数据
           document.getElementById("city").length=0;
           //获取选择的省份
           var pid  = document.getElementById("province").value;
           if(pid==0){
               document.getElementById("city").add(new Option("--请选择城市--"));
               return;
           }
           for(var i in provinces){
               var p = provinces[i];
               if(p.id==pid){
                   //添加城市
                   var cities = p.cities;
                   for (var j in cities){
                       var option = new Option(cities[j].name,cities[j].id);
                       document.getElementById("city").add(option);
                   }
                   return;
               }
           }
       }
    </script>
</head>
<body>
    省份：
    <select name="" 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浏览器对象模型

2 window对象

常用属性：

document、location、history等，都是子级对象

常用方法：

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

常用事件：

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

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

test29

<!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);
        // 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:100px,height:100px,resizable=none");
        }
        //5、setTimeout()
        var timer_one;
        var timer_zq;
        function f2() {
            timer_one = setTimeout(function () {
                console.log(111);
            },3000);//单位毫秒
        }
        // function show() {
        //     console.log(111);
        // }
        //6、setInterval()
        function f3() {
            timer_zq = setInterval(function () {
                console.log("起床啦……");
            },1000)
        }

        // //周期性计时器使用一次性计时器能否实现
        // function f2() {
        //     setTimeout(show,1000);
        // }
        // function show() {
        //     console.log(111);
        //     setTimeout(show,1000);
        // }

        //7、clearTimeout()
        function f4() {
            clearTimeout(timer_one);
        }
        //8、clearInterval()
        function f5() {
            clearInterval(timer_zq);
        }

        /*
            window的常用事件
         */
        // window.onload
        window.onscroll=function () {
            console.log(222);
        };
        window.onclick=function () {
            console.log(333);
        };
        window.onload=function () {
            console.log(444);
        };
        //一个对象可以绑定多个事件，一个事件不能绑定多次
        window.onload=function () {
            console.log(555);
        };
    </script>
</head>
<body>
    <input type="button" value="打开一个新窗口" onclick="f1()"><br>
    <input type="button" value="一次性计时器" onclick="f2()"><br>
    <input type="button" value="周期性计时器" onclick="f3()"><br>
    <input type="button" value="关闭一次性计时器" onclick="f4()"><br>
    <input type="button" value="关闭周期性计时器" onclick="f5()"><br>
    <hr>

    <p style="background: #ccc;height: 2000px;">
        hello world
    </p>
</body>
</html>

3 location

常用属性：

href 设置或返回地址栏中的url

常用方法：

reload 重新加载当前页面

4 history对象

常用方法：

方法名	含义
back()	后退，加载history列表中的上一个url
forward()	前进，加载history列表中的下一个url

test30

<!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>

test31 计时器

<!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;
            timer = setInterval(function () {
                r++;
                if(r>9){
                    r=0;
                    l++;
                }
                if(l>9){
                    r=0;
                    l=0;
                }
                $("imgr").src="images/number/"+r+".bmp";
                $("imgl").src="images/number/"+l+".bmp";
            },100);
        }
        function doStop() {
            $("stop").disabled=true;
            $("start").disabled=false;
            clearInterval(timer);
        }

        function $(id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <!--table>(tr>td*2)*2-->
    <table>
        <tr>
            <td><img src="images/number/0.bmp" id="imgl"></td>
            <td><img src="images/number/0.bmp" id="imgr"></td>
        </tr>
        <tr>
            <td><input type="button" value="开始" id="start" onclick="doStart()"></td>
            <td><input type="button" value="停止" id="stop" disabled onclick="doStop()"></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

test32 正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1、定义正则表达式对象
        // var reg = /a/i;//判断忽略大小写后的字符串中是否有a
        // console.log(reg.test('heAllo'));

        //方式2：定义正则表达式对象
        // var reg = new RegExp("a","i");
        // console.log(reg.test("heAllo"));

        //规则验证：
        // var reg = /a\s/;//a字符后是否包含空白字符
        // console.log(reg.test("hea  llo"));

        // var reg = /a\s\d/i;//是否包含数字字符
        // console.log(reg.test("hea 8llo"));

        // var reg = /a\s\d\w/i;//匹配任何字符:数字、字母、下划线
        // console.log(reg.test("hea 7777_llo"));

        //量词
        // var reg = /a\s\d{3}\w/i;//d{3}表示连续出现3个数字
        // console.log(reg.test("hela 7777_lo"));

        // var reg = /a\s\d{0,3}\w/i;
        // console.log(reg.test("hela 777_lo"));
        // var reg = /\d?/i;
        // console.log(reg.test("hela 4a4_lo"));

        //特殊符号
        // var reg = /a/;
        // console.log(reg.test("heallo"));

        // var reg = /^a/;//是否以a开头
        // var reg = /a$/;//是否以a结尾
        // console.log(reg.test("helloa"));

        // var reg = /\da$/;//以a结尾，且a的前面是数字
        // console.log(reg.test("hello9a"));

        // var reg = /^a$/;
        // console.log(reg.test("a"));

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

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

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

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

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

        // var reg = /^a\d?a[\dabc]{2}(\da){3}$/;
        // console.log(reg.test("a7a2c6a7a8a"));

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

        var reg = /^[^abc]{2}/;//不是abc开头
        console.log(reg.test("xw"));
    </script>
</head>
<body>

</body>
</html>

2 表单校验

2.1 目的

客户端表单校验的目的

保证输入的数据符合要求
减轻服务器的压力

2.2 实现

通过onsubmit事件绑定回调函数，判断表单数据是否符合要求

如果不符合要求返回false
如果符合要求则返回true

test33

<!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}$/i;
            if(!reg.test(username)){
                $("usernameInfo").innerText="用户名只能由字母、数字、下划线、横线、中文组成";
                $("usernameInfo").className="error";
                return false;
            }else {
                $("usernameInfo").innerText="ok!";
                $("usernameInfo").className="ok";
                return true;
            }
        }
        function checkPassword() {
            //密码只能由数字、字母组成，长度为6-10位
            var password = $("password").value;
            var reg = /^[\da-z]{6,10}$/;
            if(!reg.test(password)){
                $("passwordInfo").innerText="密码只能由数字、字母组成，长度为6-10位";
                $("passwordInfo").className="error";
                return false;
            }else {
                $("passwordInfo").innerText="ok!";
                $("passwordInfo").className="ok";
                return true;
            }
        }
        function checkRepassword() {
            //两次输入的密码相同
            var password = $("password").value;
            var repassword = $("repassword").value;
            if(password!=repassword){
                $("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;
            //[email protected]   [email protected]
            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;
            }
            //校验身份证 15位/18位(x)
            // var reg = /[1-9]\d{14}(\d{2}[\dx])?/i;//?可以是0个或多个 最后4位可有可无
        }
        function $(id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <h2>用户注册</h2>
    <form action="success.html" onsubmit="return checkInput()">
        <!--table>(tr>td*2)*6-->
        <table>
            <tr>
                <td>用户名：</td>
                <td>
                    <input type="text" name="username" id="username" placeholder="请输入用户名" onblur="checkUsername()">
                    <span id="usernameInfo"></span>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" name="password" id="password" placeholder="请输入密码" onblur="checkPassword()">
                    <span id="passwordInfo"></span>
                </td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td>
                    <input type="password" name="repassword" id="repassword" placeholder="请再次输入密码" onblur="checkRepassword()">
                    <span id="repasswordInfo"></span>
                </td>
            </tr>
            <tr>
                <td>出生日期：</td>
                <td>
                    <input type="text" name="birthday" id="birthday" placeholder="请输入出生日期" onblur="checkBirthday()">
                    <span id="birthdayInfo"></span>
                </td>
            </tr>
            <tr>
                <td>手机号：</td>
                <td>
                    <input type="text" name="phone" id="phone" placeholder="请输入联系方式" onblur="checkPhone()">
                    <span id="phoneInfo"></span>
                </td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td>
                    <input type="text" name="mail" id="mail" placeholder="请输入邮箱" 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>

下载链接：
链接：https://pan.baidu.com/s/1zLXyBOQW9pH-jCjKUnt0YA
提取码：eac1

你可能感兴趣的:(javascript)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）跳房子的前端前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
JavaScript `Map` 和 `WeakMap`详细解释跳房子的前端 JavaScript 原生方法 javascript 前端开发语言
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
切换淘宝最新npm镜像源是 hai40587 npm 前端 node.js
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
高性能javascript--算法和流程控制海淀萌狗
-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
JavaScript中秋快乐！ Q_w7742 javascript 开发语言 ecmascript
我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
Nginx从入门到实践(三) 听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
【JS】前端文件读取FileReader操作总结程序员-张师傅前端前端 javascript 开发语言
前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端 ui 服务器
前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
了解 UNPKG：前端开发者的包管理利器小于负无穷前端 javascript typescript css html5 node.js
在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
2019-05-29 vue-router的两种模式的区别 Kason晨
1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
electron多标签页模式更像客户端 diygwcom electron javascript 前端
Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
外卖霸王餐返利外卖会员卡小程序开发闹小艾 good506070 微信小程序小程序
外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
Axure设计之全屏与退出全屏交互实现招风的黑耳 Axure axure 交互
在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
全面指南：用户行为从前端数据采集到实时处理的最佳实践数字沉思营销流量运营系统架构前端内容运营大数据
引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
EcmaScript和JavaScript的区别每天吃八顿前端 ecmascript
ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
javascript添加p元素，html添加文字，appendChild 游勇一 javascript html添加p appendChild
javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载裁剪区域绘制 SteveJi666 WebGL cesium EarthSDK SuperMap 3d javascript 前端 arcgis
版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示睿理
html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
如何在 Python 中声明一个静态属性? 潮易 python 开发语言
在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
数据格式：什么是JSON和XML isNotNullX json xml
JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是
HighCharts图表自动化简介知识的宝藏 Selenium高级篇 Selenium图表自动化测试 highcharts图表自动化 Selenium图表自动化图表自动化测试 highcharts Selenium
什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
jquery实现的jsonp掉java后台知了ing java jsonp jquery
什么是JSONP？先说说JSONP是怎么产生的：其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，小可不才，试着用自己的方式来阐释一下这个问题，看看是否有帮助。 1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； 2、
Struts2学习笔记 caoyong struts2
SSH : Spring + Struts2 + Hibernate 三层架构(表示层,业务逻辑层,数据访问层) MVC模式 (Model View Controller) 分层原则:单向依赖，接口耦合 1、Struts2 = Struts + Webwork 2、搭建struts2开发环境 a>、到www.apac
SpringMVC学习之后台往前台传值方法满城风雨近重阳 springMVC
springMVC控制器往前台传值的方法有以下几种： 1.ModelAndView 通过往ModelAndView中存放viewName：目标地址和attribute参数来实现传参： ModelAndView mv=new ModelAndView(); mv.setViewName="success
WebService存在的必要性？一炮送你回车库 webservice
做Java的经常在选择Webservice框架上徘徊很久，Axis Xfire Axis2 CXF ，他们只有一个功能，发布HTTP服务然后用XML做数据传输。是的，他们就做了两个功能，发布一个http服务让客户端或者浏览器连接，接收xml参数并发送xml结果。当在不同的平台间传输数据时，就需要一个都能解析的数据格式。但是为什么要使用xml呢？不能使json或者其他通用数据
js年份下拉框 3213213333332132 java web ee
<div id="divValue">test...</div>测试 //年份 <select id="year"></select> <script type="text/javascript"> window.onload =
简单链式调用的实现技术归来朝歌方法调用链式反应编程思想
在编程中，我们可以经常遇到这样一种场景：一个实例不断调用它自身的方法，像一条链条一样进行调用这样的调用你可能在Ajax中，在页面中添加标签： $("<p>").append($("<span>").text(list[i].name)).appendTo("#result"); 也可能在HQ
JAVA调用.net 发布的webservice 接口 darkranger webservice
/** * @Title: callInvoke * @Description: TODO(调用接口公共方法) * @param @param url 地址 * @param @param method 方法 * @param @param pama 参数 * @param @return * @param @throws BusinessException
Javascript模糊查找 | 第一章循环不能不重视。 aijuans Way
最近受我的朋友委托用js+HTML做一个像手册一样的程序，里面要有可展开的大纲，模糊查找等功能。我这个人说实在的懒，本来是不愿意的，但想起了父亲以前教我要给朋友搞好关系，再加上这也可以巩固自己的js技术，于是就开始开发这个程序，没想到却出了点小问题，我做的查找只能绝对查找。具体的js代码如下： function search(){ var arr=new Array("my
狼和羊，该怎么抉择 atongyeye 工作
狼和羊，该怎么抉择在做一个链家的小项目，只有我和另外一个同事两个人负责，各负责一部分接口，我的接口写完，并全部测联调试通过。所以工作就剩下一下细枝末节的，工作就轻松很多。每天会帮另一个同事测试一些功能点，协助他完成一些业务型不强的工作。今天早上到公司没多久，领导就在QQ上给我发信息，让我多协助同事测试，让我积极主动些，有点责任心等等，我听了这话，心里面立马凉半截，首先一个领导轻易说
读取android系统的联系人拨号百合不是茶 android sqlite数据库内容提供者系统服务的使用
联系人的姓名和号码是保存在不同的表中,不要一下子把号码查询来,我开始就是把姓名和电话同时查询出来的,导致系统非常的慢关键代码: 1, 使用javabean操作存储读取到的数据 package com.example.bean; /** * * @author Admini
ORACLE自定义异常 bijian1013 数据库自定义异常
实例： CREATE OR REPLACE PROCEDURE test_Exception ( ParameterA IN varchar2, ParameterB IN varchar2, ErrorCode OUT varchar2 --返回值,错误编码 ) AS /*以下是一些变量的定义*/ V1 NUMBER; V2 nvarc
查看端号使用情况征客丶 windows
一、查看端口在windows命令行窗口下执行： >netstat -aon|findstr "8080" 显示结果： TCP 127.0.0.1:80 0.0.0.0:0 &
【Spark二十】运行Spark Streaming的NetworkWordCount实例 bit1129 wordcount
Spark Streaming简介 NetworkWordCount代码 /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with
Struts2 与 SpringMVC的比较 BlueSkator struts2 spring mvc
1. 机制：spring mvc的入口是servlet，而struts2是filter，这样就导致了二者的机制不同。 2. 性能：spring会稍微比struts快。spring mvc是基于方法的设计，而sturts是基于类，每次发一次请求都会实例一个action，每个action都会被注入属性，而spring基于方法，粒度更细，但要小心把握像在servlet控制数据一样。spring
Hibernate在更新时，是可以不用session的update方法的(转帖） BreakingBad Hibernate update
地址：http://blog.csdn.net/plpblue/article/details/9304459 public void synDevNameWithItil() {Session session = null;Transaction tr = null;try{session = HibernateUtil.getSession();tr = session.beginTran
读《研磨设计模式》-代码笔记-观察者模式 bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; import java.util.Observable; import java.util.Observer; /** * “观
重置MySQL密码 chenhbc mysql 重置密码忘记密码
如果你也像我这么健忘，把MySQL的密码搞忘记了，经过下面几个步骤就可以重置了（以Windows为例，Linux/Unix类似）： 1、关闭MySQL服务 2、打开CMD，进入MySQL安装目录的bin目录下，以跳过权限检查的方式启动MySQL mysqld --skip-grant-tables 3、新开一个CMD窗口，进入MySQL mysql -uroot
再谈系统论，控制论和信息论 comsci 设计模式生物能源企业应用领域模型
再谈系统论，控制论和信息论偶然看
oracle moving window size与 AWR retention period关系 daizj oracle
转自： http://tomszrp.itpub.net/post/11835/494147 晚上在做11gR1的一个awrrpt报告时,顺便想调整一下AWR snapshot的保留时间,结果遇到了ORA-13541这样的错误.下面是这个问题的发生和解决过程. SQL> select * from v$version; BANNER -------------------
Python版B树 dieslrae python
话说以前的树都用java写的,最近发现python有点生疏了,于是用python写了个B树实现,B树在索引领域用得还是蛮多了,如果没记错mysql的默认索引好像就是B树... 首先是数据实体对象,很简单,只存放key,value class Entity(object): '''数据实体''' def __init__(self,key,value)
C语言冒泡排序 dcj3sjt126com 算法
代码示例： # include <stdio.h> //冒泡排序 void sort(int * a, int len) { int i, j, t; for (i=0; i<len-1; i++) { for (j=0; j<len-1-i; j++) { if (a[j] > a[j+1]) // >表示升序
自定义导航栏样式 dcj3sjt126com 自定义
-(void)setupAppAppearance { [[UILabel appearance] setFont:[UIFont fontWithName:@"FZLTHK—GBK1-0" size:20]]; [UIButton appearance].titleLabel.font =[UIFont fontWithName:@"FZLTH
11.性能优化-优化-JVM参数总结 frank1234 jvm参数性能优化
1.堆 -Xms --初始堆大小 -Xmx --最大堆大小 -Xmn --新生代大小 -Xss --线程栈大小 -XX:PermSize --永久代初始大小 -XX:MaxPermSize --永久代最大值 -XX:SurvivorRatio --新生代和suvivor比例,默认为8 -XX:TargetSurvivorRatio --survivor可使用
nginx日志分割 for linux HarborChung nginx linux 脚本
nginx日志分割 for linux 默认情况下，nginx是不分割访问日志的，久而久之，网站的日志文件将会越来越大，占用空间不说，如果有问题要查看网站的日志的话，庞大的文件也将很难打开，于是便有了下面的脚本使用方法，先将以下脚本保存为 cutlog.sh，放在/root 目录下，然后给予此脚本执行的权限复制代码代码如下: chmo
Spring4新特性——泛型限定式依赖注入 jinnianshilongnian spring spring4 泛型式依赖注入
Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API Spring4新
centOS安装GCC和G++ liuxihope centos gcc
Centos支持yum安装，安装软件一般格式为yum install .......，注意安装时要先成为root用户。按照这个思路，我想安装过程如下：安装gcc：yum install gcc 安装g++： yum install g++ 实际操作过程发现，只能有gcc安装成功，而g++安装失败，提示g++ command not found。上网查了一下，正确安装应该
第13章 Ajax进阶（上） onestopweb Ajax
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
How to determine BusinessObjects service pack and fix pack blueoxygen BO
http://bukhantsov.org/2011/08/how-to-determine-businessobjects-service-pack-and-fix-pack/ The table below is helpful. Reference BOE XI 3.x 12.0.0. y BOE XI 3.0 12.0. x. y BO
Oracle里的自增字段设置 tomcat_oracle oracle
　大家都知道吧，这很坑，尤其是用惯了mysql里的自增字段设置，结果oracle里面没有的。oh，no 　　我用的是12c版本的，它有一个新特性，可以这样设置自增序列，在创建表是，把id设置为自增序列 create table t ( id 　　　　 number generated by default as identity (start with 1 increment b
Spring Security（01）——初体验 yang_winnie spring Security
Spring Security（01）——初体验博客分类： spring Security Spring Security入门安全认证首先我们为Spring Security专门建立一个Spring的配置文件，该文件就专门用来作为Spring Security的配置

JavaScript相关笔记及案例

JavaScript

一、JavaScript简介

1 什么是JavaScript

2 JavaScript作用

二、 引用方式

1 内联方式

2 行内方式

3 外部方式

test01

三、 基本语法

1 变量

test02

2 输入和输出

3 转义字符

4 注释

5 编码规范

test03

四、 核心语法

1 数据类型

test04

2 运算符

test05

test06

3 选择结构

test07

4 循环结构

test08

5 数组

5.1 定义方式

test09

5.2 数组的常用方法

test10

5.3 二维数组

6 函数

6.1 自定义函数

test11

6.2 回调函数

test12

test13

6.3 匿名函数

6.4 箭头函数

test14

五、复合类型

1 String

1.1 定义方式

1.2 常用方法

test15

2 Date

2.1 定义方式

2.2 常用方法

test16

3 JSON

3.1 JSON简介

3.2 基本用法

3.3 JSON转换

test17

4 对象类型

4.1 对象简介

4.2 创建对象

test18

六、 DOM 操作

1 DOM简介

2 查询操作

3 访问操作

3.1 访问属性

test19

3.2 访问内容

test20

你好，世界

你好，世界

3.3 访问CSS

test21

4.添加操作

5 删除操作

test22

七、事件处理

1 简介

test23

2 绑定事件

二、引用方式

三、基本语法

四、核心语法