javascript 常用自定义方法

最新推荐文章于 2020-11-21 01:25:00 发布
最新推荐文章于 2020-11-21 01:25:00 发布
阅读量147 收藏
点赞数
文章标签： javascript java json ViewUI
原文链接：https://yq.aliyun.com/articles/41064
版权

JavaScript 常用的自定义方法

(1)在页面获取cookie

Js代码   收藏代码
  1. //get value of cookie    
  2. com.whuang.hsj.getCookie=function(cookieKey){    
  3.     var cookies = document.cookie ? document.cookie.split('; ') : [];    
  4.     
  5.     for (var i = 0, l = cookies.length; i < l; i++) {    
  6.         var parts = cookies[i].split('=');    
  7.         if(parts && parts.length>1){    
  8.             if(parts[0]==cookieKey||com.whuang.hsj.trim(parts[0])==cookieKey){    
  9.                 //username1=;    
  10.                 return parts[1];    
  11.             }    
  12.         }    
  13.     }    
  14.     return '';    
  15. } ;  

 应用场景:

Js代码   收藏代码
  1. window.οnlοad=function(){  
  2.     var loginName22=com.whuang.hsj.$$one("username");  
  3.     loginName22.focus();  
  4.   
  5.     //cookie的key是'userEmail'    
  6.     username1=com.whuang.hsj.getCookie('userEmail');    
  7.     
  8.     //alert("username1:"+username1);    
  9.     var issave222=com.whuang.hsj.$$one("issave");    
  10.     if(username1 && username1!='' && username1!=null &&username1!=undefined){    
  11.         loginName22.value=username1;    
  12.         issave222.checked=true;    
  13.     }else{    
  14.         issave222.checked=false;    
  15.     }    
  16.       
  17. }  

 

(2)startWith和endWith

Js代码   收藏代码
  1. com.whuang.hsj.startWith=function(str,regex){  
  2.     return str.indexOf(regex)==0;  
  3. };  
  4. com.whuang.hsj.startsWith=com.whuang.hsj.startWith;  
  5. com.whuang.hsj.endWith=function(str,regex){  
  6.     return str.lastIndexOf(regex)==str.length-regex.length;  
  7. };  
  8. com.whuang.hsj.endsWith=com.whuang.hsj.endWith;  
  9.   
  10. com.whuang.hsj.endWithArray=function(str,array2){  
  11.     for ( var i = 0; i < array2.length; i++) {  
  12.         var arrOne = array2[i];  
  13.         if(com.whuang.hsj.endsWith(str,arrOne)){  
  14.             return true;  
  15.         }  
  16.     }  
  17.     return false;  
  18. };  

 应用场景:上传图片时校验后缀名

Js代码   收藏代码
  1. var suffix22=['jpg','png','gif','Jpeg'];  
  2.         if(!com.whuang.hsj.endWithArray(uploadFile.value,suffix22)){  
  3.             alert("后缀名不对");  
  4.             return false;  
  5.         }  

 

(3)设置错误信息(取代alert)

Java代码   收藏代码
  1. /*** 
  2. error message 
  3. */  
  4. com.whuang.hsj.setErrorMessage=function(obj,spanId,message,isBig){  
  5.     if(obj.focus){//if include focus method  
  6.         obj.focus();  
  7.     }  
  8.        
  9.      var leaveMessageResultSpan;  
  10.      if (typeof spanId == 'string') {//if argument "spanId" just is a String  
  11.         leaveMessageResultSpan=com.whuang.hsj.$$id(spanId);  
  12.      }else{  
  13.         leaveMessageResultSpan=spanId;  
  14.      }  
  15.      var styleClass;  
  16.      if(isBig){  
  17.          styleClass='errormessageBig';  
  18.      }else{  
  19.          styleClass='errormessage';  
  20.      }  
  21.      // leaveMessageResultSpan.innerHTML="<span class='"+styleClass+"' >"+message+"</span>";  
  22.      leaveMessageResultSpan.innerHTML=message;  
  23.      leaveMessageResultSpan.className=styleClass;  
  24.      function cleanUp22(){  
  25.          leaveMessageResultSpan.innerHTML="";  
  26.       }  
  27.       setTimeout(cleanUp22,6000);  
  28. };  

 应用场景:校验表单

Js代码   收藏代码
  1. var username22=com.whuang.hsj.$$one("username");  
  2.     /*if(!com.whuang.hsj.isHasValue( username22.value)){ 
  3.         username22.focus(); 
  4.         leaveMessageResultSpan.innerHTML="<span class='errormessageBig' >请填写您的姓名.</span>"; 
  5.                    function cleanUp22(){ 
  6.                        leaveMessageResultSpan.innerHTML=""; 
  7.                     } 
  8.                     setTimeout(cleanUp22,3000); 
  9.                     return false; 
  10.     }*/  
  11.     var companyObj=com.whuang.hsj.$$one("company");  
  12.     if(!com.whuang.hsj.checkNullValue(companyObj,'leaveMessageResult','请填写您的单位名称.')){  
  13.         return ;  
  14.     }  
  15.     if(!com.whuang.hsj.checkNullValue(username22,'leaveMessageResult','请填写您的姓名.')){  
  16.         return ;  
  17.     }  
  18.       
  19.     var phoneObj=com.whuang.hsj.$$one("email");  
  20.     if(!com.whuang.hsj.checkNullValue(phoneObj,'leaveMessageResult','请填写您的电话.')){  
  21.         return ;  
  22.     }  
  23.   
  24.     var object22=com.whuang.hsj.$$one("object");  
  25.     if(!com.whuang.hsj.checkNullValue(object22,'leaveMessageResult','请填写留言主题.')){  
  26.         return ;  
  27.     }  
  28.       
  29.     var content22=com.whuang.hsj.$$one("content");  
  30.     if(!com.whuang.hsj.checkNullValue(content22,'leaveMessageResult','请填写留言内容.')){  
  31.         return ;  
  32.     }  
  33.     if(content22.value.length<10){  
  34.         com.whuang.hsj.setErrorMessage(content22,"leaveMessageResult","你的留言内容太短了.");  
  35.         return;  
  36.     }  
  37.       
  38.     if(content22.value.length>5000){  
  39.         com.whuang.hsj.setErrorMessage(content22,"leaveMessageResult","你的留言内容太长了.");  
  40.         return;  
  41.     }  
  42.       

 

 错误信息过6秒钟会自动消失

 

(4)动态增加下拉框

Js代码   收藏代码
  1. function showProductSmallClass(osType,smallId,projectPath)  
  2. {  
  3.     var abc44=function (obj) {  
  4. //      alert(obj);  
  5.         var jsonObj2=eval("("+obj+")");  
  6.         //alert(obj)  
  7.         var productSmallClass_div_id= com.whuang.hsj.$$id("productSmallClass_div_id");  
  8.         var html="<select  name='smallClass.id'>";  
  9.          html+="<option  value=\'-1\' text=\'--请选择--\' >--请选择--</option>";  
  10.         for(osvId in jsonObj2){  
  11.             //alert(osvId);  
  12.             var osvVersion=jsonObj2[osvId];  
  13.             html+="<option ";  
  14.             if(smallId&&smallId!=undefined && smallId!='' && smallId==osvId){  
  15.                 html+="selected=\"selected\" ";  
  16.             }  
  17.             html+=" value=\'"+osvId+"\' text=\'"+osvVersion+"\' id='productSmallClass_"+osvId+"\'>";  
  18.             html+=osvVersion+"</option>";  
  19.          }  
  20.         html+="</select>";  
  21.         productSmallClass_div_id.innerHTML=html;  
  22.     };  
  23.     if(projectPath.lastIndexOf('/')!=projectPath.length-1){  
  24.         projectPath=projectPath+"/";  
  25.     }  
  26.     var url2=projectPath+"productSmallClass/json";  
  27.     //alert(url2);  
  28.     var xmlhw5=new XMLHttpHuangWei(url2, "productItemclassId="+osType,abc44);  
  29.     xmlhw5.XMLGetMethod();  
  30.   
  31. }  

 

(5)动态增加一个按钮,并指定click响应事件

Js代码   收藏代码
  1. com.whuang.hsj.addButton = function(parent22, onClickMethod) {  
  2.     var newInput = document.createElement("input");  
  3.     newInput.type = "button";  
  4.     buttonTd.appendChild(newInput);  
  5.     newInput.onclick = onClickMethod;  
  6.     return newInput;  
  7. };  

 

(6)通过name获取单个对象

Js代码   收藏代码
  1. /*** 
  2.  * if is radio ,please use com.whuang.hsj.$$arr 
  3.  * @param name22 
  4.  * @returns 
  5.  */  
  6. com.whuang.hsj.$$one = function(name22) {  
  7.     if (com.whuang.hsj.isHasValue(name22)) {  
  8.         var names222=document.getElementsByName(name22);  
  9.         //alert("names222:"+names222);  
  10.         //alert("typeof:"+(typeof names222 ));  
  11.         var className=Object.prototype.toString.call(names222);  
  12.         var boolean_isArray;  
  13.         var ieHtmlCollection='[object HTMLCollection]';  
  14.         if(isIEtest)//if browser is IE  
  15.         {  
  16.                  boolean_isArray=( className=== '[object Object]') ||(className=== ieHtmlCollection) ||names222 instanceof Array ;  
  17.         }else  
  18.         {  
  19.                  boolean_isArray=( className=== '[object Array]') ||(className=== '[object NodeList]'  )||(className==ieHtmlCollection)||names222 instanceof Array||names222 instanceof NodeList;  
  20.         }  
  21.         if(names222){  
  22.              if(boolean_isArray){  
  23.                      return names222[0];  
  24.              }else{  
  25.                      return names222;//why add [0] ??  
  26.             }  
  27.         }else{  
  28.             return "";  
  29.         }  
  30.     } else {  
  31.         return "";  
  32.     }  
  33. };  

 应用场景

Js代码   收藏代码
  1. var loginName22=com.whuang.hsj.$$one("username");  
  2.     if(!com.whuang.hsj.isHasValue(loginName22.value)){  
  3.         loginName22.focus();  
  4.         var li_info_id=com.whuang.hsj.$$id('li_info');  
  5.         li_info_id.innerHTML="<span class='errormessage'> 请填写用户名.</span>";  
  6.         function cleanUp22(){  
  7.             li_info_id.innerHTML="";  
  8.         }  
  9.         setTimeout(cleanUp22,4000);  
  10.         return false;  
  11.     }  

(7) 弹出确认提示

Js代码   收藏代码
  1. /** 
  2.  *  
  3.  * @param {Object} 
  4.  *            msg 
  5.  */  
  6. com.whuang.hsj.confirmDelete = function(msg) {  
  7.     if (!com.whuang.hsj.isHasValue(msg)) {  
  8.         msg = "Are you sure to delete ?";  
  9.     }  
  10.     var bl = confirm(msg);  
  11.     return bl;  
  12. };  

 应用:

Java代码   收藏代码
  1. <a style="color:#fff;"  
  2.                         href="<%=path%>/news/deleteOne?id=${news.id }&fsdf=${currentTime}"    
  3.                         οnclick="return com.whuang.hsj.confirmDelete('确定要删除吗?')">删除</a>  

 

(8)判断是否是数字

Js代码   收藏代码
  1. /*** 
  2. * whether is digit,1.2 is allowed 
  3. */  
  4. com.whuang.hsj.isNumber=function(int22){  
  5.     if(!int22 || int22==undefined){  
  6.         return false;  
  7.     }  
  8.     if( int22.match(/^[\d\\.]+$/i)){   
  9.     return true;  
  10.   }else{  
  11.     return false;  
  12.   }  
  13. };  
  14. /*** 
  15. * whether is Integer,1.2 is not allowed 
  16. */  
  17. com.whuang.hsj.isInteger=function(int22){  
  18.     if(!int22 || int22==undefined){  
  19.         return false;  
  20.     }  
  21.     if( int22.match(/^[\d]+$/i)){   
  22.     return true;  
  23.   }else{  
  24.     return false;  
  25.   }  
  26. };  

 应用:

Js代码   收藏代码
  1. var qrcodeSizeObj=com.whuang.hsj.$$id('qrcodeSize');  
  2.     var qrcodeSizeint=qrcodeSizeObj.value;  
  3.     if(!com.whuang.hsj.isHasValue(qrcodeSizeint)){  
  4.         qrcodeSizeObj.focus();  
  5.         alert('请输入像素大小.');  
  6.         return ;  
  7.     }  
  8.     var isDigit=com.whuang.hsj.isInteger(qrcodeSizeint);  
  9.     if(!isDigit){  
  10.         qrcodeSizeObj.focus();  
  11.         alert('请输入数字[100-1000]');  
  12.         return;  
  13.     }  

 

(9)contains方法

Js代码   收藏代码
  1. contains=function(source,key2){  
  2.     var isDownload=(source.indexOf(key2)>-1);  
  3.     if(isDownload){  
  4.         return true;  
  5.     }else{  
  6.         return false;  
  7.     }  
  8. }  

 

(10)使用jQuery给div增加子元素

Js代码   收藏代码
  1. var widthStr="400px";  
  2.        var heightStr="250px";  
  3.        var childElement="<img src=\""+imgSic+"\"  width=\""+widthStr+"\"  height=\""+heightStr+"\" />";  
  4.        // alert(childElement);  
  5.        $("#loadPanel").html(childElement);  

 

(11)使用jQuery给div增加事件

Js代码   收藏代码
  1. $("#loadPanel").click(function(){  
  2.            hideLoadPanel();  
  3.        });  

 

(12)使用this获取元素本身

Html代码   收藏代码
  1. <img src="a.jpg" height="160px"  width="250px"  onclick="viewBigPic(this,event)" />  

 

Js代码   收藏代码
  1. function viewBigPic(img333,event){  
  2.                     imgSrc=img333.src;  
  3.                     // alert(imgSrc);  
  4.                     var moveTop22 = parseInt(img333.offsetHeight  );  
  5.                     var moveLeft22 = parseInt(img333.offsetLeft );  
  6.                     // alert(moveTop22+"  ,  "+moveLeft22);  
  7.                     showLoadPanel(imgSrc,moveTop22,moveLeft22);  
  8.                 }  

 

weixin_34019144
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS函数
WYG2020的博客
02-05 367
一、定义函数的3种方式 1、定义命名函数的语法格式如下： function functionName(parmeter-list) { statements } 函数可以有返回值，也可以没有返回值。函数的返回值使用return语句返回，在函数的允许过程中，一旦遇到第一条return语句，函数就返回返回值，函数运行结束。 2、定义匿名函数 创建匿名函数的语法格式如下： function (par...
javascript 自定义常用方法第1/2页
10-29
在实际的js开发过程中，我们常常会有相似或相同的需求。这时候如果没有很好的封装(通用功能)，代码的重复将不可避免。
JavaScript：自定义对象方式(常用5种)
龙雪的博客
08-21 1978
对象：在JavaScript中，对象是拥有属性和方法的数据。 JavaScript自定义对象方式有以下7种：直接创建方式、对象初始化器方式、构造函数方法、prototype原型方式、混合的构造函数/原型方式、动态原型方式和工厂模式。前5种比较常用。   1. 直接创建方式：      创建语法： var 对象变量名 = new Object(); 对象变量名. p...
JavaScript定义函数的三种方式
yuhan20081021的专栏
06-02 736
【1】正常方法 function print(msg){     document.write(msg); } 对函数进行调用的几种方式：  函数名（传递给函数的参数1，传递给函数的参数2，….） 变量 = 函数名（传递给函数的参数1，传递给函数的参数2，….） 对于有返回值的函数调用，也可以在程序中直接使用返回的结果，例如：alert("sum=“ + square(2,3
Dreamwear如何创建javascript_JavaScript题目集合
weixin_39657521的博客
11-21 72
原文出处：https://github.com/pwstrick/daily此处没有原文更新即时，可直接浏览原文获取最新题目。JavaScript的变量名在定义时需要遵守哪些规则？不能被encodeURIComponent()函数编码的字符有哪些？如何获得Select元素（选择框）中选中项的索引？JavaScript的内置对象有哪些。如何为一个<p>元素添加CSS类primary？与鼠...
javascript 最常用的10个自定义函数[推荐]
10-29
以下介绍10个JavaScript中最常用的自定义函数，包括事件处理函数的实现： 1. **addEvent 和 removeEvent 函数**： - `addEvent` 用于向元素添加事件监听器，兼容了DOM2级事件处理（addEventListener）和旧版IE浏览...
JavaScript 常用公共方法
09-27
在JavaScript中，有一些常用的公共方法和概念，这些是开发者必须掌握的基础知识。 一、自定义封装函数 在JavaScript中，我们可以自定义函数来封装代码，提高代码的可重用性和可维护性。例如： ```javascript ...
Javascript 自定义类型方法小结
10-29
Javascript 常用自定义类型方法整理，需要的朋友可以参考下。
javascript常用方法
06-05
以下是一些常用的JavaScript函数和方法，它们在日常开发中非常实用。 1. 字符串处理： - `cutstr(str, len)`：这个函数用于截取字符串，根据指定长度`len`对字符串进行截断，并在末尾添加省略号。它考虑了中文字符...
javascript为对象添加自定义方法的几种方式
SeaHBJ的博客
04-16 1094
1. var student = new Object(); student.name = "xiao ming"; student.age = 20; student.getName = function () { alert(this.name); } 2. var student = { name: "xiao
JS中定义类的方法
热门推荐
sdlfx的专栏
10-24 4万+
JS中定义类的方式有很多种： 1、工厂方式   function Car(){    var ocar = new Object;    ocar.color = "blue";    ocar.doors = 4;    ocar.showColor = function(){     document.write(this.color)    };    return ocar;   
自定义一些JS常用工具方法
guochao8的博客
02-18 330
1、去除字符串左右两端的空格 trim: function(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } 2、取时间戳 createTimestamp: function() { // 取时间撮 // 201508061018417065 var dt = new Date() var y = dt.getFullY...
js 多种变量定义(对象直接量，数组直接量和函数直接量)
Lostlover
08-24 729
js 多种变量定义(对象直接量，数组直接量和函数直接量),大家可以参考下，对于以后学习js 面向对于与json操作会有帮助。 对象直接量创建一个对象： 复制代码代码如下 var obj = {x:[1,2],y:23}; 代码跟下面是一样的。  复制代码代码如下: var obj=new Object();  obj.x=new Array
自定义JS常用方法
weixin_30556959的博客
04-21 87
1，获取表格中的元素，支持IE，chrome，firefox //获取表单元素的某一个值 function getTableColumnValue(tableId, rowNumber, columnNumber) { var tableRef = document.getElementById(tableId); var elementRef = tableRef...
JS常用自定义方法
weixin_30532837的博客
03-30 102
1，JS生成随机数方法 getRandom(100)，表示生成0-100的数 function getRandom(n){ return Math.floor(Math.random()*n+1) } 生成随机数 2，根据1，延伸生成20-50的数呢，可以这样考虑，20+（0-30）的随机数，所以可以扩展为getRandom(n,m)，表示生...
js 自定义方法 设置可选参数的方法
学习笔记
10-20 1万+
js 自定义方法 设置可选参数的方法php有个很方便的用法是在定义函数时可以直接给参数设默认值，如：function simue ($a=1,$b=2){ return $a+$b; } echo simue(); //输出3 echo simue(10); //输出12 echo simue(10,20); //输出30但js却不能这么定义，如果写function simue(a=1,b=2
Js自定义类时属性和方法的定义
Xi__Yuan的专栏
07-12 936
在js中自定义类时属性和方法的定义方式有两种：类外定义和类内部定义。
layui 自定义方法
最新发布
09-09
在Layui中，我们可以通过自定义方法来扩展框架的功能，以适应特定的业务需求。 首先，我们可以在Layui的扩展模块中定义自己的方法。例如，我们可以定义一个自定义的表单验证方法： ```javascript layui.extend({ ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值