总结常用的 JS 功能

最新推荐文章于 2015-07-03 10:39:26 发布

钟政123

最新推荐文章于 2015-07-03 10:39:26 发布

阅读量1k

点赞数

分类专栏： eip中的学习点滴

本文链接：https://blog.csdn.net/aazhongzheng/article/details/42917263

版权

eip中的学习点滴专栏收录该内容

9 篇文章 0 订阅

订阅专栏

经过几个项目，发现js特效会经常用到。趁着代码还在测试，这一点点的空闲时间，把几个常用js效果写下来跟大家分享，也方便日后自己用到的话，查询。

基本的效果有 1）提交表单（异步/同步）

2)点击隐藏

3）改变样式

1、替换---》将原有字符替换成别的

2、清空

3、修改

4、添加属性

5、页面跳转（重定向/页面局部刷新）

4）表单验证

提交表单

同步提交表单

虽然有直接input 标签提交表单。但有时前台设计是，给了个

<a>标签要改样式，有点麻烦直接用它的原有样式提交

//提交的表单
  function woSubmit(){	
	  show();
	  $("#test").submit();
  		
  }

直接引用jquery的表单提交是最简单的做法。test 是form表单ID

异步表单提交

//异步提交的表单
function sss(){	
	jQuery.ajax({
		url: "",//url
		data: $('#myForm').serialize(),//myForm是表单ID
		type: "POST",
		beforeSend: function()
		{	
		//在异步提交前要做的操作
					
		},
	 
		success: function(t)//t是从后台传过来的参数。可以没有
		{					
			//在异步提交成功后要做的操作			
		}
		});
		
}

这是利用jquery的异步表单提交.至于其他get、post方法比较中肯。就不细说了。

js表单样式的修改

隐藏表单是常用的功能，用起来也很简单。就以jquery为例

function tip(v){
	
	if(v>28){
		$('#tipid').css("display","");
	}else{
		$('#tipid').css("display","none");
	}
}

修改css样式就行。

重置按钮的样式不是你自己想要，就得写js。

//重置，清空
function Rest(){
	$("#normKey").val("");
	$("#warnValue").val('');
}

只要拿到id值，这个功能原理很简单，把该值设置为空“”；

修改直接用上面的代码，只要在val（）内放入你想要的值就行。

页面跳转，用

window.location.href="url"; 跳转

</pre><pre name="code" class="javascript">window.location.reload(); 刷新

表单数据替换

//将英文的指标key，转换成中文。
	$('[id=change]').each(function(i){ 
		//n=i; 
		var i=$(this).text();
		var t = "";
		if(i.trim){
			t=i.trim();		
		}else{
			t = i;
		}
	
		switch (t)
        {
            case 'receiptQuantity' :
            	$(this).text("收件量");
                break;
            case 'receivesIncome' :
                $(this).text("收件收入");
                break;
            case 'profits' :
                $(this).text("利润");          
                break;    
            case 'employeeSatisfaction' :
                $(this).text("员工满意度");
                break; 
            case 'customerSatisfaction':
                $(this).text("客户满意度");
                break;
            case 'complaintsService':
                $(this).text("收件服务投诉率");
                break;
            case 'damageRate':
                $(this).text("损坏率");
                break;
            case 'lossRate':
                $(this).text("遗失率");
                break;    
            case 'rushRate':
                $(this).text("催件率");
                break;     
            default: break;  
        }
		
		
		});

表单校验

在用户提交前，进行校验。目前用到的是是否为空。直接用id获取值，看这个值是否为空

输入校验数字，

<html><head><meta http-equiv="content-Type" content="text/html;charset=gb2312"><title>js 只能输入数字和小数点</title>
<script language="JavaScript" type="text/javascript">

function clearNoNum(obj){   obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符  

 obj.value = obj.value.replace(/^\./g,"");  //验证第一个字符是数字而不是. 

  obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的.   

obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");

}

</script>
</head><body>只能输入数字和小数点的文本框：<input name="input1" οnkeyup="clearNoNum(this)"></body></html>

钟政123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
总结常用的 JS 功能

经过几个项目，发现js特效会经常用到。趁着代码还在测试，这一点点的空闲时间，把几个常用js效果写下来跟大家分享，也方便日后自己用到的话，查询。基本的效果有 1）提交表单（异步/同步）2)点击隐藏3）改变样式1、替换---》将原有字符替换成别的2、清空3、修改4、添加属性5、页面跳转（重定向/页面局部刷新）4）表单验证提交表单同步提交表单虽然有直接in
复制链接

扫一扫