AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

javascript 常用自定义方法

2016-05-10 1584
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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.onload=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.                         onclick="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.                 }  

 

文章标签：
JavaScript
前端开发
Java
数据格式
JSON
关键词：
JavaScript方法
JavaScript自定义
JavaScript自定义方法
黄威的世界
目录
相关文章
代码掌控者
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素，但是它们之间有些细微的差别，稍不注意，就很容易弄错！
代码掌控者
66 1
大树营养快线
|
2月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度？
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法，可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度，从而提高代码的可靠性和可移植性。
大树营养快线
44 3
蓝易云
|
19天前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中，字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法，使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法，并提供示例代码以便更好地理解和应用这些方法。
蓝易云
44 13
光明顶阳顶天
|
2月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法，并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题，可以提高应用的稳定性和性能，避免潜在的风险和故障。同时，不断学习和掌握内存管理的知识，也是有效预防内存泄漏的重要途径。
光明顶阳顶天
201 52
我是快乐的嘟嘟
|
2月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具，通过它们可以动态地改变页面的内容、样式和行为，为用户提供丰富的交互体验。
我是快乐的嘟嘟
111 49
我是快乐的嘟嘟
|
2月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
我是快乐的嘟嘟
89 48
龙大吉
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用。
龙大吉
74 5
雨溪-yuxi
|
2月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中，`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中，`bind`返回一个新函数，不立即执行；`call`和`apply`则立即执行，且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似，但在执行时机和参数传递方式上有所区别。
雨溪-yuxi
35 1
john散漫
|
2月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式，能够满足各种不同的参数传递和处理需求，在实际开发中具有广泛的应用价值。
john散漫
61 7
大树营养快线
|
2月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法，涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面，为各种数学相关的计算和处理提供了强大的支持，是JavaScript编程中不可或缺的一部分。
大树营养快线
76 1

热门文章

最新文章

  • 1
    Midscene.js：AI 驱动的 UI 自动化测试框架，支持自然语言交互，生成可视化报告
  • 2
    一个好看的小时钟html+js+css源码
  • 3
    折腾之王：JavaScript之父Brave浏览器与BAT的诞生
  • 4
    Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式
  • 5
    npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
  • 6
    Figma-Low-Code：快速将Figma设计转换为Vue.js应用，支持低代码渲染、数据绑定
  • 7
    html+js+css实现的建筑方块立体数字时钟源码
  • 8
    Node.js导入MongoDB具体操作指南
  • 9
    【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
  • 10
    JavaScript字符串的常用方法
  • 1
    深度剖析：共享文件怎么设置密码和权限的 Node.js 进阶算法
    16
  • 2
    盘点原生JavaScript中直接触发事件的方式
    19
  • 3
    Next.js 实战 (十)：中间件的魅力，打造更快更安全的应用
    10
  • 4
    【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
    26
  • 5
    Vue.js应用结合Redis数据库：实践与优化
    31
  • 6
    【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
    57
  • 7
    【Html.js——生成欢迎语】关于你的欢迎语（蓝桥杯真题-1764）【合集】
    38
  • 8
    【Html.js——图片折叠效果】折叠手风琴（蓝桥杯真题-1763）【合集】
    33
  • 9
    【Vue.js——关键字匹配】搜一搜呀（蓝桥杯真题-1762）【合集】
    31
  • 10
    html+js+css实现的建筑方块立体数字时钟源码
    58

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    阿里云oss简介和如何对接使用