总结

80 阅读4分钟

正则表达式

[a-zA-Z]表示大小写的26个英文字母 都能匹配
[0-9]查找任何从0到9的数字
[a-zA-Z0-9]表示26个大小写英文字母和数字都能匹配
[]只要有一个匹配都返回true
[abc]查找括号内的任何一个字符
^[]表示以什么开头
[]$表示以什么结尾
+表示匹配前面字符串一次或者多次
写在括号里的^叫除了
{n,}至少匹配n次
{n,m}至少匹配n次且最多匹配m次
匹配前面的子表达式0次或多次[a-z]*
匹配前面的子表达式0次或一次[a-z]?
正则有个特性只要匹配了一次都返回true,所以要加限定符^$
\w匹配数字字母下划线
\W匹配非数字字母下划线
\d匹配数字
\D匹配非数字
\s匹配空白字符
\S匹配非空白字符
\n匹配换行符这里只匹配\n不匹配\r

闭包

            function f1(){
                var num=1;
            }
            alert(num); 
        错误
        原因:在函数外部无法读取函数内的局部变量

    一个函数就可以理解为一个闭包
       function f1() {
            alert(1);
        } 
            闭包的用途
可以读取函数内部的变量
让这些变量的值始终保持在内存中
        function fn1(){
            let a = 1
            /* 代码中的内部函数(fn2)就是闭包
            /* 可以把闭包简单理解成"定义在一个函数内部的函数" */
            /* 是将函数内部和函数外部连接起来的一座桥梁 */
            function fn2(){
                /* 闭包就是能够读取其他函数内部变量的函数 */
                document.write(a);
            }
            return fn2;
        }
        /* console.log( fn1() ) */
        /* 通过这种方式 就可以得到fn1的局部变量a的值 */
        fn1()()
        /* function fn(){}
        console.log(fn); */

function fn(){
        //     return '函数通过return将值返回调用它的地方'
        //     /* 使用 return 时,函数会停止执行,并返回指定的值 */
        //     console.log(2);
        // }
        // let a = fn();
        // console.log(a);

        /* 匿名函数自执行 */
        // (function (){
        //     /* 局部作用域 防止内部的变量被外部污染 */
        //     let a = '123'

        // })()
        // console.log(a);
        let str = (function(){
            /* 局部的a */
            /* var a = '123'
            console.log(a); */

            let num1 = parseInt( prompt('输入第一个数') )
            let num2 = parseInt( prompt('输入第二个数') )
            if(num1>num2){
                return '第一个数大'
            }else{
                return '第二个数大'
            }
        })();
        alert(str);

          /* 全局的a */
        /* var a = 456;
        console.log(a); */
        

定时器

        /* document.getElementById('guangao').style.display = 'block' */
        // setTimeout(function(){
        //     document.getElementById('guangao').style.display = 'none' 
        // },3000)

        /* 过个一段时间去做一件事 */
        /* 定时器 */
        /* 定时器会返回一个唯一的id */
        // let id = setInterval(function(){
        //     console.log('我爱js<br>');
        //     console.log(id);
        // },1000)

        // /* 根据定时器返回的唯一的id 来清除定时器 */
        // function clearfn(){
        //     clearInterval(id)
        // }


        /* 过一秒钟 在控制台上打印出 一个数字 比如1
        再过一秒钟 打印出2 ....
        点击清除定时器 终止打印 */


        // let i = 0;

        // let id = setInterval(function () {
        //     i++;
        //     console.log(i);
        // }, 1000)

        // function clearfn() {
        //     clearInterval(id)
        // }

        /*  setTimeout 和 setInterval的区别是
        setTimeout只执行一次 */
        /* 也会产生一个唯一的id标识 */
        /* let id = setTimeout(function (){
            console.log('我说冷笑话');
        },1000) */

缓存

        但是 把tab页 或者叫 会话 关闭之后,缓存的值就不存在了 */
        // function fn1(){
        //     /* setItem设置 存储 */
        //     /* sessionStorage.setItem('name','zhangsan') */
        //     sessionStorage.name = 'zhangsan';
        // }
        // function fn2(){
        //     /* getItem获取 */
        //     // let v = sessionStorage.getItem('name');
        //     // document.write(v);
        //     document.write(sessionStorage.name);
        // }

        /* 设置和取值 使用两种方式都试一下 */
        /* 点击按钮 设置一个学生信息  学号 stuNo  语文成绩 chinese
        存到sessionStorage缓存中,再点击按钮 可以在页面显示出学生的学号 
        和语文成绩 ,最后把tab关闭,再次打开页面看值之后还存在 */

        // function fn1(){
        //     // sessionStorage.stuNo = '1908'
        //     // sessionStorage.chinese = '90'
        //     sessionStorage.setItem('stuNo','1099')
        //     sessionStorage.setItem('chinese','80')
        // }
        // function fn2(){
        //     // document.write(sessionStorage.stuNo);
        //     // document.write(sessionStorage.chinese);
        //     document.write(sessionStorage.getItem('stuNo'));
        //     document.write(sessionStorage.getItem('chinese'));
        // }

        /* localStorage会一致存储在本地,会话或者tab页关闭也不会消失  */
        /* localStorage是和地址有关系的,地址改变了,localStorage里面的值就不存在了
        前面地址没有发生改变的话,localStorage依然存在 ,虽然页面改变了*/
        function fn1(){
           /* localStorage.setItem('car','bmw')   */
           localStorage.car = 'bc'
        }
        function fn2(){
            /* document.write(localStorage.getItem('car'));  */
            document.write(localStorage.car);
        }

bom

提供了独立于内容与浏览器窗口进行交互的对象
        */
        /* window.prompt('输入一个数') */

        /* console.log(window);
        window.alert(1) */
        /*  确认框	window.confirm()	用于验证是否接受用户操作 */
        /* let flag = confirm('你是最强王者吗');
        alert(flag) */
        /* 你是一个好学生吗?
        如果是 就alert出 继续加油
        如果不是 就alert出 我还要努力 */
        //   if( confirm('你是一个好学生吗?') ){
        //       alert('继续加油')
        //   }else{
        //     alert('我还要努力')
        //   }
        /* prompt的第二个参数是默认值 */
        // let v = prompt('今天你快乐吗','快乐')
        // alert(v)
        /* 这个是地址的参数信息 */
        // console.log(window.location.search);
        // /* 这是地址路径 */
        // console.log(window.location.href)
        // /* 这个是地址的端口 */
        // console.log(window.location.port)

        /* 后退 */
        function back() {
            /* window.history.back(); */
            /* 两者的作用一致 都是后退 */
            window.history.go(-1);
        }
        /* 前进 */
        function forward(){
            /* window.history.forward(); */
            window.history.go(1)
        }
        /* 刷新 */
        function go(){
            /* go里面是没有任何参数的 */
           /*  window.history.go(); */
            /* 两者功能相等 都是刷新 */
            /* window.history.go(0); */
            /* 这个也表示刷新 */
            location.reload();
        }

克隆和删除节点

            let body = document.getElementsByTagName('body')[0];
            let div1 = document.getElementsByClassName('div-class')[0];
            /* 父元素.removeChild(要被删除的元素) */
            body.removeChild(div1)
        }
        function cloneNd(){
            let body = document.getElementsByTagName('body')[0];
            // let div1 = document.createElement('div')
            // let text = document.createTextNode('我是div1')
            // div1.appendChild(text);
            // body.appendChild(div1);
            /* cloneNode(deep)	 复制某个指定的节点 */
            let div1 = document.getElementsByClassName('div-class')[0];
            console.log(div1);
            /* 获取自己的元素 再插入到body中是可以的,
            但是插入的时候发现 都一个元素节点

            两种插入的实现方式 第一种创建新的节点去插入 
            第二种 clone出一个新的节点去插入*/

            /* cloneNode如果里面不传true 表示传入自身节点(不包括子节点)
            传true 表示 既克隆自身节点 也克隆了自身的子节点 */
            let divClone = div1.cloneNode(true);
            // console.log(divClone);
            let text1 = document.createTextNode('=')
            divClone.appendChild(text1)
            body.insertBefore(divClone,div1)
            // body.appendChild(divClone);
        }