JavaScript学习总结（八）

roobtyan

发布于 2019-02-21 15:46:28

5880

发布于 2019-02-21 15:46:28

文章被收录于专栏：最高权限比特流最高权限比特流

这一节结束，我们的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中基本一致

方式2：
    new 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 = /\b[a-z]{3}\b/gi;
var line ="";
while((line = reg.exec(str))!=null){
    document.write(line+"<br/>")
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018年02月28日，如有侵权请联系 cloudcommunity@tencent.com 删除

正则表达式