带你学JavaScript
Posted 最高权限比特流
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了带你学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/>")
}
以上是关于带你学JavaScript的主要内容，如果未能解决你的问题，请参考以下文章
❤️ 珊姐带你学JavaScript：数组和函数 （万文建藏）❤️
Carson带你学Android：手把手带你全面学习补间动画的使用！