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中基本一致

方式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/>")

}