JavaScript之------综合应用

DHTML技术使用的基本思路：
1. 用标签封装数据---html范畴
2. 定义样式---css范畴
3. 明确事件源、事件和要处理的节点---dom范畴
4. 明确具体的操作方式，其实就是事件的处理内容(过程)---js范畴

一、列表菜单

1、实现功能：点击菜单，显示菜单下的内容，再次点击，隐藏内容(允许和不允许同时打开多个菜单项)

  
    
     
	 
	 
	 
  
  
  
	

		

			

				文件菜单
				

					
菜单项一
					
菜单项二
					
菜单项三
					
菜单项四
				
		    
		
		

			

				编辑菜单
				

					
菜单项一
					
菜单项二
					
菜单项三
					
菜单项四
				
		    
		
		

			

				调试菜单
				

					
菜单项一
					
菜单项二
					
菜单项三
					
菜单项四
				
		    
		
	
	
  
  

2、实现功能：鼠标放在菜单条上时，显示菜单块，离开菜单条和菜单块时，隐藏菜单块，且鼠标放的行有颜色变化

	

		

			城院新闻
			

				
校园新闻内容摘要
				
校园新闻内容摘要
				
校园新闻内容摘要
				
校园新闻内容摘要
			
		
		

			大学新闻
			

				
大学新闻内容摘要
				
大学新闻内容摘要
				
大学新闻内容摘要
				
大学新闻内容摘要
			
		
		

			社会新闻
			

				
社会新闻内容摘要
				
社会新闻内容摘要
				
社会新闻内容摘要
				
社会新闻内容摘要
			
		
		

			就业新闻
			

				
就业新闻内容摘要
				
就业新闻内容摘要
				
就业新闻内容摘要
				
就业新闻内容摘要
			
		
		
	
	

二、快捷设置文本字体

实现功能：将文字设置为超链接，用来设置文本的字体

1、通过获取文本的节点，单独设置样式中的字体和颜色

2、通过获取文本的节点，设置此节点的className，与导进的css样式中的通过className方式设置的样式对应起来，从而实现对文本的字体设置

3、写超链接时href=""若为空，默认调本地文件地址，即弹出文件夹，若写成：href=“javascript:void(0)”则不会开新窗口，停在原处，若有其他操作也不会干扰他们进行；还有一种href=“#”不建议使用，会在地址后加上"#"号

  
    
     
	 
	 
	 
	 
	 
  
  
  
  	 大字体
  	  中字体
  	 小字体
  	

	风格1
	风格2
	

	
	

       5月31日下午14：30，副校长在电信楼视频会议室，为学生处、团委、计划财务处、信息科学与工程学院和体育学院全体师生党员上了一堂题为“讲政治，有信念，做合格党员”的党课。
何振阐述了“讲政治，有信念”的重要性，并讲述了如何才能把握“讲政治，有信念”。他认为，党员应当从把握“讲政治，有信念”的深刻内涵、核心要义和方法路径这三个方面入手。他指出，践行“讲政治，有信念”，必须将其与高校管理、教学、科研相结合，运用到实践当中去，“办人民满意的大学”，并结合学校具体情况进行了深入的分析。

（信息科学与工程学院）
    

  
  

css样式：1.css

.max{
	color:#808080;
	font-size:28px;
	background-color:#9ce9b4;
}
.norm{
		color:#000000;
	font-size:20px;
	/*background-color:#cdd8d0;*/
}
.min{
		color:#ff0000;
	font-size:16px;
	background-color:#f9fac2;
}

css样式：2.css

.max{
	color:#808080;
	font-size:28px;
	background-image:url(img/back1.jpg);
}
.norm{
		color:#000000;
	font-size:20px;
	background-image:url(img/back2.jpg);
}
.min{
	color:#ff0000;
	font-size:16px;
	background-image:url(img/back3.jpg);
}

三、对表格的一些操作（创建，删除，设置颜色，排序等）

1、创建表格

1）通过DOM树模型，一层一层的建立表格 ------ 最底层的创建方式，费劲，但功能很强

2）利用table中的现有的功能实现的

注：

1、表格的,

标签和标签中间，其实还隐藏着一个标签----表格体，下面才是

2、如果

和之间有空格或换行(空格和换行看成文本节点)，则table的第一个孩子节点为文本节点，nodeName:"#text"第二个是tbody

3、

和#text节点是兄弟关系

只要有空白符出现，皆算一个节点

  
    
     
	 
	 
	 
  
  
  
  	  
  	  
	  



	  
	    行数:   
	   列数:
  	  
	  



	 
	 
	 
删除前面由用户指定行列号方式创建的表格
 

	    行号:   
	  
	    列号:
  	  
	  

	  
	  

	  
  
  

效果：

3、设置颜色和排序

1）颜色：通过奇偶行号，设置不同的两种颜色，且鼠标放上后变为第三种颜色，离开后恢复原来颜色

2）排序：通过点击表格中的年龄项，表格中的内容通过年龄的大小，进行排序，且年龄项做出相应的变化

姓名	年龄	地址
张三	22	湖南长沙
李四	33	湖南长沙
王五	21	湖南长沙
Jack	20	湖南长沙
Rose	43	湖南长沙
Jack	53	湖南长沙
Rose	35	湖南长沙
Jack	13	湖南长沙
Rose	30	湖南长沙

四、选择框的应用（类似如邮件管理）

实现功能：类似如邮箱中对邮件的管理：

选择邮件，删除邮件，全选，反选，取消全选等

  
    
     
	 
	 
  
  
  
  	
邮件列表
	

		

			
全选
			
发件人
  
邮件标题
 
时间
		
		

			

			
张三
  
邮件标题11
 
2016年6月16日
		
		

			

			
李四
  
邮件标题22
 
2016年6月15日
		
		

			

			
张四
  
邮件标题33
 
2016年6月14日
		
		

			

			
Jack
  
邮件标题44
 
2016年6月18日
		
		

			

			
Rose
  
邮件标题55
 
2016年6月25日
		
		

			

			
张六
  
邮件标题66
 
2016年6月16日
		
		

			
全选
			
 
			
			 
			  
			  
			  
			  
			
		
		
	
	  
  
  

五、下拉框的应用（设置字体颜色、两个下拉框的对应）

引例：

	
		
     	
		
		
	
	
		

			Do you want to take part in the questionnaire research?

			yes
			no

		
		

			The content of the questionnaire.

			name: 

			telephone: 
		
		
		

		
Welcome to character test
		
Topic one
		Which fruit below do you like best.
		

			
Grape
			
Watermelon
			
Apple
			
Mango
			
Cherry
		
		

			
			
1 to 3 scores: you are introversion
			
more than 4 scores: you are outgoing
		
		
	

1、设置字体颜色

	
		
     	
		
		
	
	
		

		

		

		

			显示效果文字1

			显示效果文字2

			显示效果文字3

			显示效果文字4

		
		

		
			--请选择颜色--
			红色
			绿色
			蓝色
		
		

		
			--请选择颜色--
			
			
			
		
	

结果：

2、两个下拉框之间的对应

	
		
     	
		
	
	
		
			select province
			北京
	  		湖南
	  		浙江
	  		江西
		
		
			--select city--
		
	

结果：

3、文件添加和删除

	
		
     	
		
		
	
	
		

			

				
addFile
			
			
		
	

六、正则表达式的应用（用户注册）

通过正则表达式实现用户注册页面

1、正则表达式定义法1

var reg = /^[0-9]{6}$/; //必须是6个数字，而且必须是6个。多了或少了都不行。

2、正则表达式定义法2

var reg = new RegExp("^[0-9]{6}$"); 

3、细节
var reg = new RegExp("[a-z]{4}","i");//带参数，只要包含连续4个字母就行，忽略大小写

var reg = new RegExp("^[a-z]{4}","i");//带参数，必须以连续4个字母开始，忽略大小写

var reg = new RegExp("^[a-z]{4}$","i");//带参数，有且只有连续4个字母，忽略大小写

var reg = / ^\d{6}$ /;  //特殊符号不需要转义，外面也不用加引号

var reg = /^[\d\w]{6,9}$/;  //只包含6到9个数字或字符，这里不需要转义

3、表单的提交

例：(手动提交，不依赖于form中的submit)

4、实例：

  
    
     
	 
  
  
  
  	

		用户名:    
		
		

		输入密码:
		
		

		确认密码:
		
		

		邮件地址:
		
		

		
  	
	
  
  

结果：