java学习笔记35

1、DOM邮件列表

邮件列表的全选，取消全选，删除程序如下

重点分析一下删除功能的原理：

	//删除所选邮件。
			function deleteMail(){
				
				if (!confirm("你真的要删除所选的邮件吗？")){
					return;
				} 
				
				//获取所有的mail节点
				var collMailNodes = document.getElementsByName("mail");
				
				for (var x = 0; x < collMailNodes.length; x++) {
				
					if (collMailNodes[x].checked) {
					
						var oTrNode = collMailNodes[x].parentNode.parentNode;
						oTrNode.parentNode.removeChild(oTrNode);
						x--;
					}					
				}
				
				trColor();
			}
		

由 复选框节点 遍历获得的所有的复选框节点，之后检测复选框对象的checked属性，如果是被选中的，就找复选框的父节点td，再父节点tr，之后要么直接灭九族删全部，要么再往上一层父节点到表节点，让父节点tab来删除行节点。

由于是一边遍历一边删除，所以x,collMailNodes的长度是在不断发生变化的。删完一个，剩下的元素都往前移动，角标还是从0开始，但是x又在不断的自增，所以就会出现遗漏的现象。具体如下图：

全部代码如下：

	
		
		
		
		
		
		
		
		
	
	
		
	

	

    	

        	全选
        
        

        	发件人
        
        

        	邮件名称
        
        

        	邮件附属信息
        
    
    
    

    	

        	
        
        

        	张三11
        
        

        	我是邮件11
        
        

        	我是附属信息11
        
    
    

    	

        	
        
        

        	张三22
        
        

        	我是邮件22
        
        

        	我是附属信息22
        
    
    

    	

        	
        
        

        	张三33
        
        

        	我是邮件33
        
        

        	我是附属信息33
        
    
    

    	

        	
        
        

        	张三44
        
        

        	我是邮件44
        
        

        	我是附属信息44
        
    
    

    	

        	
        
        

        	张三55
        
        

        	我是邮件55
        
        

        	我是附属信息55
        
    
    

    	

        	
        
        

        	张三66
        
        

        	我是邮件66
        
        

        	我是附属信息66
        
    
    

    	

        	
        
        

        	张三117
        
        

        	我是邮件117
        
        

        	我是附属信息17
        
    
    

    	

        	
        
        

        	张三118
        
        

        	我是邮件118
        
        

        	我是附属信息118
        
    
    

    	

        	
        
        

        	张三119
        
        

        	我是邮件119
        
        

        	我是附属信息119
        
    
    

    	

        	
        
        

        	张三1100
        
        

        	我是邮件110
        
        

        	我是附属信息110
        
    
    

    	

        	
        
        

        	张三11a
        
        

        	我是邮件11a
        
        

        	我是附属信息11a
        
    
    

    	

        	
        
        

        	张三11b
        
        

        	我是邮件11b
        
        

        	我是附属信息1b1
        
    
    

    	

        	
        
        

        	张三11c
        
        

        	我是邮件11c
        
        

        	我是附属信息11c
        
    
    

    	

        	
        
        

        	张三11d
        
        

        	我是邮件11d
        
        

        	我是附属信息11d
        
    
    

    	

        	
        
        

        	张三11e
        
        

        	我是邮件11e
        
        

        	我是附属信息11e
        
    
    

    	

        	全选
        
        

        	
            
            
            
        
    

	

2、这个是圆形点点的单选复选框，对于同一个name组的只有一个能被选中。想要二选一或者多选一，只需将这些同类型的radio都设成相同的name = "wenjuan"就ok。标签里check = “checked”就相当于默认选的  

上面的写法很麻烦，可以改成下面的写法，借助with(公共部分)

调查问卷的程序如下所示：

	
		
		
		
		
		
		
	
	
		
		
				
				
				
欢迎您参与性格测试：
				

					
第一题：
					您喜欢的水果是什么？
					

					
葡萄
					
西瓜
					
苹果
					
芒果
					
樱桃
					
				
				

				
				
				
1-3分：你的性格内向并扭曲，建议...
				
4分以上：你的性格外向并分裂，建议...
				
		
 
		
	

		
		
		

		您要参与问卷调查吗：
		是  
		否
		
		

		问卷调查内容：

		您的姓名：

		您的邮箱：
		
		

		
	

4、DOM示例下拉菜单-选择颜色

	
		
		
		
		
	
	
		
		
		
		

		

		

		

			需要显示效果的文字

			需要显示效果的文字

			需要显示效果的文字

			需要显示效果的文字

		
		
		

		
		
		
		
			选择颜色
			红色
			绿色
			蓝色
		
		
			选择颜色
			
			绿色
			蓝色
		
	

效果如下所示：

5、DOM之下拉菜单-选择城市

当第一个下拉框省会确定后，第二个下拉框城市里面该有的内容也就确定了。第一个下拉框里面省会改变之后，第二个下拉框里的内容也要相应改变。这就要求城市下拉框中要删除之前省会对应的城市。删除的方法有2种

			
		删除方法1：		//将子菜单中的内容清空一下。
//				for(var x=0;x
 
  
 
  
 
  
 
  
 删除方法1这里有个经典问题就是for循环里面x<长度，但是里面的又在不断的删除，导致长度在变，这个问题之前也说过，之前是x++后还要x--，所以这里干脆就不让x++了，也就是如下所示 
  
for(var x=0;x
 
  
完整的程序如下所示：
 
  


	
		
		
		
	
	
		
		
		
		
			选择省市
			北京
			山东
			辽宁
			河北
		
		
		
			选择城市
		
		
	

 
  
 效果图如下： 
  
 
  

 
  
7、onfocus光标在那个文本框闪动，onblur就是光标离开那个文本框（点了别的文本框），两个都是触发机制，和onclick点击触发的意思是一样的。
 
  
程序如下
 
  
8、正则表达式
 
  
先生成一个正则对象（规则），在将要检验的东西，用match函数匹配。
 
  
java中match返回的是ture或者false,但是javascript中match返回的是匹配结果（以数组的形式），比较麻烦。
 
  
可以用test函数，它返回的是boolean类型。和java中的效果类似 。
 
  

 
  
正则这样写，现代了头尾之间有4个连续的字母。
 
  
正则表达式创建有2种方式，如下图，稍微有些区别
 
  

 
  

 
  
由于第一种方式里面是双引号"..."，里面是字符串，而反斜杠在双引号里面是一个单独的字符，想让它和d结合表示特殊含义，就要先对反斜杠转义一下表示一个特殊含义，“转义反斜线”，之后再和d结合才表示0-9
 
  
第二种方式就不需要这么复杂。
 
  
9、表单校验和表单提交的两种方式
 
  
,submit的默认特点就是只要你一点，就会把submit所在的这个form表单里的数据通通打包提交发送。但是默认不校验，填进去的数据对不对，它都直接他都直接提交了，这样不靠谱。所以要在
标签里加上校验准则函数，对提交的数据正确与否进行校验，再决定是否提交 。
 
  
表单提交有2种方式：
 
  
一种是在表单内部用submit的方式来提交。另一种是在表单外面自定义一个button按钮或者超链接，点击后触发函数，在函数里面获取表单节点对象，并利用表单对象自带的提交方法来提交数据。
 
  
 
  
		
			
			用户名称：
			
			

			
			输入密码：
			
			

			
			确定密码：
			
			

			
			邮件地址：
			
			

			
			
		
注意第一句 
  
 的onsubmit = "return checkForm()"一定要有return，就算你的checkForm（）函数里面最后一句已经是return true。但是这里需要的是onsubmit = return true，而不是onsubmit = true,所以还是要再返回一次。
 
  
邮件校验，还是要涉及到邮件的正则校验。
//校验邮件
 
function checkMail(){
 
var reg = /^\w+@\w+(\.\w+)+$/i;
 
return check("mail",reg,"mailspan","邮件地址正确","邮件地址错误");
 
} 
var reg = /^\w+@\w+(\.\w+)+$/i;其中(\w+)是一个或多个,(@),(\.)转义为普通点，否则点是任意字符的意思。而（\.\w+）+是满足.com.cn这种一个或多个的情况。
 
  
每个输入框都可以有它自己的校验，但是有个问题就是如下图所示，输入密码先写成1212，确认密码也写成1212，判断两次密码一致后，再把第一个的1212改成1213，校验界面仍显示正确，所以在点击提交时需要重新调用各个输入文本框的校验方法与一下，都对了，才提交。
 
  

 
  
点击提交后
 
  

 
  
完整程序如下所示：
 
  


	
		
		
	
	
		
		
		
		
		
		
		
			
			用户名称：
			
			

			
			输入密码：
			
			

			
			确定密码：
			
			

			
			邮件地址：
			
			

			
			
		
		

		
		
		
	

 
  
 
  
 
  
 
  
这里吧各个校验函数统一成一个函数，只需传入要校验的对象和政治表达式，正确显示什么信息，错误显示什么信息，就可以实现不同的校验功能，实现了代码的复用。
 
  
 
  
 
  
 
   
 
    
 
     
 
      
//校验邮件
 
     
 
     
 
      
 
 
      
function checkMail(){
 
     
 
     
 
      
 
 
      
var reg = /^\w+@\w+(\.\w+)+$/i;
 
     
 
     
 
      
 
 
      
return check("mail",reg,"mailspan","邮件地址正确","邮件地址错误");
 
     
 
     
 
      
 
 
      
}