js 一些小技巧-白红宇

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

       Js代码   
/*** 
enter to make next object focus 
*/  
var pressFocusNext=function(event,next22){  
    if(!event ||event==undefined){  
        event=window.event;   
    }  
if(event.keyCode==13){ 
//Enter
        if(typeof next22 == 'string'){  
            next22=com.whuang.hsj.$$one(next22);  
        }  
        if(next22 && next22!=undefined){  
            next22.focus();  
        }  
          
    }  
}  

使用场景:

       Html代码   
<form id="leaveMessageForm" style="margin-bottom: 4px;width: 100%"  >  
                     
                       <ul>  
                           <li><label>单位名称</label><input type="text" name="company" placeholder="单位名称"  onkeypress="pressFocusNext(event,'username')" /></li>  
                           <li><label>称呼</label><input type="text" name="username" placeholder="您的称呼" onkeypress="pressFocusNext(event,'email')" /></li>  
                           <li><label>电话</label><input type="text" name="email" placeholder="您的电话号码"  onkeypress="pressFocusNext(event,'object')" /></li>  
                           <li><label>留言标题</label><input type="text" name="object" placeholder="留言标题"  onkeypress="pressFocusNext(event,'content')" /></li>  
                           <li class="ly" style="width:100%;" ><label  >留言内容</label>  
                             
                               <textarea  name="content" placeholder="留言内容" ></textarea>  
                             
                           </li>  
                           <li class="submit"><input type="button" value="提交" onclick="ajaxSubmitMessage()"  /></li>  
                           <li class="reset"><input type="reset"  id="resetId" value="重写"/></li>  
  
                       </ul>  
                         
                   </form>  
                    

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

       Js代码   
/*** 
 enter to to something identified by responseEvent 
 */  
var pressEnterTo=function(event,responseEvent){  
    if(!event ||event==undefined){  
        event=window.event;  
    }  
if(event.keyCode==13){ 
//Enter
        responseEvent();  
    }  
};  

使用场景:

       Html代码   
<div id="register_user">  
  
                                        <h2  style="margin-right: -15px;margin-left: -15px" ><span class="fontawesome-user"></span>注册</h2>  
  
                                        <form action="#" method="POST">  
  
                                            <fieldset class="submit2">  
  
                                                <p><label for="username">用户名</label></p>  
  
                                                <p><input type="text" name="username" placeholder="用户名"  
                                                          onkeypress="pressFocusNext(event,$('#register_user input[name=password]'))"  
                                                          required></p>  
  
                                                <p><label for="password">密码</label></p>  
  
                                                <p><input type="password" name="password" placeholder="密码"  
                                                          onkeypress="pressFocusNext(event,$('#repassword'))" required>  
                                                </p>  
  
                                                <p><label for="repassword">确认密码</label></p>  
  
                                                <p><input type="password" id="repassword" placeholder="确认密码"  
                                                          onkeypress="pressFocusNext(event,$('#register_user input[name=email]'))"  
                                                          required></p>  
  
                                                <p><label for="email">电子邮箱</label></p>  
  
                                                <p><input type="text" name="email" placeholder="电子邮箱"  
                                                          onkeypress="pressEnterTo(event,user.register)" required></p>  
  
                                                <p><input type="button" id="registerBtn" onclick="user.register();"  
                                                          value="注册"></p>  
  
                                            </fieldset>  
  
                                        </form>  
  
                                    </div> <!-- end login -->  

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

3,使div居中

       Js代码   
/*** 
 * make dialog in center 
 */  
com.whuang.hsj.centerJQueryPos = function ($div22, isApplyVertical/*是否竖直方向也居中*/, isIncludeScroll/*是否包含滚动条高度*/) {  
    var width = $div22.width();  
    var height = $div22.height();  
  
  
    var left = (getInner().width - width) / 2 + com.whuang.hsj.getScroll().left;  
var param = { 
'left': left};  
if (arguments.length === 1 || isApplyVertical) { 
//Vertical direction
        var top = (getInner().height - height) / 2;  
        if (isIncludeScroll) {  
            top = top + com.whuang.hsj.getScroll().top;  
        }  
        param['top'] = top;  
    }  
    $div22.css(param);  
};//centerJQueryPos  
com.whuang.hsj.centerX = function ($div22) { 
//只水平方向居中
    com.whuang.hsj.centerJQueryPos($div22, false, false);  
};  
com.whuang.hsj.centerXY = function ($div22) { 
//水平方向和竖直方向同时居中
    com.whuang.hsj.centerJQueryPos($div22, true, false);  
};  

//Cross browser gets the position of scrollcom.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代码   
  

使用场景:

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

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

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

       Js代码   
//Cross browser gets the size of Visual area window,Have nothing to do with scroll bars  
var getInner=(function() {  
    // alert(typeof window.innerWidth !== 'undefined');  
if (typeof window.innerWidth !== 'undefined') { 
//Notice:'undefined' is right
        return function(){  
            return {  
                width : window.innerWidth,  
                height : window.innerHeight  
            }  
        }  
    } else {  
        return function(){  
            return {  
                width : document.documentElement.clientWidth,  
                height : document.documentElement.clientHeight  
            }  
        }  
    }  
})();  

5,日期格式化

       Js代码   
/*** 
format date or time 
*/  
Date.prototype.format =function(format)  
{  
    var o = {  
        "M+" : this.getMonth()+1, //month  
        "d+" : this.getDate(), //day  
        "h+" : this.getHours(), //hour  
        "m+" : this.getMinutes(), //minute  
        "s+" : this.getSeconds(), //second  
        "q+" : Math.floor((this.getMonth()+3)/3), //quarter  
        "S" : this.getMilliseconds() //millisecond  
    }  
    if(/(y+)/.test(format)) format=format.replace(RegExp.$1,  
    (this.getFullYear()+"").substr(4- RegExp.$1.length));  
    for(var k in o)if(new RegExp("("+ k +")").test(format))  
    format = format.replace(RegExp.$1,  
    RegExp.$1.length==1? o[k] :  
    ("00"+ o[k]).substr((""+ o[k]).length));  
    return format;  
}  
Date.prototype.format2 = function(fmt)     
{ //author: meizz     
  var o = {     
    "%m" : this.getMonth()+1+'',                 //月份     
    "%d" : this.getDate() + '',                  //日     
    "%H" : this.getHours()+'',                   //小时     
    "%M" : this.getMinutes()+'',                 //分     
    "%S" : this.getSeconds()+''                //秒     
    //"q+" : Math.floor((this.getMonth()+3)/3), //季度     
  };     
  // 年份  2015  
  if(/(%Y)/.test(fmt))     
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+""));   
  
  // 两位年份  15  
  if(/(%y)/.test(fmt))     
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(2));       
  
  //getTime返回的是以毫秒为单位的，转为秒  
  if(/(%s)/.test(fmt))     
    //fmt=fmt.replace(RegExp.$1, this.getTime()/1000);   
    fmt=fmt.replace(RegExp.$1, (this.getTime()+'').slice(0, 10));   
  
  for(var k in o)     
    if(new RegExp("("+ k +")").test(fmt)){     
        fmt = fmt.replace(RegExp.$1, (o[k].length == 2 ? o[k] : '0' + o[k]));     
    }  
  return fmt;     
}     

常用场景:

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

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

       Js代码   
com.whuang.hsj.getCustomAttr=function(htmlNode22,attr)  
{  
    var hospitalId=htmlNode22[attr];  
    if(hospitalId==undefined||hospitalId==null){  
        hospitalId=htmlNode22.getAttribute(attr);  
    }  
    if(hospitalId==undefined||hospitalId==null){  
        if(htmlNode22.attributes){  
            hospitalId=htmlNode22.attributes[attr].nodeValue;  
        }  
    }  
    return hospitalId;  
}  
com.whuang.hsj.setCustomAttr=function(htmlNode22,attr22,attrValue)  
{  
    if(htmlNode22.setAttribute===undefined)  
    {  
        htmlNode22.attributes[attr22].nodeValue = attrValue;  
    }else{  
        htmlNode22.setAttribute(attr22,attrValue);  // 设置自定义属性的值  
    }  
}  

使用场景:

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

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

错误:if($thisForm==null)

正确:

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

       Js代码   
if(form.length==0){  
        alert("没有找到表单");  
        return;  
    }  

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

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

       Js代码   
bbs.add_bbsReply = function (self) {  
    if (cardid == null) {  
        alert("cardid is null");  
        return;  
    }  
    var $thisForm = null;  
if (arguments.length > 0) { 
//说明传入了参数self
        $thisForm = $(self);  
    } else {  
        $thisForm = $("#formBBS_reply");  
    }  
}  

范例:

       Js代码   
function tabSelect(url, aHref, isNav, showslider) {  
    showMask();  
    if (isNav) {  
        $('#nav li').removeClass("current")/*.removeClass("focus ")*/;  
    }  
  
    if (arguments.length > 3 && showslider) {  
        $slider_carousel.show();  
        $left_sidebar.show();  
    } else {  
        $slider_carousel.hide();  
        $left_sidebar.hide();  
    }  
    ajaxHtml(url + "&recordsPerPage=5&random22=" + Math.random(), $exchangeDiv);//page.js  
    if (isNav) {  
        $(aHref).parent().addClass("current");  
    }  
    ui_tab_wh(jQuery);  
}  

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

9,创建对象

       Js代码   
var tip = {};  

10 使悬浮的div可以拖动

       Js代码   
com.whuang.hsj.drag = function ($obj, hn) {  
    if (arguments.length == 0) {  
        return;  
    }  
    if ($obj == null || $obj == undefined) {  
        return;  
    }  
if (typeof  $obj == 'string') { 
//when $obj is a string
        $obj = $($obj);  
    }  
    var $hn = null;  
    if (arguments.length > 1) {  
        $hn = $obj.find(hn);//div h1,h2...  
    } else {  
        $hn = $obj.find("h2");  
    }  
    $hn.on({  
        mousedown: function (e) {  
            e.preventDefault();  
            var t = $obj.offset(),  
                o = e.pageX - t.left,  
                i = e.pageY - t.top;  
            //$obj.css("position", 'fixed');  
            $(document).on("mousemove.drag", function (e) {  
                $obj.offset({  
                    top: e.pageY - i,  
                    left: e.pageX - o  
                })  
            })  
        },  
        mouseup: function () {  
            $(document).unbind("mousemove.drag");  
            $obj.css("position", 'fixed');  
        }  
    });  
};//drag  

使用场景:

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