常用的js函数

原创已于 2023-12-19 09:52:54 修改 · 置顶 · 619 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery #javascript

于 2018-08-06 22:17:15 首次发布

Js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了前端表单的各种验证方法及操作技巧，包括数字验证、清除非数字字符、必选项判断、获取选中值等实用功能，并展示了如何使用jQuery进行表单元素的选择与状态改变。

判断数字（包括两位小数）

function isNumber(val) {
	var reg = /^\d*\.?\d*$/;
	return reg.test(val);
}

替换非数字

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

判断radio或checkbox必选一个元素

function getRadioSts(rname){
  var o = document.getElementsByName(rname);
  for (var i=0; i<o.length; i++){
    if(o[i].checked)
      return true;
  }
  return false;
}

取checkbox选中的值组合按逗号分隔的字符

function getVals(obj){
    var o=document.getElementsByName(obj); 
	var s='';
	for(var i=0;i<o.length;i++){
	 if(o[i].checked){
			s+=o[i].value;
        if(i<o.length-1){
            s+=',';
        }
	 }
	} 
    return s;
}

jquery 设置radio选中

$('#元素id').prop('checked','checked');

根据radio的value选中

$("input:radio[value='2']").prop('checked', true);
 
$("input[value='1']").prop('checked', true);
 
$("input[name='killOrder'][value='1']").prop("checked", "checked");
 
let v = 1;//变量
$("input[name='killOrder'][value='" + v + "']").prop("checked", true);
 
 
$("input:radio[value='2']").attr('checked', true);
 
$("input[value='1']").attr('checked', true);

获取radio值

$("input[name='killOrder']:checked").val();
 
$('input:radio:checked').val();
 
$("input[type='radio']:checked").val();
 
$(":radio[checked]").each(function(radio){alert($(this).val());

修改radio样式

input[type="radio"] + label::before {
    content: "\a0";
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 50%;
    text-indent: .15em;
    margin-bottom: 4px;
    border: 1px solid #CCCCCC;
}
input[type="radio"]:checked + label::before {
    background-color: #4A90E2;
    background-clip: content-box;
    padding: 2px;
}
input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
.radio-inline{
    padding-left: 0;
}
input[type=radio][disabled]:checked + label::before{
    background-color:#CCCCCC;
    background-clip: content-box;
    padding: 2px;
 
}

元素点击时，当前选中，其他兄弟元素不选中的方法：

$(this).siblings().removeClass('on').addClass('off');
        $(this).removeClass('off').addClass('on');

ajax调用post方法

function addFav(types,infoid){	
  $.ajax({
      type: "post",
      url: "/fav_add.jsp",
      data:{  
           Types:types,
           InfoId:infoid
      },  
      async:true,
      success: function(res){        
          if(res.retcode==100){			
              alert('成功添加到收藏');
              $('#a-fav').html('已收藏');
          }else{
              alert(res.msg);
          }
      },
      dataType:"json"
  });	
}

ajax异步访问数据获取数组并遍历

function getViewStores(){
  var viewstoremenu=CookieUtil.getCookie("viewstoremenu");  
  if(viewstoremenu==null || viewstoremenu=="1"){
  $.ajax({
        type: "get",
        url: "get_viewstores.jsp",
        data:{  
             
        },  
        async:true,
        success: function(data){        
          var lis='';
          if(data.length==0){
            
          }else{
            $('#myviewstorecon').show();
          }
          $.each(data,function(index,d){  
             lis+='<dl id="viewstore-'+d.viewd+'">';
             lis+=' 	<dt><a href="'+d.id+'.html"><img src="'+d.viewimg+'" alt=""/></a></dt>';
             lis+='   <dd>';
             lis+='   	<a href="'+d.id+'.html"><h2>'+d.title+'</h2></a>';
             lis+='     <p><a href="http://uc.cangdaoyun.com/member/store_apply.jsp?storageid='+d.id+'" class="orderva">预约看仓</a></p>';
             lis+='     <span class="del"><a href="javascript:delViewStore('+d.viewd+')">×</a></span>';
             lis+='   </dd>';
             lis+=' </dl>';
         });  
         lis+='<div class="closeall"><a href=\"javascript:dropViewStore()\">清空</a></div>';
         $('#myviewstore_list').html(lis);
        },
        dataType:"json"
    });	
  }
}

tab切换方法

function htab(m,n,s) {          
	s = s + 1;          
	for(var i=1;i<s;i++) {          
		document.getElementById("nav_"+m+"_"+i).className="off";          
		document.getElementById("content_"+m+"_"+i).style.display="none";          
	}          
	document.getElementById("nav_"+m+"_"+n).className="on";          
	document.getElementById("content_"+m+"_"+n).style.display="block";          
}

js操作cookie方法

var CookieUtil = {
	setCookie : function(name, value, expires, path, domain, secure)
	{
		document.cookie = name + "=" + escape(value) +
			((expires) ? "; expires=" + expires.toGMTString() : "") +
			((path) ? "; path=" + path : "; path=/") +
			((domain) ? "; domain=" + domain : ";domain=cangdaoyun.com") +
			((secure) ? "; secure" : "");
	},

	getCookie : function(name)
	{
		var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));

		if (arr != null)
		{
			return unescape(arr[2]);
		
		}

		return null;
	},

	clearCookie : function(name, path, domain)
	{
		if (CookieUtil.getCookie(name))
		{
			 document.cookie = name + "=" +
				((path) ? "; path=" + path : "; path=/") +
				((domain) ? "; domain=" + domain : ";domain=cangdaoyun.com") +
				";expires=Fri, 02-Jan-1970 00:00:00 GMT";
		}
	}
};

jquery点击事件样式处理事例：

$("#menu-ul li .tit").click(function() {
			var _this=$(this).parent('li');
			if (_this.hasClass('cur')) {
				_this.removeClass('cur');
				_this.find('.box').stop().slideUp();
				_this.removeClass('on');
			} else{
				_this.addClass('on').siblings('li').removeClass('on');
				_this.addClass('cur').siblings('li').removeClass('cur');
				_this.find('.box').stop().slideDown().parents('li').siblings('li').find('.box').stop().slideUp();
			};
		});

禁用表单

//文本框
function txtDisable(objid) {
          $("#"+objid).val("");
          $("#"+objid).attr("disabled", "disabled");
        }
//radio或checkbox
        function radioDisable(objname) {
          $("[name='"+objname+"']").removeAttr("checked");
          $("[name='"+objname+"']").attr("disabled", "disabled");
        }

判断复选框某个元素是否选中

$("[name='drinkfreq']").change(function () {
          if ($("[name='drinkfreq'][value='1']").is(":checked") == true) {
            //逻辑代码片段
          } else {
            //逻辑代码片段
          }
        }).trigger("change");

复选框中某个元素选中后让其他不选中

$("input[name='表单名'][value='表单值']").change(function () {
          if ($(this).is(":checked") == true){
            $("input[name='表单名']").not(this).removeAttr("checked");
            $("input[name='表单名']").not(this).attr("disabled", "disabled");
            
          } else {
            $("input[name='表单名']").removeAttr("disabled");
            
          }
        }).trigger("change");

判断是否有重复id

function chkId()
      {
        var tags=document.getElementsByTagName("*"),
        count=tags.length, time, ret = {}, id;
        time=new Date();
        for(var i = 0; i < count; i++)
        {
           id=tags[i].id;
           if(id)
           {
             if(ret[id])
             {
               alert(id + "\n用时：" + (new Date() - time));
               return;
             }
             else
             {
               ret[id]=true;
             }
           }
        }
        alert("未找到相同ID");
      }