备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

js 的一些小技巧2

2015-03-28 979
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： <div class="markdown_views"><p>js 的一些小技巧</p><p><strong>(1)传入一个表单控件(如input输入框,按钮)获取所在的form</strong></p><pre class="prettyprint"><code class=" hljs php"><span class="hljs-keyword">var</sp

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;
};
文章标签：
Web App开发
JavaScript
前端开发
iOS开发
数据安全/隐私保护
HTML5
移动开发
关键词：
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
    JS+CSS3点击粒子烟花动画js特效
    12
  • 2
    JavaScript爬虫进阶攻略：从网页采集到数据可视化
    42
  • 3
    JavaScript字符串检查：从基础到高级
    24
  • 4
    使用 JavaScript 获取 URL 参数的详细指南
    281
  • 5
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    90
  • 6
    Java Script 中的垃圾回收机制有哪些缺点
    13
  • 7
    描述 JavaScript 中的垃圾回收机制。
    17
  • 8
    如何使用 JavaScript 操作 DOM？
    13
  • 9
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    19
  • 10
    JavaScript 中的数组方法有哪些？
    10

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    阿里云oss简介和使用流程