正则表达式和辅助特效

百合不是茶

浏览: 355949 次

最近访客更多访客>>

dd533

01nsglj

yhz61010

petehero

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript基础

JavaScript 正则表达式数组下拉效果联动效果

一: 正则表达式

1,:普通形式和构造函数形式;

1,1普通形式; 语法

 var reg = / 表达式 / 附加参数

表达:需要匹配的

附加参数:用来扩展表达式的含义

    g:代表进行全局匹配
     i:代表不区分大小写
    m:代表可以进行多行匹配

1,2构造函数形式

var reg = new RegExp("表达式","附加参数");

普通参数必须是一个常量的,构造参数可以是一个变量的

2,表达式模式

2,1简单模式:普通字符组成的表达模式

  var reg = /changsha/;
   var reg  =/chang/;

简单模式只能进行具体的匹配

2,2复合模式:含有通配符来匹配

 var reg =/^ \w + $/

2,3 RegExp对象

格式:正则表达式对象实例.test();

 exec() 正则匹配
 test() 检索指定值

2,4 String对象的方法

match  匹配
search 检索
replace 替换
split   分割

2,5 正则表达式常用的匹配符号

常用符号

/../代表开始和结束
^ 匹配开始
$匹配结束
\s任何空白字符
\S任何非空白字符
\d数字
\D非数字
\w 数字,字母,下划线
\W 非 数字,字母,下划线
. 换行符之外的任意字符

重复符号

{n} 出现n次
{n,}出现n次以上
{n,m}出现n次到m次之间
+   一次或多次
*  0次或多次
?  0次或一次

二: 辅助效

1, 下拉款实现级联效果

javaScript也拥有面向对象语言的,标签也可以是一个对象

下拉框对象

select对象的常用事件,方法和属性

事件;

onchange  当改变选项时调用

方法;

add()向下拉框添加一个属性

属性;

options[] 返回下拉框中的选项
selectIndex 设置被选下拉框的索引
length  设置下拉框中选项的数组

options[]集合返回的是select的option中的一个数组

重点:

options.length=0,select对象中所有的选项都会被清除

selectIndex和lengt属性的应用

<html>
<head>
<script type="text/JavaScript">
   function fun(){
   var index = document.getElementById("fruit").selectedIndex;
   var len = document.getElementById("fruit").length;
   //alert(index);
   var show = document.getElementById("iner");
   show.innerHTML="被选中的索引:"+index+"<br/>下拉处的索引:"+len;
   }

</script>
</head>

<body>
<form action="" Method="post">
  <select id="fruit" onchange="fun()">
  <option  value="apple">苹果</option>
  <option  value="orange">橘子</option>
  <option  value="bananer">香蕉</option>
  <option  value="pineapple">菠萝</option>
  <option  value="peach">挑</option>
  </select>
  <div id="iner"></div>
</form>

</body>
</html>

效果;

add()方法:在select中添加一个option标签

例子:使用onchange判断省份,再创建城市

关键代码;

<form action="" Method="post">
  <select id="SelPro" onchange="fun()">
    <option>--选择省份--</option>
  <option  value="湖北省">湖北省</option>
  <option  value="湖南省">湖南省</option>
  </select>
  
  <select id="SelCity">
  <option>--选择城市--</option>
  </select>
</form>

js的add方法添加城市

<script type="text/JavaScript">
   function fun(){
   var SelPro = document.getElementById("SelPro").value;
   //获取省份的值
   var city = document.getElementById("SelCity");
   city.options.length=0;//清除SelCity的选中记录
   switch(SelPro){
     case "湖北省":
	   city.add(new Option("武汉","武汉"),null);
		city.add(new Option("荆州","荆州"),null);
		city.add(new Option("十堰","十堰"),null);
		break;
	
	case "湖北省":
	   city.add(new option("长沙","长沙"),null);
	   city.add(new option("吉首","吉首"),null);
	   city.add(new option("湘潭","湘潭"),null);
	   break;
   }
 }

</script>

运行效果;

三: 数组; js数组基础;

四: 数组实现省级级联效果

a,使用for循环遍历数组

   var array = new Array();
//JavaScript的遍历方式与Oracle的遍历方式相似

 for(var i in array){
//输出数组
  alert(i);
}

b,省市级联效果的思路

      1),在html中创建两个下拉框,选中省的时候会对应市的下拉框,使用onchange事件

     2)创建数组表示省份和城市 cityList

     3),在fun()函数中获得省份的名称,然后在数组中取出相应的城市添加到下拉框中,并且将options.length=0;

    4),页面加载时要将省份名称和城市名称添加到下拉框中

代码实现;

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=gbk"/>
<script type="text/JavaScript">
   var cityList= new Array();//使用数组来保存省份和城市
   cityList['湖南省'] = ['长沙','湘潭','吉首'];
   cityList['湖北省'] = ['武汉','荆州','十堰'];
   
   function fun(){
    var province = document.getElementById("SelPro").value;
   //获取省份的值
   var city = document.getElementById("SelCity");
   city.options.length=0;//清除SelCity的选中记录
  // for(var str in cityList){
   //alert(str);
   //}
   //获得城市
   for(var i in cityList){
         if( i == province){
		    for(var j in cityList[i]){
			 city.add(new Option(cityList[i][j]),null);
			}
		 } 
		 }
 }
 //页面加载时获得省份
 function allcity(){
 var province = document.getElementById("SelPro");
 for(var i in cityList){
	province.add(new Option(i),null);
	}
 }
 window.onload=allcity;
</script>
</head>
<body>
<form action="" Method="post">
  <select id="SelPro" onchange="fun()">
    <option>选择省份--</option>
  </select>
  <select id="SelCity" style="width:100px">
  <option>--选择城市--</option>
  </select>
</form>

</body>

</html>

运行效果;