zoukankan      html  css  js  c++  java
  • JavaScript学习总结(八)

    这一节结束,我们的JavaScript学习总结系列文章第一阶段就要结束了,今后会适当的补充一些高级的内容,敬请期待。
    好了,废话不说进入这一节的学习。

    联动框

    联动框,实在是太常见了。比如淘宝,我们选择地址的时候,选择了省份,淘宝就会自动列出来城市乡道的信息,这一小节我们要做的就是这个。

    城市联动框

    <head>
    <meta charset="utf-8">
    <title>联动框</title>
    </head>
    <script type="text/javascript">
        function showCity(){
            //维护一个二维数组,选择河北以及这几个城市是有原因滴。。。广西不太了解,瞎写的。。。
            var citys = [[],["承德","廊坊","邯郸"],["广州","佛山","中山"],["a","b","c"],["海淀","朝阳","顺义"]];
            //获取省份对应的节点
            var provinceNode = document.getElementById("province");
            //alert(provinceNode.selectedIndex);
    
            //获取对应的城市
            var cityDatas = citys[provinceNode.selectedIndex];
    
            //找到city节点
            var cityNode = document.getElementById("city");
    
            //先清空city中的所有option,删除的时候要注意,不能使用直接遍历的方式删除,
            //可能会导致元素删不完全,我们可以每次只删除第一个元素,还有一种是直接设置options的个数即可,这种不做介绍
            var children = cityNode.childNodes;
            for(var i = 0; i<children.length ; ){
                cityNode.removeChild(children[i]);
            }
    
            //向select添加元素即可
            for(var i=0;i<cityDatas.length;i++){
                var optionNode = document.createElement("option");
                optionNode.innerHTML = cityDatas[i];
                cityNode.appendChild(optionNode);
            }
    
    
    
        }
    </script>
    <body>
        省份<select onChange="showCity()" id="province">
            <option>省份</option>
            <option>河北</option>
            <option>广东</option>
            <option>广西</option>
            <option>北京</option>
        </select>
        城市<select id="city">
            <option>城市</option>
        </select>
    </body>

    操作元素的CSS样式

    JavaScript除了能够操作标签元素之外,同样能够操作元素的CSS样式,以达到改变元素样式的作用。
    下面我们的这个例子大家应该十分的熟悉,那就是验证码的生成。我们生成一个验证码,以达到操作验证码样式的作用。

    <script type="text/javascript">
        function createCode(){
            //验证码数据
            var datas = ["5","好","人","德","和","B","@","是","静","你"];
            //验证码字符串,产生索引值
            var code = "";
            for(var i=0;i<4;i++){
                var index = Math.floor(Math.random()*datas.length);
                //得到字符串
                code += datas[index];
            }
            var codeNode = document.getElementById("code");
            codeNode.innerHTML = code;
            //CSS样式的操作就是通过style实现的
            codeNode.style.fontSize ="24px";
            codeNode.style.color = "yellow";
            codeNode.style.backgroundColor="red";
            codeNode.style.textDecoration = "line-through";
        }
    
        function ready(){
            createCode();
        }
    </script>
    
    <body onLoad="ready()">
        <span id="code"></span><a href="#" onClick="createCode()">看不清,换一个</a>
    </body>

    这就是一个验证码的简单实现方式,同时我们也他弄过了style属性来设置了CSS样式。

    正则表达式

    同样的,正则表达式同样也是一个对象,而创建正则表达式的方式共有两种。

    方式1:
        /正则表达式/模式
        //java中的正则表达式是写在“”中的,不过js的正则用法和java中基本一致
    
    方式2new RegExp("正则表达式",模式);

    正则表达式的常用方法:

    test()  使用正则对象去匹配字符串  如果匹配成功返回ture,否则返回false
    exec()  根据正则表达式去查找字符串符合规则的内容

    注意,JavaScript中的正则表达式十分的恶心,在正则表达式中没有边界匹配器的情况下,字符串只要能匹配到正则中的一部分,test就会返回true,所以加入边界匹配器是十分重要的 (^开始字符——$结束字符)。
    一个简单的test()例子:

    var str = "helloworld12345";
    var reg = /^[a-z0-9]+$/;
    
    alert("匹配吗?"+reg.test(str));//true

    那么什么是模式呢?模式可以理解为搜索的条件,加在模式位置就可以了。

    g (全文查找出现的所有 pattern)   如果不加全文搜索模式,那么每次找到所要的内容,就会返回字符串开头重新找,然后电脑就炸了。
    i (忽略大小写)

    下面是一个exec()的例子:

    //查找出三个字符组成的单词。
    var str  ="hao hao xue xi tian tain xiang shang;
    var reg = /[a-z]{3}/gi;
    var line ="";
    while((line = reg.exec(str))!=null){
        document.write(line+"<br/>")
    }
  • 相关阅读:
    java复习计划
    超过16位的字符串装16进制
    《将博客搬至CSDN》
    android设置中文字体样式
    布局文件View和ViewGroup
    创建线程的两种方法,继承Thread,继承Runnable
    本地文件的copy复制
    字节流和字符流完成URL下载,并存入本地
    文本过滤器的用法,FileFilter()和FilenameFilter()
    JavaSE笔记
  • 原文地址:https://www.cnblogs.com/roobtyan/p/9576719.html
Copyright © 2011-2022 走看看