`

js 一些小技巧 2

jquery获取所在表单获取所在form获取表单对象 
阅读更多

ajs 的一些小技巧

(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;
};

 

 

0
顶
0
踩
分享到：
| js 一些小技巧
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    搜集的js实践小技巧

    下面，我们将深入探讨一些实用的JavaScript实践小技巧，这些技巧可以帮助开发者提升代码效率、可读性和维护性。 1. **立即执行函数表达式（IIFE）**：在JavaScript中，IIFE是一种常见的封装技术，避免全局变量污染...

    基于javaScript开发的控制台操作小技巧+非常适合小白入门

    基于javaScript开发的控制台操作小技巧+非常适合小白入门 基于javaScript开发的控制台操作小技巧+非常适合小白入门 基于javaScript开发的控制台操作小技巧+非常适合小白入门 基于javaScript开发的控制台操作小...

    js200多个小技巧

    根据给定的文件信息，以下是对“js200多个小技巧”中提及的部分知识点的详细解析： ### 1. HTML事件与JavaScript交互 - **`onBlur`**：当元素失去焦点时触发的事件。在示例中，用于检测输入框是否为空，并在失去...

    Javascript 实用小技巧

    在本篇标题为“Javascript实用小技巧”的文章中，作者分享了一系列实用的JavaScript代码片段，旨在帮助学习JavaScript的人士掌握一些提高编程效率的技巧。文章内容涉及了JavaScript的Function对象的apply和call方法...

    JavaScript中一些常用的小技巧

    在JavaScript编程中，掌握一些常用的小技巧可以极大地提高开发效率和代码质量。以下是一些从网络上整合的实用技巧，特别适合初学者学习。 1. 事件源对象：`event.srcElement` 可以获取触发事件的元素，而 `event....

    js中的小技巧，十分的实用

    以下是一些关于JS的实用小技巧，对于初学者来说，掌握这些知识点将有助于提升编程效率和理解力。 1. `document.write("")`：这是一个常用的输出语句，常用于在页面加载时动态插入HTML内容。 2. 注释：JS支持单行...

    常用的一些javascript小技巧

    ### 常用的一些JavaScript小技巧详解 在前端开发领域，JavaScript是不可或缺的编程语言，其灵活多变的特性使得开发者能够实现丰富的交互效果。本文将深入探讨一系列实用的JavaScript小技巧，帮助开发者提高编码效率...

    JavaScript小技巧全集

    本资料集合了众多JavaScript的小技巧，旨在帮助开发者提升工作效率，增强代码质量。 1. 变量与数据类型 - JavaScript中的变量可以通过`var`, `let`或`const`声明。理解它们之间的区别（作用域、可变性）是基础中的...

    js中的小技巧.doc

    以下是一些JS中的实用小技巧： 1. **`document.write`**：这是JavaScript中最基本的输出方法，用于向HTML文档中插入动态内容。例如，`document.write("Hello, World!");`会在页面上显示“Hello, World!”。 2. **...

    HTML的一些小技巧

    ### HTML的一些小技巧 在网页开发过程中，合理运用HTML的小技巧可以有效提升用户体验，优化页面布局及功能。本文将详细介绍给定文件中的多个HTML小技巧及其应用场景。 #### 1. 设置背景图片固定不滚动 ```html ...

    200多个js小技巧

    以上这些JavaScript小技巧都是为了增强网页的互动性和用户体验。熟练掌握并灵活运用它们，能让你的网页更加生动有趣。在实际开发中，还可以结合其他前端框架如React、Vue等，将这些技巧与现代Web技术相结合，创建更...

    js使用小技巧

    这些JavaScript小技巧涵盖了从DOM操作、事件处理、字符串处理到样式设计等多个方面，掌握它们能够帮助你在实际开发中编写更高效、更友好的代码。当然，随着技术的发展，某些方法可能已经过时，建议在使用时结合最新...

    javaScript小技巧。

    根据提供的文件内容，我们可以总结出以下几个JavaScript小技巧及相关知识点： ### 1. 引入外部JavaScript文件 在HTML文档中，可以通过`&lt;script&gt;`标签引入外部JavaScript文件来执行脚本代码。例如： ```html ...

    Javascript小技巧之生成html元素.docx

    7. **JavaScript编程的10个有用小技巧**和**12个特别有用的JavaScript小技巧【推举】**：这两篇文章分别分享了10个和12个实用的JavaScript编程技巧，是进阶学习的好资源。 总的来说，掌握生成HTML元素的技巧对...

    【JavaScript源代码】JavaScript的一些小技巧分享.docx

    本文将深入探讨《JavaScript的一些小技巧分享》文档中提及的几个实用技巧，特别是关于数组操作的部分，这些技巧可以帮助开发者更高效地编写JavaScript代码。 #### 数组去重 数组去重是在实际开发中经常遇到的需求...

    Java js小技巧

    本文将深入探讨“Java js小技巧”这一主题，分享一些实用的编程技巧，帮助开发者提升效率和代码质量。 首先，我们来看Java。Java是一种强类型、面向对象的编程语言，被广泛用于企业级应用开发、Android移动应用以及...

    JavaScript小技巧全集 JavaScript教程 JavaScript源代码集

    这个“JavaScript小技巧全集”提供了丰富的教程和源代码，旨在帮助开发者深入理解和掌握JavaScript的各种实用技巧。 首先，我们来看看JavaScript的基本语法。JavaScript是一种弱类型、解释型的语言，它的变量声明不...

Magicbox
Global site tag (gtag.js) - Google Analytics