JS-4

1.正则表达式(RegExp)
    1)正则表达式的基本语法规则
        语法:
            创建正则表达式对象:
            var reg = new RegExp(pattern,modifiers);
            或者
            var reg = /pattern/modifiers;
        注:
            
        pattern   描述了表达式的模式/规则
        modifiers 用于指定全局匹配、区分大小写的匹配和多行匹配
        
        对应修饰符modifiers有三个选项:
        i     执行对大小写不敏感的匹配。
        g     执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
        m     执行多行匹配。
        同时在创建正则表达式对象的是也可以不写修饰符,默认即可


    2)pattern内容的分析
        
        括号:
            [abc]     查找方括号之间的任何字符。
            [^abc]     查找任何不在方括号之间的字符。
            [0-9]     查找任何从 0 至 9 的数字。
            [a-z]     查找任何从小写 a 到小写 z 的字符。
            [A-Z]     查找任何从大写 A 到大写 Z 的字符。
            [A-z]     查找任何从大写 A 到小写 z 的字符。
            (red|blue|green)     查找任何指定的选项。
        
        元字符:
            .     查找单个任意字符，除了换行和行结束符.如果要表示.这个字符,需要转义
            \w     查找单词字符。     字母 数字 _
            \W     查找非单词字符。非 字母 数字 _
            \d     查找数字。
            \D     查找非数字字符。
            \s     查找空白字符。
            \S     查找非空白字符。
            \b     匹配单词边界。
            \B     匹配非单词边界。
            \0     查找 NUL 字符。
            \n     查找换行符。
            \f     查找换页符。
            \r     查找回车符。
            \t     查找制表符。
            \v     查找垂直制表符。

        量词:
            n+         匹配任何包含至少一个 n 的字符串。
            n*         匹配任何包含零个或多个 n 的字符串。
            n?         匹配任何包含零个或一个 n 的字符串。
            n{X}     匹配包含 X 个 n 的序列的字符串。
            n{X,Y}     匹配包含 X 到 Y 个 n 的序列的字符串。
            n{X,}     匹配包含至少 X 个 n 的序列的字符串。
            n$         匹配任何结尾为 n 的字符串。
            ^n         匹配任何开头为 n 的字符串。
            ?=n     匹配任何其后紧接指定字符串 n 的字符串。
            ?!n     匹配任何其后没有紧接指定字符串 n 的字符串。
    
    3)支持正则表达式的 String 对象的方法
        使用字符串对象的相关方法按照正则表达式所描述的规则去搜索、匹配、替换、分割.

        search     检索与正则表达式相匹配的值。
        match     找到一个或多个正则表达式的匹配。
        replace     替换与正则表达式匹配的子串。
        split     把字符串分割为字符串数组。

    4)RegExp 对象方法
        使用正则表达式对象(RegExp)的相关方法来对指定字符串进行格式的验证.

        compile 编译正则表达式。
        exec     检索字符串中指定的值。返回找到的值，并确定其位置。
        test     检索字符串中指定的值。返回 true 或 false。
        
        
    5)例子
        var v = "aa1a";
        //字符串中包含数字就行
        var reg = /\d/;
        console.log(reg.test(v));

        var v = "aaa1111aa";
        //字符串中连着出现4次(或者更多)数字即可
        var reg = /\d{4}/;
        console.log(reg.test(v));

        var v = "1111";
        //^表示开头 $表示结尾
        //开头和结尾直接必须连续出现4次数字
        var reg = /^\d{4}$/;
        console.log(reg.test(v));

        
        var v = "1aaa2345";
        //开头一个非0数字,后面跟任意字符0-n个,最后4个数字结尾
        var reg = /^[1-9]{1}.*\d{4}$/;
        console.log(reg.test(v));


        var v = "aaredaa";
        //red go yes 三个单词任意匹配
        var reg = /(red|go|yes)/;
        console.log(reg.test(v));


        var v = "a1";
        //开头是一个字符 结尾是一个数字(一共俩个字符)
        var reg = /^\w\d$/;
        console.log(reg.test(v));

        var v = "aasd11111";
        //开头是字符(1-n个),结尾是个数字
        var reg = /^\w+\d$/;
        console.log(reg.test(v));
        
        var v = "aasd11111.com";
        //开头是字符(1-n个),结尾.com
        var reg = /^\w+(\.com)$/;
        console.log(reg.test(v));

        var v = "aasd  )_###11111";
        //开头是字符(1-n个)  中间随意匹配 结尾是一个数字
        var reg = /^\w+.*\d$/;
        console.log(reg.test(v));
        
        //email验证
        var v = "test@briup.com";
        //var reg = /^\w+@\w+(\.[A-z]{2,3}){1,2}$/;
        var reg = /^\w+@\w+\.\w+/;
        console.log(reg.test(v));




2.表单验证
    
    第一种方式:提交的时候验证
    <form action="" οnsubmit="return jsCheck()">
            <input type="text" name="name" /><br>
            ...
            ..
            ..
            ..
            <input type="submit" value="提交" />
    </form>

    注意:οnsubmit="return jsCheck()"表示表单提交之前先调用jsCheck()这个函数进行验证,然后jsCheck()返回true表示通过验证,则表单可以继续提交,返回false表示验证失败,表单不能提交.

    第二种方式:在填写输入框的时候或者输入框失去焦点的时候进行验证,和第一种方式验证的时间点不同,但是验证使用的函数都是一样的.
    例如使用onkeyup事件,可以在用户边输入的时候边验证

    
    注意:javascript代码也可以提交表单:
        document.forms.myForm.submit();

    

    例如:使用document拿到name="f"的页面表单并设置提交表单事件
    document.forms.f.onsubmit = function(){
        //这个函数中的this表示当前表单对象f

        //获得name="username"的输入框的值
        console.log(this.username.value);
        //获得name="password"的输入框的值
        console.log(this.password.value);
        
        //获得name="gender"的单选框(可以是多个)
        console.log(this.gender);
        //可以获得当前用户选的那个单选框的值
        console.log(this.gender.value);
        //可以设置单选框选择男(0)或者女(1)
        this.gender.value = 1;
        //也可以这样俩种方式设置某个单选框被选中
        this.gender[1].checked = "checked";
        this.gender[1].checked = true;
        //可以取消某个已经被选择的单选框 注意是取消不是选另一个
        this.gender[1].checked = false;

        //获得表单中name="like"的多选框(可以有多个)
        console.log(this.like);
        //查询每个多选框是否被选中
        console.log(this.like[0].checked);
        console.log(this.like[1].checked);
        console.log(this.like[2].checked);
        
        //可以自己设置某个多选框被选中
        this.like[2].checked = true;
        this.like[2].checked = "checked";
        //可以取消选中某一个多选框
        this.like[2].checked = false;
        
        //可以查看被选中的多选框的值
        //不能使用for-in循环 this.like集合对象中除了下标还有其他的属性
        for(var i=0;i<this.like.length;i++){
            if(this.like[i].checked){
                console.log(this.like[i].value);
            }
        }
        
        //可以给某一个多选框添加点击事件
        //每次点击之后我们可以知道用户是选中了还是取消了此多选框
        this.like[0].onclick = function(){
            console.log(this.checked);
        }
        
        //获得表单中name="city"的下拉列表
        console.log(this.city);
        //获得下拉列表中当前被选中的值
        console.log(this.city.value);
        //设置下拉列表中哪一个值被选中
        this.city.value = 2;
        
        //获得此下拉列表中所有option元素对象
        var opt = this.city.getElementsByTagName("option");
        //可以用俩种方式让某一个选项被选中
        opt[2].selected = true;
        opt[2].selected = "selected";
    
    }





3.浏览器对象模型Browser Object Model (BOM)
    BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。BOM的核心对象是window，它表示浏览器的一个实例，在浏览器中window对象有双重角色既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
    
    1)窗口大小
        innerWidth    页面视图区的宽度
          innerHeight    页面视图区的高度
          outerWidth    浏览器窗口的宽度
          outerHeight    浏览器窗口的高度
        所有主流浏览器都支持innerWidth,innerHeight,outerWidth,outerHeight 属性。注意：IE8及更早IE版本不支持这些属性。

        例如:
        console.log(window.innerWidth);
        console.log(window.innerHeight);
        console.log(window.outerWidth);
        console.log(window.outerHeight);
    2)scrren对象
        屏幕总宽度/高度:
            screen.width
            screen.height

        例如:
            console.log(window.screen.width);
            console.log(window.screen.height);

    
    3)打开/关闭窗口
          window.open()
            例如:
              window.open("http://www.baidu.com","newwindow","height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no");
            打开的新窗口高为100,宽为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏
        
            或者
            简单的使用window.open("http://www.baidu.com");即可

        window.colse();
            注意firefox浏览器中会不起作用,需要修改为以下写法:
            window.open("","_self").close();
            同时在FireFox需要设置一个浏览器参数:
            在Firefox地址栏里输入 about:config
            在配置列表中找到 dom.allow_scripts_to_close_windows
            把默认的false值修改为true即可。默认是false，是为了防止脚本乱关窗口


    4)location对象
        是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。location是个神奇的对象，既是window的对象也是document的对象。
        console.log(window.location == document.location);//true
        
        属性：
            host        返回服务器名称和端口号
            hostname    返回不带端口号的服务器名称
            href        返回当前加载页面的完整URL
            pathname    返回URL的目录和文件名
            port        返回URL中指定的端口号
            protocol    返回页面使用的协议
            search        返回URL的查询字符串。这个字符串以问号开头
        
        方法：
            assign()    传递一个url参数，打开新url，并在浏览记录中生成一条历史记录。
            replace()     参数为一个url,结果会导致浏览器位置改变，但不会在历史记录中生成新记录
            注意:有历史记录就可以回退,没有则不能回退

              reload()    重新加载当前显示的页面，参数可以为boolean类型，默认为false,表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true,强制从服务器中重新加载
        
        注意:
            以下三句话效果一样
            window.location="http://www.baidu.com";
            location.href="http://www.baidu.com"
            location.assign("http://www.baidu.com");


    5)history对象
        window.history 对象包含浏览器的历史
        例如:
        history.back()    - 与在浏览器点击后退按钮相同
        history.forward() - 与在浏览器中点击按钮向前相同
        history.go(-3);
            
    6)window的超时调用和定时调用    
        javascript是单线程语言，但是可以通过 超时值 和 间歇时间 来调度代码在特定时刻执行
        1.setTimeout();
            该方法返回一个数值ID，表示超时调用，超过指定时间后自动调用一次指定函数。这个超时调用ID是计划执行代码的唯一标识符通过它来取消超时调用。可以通过clearTimeout(ID)取消调用    

            参数：
                  1.要执行的代码
                2.以毫秒表示的时间。

            例如:
                //一秒后调用
                //只执行一次
                var id = setTimeout(function(){
                    alert("hello");
                },1000);
                console.log(id);

                //清除
                clearTimeout(id);
            
        2.setInterval();
            按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID，该ID可以用户在将来某个时刻取消间歇调用
            
            参数：
                  1.要执行的代码
                2.以毫秒表示的时间。
                  clearInterval(ID);  //取消间歇调用

            例如:
                //每隔五秒钟调用一次函数
                var id = setInterval(function(){
                    alert("hello");
                },5000);
                console.log(id);

                //清除
                clearInterval(id);



-----------------------------------------------------

特殊的css
      1) 元素的显示和可见性
          visibility:
            hidden  元素不可见，但是在文档布局中保留了它的空间。
            visible    元素可见
          display    
            none    元素不可见，在文档布局中不给它分配空间，它的各边元素会合拢，就当它不存在过。在展开和折叠轮廓的效果时，display属性很有用。
 
    2) 颜色，透明度
          opacity 透明度：0~1之间的数字
          filter: IE中表示透明度 0~100之间的数字
        常用表示透明度的方法
                  opacity: 0.75;
                  filter:alpha(opacity=75);




javascript中设置元素特殊名字的css的属性
    style 属性，该属性的值不是字符串，而是一个CSSStyleDeclaration对象，该对象代表了HTML代码中通过style指定的css属性。javascript中的css属性大多与标签中的css属性相同，但是如果css样式属性在名字中出现了连字符，该属性名的格式应该是移除连字符，将每个连字符后面紧接着的字母大写，如
        background-color =>e.backgroundColor
        其他的例子:
        e.style.fontSize = "24px";
        e.style.fontWeight = "bold";
        e.style.color = "blue";