jQuery开发过程中的一些技巧

这里总结了一些jQuery开发过程中的一些技巧，希望对大家有所帮助。http://jafeney.com/2016/01/10/2016-01-10-jquery-q/

禁用页面的右击菜单

1 2 3 4 5

$( function(){ $( document).on( 'contextmenu', function(e){ return false; }); });

新窗口打开页面

1 2 3 4 5 6 7 8 9

$( function(){ //例子1:href="http://"的超链接将会在新窗口打开链接 $( 'a[href^="http://"]').attr( 'target', '_blank'); //例子2:rel="external"的超链接将会在新窗口打开链接 $( '#a[rel$="external"]').on( 'click', function(){ this.target= "_blank"; }); });

判断浏览器类型

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

$( function(){ //Firefox 2 and above if($.support.mozilla && $.support.version>= '1.8'){ //do something } //Safari if($.support.safari){ //do something } //Chrome if($.support.chrome){ //do something } //Opera if($.support.opera){ //do something } //IE6 and below if($.support.msie && $.support.version<= 6){ //do something } //anything above IE6 if($.support.msie && $.support.version> 6){ //do something } });

输入框文字获取和失去焦点

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$( function(){ $( 'input.text1').val( "Enter your search text here"); textFill($( 'input.text1')); }); //input focus text function function textFill(input){ var originalvalue=input.val(); input.focus( function(){ if($.trim(input.val())===originalvalue){ input.val(); } }).blur( function(){ if($.trim(input.val()=== '')){ input.val(originalvalue); } }); }

返回头部滑动动画

1 2 3 4 5 6 7 8 9 10

jQuery.fn.scrollTo= function(speed){ var targetOffset=$( this).offset().top; $( 'html.body').stop().animate({ scrollTop:targetOffset},speed); return this; } // use $( '#goheader').click( function(){ $( 'body').scrollTo( 500); return false; });

获取鼠标位置

1 2 3 4 5

$( document).ready( function(){ $( document).mousemove( function(e){ $( '#XY').html( "X:"+e.pageX+ " | Y:"+e.pageY); }); });

判断元素是否存在

1 2 3 4 5

$( document).ready( function(){ if($( '#id').length){ //do something } });

点击div也可以跳转

1 2 3 4 5 6

$( 'div').click( function(){ window.location=$( this).find( 'a').attr( 'href'); return false; }); // use <div> <a href="#">home</a> </div>

设置div在屏幕中央

1 2 3 4 5 6 7 8 9 10 11

$( document).ready( function(){ jQuery.fn.center= function(){ this.css({ 'position':’absolute‘, 'top':($( window).height()- this.height())/ 2+$( window).scrollTop()+ "px", 'left':($( window).width()- this.width())/ 2+$( window).scrollLeft()+ "px" }); } //use $( '#XY').center(); });

根据浏览器的大小添加不同的样式

1 2 3 4 5 6 7 8 9 10

$( function(){ function checkWindowSize(){ if($( window).width()> 1200){ $( 'body').addClass( 'large'); } else{ $( 'body').removeClass( 'large'); } } $( window).resize(checkWindowSize); });

创建自己的选择器

1 2 3 4 5 6 7 8 9 10

$( function(){ $.extend($.expr[ ':'],{ moreThen500px: function(a){ return $(a).width()> 500 } }); $( '.box:moreThen500px').click( function(){ //... }); });

关闭所有的动画效果

1 2 3

$( function(){ jQuery.fn.off= true; });

检测鼠标的右键还是左键

1 2 3 4 5

$( function(){ $( '#XY').mousedown( function(e){ alert(e.which) //1:左键 2:中键 3:右键 }); });

回车提交表单

1 2 3 4 5 6 7

$( function(){ $( 'input').keyup( function(e){ if(e.which=== '13'){ alert( '回车提交！'); } }); });

设置全局Ajax参数

1 2 3 4 5 6 7 8 9 10

$( function(){ $( '#load').ajaxStart( function(){ showLoading(); //显示loading disableButtons(); //禁用按钮 }); $( '#load').ajaxComplete( function(){ hideLoading(); //隐藏 loading enableButtons(); //启用按钮 }); });

获取选中的下拉框

1 2	$( '#someElement').find( 'option:selected'); $( '#someElement option:selected');

切换复选框

1 2 3 4 5

var tog= false; $( 'button').click( function(){ $( 'input[type=checkbox]').attr( 'checked',!tog); tog=!tog; });

使用siblings()来选择同辈元素

1 2 3 4 5 6 7 8 9

//不这样做 $( '#nav li').click( function(){ $( '#nav li').removeClass( 'active'); $( this).addClass( 'active'); }); //替代的做法 $( '#nav li').click( function(){ $( this).addClass( 'active').siblings().removeClass( 'active'); });

在一段时间之后自动隐藏或者关闭元素

1	$( 'div').slideUp( 300).delay( 3000).fadeIn( 400);

使用Firefox和Firebug来记录事件日志

1 2 3 4 5 6

jQuery.log=jQuery.fn.log= function(msg){ if( console){ console.log( '%s:%o',msg, this); } return this; }

为任何与选择器相匹配的元素绑定事件

1 2 3

$( 'table').on( 'click', 'td', function(){ $( this).toggleClass( 'hover'); });

使用CSS钩子

1 2 3 4 5 6 7 8 9 10

$.cssHooks[ 'borderRadius']={ get: function(elem,computed,extra){ //depending on browser,read the value of -moz-,-webkit-,-o-... } set: function(elem,value){ //set the appropriate css3 property } }; //use $( '#reset').css( 'borderRadius', 5);

$.proxy()的使用

使用回调方法的缺点之一是当执行类库中的方法后，上下文对象this被设置到另外一个元素，而使用$.proxy()可以解决这个问题，代码如下：

1 2 3 4 5 6 7

$( '#panel').fadeIn( function(){ //Using $.proxy: $( '#panel button').click($.proxy( function(){ //this 指向 #panel $( this).fadeOut(); }, this)); });

限制Text-Area域中的字符个数

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

jQuery.fn.maxLength= function(max){ this.each( function(){ var type= this.tagName.toLowerCase(); var inputType= this.type? this.type.toLowerCase(): null; if(type=== "input" && inputType=== "text" || inputType=== "password"){ //应用标准的maxLength this.maxLength=max;e } else if(type=== "textarea"){ this.οnkeypress= function(e){ var ob=e||event; var keyCode=ob.keyCode; var hasSlection= document.selection? document.selection.createRange().text.length> 0: this.selectionStart!== this.selectionEnd; return !( this.value.length>==max && (keyCode> 50 || keyCode=== 32 || keyCode=== 0 || keyCode=== 13) && !ob.ctrlKey && !ob.altKey && !hasSlection); }; this.οnkeyup= function(){ if( this.value.length>max){ this.value= this.value.substring( 0,max); } }; } }); }; //use $( '#mytextarea').maxLength( 10);

本地存储

1	localStorage.someData= "This is going to be saved";

解析json数据时报parseError错误

1 2 3 4 5 6 7 8 9 10

//1.4之前版本，key没引号，这样没问题 { key: "123", status: "0" } //升级成jQuery1.4之后，都必须加上双引号，格式如下： { "key": "123", "status": "0" }

从元素中除去HTML

1 2 3 4 5 6 7 8 9 10 11

( function($){ $.fn.stripHtml= function(){ var regExp= /<("[^"]*"|'[^']*'|[^'">])*>/gi; this.each( function(){ $( this).html($( this).html().replace(regExp, '')); }); return $( this); } })(jQuery); //use $( 'div').stripHtml();

拓展String对象的方法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

$.extend( String.prototype,{ isPositiveInteger: function(){ return ( new RegExp( /^[1-9]\d/).test( this)); }, isInteger: function(){ return ( new RegExp( /^\d+$/).test( this)); }, isNumber: function(value,element){ return ( new RegExp( /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/).test( this)); }, trim: function(){ return this.replace( /(^\s*)|(\s*$)|\r|\n/g, ""); }, trans: function(){ return this.replace( /&lt;/g, '<').replace( /&gt;/g, '>').replace( /&quot;/g, '"'); }, replaceAll: function(os,ns){ return this.replace( new RegExp(os, "gm"),ns); }, skipChar: function(ch){ if(! this || this.length=== 0){ return '';} if( this.charAt( 0)===ch){ return this.substring( 1).skipChar(ch);} return this; }, isValidPwd: function(){ return ( new RegExp( /^([_]|[a-zA-Z0-9]){6,32}$/).test( this)); }, isValidMail: function(){ return ( new RegExp( /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test( this.trim())); }, isSpaces: function(){ for( var i= 0,length= this.length;i<length;i++){ var ch= this.charAt(i); if(ch!= ' ' && ch!= "\n" && ch!= "\t" && ch!= "\r"){ return false; } return true; } }, isPhone: function(){ return ( new RegExp( /(^([0-9]{3,4}[-])?\d{3,8}(-\d{1,6})?$)|(^\([0-9]{3,4}\)\d{3,8}(\(\d{1,6}\))?$)|(^\d{3,8}$)/).test( this)); }, isUrl: function(){ return ( new RegExp( /^[a-zA-Z]+:\/\/([a-zA-Z0-9\-\.]+)(-\w .\/?%&=:]*)$/).test( this)); }, isExternalUrl: function(){ return this.isUrl() && this.indexOf( "://"+ document.domain)=== -1; } }); //use $( 'input').val().isInteger();