js 的一些小技巧2

浏览数：32 / 时间：2015年06月09日

js 的一些小技巧

(1)传入一个表单控件(如input输入框,按钮)获取所在的form

var getForm= function (formElement) {
            var $that=$(formElement).parent();
            var max=6;//limit the depth
            var fieldsetElement=null;//form element
            var tagName=null;//html tag name
            while((fieldsetElement=$that.get(0))&&fieldsetElement.tagName!==undefined&&(tagName=fieldsetElement.tagName.toLowerCase())!==‘form‘&&max>0){
                if(tagName===‘fieldset‘){//html5 new tag
                    $that=$(fieldsetElement.form);
                    break;
                }
                $that=$that.parent();
                max--;
            }
            console.log(max);
            return $that;
        };

完整示例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <title></title>
    <script type="text/javascript">
        var getForm = function (formElement) {
            var $that = $(formElement).parent();
            var max = 6;//limit the depth
            var fieldsetElement = null;//form element
            var tagName = null;//html tag name
            while ((fieldsetElement = $that.get(0)) && fieldsetElement.tagName !== undefined && (tagName = fieldsetElement.tagName.toLowerCase()) !== ‘form‘ && max > 0) {
                if (tagName === ‘fieldset‘) {//html5 new tag
                    $that = $(fieldsetElement.form);
                    break;
                }
                $that = $that.parent();
                max--;
            }
            console.log(max);
            return $that;
        };
        var getForm22 = function (self) {
            $form = getForm(self);
            console.log($form);
        }

    </script>
</head>
<body>
<div id="login-content">
    <form id="myForm">
        <div>
            <div>
                <div class="inputs">
                    <input id="username" type="text" name="username" placeholder="用户名"

                           required>
                    <input id="password" type="password" name="password" placeholder="密码"
                           required>
                </div>
                <div>
                    <input type="button" id="submit" onclick="getForm22(this)"
                           value="登录">

                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>

注意:参数是普通的html元素,返回的是jquery对象
(2)js把毫秒转化为时间

var releaseDate=new Date(Number(obj.releaseTime)*1000).format(‘MM-dd  HH:mm‘);//把毫秒数转化为日期

注意:上述代码中obj.releaseTime的单位是秒(不是毫秒)

(3)把数组拼接为字符串:使用join

var html = [];
        if(data.length2>0){
            var recordList=data.recordList;
            for(var i=0;i<data.length2;i++){
                html.push(getBBSCommentListItem(recordList[i]));
            }
            $livespanel_ul.append(html.join(‘‘));
        }

(4)web app中使用jsonp跨域请求时如何带上sessionid
跨域访问
在url地址最后面加上;jsessionid=<你的实际sessionid>
实例

var modi_url=‘http://‘+server_url+‘/user/mod_pass?callback=?&password=‘+old_password_val+"&password2="+new_password_val+";jsessionid="+window.sessionId;
    console.log&&console.log(modi_url);
    $.jsonP({url:modi_url,success:function(data){
        var result=data.result;
        hideMask2();
        switch (result)
        {
            case 1:
                user.password=new_password_val;
                alert("修改成功");
                $.ui.goBack();
                break;
            case 23:
                alert("新密码不能为空");
                break;
            case 21:
                alert("请先登录");
                $.ui.goBack();
                break;
            case 22:
                alert("两次密码不能相同");
                break;
            case 24:
                alert("密码已过期,请点击右上角的刷新按钮");
                break;
        }

    }});

(5)创建数组
var html = [];
(6)判断对象是否包含指定属性
‘length’ in objArr 可以判断objArr 是否包含length属性
示例:

if (!(‘length‘ in objArr)) {// just only single component (not array).
        objArr.style.display = "block";
    }else{
    for ( var i = 0; i < objArr.length; i++) {
        var objOne = objArr[i];
        objOne.style.display = "block";
    }
    }

(7)获取浏览器类型
jquery-1.11.1.js中没有了获取浏览器的方法,可以添加如下代码

/***
 * get browser type
 * @param jQuery
 */
var checkBrowser = function (jQuery) {

    if (jQuery.browser) return;

    jQuery.browser = {};
    jQuery.browser.mozilla = false;
    jQuery.browser.webkit = false;
    jQuery.browser.opera = false;
    jQuery.browser.msie = false;

    var nAgt = navigator.userAgent;
    jQuery.browser.name = navigator.appName;
    jQuery.browser.fullVersion = ‘‘ + parseFloat(navigator.appVersion);
    jQuery.browser.majorVersion = parseInt(navigator.appVersion, 10);
    var nameOffset, verOffset, ix;

// In Opera, the true version is after "Opera" or after "Version"
    if ((verOffset = nAgt.indexOf("Opera")) != -1) {
        jQuery.browser.opera = true;
        jQuery.browser.name = "Opera";
        jQuery.browser.fullVersion = nAgt.substring(verOffset + 6);
        if ((verOffset = nAgt.indexOf("Version")) != -1)
            jQuery.browser.fullVersion = nAgt.substring(verOffset + 8);
    }
// In MSIE, the true version is after "MSIE" in userAgent
    else if ((verOffset = nAgt.indexOf("MSIE")) != -1) {
        jQuery.browser.msie = true;
        jQuery.browser.name = "Microsoft Internet Explorer";
        jQuery.browser.fullVersion = nAgt.substring(verOffset + 5);
    }
// In Chrome, the true version is after "Chrome"
    else if ((verOffset = nAgt.indexOf("Chrome")) != -1) {
        jQuery.browser.webkit = true;
        jQuery.browser.name = "Chrome";
        jQuery.browser.fullVersion = nAgt.substring(verOffset + 7);
    }
// In Safari, the true version is after "Safari" or after "Version"
    else if ((verOffset = nAgt.indexOf("Safari")) != -1) {
        jQuery.browser.webkit = true;
        jQuery.browser.name = "Safari";
        jQuery.browser.fullVersion = nAgt.substring(verOffset + 7);
        if ((verOffset = nAgt.indexOf("Version")) != -1)
            jQuery.browser.fullVersion = nAgt.substring(verOffset + 8);
    }
// In Firefox, the true version is after "Firefox"
    else if ((verOffset = nAgt.indexOf("Firefox")) != -1) {
        jQuery.browser.mozilla = true;
        jQuery.browser.name = "Firefox";
        jQuery.browser.fullVersion = nAgt.substring(verOffset + 8);
    }
// In most other browsers, "name/version" is at the end of userAgent
    else if ((nameOffset = nAgt.lastIndexOf(‘ ‘) + 1) <
        (verOffset = nAgt.lastIndexOf(‘/‘))) {
        jQuery.browser.name = nAgt.substring(nameOffset, verOffset);
        jQuery.browser.fullVersion = nAgt.substring(verOffset + 1);
        if (jQuery.browser.name.toLowerCase() == jQuery.browser.name.toUpperCase()) {
            jQuery.browser.name = navigator.appName;
        }
    }
// trim the fullVersion string at semicolon/space if present
    if ((ix = jQuery.browser.fullVersion.indexOf(";")) != -1)
        jQuery.browser.fullVersion = jQuery.browser.fullVersion.substring(0, ix);
    if ((ix = jQuery.browser.fullVersion.indexOf(" ")) != -1)
        jQuery.browser.fullVersion = jQuery.browser.fullVersion.substring(0, ix);

    jQuery.browser.majorVersion = parseInt(‘‘ + jQuery.browser.fullVersion, 10);
    if (isNaN(jQuery.browser.majorVersion)) {
        jQuery.browser.fullVersion = ‘‘ + parseFloat(navigator.appVersion);
        jQuery.browser.majorVersion = parseInt(navigator.appVersion, 10);
    }
    jQuery.browser.version = jQuery.browser.majorVersion;
};
checkBrowser(jQuery);

以上用于jquery.
下面的不是用于jquery的 :

/***
 * get browser type and browser version and language
 when page open,the function will be executed automaticly
 * @param write22
 * @returns {{systemLanguage,userLanguage,ver}}
 */
com.whuang.hsj.getBrowserVersion=(function(write22){
    var browser = {};
//    console.dir(navigator);
    var userAgent = navigator.userAgent.toLowerCase();
    /*for(osvId in navigator){
        var value222=navigator[osvId];
        document.writeln(osvId+":&nbsp;"+value222+‘<br>‘);
    }*/
    var lang22=navigator.language;
//    document.writeln(userAgent+‘<br>‘);
//    document.writeln(navigator.appCodeName+‘<br>‘);
    var s;
    (s = userAgent.match(/msie ([\d.]+)/)) ? browser.ie = s[1] : (s = userAgent.match(/firefox\/([\d.]+)/)) ? browser.firefox = s[1] : (s = userAgent.match(/chrome\/([\d.]+)/)) ? browser.chrome = s[1] :
        (s = userAgent.match(/opera.([\d.]+)/)) ? browser.opera = s[1] : (s = userAgent.match(/version\/([\d.]+).*safari/)) ? browser.safari = s[1] : 0;
    var version = "";
    if (browser.ie) {
        version =  browser.ie;
        if(write22 && write22!=false && write22!=‘false‘){
            document.writeln(‘IE<br>‘);
        }
        if(!browser.lang ||browser.lang==undefined){
            lang22=navigator.browserLanguage;
            browser.systemLanguage=navigator.systemLanguage ;
            browser.userLanguage=navigator.userLanguage;
        }
    }
    else
    if (browser.firefox) {
        version = browser.firefox;
        browser.mozilla=browser.firefox;
        if(write22 && write22!=false && write22!=‘false‘){
            document.writeln(‘firefox<br>‘);
        }
    }
    else
    if (browser.chrome) {
        version = browser.chrome;
        if(write22 && write22!=false && write22!=‘false‘){
            document.writeln(‘chrome<br>‘);
        }
    }
    else
    if (browser.opera) {
        version =  browser.opera;
        if(write22 && write22!=false && write22!=‘false‘){
            document.writeln(‘opera<br>‘);
        }
    }
    else
    if (browser.safari) {
        version =  browser.safari;
        if(write22 && write22!=false && write22!=‘false‘){
            document.writeln(‘Safari<br>‘);
        }
    }
    else {
        version = ‘unknown browser‘;
    }
    browser.ver=version;
    if(lang22 && lang22!=undefined)
    {
        browser.lang=lang22.toLowerCase();
    }
    return browser;
})();

使用方法:

var brow ;
        if(com.whuang.hsj.getBrowserVersion){
            brow =com.whuang.hsj.getBrowserVersion;
        }
        if(type22==‘mid‘||type22==‘middle‘){
            $("#loadPanel").css("background-image", "url(\"../static/images/loading/loading_middle.gif\")");
            if(brow&&brow.chrome){//因为在chrome 中有时背景图片gif不显示
                $("#loading_gif").css("display","block");
            $("#loading_gif").attr("src", "../static/images/loading/loading_middle.gif");  
            }

        }else if(type22==‘small‘||type22==‘little‘){
            $("#loadPanel").css("background-image", "url(\"../static/images/loading/loading_small.gif\")");
            if(brow&&brow.chrome){//因为在chrome 中有时背景图片gif不显示
                $("#loading_gif").css("display","block");
            $("#loading_gif").attr("src", "../static/images/loading/loading_small.gif");
        }
        }else{
            $("#loadPanel").css("background-image", "url(\""+type22+"\")");
        }

(8)通过name属性获取单个元素

/***
 * if is radio ,please use com.whuang.hsj.$$arr
 * @param name22
 * @returns
 */
com.whuang.hsj.$$one = function(name22) {
    if (com.whuang.hsj.isHasValue(name22)) {
        var names222=document.getElementsByName(name22);
        //alert("names222:"+names222);
        //alert("typeof:"+(typeof names222 ));
        var className=Object.prototype.toString.call(names222);
        var boolean_isArray;
        var ieHtmlCollection=‘[object HTMLCollection]‘;
        if(isIEtest)//if browser is IE
        {
                 boolean_isArray=( className=== ‘[object Object]‘) ||(className=== ieHtmlCollection) ||names222 instanceof Array ;
        }else
        {
                 boolean_isArray=( className=== ‘[object Array]‘) ||(className=== ‘[object NodeList]‘  )||(className==ieHtmlCollection)||names222 instanceof Array||names222 instanceof NodeList;
        }
        if(names222){
             if(boolean_isArray){
                     return names222[0];
             }else{
                     return names222;
            }
        }else{
            return "";
        }
    } else {
        return "";
    }
};

使用场景:
html代码:

<input id="username" type="text" name="username" placeholder="用户名"
                           required>

js代码

var username=com.whuang.hsj.$$one("username");
        alert(username.value);

(9)字符串source 中是否包含key2

com.whuang.hsj.contains=function(source,key2){
    var isDownload=(source.indexOf(key2)>-1);
    if(isDownload){
        return true;
    }else{
        return false;
    }
}

(10)判断以指定字符串开头或结尾

com.whuang.hsj.startWith=function(str,regex){
    if(regex==undefined||str==undefined){
        return false;
    }
    return str.indexOf(regex)==0;
};
com.whuang.hsj.endWith=function(str,regex){
    return str.lastIndexOf(regex)==str.length-regex.length;
};