备案控制台
探索云世界
开发者社区 安全 文章 正文

js 一些小技巧

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

1,表单中,回车导致下一个表单元素聚焦

Js代码   收藏代码
  1. /*** 
  2. enter to make next object focus 
  3. */  
  4. var pressFocusNext=function(event,next22){  
  5.     if(!event ||event==undefined){  
  6.         event=window.event;   
  7.     }  
  8.     if(event.keyCode==13){//Enter  
  9.         if(typeof next22 == 'string'){  
  10.             next22=com.whuang.hsj.$$one(next22);  
  11.         }  
  12.         if(next22 && next22!=undefined){  
  13.             next22.focus();  
  14.         }  
  15.           
  16.     }  
  17. }  

 使用场景:

Html代码   收藏代码
  1. <form id="leaveMessageForm" style="margin-bottom: 4px;width: 100%"  >  
  2.                      
  3.                        <ul>  
  4.                            <li><label>单位名称</label><input type="text" name="company" placeholder="单位名称"  onkeypress="pressFocusNext(event,'username')" /></li>  
  5.                            <li><label>称呼</label><input type="text" name="username" placeholder="您的称呼" onkeypress="pressFocusNext(event,'email')" /></li>  
  6.                            <li><label>电话</label><input type="text" name="email" placeholder="您的电话号码"  onkeypress="pressFocusNext(event,'object')" /></li>  
  7.                            <li><label>留言标题</label><input type="text" name="object" placeholder="留言标题"  onkeypress="pressFocusNext(event,'content')" /></li>  
  8.                            <li class="ly" style="width:100%;" ><label  >留言内容</label>  
  9.                              
  10.                                <textarea  name="content" placeholder="留言内容" ></textarea>  
  11.                              
  12.                            </li>  
  13.                            <li class="submit"><input type="button" value="提交" onclick="ajaxSubmitMessage()"  /></li>  
  14.                            <li class="reset"><input type="reset"  id="resetId" value="重写"/></li>  
  15.   
  16.                        </ul>  
  17.                          
  18.                    </form>  
  19.                     

 

2,对某个表单控件回车触发指定事件

Js代码   收藏代码
  1. /*** 
  2.  enter to to something identified by responseEvent 
  3.  */  
  4. var pressEnterTo=function(event,responseEvent){  
  5.     if(!event ||event==undefined){  
  6.         event=window.event;  
  7.     }  
  8.     if(event.keyCode==13){//Enter  
  9.         responseEvent();  
  10.     }  
  11. };  

 使用场景:

Html代码   收藏代码
  1. <div id="register_user">  
  2.   
  3.                                         <h2  style="margin-right: -15px;margin-left: -15px" ><span class="fontawesome-user"></span>注册</h2>  
  4.   
  5.                                         <form action="#" method="POST">  
  6.   
  7.                                             <fieldset class="submit2">  
  8.   
  9.                                                 <p><label for="username">用户名</label></p>  
  10.   
  11.                                                 <p><input type="text" name="username" placeholder="用户名"  
  12.                                                           onkeypress="pressFocusNext(event,$('#register_user input[name=password]'))"  
  13.                                                           required></p>  
  14.   
  15.                                                 <p><label for="password">密码</label></p>  
  16.   
  17.                                                 <p><input type="password" name="password" placeholder="密码"  
  18.                                                           onkeypress="pressFocusNext(event,$('#repassword'))" required>  
  19.                                                 </p>  
  20.   
  21.                                                 <p><label for="repassword">确认密码</label></p>  
  22.   
  23.                                                 <p><input type="password" id="repassword" placeholder="确认密码"  
  24.                                                           onkeypress="pressFocusNext(event,$('#register_user input[name=email]'))"  
  25.                                                           required></p>  
  26.   
  27.                                                 <p><label for="email">电子邮箱</label></p>  
  28.   
  29.                                                 <p><input type="text" name="email" placeholder="电子邮箱"  
  30.                                                           onkeypress="pressEnterTo(event,user.register)" required></p>  
  31.   
  32.                                                 <p><input type="button" id="registerBtn" onclick="user.register();"  
  33.                                                           value="注册"></p>  
  34.   
  35.                                             </fieldset>  
  36.   
  37.                                         </form>  
  38.   
  39.                                     </div> <!-- end login -->  

 对最后一个表单元素回车时触发登录

3,使div居中

Js代码   收藏代码
  1. /*** 
  2.  * make dialog in center 
  3.  */  
  4. com.whuang.hsj.centerJQueryPos = function ($div22, isApplyVertical/*是否竖直方向也居中*/, isIncludeScroll/*是否包含滚动条高度*/) {  
  5.     var width = $div22.width();  
  6.     var height = $div22.height();  
  7.   
  8.   
  9.     var left = (getInner().width - width) / 2 + com.whuang.hsj.getScroll().left;  
  10.     var param = {'left': left};  
  11.     if (arguments.length === 1 || isApplyVertical) {//Vertical direction  
  12.         var top = (getInner().height - height) / 2;  
  13.         if (isIncludeScroll) {  
  14.             top = top + com.whuang.hsj.getScroll().top;  
  15.         }  
  16.         param['top'] = top;  
  17.     }  
  18.     $div22.css(param);  
  19. };//centerJQueryPos  
  20. com.whuang.hsj.centerX = function ($div22) {//只水平方向居中  
  21.     com.whuang.hsj.centerJQueryPos($div22, false, false);  
  22. };  
  23. com.whuang.hsj.centerXY = function ($div22) {//水平方向和竖直方向同时居中  
  24.     com.whuang.hsj.centerJQueryPos($div22, true, false);  
  25. };  
//Cross browser gets the position of scroll
com.whuang.hsj.getScroll=function(){
    return {
        top:document.documentElement.scrollTop || document.body.scrollTop,
left:document.documentElement.scrollLeft || document.body.scrollLeft,
height:document.documentElement.scrollHeight ||document.body.scrollHeight
};
};
Js代码   收藏代码
  1.   

 使用场景:

Js代码   收藏代码
  1. if (isCenter) {  
  2.                jqueryObjParam.$dialogPanel.show('normal', function () {  
  3.                    com.whuang.hsj.centerXY(jqueryObjParam.$dialogPanel);  
  4.                    jqueryObjParam.$dialogPanel.css("position", 'fixed');//保证固定在可视范围内  
  5.                });  
  6.   
  7.            }  

 注意:div的position的值必须是fixed或absolute

4,获取浏览器可视区域的大小,与是否有滚动条无关

Js代码   收藏代码
  1. //Cross browser gets the size of Visual area window,Have nothing to do with scroll bars  
  2. var getInner=(function() {  
  3.     // alert(typeof window.innerWidth !== 'undefined');  
  4.     if (typeof window.innerWidth !== 'undefined') {//Notice:'undefined' is right  
  5.         return function(){  
  6.             return {  
  7.                 width : window.innerWidth,  
  8.                 height : window.innerHeight  
  9.             }  
  10.         }  
  11.     } else {  
  12.         return function(){  
  13.             return {  
  14.                 width : document.documentElement.clientWidth,  
  15.                 height : document.documentElement.clientHeight  
  16.             }  
  17.         }  
  18.     }  
  19. })();  

 

 

5,日期格式化

Js代码   收藏代码
  1. /*** 
  2. format date or time 
  3. */  
  4. Date.prototype.format =function(format)  
  5. {  
  6.     var o = {  
  7.         "M+" : this.getMonth()+1, //month  
  8.         "d+" : this.getDate(), //day  
  9.         "h+" : this.getHours(), //hour  
  10.         "m+" : this.getMinutes(), //minute  
  11.         "s+" : this.getSeconds(), //second  
  12.         "q+" : Math.floor((this.getMonth()+3)/3), //quarter  
  13.         "S" : this.getMilliseconds() //millisecond  
  14.     }  
  15.     if(/(y+)/.test(format)) format=format.replace(RegExp.$1,  
  16.     (this.getFullYear()+"").substr(4- RegExp.$1.length));  
  17.     for(var k in o)if(new RegExp("("+ k +")").test(format))  
  18.     format = format.replace(RegExp.$1,  
  19.     RegExp.$1.length==1? o[k] :  
  20.     ("00"+ o[k]).substr((""+ o[k]).length));  
  21.     return format;  
  22. }  
  23. Date.prototype.format2 = function(fmt)     
  24. { //author: meizz     
  25.   var o = {     
  26.     "%m" : this.getMonth()+1+'',                 //月份     
  27.     "%d" : this.getDate() + '',                  //日     
  28.     "%H" : this.getHours()+'',                   //小时     
  29.     "%M" : this.getMinutes()+'',                 //分     
  30.     "%S" : this.getSeconds()+''                //秒     
  31.     //"q+" : Math.floor((this.getMonth()+3)/3), //季度     
  32.   };     
  33.   // 年份  2015  
  34.   if(/(%Y)/.test(fmt))     
  35.     fmt=fmt.replace(RegExp.$1, (this.getFullYear()+""));   
  36.   
  37.   // 两位年份  15  
  38.   if(/(%y)/.test(fmt))     
  39.     fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(2));       
  40.   
  41.   //getTime返回的是以毫秒为单位的，转为秒  
  42.   if(/(%s)/.test(fmt))     
  43.     //fmt=fmt.replace(RegExp.$1, this.getTime()/1000);   
  44.     fmt=fmt.replace(RegExp.$1, (this.getTime()+'').slice(0, 10));   
  45.   
  46.   for(var k in o)     
  47.     if(new RegExp("("+ k +")").test(fmt)){     
  48.         fmt = fmt.replace(RegExp.$1, (o[k].length == 2 ? o[k] : '0' + o[k]));     
  49.     }  
  50.   return fmt;     
  51. }     

 常用场景:

Js代码   收藏代码
  1. var releaseDate=new Date(Number(obj.releaseTime)*1000).format('yyyy-MM-dd');//把毫秒数转化为日期  

 

 

6,设置和获取html元素的自定义属性

Js代码   收藏代码
  1. com.whuang.hsj.getCustomAttr=function(htmlNode22,attr)  
  2. {  
  3.     var hospitalId=htmlNode22[attr];  
  4.     if(hospitalId==undefined||hospitalId==null){  
  5.         hospitalId=htmlNode22.getAttribute(attr);  
  6.     }  
  7.     if(hospitalId==undefined||hospitalId==null){  
  8.         if(htmlNode22.attributes){  
  9.             hospitalId=htmlNode22.attributes[attr].nodeValue;  
  10.         }  
  11.     }  
  12.     return hospitalId;  
  13. }  
  14. com.whuang.hsj.setCustomAttr=function(htmlNode22,attr22,attrValue)  
  15. {  
  16.     if(htmlNode22.setAttribute===undefined)  
  17.     {  
  18.         htmlNode22.attributes[attr22].nodeValue = attrValue;  
  19.     }else{  
  20.         htmlNode22.setAttribute(attr22,attrValue);  // 设置自定义属性的值  
  21.     }  
  22. }  

 使用场景:

Js代码   收藏代码
  1. var currentPage=com.whuang.hsj.getCustomAttr($ul_list.get(0),"currentPage");  
  2.         var isOver=Boolean.parse(com.whuang.hsj.getCustomAttr($ul_list.get(0),"isOver2"));  
  3.  com.whuang.hsj.setCustomAttr(newsPanel_ul,"currentPage",data.currentpage);  
  4.             com.whuang.hsj.setCustomAttr(newsPanel_ul,"isOver2",data.over);  

 

7,使用jQuery时如何判断元素是否为空呢?

错误:if($thisForm==null)

正确:

Js代码   收藏代码
  1. if ($thisForm.length == 0) {  
  2.         alert("can not get form ,maybe not pass on form object.");  
  3.         return;  
  4.     }  

 

Js代码   收藏代码
  1. if(form.length==0){  
  2.         alert("没有找到表单");  
  3.         return;  
  4.     }  

 

通过length来判断,因为使用jquery获取元素,就算元素不存在也会返回一个对象.

8,如何判断参数是否为空

Js代码   收藏代码
  1. bbs.add_bbsReply = function (self) {  
  2.     if (cardid == null) {  
  3.         alert("cardid is null");  
  4.         return;  
  5.     }  
  6.     var $thisForm = null;  
  7.     if (arguments.length > 0) {//说明传入了参数self  
  8.         $thisForm = $(self);  
  9.     } else {  
  10.         $thisForm = $("#formBBS_reply");  
  11.     }  
  12. }  

范例: 

Js代码   收藏代码
  1. function tabSelect(url, aHref, isNav, showslider) {  
  2.     showMask();  
  3.     if (isNav) {  
  4.         $('#nav li').removeClass("current")/*.removeClass("focus ")*/;  
  5.     }  
  6.   
  7.     if (arguments.length > 3 && showslider) {  
  8.         $slider_carousel.show();  
  9.         $left_sidebar.show();  
  10.     } else {  
  11.         $slider_carousel.hide();  
  12.         $left_sidebar.hide();  
  13.     }  
  14.     ajaxHtml(url + "&recordsPerPage=5&random22=" + Math.random(), $exchangeDiv);//page.js  
  15.     if (isNav) {  
  16.         $(aHref).parent().addClass("current");  
  17.     }  
  18.     ui_tab_wh(jQuery);  
  19. }  

 

通过arguments.length来判断比通过self==null||self==undefined要好

9,创建对象

Js代码   收藏代码
  1. var tip = {};  

 10 使悬浮的div可以拖动

Js代码   收藏代码
  1. com.whuang.hsj.drag = function ($obj, hn) {  
  2.     if (arguments.length == 0) {  
  3.         return;  
  4.     }  
  5.     if ($obj == null || $obj == undefined) {  
  6.         return;  
  7.     }  
  8.     if (typeof  $obj == 'string') {//when $obj is a string  
  9.         $obj = $($obj);  
  10.     }  
  11.     var $hn = null;  
  12.     if (arguments.length > 1) {  
  13.         $hn = $obj.find(hn);//div h1,h2...  
  14.     } else {  
  15.         $hn = $obj.find("h2");  
  16.     }  
  17.     $hn.on({  
  18.         mousedown: function (e) {  
  19.             e.preventDefault();  
  20.             var t = $obj.offset(),  
  21.                 o = e.pageX - t.left,  
  22.                 i = e.pageY - t.top;  
  23.             //$obj.css("position", 'fixed');  
  24.             $(document).on("mousemove.drag", function (e) {  
  25.                 $obj.offset({  
  26.                     top: e.pageY - i,  
  27.                     left: e.pageX - o  
  28.                 })  
  29.             })  
  30.         },  
  31.         mouseup: function () {  
  32.             $(document).unbind("mousemove.drag");  
  33.             $obj.css("position", 'fixed');  
  34.         }  
  35.     });  
  36. };//drag  

 使用场景:

Js代码   收藏代码
  1. com.whuang.hsj.drag("#subPagePanel", "h2");//增加拖动对话框的功能  
  2.    com.whuang.hsj.drag("#subPageBBS", "h2");  

 

 

文章标签：
JavaScript
数据安全/隐私保护
关键词：
JavaScript小技巧
黄威的世界
目录
相关文章
前端技术栈
|
3月前
|
存储 JavaScript 前端开发
js的一些小技巧
js的一些小技巧
前端技术栈
33 0
快乐阿超
|
4月前
|
JavaScript
js的slice小技巧
js的slice小技巧
快乐阿超
21 0
前端开发社区（公众号）
|
8月前
|
JSON JavaScript 前端开发
安利几个JS开发小技巧
安利几个JS开发小技巧
前端开发社区（公众号）
60 1
香蕉麻花皮
|
10月前
|
JavaScript
js小技巧（2）
js小技巧（2）
香蕉麻花皮
53 0
香蕉麻花皮
|
10月前
|
JavaScript
js超实用的小技巧（1）
js超实用的小技巧（1）
香蕉麻花皮
53 0
史一试
|
JSON 缓存 JavaScript
JS之12个小技巧
JS之12个小技巧
史一试
87 0
JS之12个小技巧
拜小白
|
移动开发 JavaScript 算法
JS操作小技巧，工作简单了（二）
本文主要讲JS操作小技巧
拜小白
113 0
拜小白
|
JavaScript 前端开发
JS操作小技巧，工作简单了
在javaScript中，对象的属性链访问，很容易因为某一个属性不存在出现 Cannot read property 'xxx' of undefined的问题，那么Optional Chaining就添加了?.操作符，它会先判断前面的值，如果undefined或者null，就结束后面的调用，直接返回undefined;
拜小白
130 0
crperx
|
监控 JavaScript 前端开发
Firebug 折腾记_(3)JS 调试小技巧
console.log(“我是日志信息,毫无色彩可言–我支持多个参数打印”); console.info(“我是带有信息图标的日志”); console.warn(“我是带有警告图标的日志”); console.error(“我是带有报错图标的日志”); console.dir(test); –可以遍历一个对象的全部属性”,console console.trace();–输出 Javascript 执行时的堆栈追踪。 console.group(“这是测试组”) console.log(“%d年%d月”,2015,08); console.log(“%f时”,5); console.log(
crperx
88 0
游客xihcpujmlllzi
|
存储 JavaScript 前端开发
JS 中可以提升幸福度的小技巧
本文主要介绍一些JS中用到的小技巧，可以在日常Coding中提升幸福度，将不定期更新~ 感兴趣的同学可以加文末的微信群，一起讨论吧～
游客xihcpujmlllzi
125 0
JS 中可以提升幸福度的小技巧

热门文章

最新文章

  • 1
    JavaScript基础语法（codewhy版本）（一）
  • 2
    JavaScript的正则表达式实现邮箱校验
  • 3
    生成X-Bogus的js代码，通过python调用生成
  • 4
    使用Selenium执行JavaScript脚本：探索Web自动化的新领域
  • 5
    报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
  • 6
    纯前端JS实现人脸识别眨眨眼张张嘴案例
  • 7
    详解《基于 javascript 的流程图编辑框架LogicFlow
  • 8
    在Blazor中使用Chart.js快速创建图表
  • 9
    js数组常用的方法汇总
  • 10
    设置WebStorm像VSCode一样每行代码结尾自动格式化加入“；”分号（JavaScript、TypeScript格式化）
  • 1
    FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 内存溢出问题
    6
  • 2
    JS生成uuid的四种方法
    4
  • 3
    js实用方法记录-动态加载css/js
    9
  • 4
    【Js】检查Date对象是否为Invalid Date
    5
  • 5
    node.js 删除某个目录下所有的文件夹
    5
  • 6
    node.js输入项目目录结构并展示
    2
  • 7
    node.js递归拼凑成树形结构
    8
  • 8
    「一劳永逸」送你21道高频JavaScript手写面试题（上）
    17
  • 9
    JavaScript的引用数据类型主要包括对象
    9
  • 10
    js的结构
    11

    • 相关课程

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

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    阿里云oss简介和使用流程
    为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
    产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
    解决方案技术解决方案
    文档与社区文档开发者社区天池大赛培训与认证
    权益中心免费试用高校计划企业扶持计划推荐返现计划
    支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
    关注阿里云
    关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
    阿里云APP阿里云微信
    联系我们：4008013260
    法律声明Cookies政策廉正举报安全举报联系我们加入我们
    阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
    © 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
    浙公网安备 33010602009975号浙B2-20080101-4