js 一些小技巧 2

ajs 的一些小技巧

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

 

Js代码  

  1. var getForm= function (formElement) {  
  2.            var $that=$(formElement).parent();  
  3.            var max=6;//limit the depth  
  4.            var fieldsetElement=null;//form element  
  5.            var tagName=null;//html tag name  
  6.            while((fieldsetElement=$that.get(0))&&fieldsetElement.tagName!==undefined&&(tagName=fieldsetElement.tagName.toLowerCase())!=='form'&&max>0){  
  7.                if(tagName==='fieldset'){//html5 new tag  
  8.                    $that=$(fieldsetElement.form);  
  9.                    break;  
  10.                }  
  11.                $that=$that.parent();  
  12.                max--;  
  13.            }  
  14.            console.log(max);  
  15.            return $that;  
  16.        };  

 完整示例:

 

 

Html代码  

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <script type="text/javascript" src="js/jquery-1.11.1.js"></script>  
  6.     <title></title>  
  7.     <script type="text/javascript">  
  8.         var getForm = function (formElement) {  
  9.             var $that = $(formElement).parent();  
  10.             var max = 6;//limit the depth  
  11.             var fieldsetElement = null;//form element  
  12.             var tagName = null;//html tag name  
  13.             while ((fieldsetElement = $that.get(0)) && fieldsetElement.tagName !== undefined && (tagName = fieldsetElement.tagName.toLowerCase()) !== 'form' && max > 0) {  
  14.                 if (tagName === 'fieldset') {//html5 new tag  
  15.                     $that = $(fieldsetElement.form);  
  16.                     break;  
  17.                 }  
  18.                 $that = $that.parent();  
  19.                 max--;  
  20.             }  
  21.             console.log(max);  
  22.             return $that;  
  23.         };  
  24.         var getForm22 = function (self) {  
  25.             $form = getForm(self);  
  26.             console.log($form);  
  27.         }  
  28.   
  29.     </script>  
  30. </head>  
  31. <body>  
  32. <div id="login-content">  
  33.     <form id="myForm">  
  34.         <div>  
  35.             <div>  
  36.                 <div class="inputs">  
  37.                     <input id="username" type="text" name="username" placeholder="用户名"  
  38.   
  39.                            required>  
  40.                     <input id="password" type="password" name="password" placeholder="密码"  
  41.                            required>  
  42.                 </div>  
  43.                 <div>  
  44.                     <input type="button" id="submit" onclick="getForm22(this)"  
  45.                            value="登录">  
  46.                    
  47.                 </div>  
  48.             </div>  
  49.         </div>  
  50.     </form>  
  51. </div>  
  52. </body>  
  53. </html>  

 注意:参数是普通的html元素,返回的是jQuery对象

 

(2)js把毫秒转化为时间

 

Js代码  

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

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

 

 

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

 

Js代码  

  1. var html = [];  
  2.        if(data.length2>0){  
  3.            var recordList=data.recordList;  
  4.            for(var i=0;i<data.length2;i++){  
  5.                html.push(getBBSCommentListItem(recordList[i]));  
  6.            }  
  7.            $livespanel_ul.append(html.join(''));  
  8.        }  

 

 

(4)web app中使用jsonp跨域请求时如何带上sessionid

跨域访问

在url地址最后面加上;jsessionid=<你的实际sessionid>

实例

 

Js代码  

  1. var modi_url='http://'+server_url+'/user/mod_pass?callback=?&password='+old_password_val+"&password2="+new_password_val+";jsessionid="+window.sessionId;  
  2.     console.log&&console.log(modi_url);  
  3.     $.jsonP({url:modi_url,success:function(data){  
  4.         var result=data.result;  
  5.         hideMask2();  
  6.         switch (result)  
  7.         {  
  8.             case 1:  
  9.                 user.password=new_password_val;  
  10.                 alert("修改成功");  
  11.                 $.ui.goBack();  
  12.                 break;  
  13.             case 23:  
  14.                 alert("新密码不能为空");  
  15.                 break;  
  16.             case 21:  
  17.                 alert("请先登录");  
  18.                 $.ui.goBack();  
  19.                 break;  
  20.             case 22:  
  21.                 alert("两次密码不能相同");  
  22.                 break;  
  23.             case 24:  
  24.                 alert("密码已过期,请点击右上角的刷新按钮");  
  25.                 break;  
  26.         }  
  27.   
  28.     }});  

 (5)创建数组

 

var html = [];

(6)判断对象是否包含指定属性

'length' in objArr 可以判断objArr 是否包含length属性

示例:

 

Js代码  

  1. if (!('length' in objArr)) {// just only single component (not array).  
  2.         objArr.style.display = "block";  
  3.     }else{  
  4.     for ( var i = 0; i < objArr.length; i++) {  
  5.         var objOne = objArr[i];  
  6.         objOne.style.display = "block";  
  7.     }  
  8.     }  

 

 

(7)获取浏览器类型

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

 

Js代码  

  1. /*** 
  2.  * get browser type 
  3.  * @param jQuery 
  4.  */  
  5. var checkBrowser = function (jQuery) {  
  6.   
  7.     if (jQuery.browser) return;  
  8.   
  9.     jQuery.browser = {};  
  10.     jQuery.browser.mozilla = false;  
  11.     jQuery.browser.webkit = false;  
  12.     jQuery.browser.opera = false;  
  13.     jQuery.browser.msie = false;  
  14.   
  15.     var nAgt = navigator.userAgent;  
  16.     jQuery.browser.name = navigator.appName;  
  17.     jQuery.browser.fullVersion = '' + parseFloat(navigator.appVersion);  
  18.     jQuery.browser.majorVersion = parseInt(navigator.appVersion, 10);  
  19.     var nameOffset, verOffset, ix;  
  20.   
  21. // In Opera, the true version is after "Opera" or after "Version"  
  22.     if ((verOffset = nAgt.indexOf("Opera")) != -1) {  
  23.         jQuery.browser.opera = true;  
  24.         jQuery.browser.name = "Opera";  
  25.         jQuery.browser.fullVersion = nAgt.substring(verOffset + 6);  
  26.         if ((verOffset = nAgt.indexOf("Version")) != -1)  
  27.             jQuery.browser.fullVersion = nAgt.substring(verOffset + 8);  
  28.     }  
  29. // In MSIE, the true version is after "MSIE" in userAgent  
  30.     else if ((verOffset = nAgt.indexOf("MSIE")) != -1) {  
  31.         jQuery.browser.msie = true;  
  32.         jQuery.browser.name = "Microsoft Internet Explorer";  
  33.         jQuery.browser.fullVersion = nAgt.substring(verOffset + 5);  
  34.     }  
  35. // In Chrome, the true version is after "Chrome"  
  36.     else if ((verOffset = nAgt.indexOf("Chrome")) != -1) {  
  37.         jQuery.browser.webkit = true;  
  38.         jQuery.browser.name = "Chrome";  
  39.         jQuery.browser.fullVersion = nAgt.substring(verOffset + 7);  
  40.     }  
  41. // In Safari, the true version is after "Safari" or after "Version"  
  42.     else if ((verOffset = nAgt.indexOf("Safari")) != -1) {  
  43.         jQuery.browser.webkit = true;  
  44.         jQuery.browser.name = "Safari";  
  45.         jQuery.browser.fullVersion = nAgt.substring(verOffset + 7);  
  46.         if ((verOffset = nAgt.indexOf("Version")) != -1)  
  47.             jQuery.browser.fullVersion = nAgt.substring(verOffset + 8);  
  48.     }  
  49. // In Firefox, the true version is after "Firefox"  
  50.     else if ((verOffset = nAgt.indexOf("Firefox")) != -1) {  
  51.         jQuery.browser.mozilla = true;  
  52.         jQuery.browser.name = "Firefox";  
  53.         jQuery.browser.fullVersion = nAgt.substring(verOffset + 8);  
  54.     }  
  55. // In most other browsers, "name/version" is at the end of userAgent  
  56.     else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) <  
  57.         (verOffset = nAgt.lastIndexOf('/'))) {  
  58.         jQuery.browser.name = nAgt.substring(nameOffset, verOffset);  
  59.         jQuery.browser.fullVersion = nAgt.substring(verOffset + 1);  
  60.         if (jQuery.browser.name.toLowerCase() == jQuery.browser.name.toUpperCase()) {  
  61.             jQuery.browser.name = navigator.appName;  
  62.         }  
  63.     }  
  64. // trim the fullVersion string at semicolon/space if present  
  65.     if ((ix = jQuery.browser.fullVersion.indexOf(";")) != -1)  
  66.         jQuery.browser.fullVersion = jQuery.browser.fullVersion.substring(0, ix);  
  67.     if ((ix = jQuery.browser.fullVersion.indexOf(" ")) != -1)  
  68.         jQuery.browser.fullVersion = jQuery.browser.fullVersion.substring(0, ix);  
  69.   
  70.     jQuery.browser.majorVersion = parseInt('' + jQuery.browser.fullVersion, 10);  
  71.     if (isNaN(jQuery.browser.majorVersion)) {  
  72.         jQuery.browser.fullVersion = '' + parseFloat(navigator.appVersion);  
  73.         jQuery.browser.majorVersion = parseInt(navigator.appVersion, 10);  
  74.     }  
  75.     jQuery.browser.version = jQuery.browser.majorVersion;  
  76. };  
  77. checkBrowser(jQuery);  

以上用于jquery.

 

下面的不是用于jquery的 :

 

Js代码  

  1. /*** 
  2.  * get browser type and browser version and language 
  3.  when page open,the function will be executed automaticly 
  4.  * @param write22 
  5.  * @returns {{systemLanguage,userLanguage,ver}} 
  6.  */  
  7. com.whuang.hsj.getBrowserVersion=(function(write22){  
  8.     var browser = {};  
  9. //    console.dir(navigator);  
  10.     var userAgent = navigator.userAgent.toLowerCase();  
  11.     /*for(osvId in navigator){ 
  12.         var value222=navigator[osvId]; 
  13.         document.writeln(osvId+":&nbsp;"+value222+'<br>'); 
  14.     }*/  
  15.     var lang22=navigator.language;  
  16. //    document.writeln(userAgent+'<br>');  
  17. //    document.writeln(navigator.appCodeName+'<br>');  
  18.     var s;  
  19.     (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] :  
  20.         (s = userAgent.match(/opera.([\d.]+)/)) ? browser.opera = s[1] : (s = userAgent.match(/version\/([\d.]+).*safari/)) ? browser.safari = s[1] : 0;  
  21.     var version = "";  
  22.     if (browser.ie) {  
  23.         version =  browser.ie;  
  24.         if(write22 && write22!=false && write22!='false'){  
  25.             document.writeln('IE<br>');  
  26.         }  
  27.         if(!browser.lang ||browser.lang==undefined){  
  28.             lang22=navigator.browserLanguage;  
  29.             browser.systemLanguage=navigator.systemLanguage ;  
  30.             browser.userLanguage=navigator.userLanguage;  
  31.         }  
  32.     }  
  33.     else  
  34.     if (browser.firefox) {  
  35.         version = browser.firefox;  
  36.         browser.mozilla=browser.firefox;  
  37.         if(write22 && write22!=false && write22!='false'){  
  38.             document.writeln('firefox<br>');  
  39.         }  
  40.     }  
  41.     else  
  42.     if (browser.chrome) {  
  43.         version = browser.chrome;  
  44.         if(write22 && write22!=false && write22!='false'){  
  45.             document.writeln('chrome<br>');  
  46.         }  
  47.     }  
  48.     else  
  49.     if (browser.opera) {  
  50.         version =  browser.opera;  
  51.         if(write22 && write22!=false && write22!='false'){  
  52.             document.writeln('opera<br>');  
  53.         }  
  54.     }  
  55.     else  
  56.     if (browser.safari) {  
  57.         version =  browser.safari;  
  58.         if(write22 && write22!=false && write22!='false'){  
  59.             document.writeln('Safari<br>');  
  60.         }  
  61.     }  
  62.     else {  
  63.         version = 'unknown browser';  
  64.     }  
  65.     browser.ver=version;  
  66.     if(lang22 && lang22!=undefined)  
  67.     {  
  68.         browser.lang=lang22.toLowerCase();  
  69.     }  
  70.     return browser;  
  71. })();  

 使用方法:

 

 

Js代码  

  1. var brow ;  
  2.         if(com.whuang.hsj.getBrowserVersion){  
  3.             brow =com.whuang.hsj.getBrowserVersion;  
  4.         }  
  5.         if(type22=='mid'||type22=='middle'){  
  6.             $("#loadPanel").css("background-image", "url(\"../static/images/loading/loading_middle.gif\")");  
  7.             if(brow&&brow.chrome){//因为在chrome 中有时背景图片gif不显示  
  8.                 $("#loading_gif").css("display","block");  
  9.             $("#loading_gif").attr("src", "../static/images/loading/loading_middle.gif");     
  10.             }  
  11.               
  12.         }else if(type22=='small'||type22=='little'){  
  13.             $("#loadPanel").css("background-image", "url(\"../static/images/loading/loading_small.gif\")");  
  14.             if(brow&&brow.chrome){//因为在chrome 中有时背景图片gif不显示  
  15.                 $("#loading_gif").css("display","block");  
  16.             $("#loading_gif").attr("src", "../static/images/loading/loading_small.gif");  
  17.         }  
  18.         }else{  
  19.             $("#loadPanel").css("background-image", "url(\""+type22+"\")");  
  20.         }  

 

 

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

 

Js代码  

  1. /*** 
  2.  * if is radio ,please use com.whuang.hsj.$$arr 
  3.  * @param name22 
  4.  * @returns 
  5.  */  
  6. com.whuang.hsj.$$one = function(name22) {  
  7.     if (com.whuang.hsj.isHasValue(name22)) {  
  8.         var names222=document.getElementsByName(name22);  
  9.         //alert("names222:"+names222);  
  10.         //alert("typeof:"+(typeof names222 ));  
  11.         var className=Object.prototype.toString.call(names222);  
  12.         var boolean_isArray;  
  13.         var ieHtmlCollection='[object HTMLCollection]';  
  14.         if(isIEtest)//if browser is IE  
  15.         {  
  16.                  boolean_isArray=( className=== '[object Object]') ||(className=== ieHtmlCollection) ||names222 instanceof Array ;  
  17.         }else  
  18.         {  
  19.                  boolean_isArray=( className=== '[object Array]') ||(className=== '[object NodeList]'  )||(className==ieHtmlCollection)||names222 instanceof Array||names222 instanceof NodeList;  
  20.         }  
  21.         if(names222){  
  22.              if(boolean_isArray){  
  23.                      return names222[0];  
  24.              }else{  
  25.                      return names222;  
  26.             }  
  27.         }else{  
  28.             return "";  
  29.         }  
  30.     } else {  
  31.         return "";  
  32.     }  
  33. };  

 使用场景:

 

html代码:

 

Html代码  

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

 js代码

 

 

Js代码  

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

 

 

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

 

Js代码  

  1. com.whuang.hsj.contains=function(source,key2){  
  2.     var isDownload=(source.indexOf(key2)>-1);  
  3.     if(isDownload){  
  4.         return true;  
  5.     }else{  
  6.         return false;  
  7.     }  
  8. }  

 

 

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

 

Js代码  

  1. com.whuang.hsj.startWith=function(str,regex){  
  2.     if(regex==undefined||str==undefined){  
  3.         return false;  
  4.     }  
  5.     return str.indexOf(regex)==0;  
  6. };  
  7. com.whuang.hsj.endWith=function(str,regex){  
  8.     return str.lastIndexOf(regex)==str.length-regex.length;  
  9. };  

 

时间： 2024-11-07 20:18:58

js 一些小技巧 2的相关文章

web开发常用js功能性小技巧

js|web|技巧 web开发常用js功能性小技巧 -------------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">; <HTML>; <HEAD>; <TITLE>; New Document </TITLE&g

js一些小技巧 3

js一些小技巧 1. (1)同时按Ctrl+Enter提交本表单 在多行文本域增加onkeydown 事件 <form id="formNews_reply" class="bbs-send-form form" onsubmit="return news.add_newsReply(this);"> <fieldset class="inputs"> <label for="comme

js 一些小技巧 3

JavaScript的一些小技巧 (1)同时按Ctrl+Enter提交本表单 在多行文本域增加onkeydown 事件 com.whuang.hsj.ctrlEnter2Submit的实现如下: Prettyprint代码   <code style="display: block; padding: 0px; color: inherit; font-family: 'Source Code Pro', monospace; font-size: inherit; border-radi

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(

.net下不用AJAX实现前台JS调用后台C#方法(小技巧)

纯属小技巧,高手见笑了. 一提到如何在前台JS调用后台C#方法,AJAX成为了必然的想法. 只是实现的细节采用AJAX 1.0或者AjaxPro的区别. 其实如果不用AJAX,我们也能够很方便地利用JS调用后台方法. 步骤如下: 1 前台放一个按钮.设置为隐藏.注意:不能直接设置Visible=false的方式,这样的话在ASP.Net 2.0编译后的代码里是找不到这个按钮的.需要设置风格:style="display:none;" 2 双击按钮,写入C#方法,或者写一个调用后台其他方

CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

之前不久,由于自己平时涉猎还算广泛,总结了一篇博客: 这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已 ,没想到受到了大家的欢迎,有人希望能博主还能整理个 CSS的一些黑魔法小技巧,无奈我 CSS 一直很渣,没什么干货,最近写了一个 Chrome 插件 GayHub,算是把 GitHub 的样式审查了个变,在写的过程中,也收获了很多关于 CSS 的小技巧,尤其是开始的第一个技巧,学习到了很多,于是再加上一波搜集,就诞生这篇博文,欢迎补充~~~:joy:. 1.利用 CSS 

js、jquery实用小技巧集合

Tip16:JS的定时器 JS 中有两种定时器,setTimeout('fn', t) 和 setInterval('fn', t),'fn'指的是定时执行的方法名,字符串类型.       setTimeout('fn', t):   只执行一次,执行完成后将销毁.   setInterval('fn', t):一直执行.   (Date:2012-02-17)   ----------------------------------------------------------------

客户端js性能优化小技巧整理_javascript技巧

下面是一些关于客户端JS性能的一些优化的小技巧: 1. 关于JS的循环,循环是一种常用的流程控制.JS提供了三种循环:for(;;).while().for(in).在这三种循环中 for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;).while()循环的性能基本持平.当然,推荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或--运算符. 2. 如果需要遍历数组,应该先缓存数组长度var len=arr.len

js实现小窗口拖拽效果_javascript技巧

本文实例为大家分享了js实现窗口拖拽的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { height: 300px; width: 300px; background-color: green; po