如今，越来越多的人在使用 jQuery 类库。这也意味着，需要越来越多有用的 jQuery 技巧和解决方案。下面是我整理的一些实用的 jQuery 技巧
1.禁用页面的右键菜单
<script> $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); </script>
2.新窗口打开页面
<script> $(document).ready(function() { //例子1: href=”http://”的超链接将会在新窗口打开链接 $('a[href^="http://"]').attr("target", "_blank"); //例子2: rel="external"的超链接将会在新窗口打开链接 $("a[rel$='external']").click(function(){ this.target = "_blank"; }); }); </script>
3.判断浏览器类型
<script> $(document).ready(function() { // Firefox 2 and above if ($.browser.mozilla && $.browser.version >= "1.8" ){ // do something } // Safari if( $.browser.safari ){ // do something } // Chrome if( $.browser.chrome){ // do something } // Opera if( $.browser.opera){ // do something } // IE6 and below if ($.browser.msie && $.browser.version <= 6 ){ alert("ie6") } // anything above IE6 if ($.browser.msie && $.browser.version > 6){ alert("ie6以上") } }); </script>
需要注意的是，在 jQuery1.3版本之后，官方推荐使用 $.support 来代替 $.browser 这种检测方式
4.输入框文字获取和失去焦点
<script> $(document).ready(function() { $("input.text1").val("Enter your search text here."); textFill( $('input.text1') ); }); function textFill(input){ //input focus text function var originalvalue = input.val(); input.focus( function(){ if( $.trim(input.val()) == originalvalue ){ input.val(''); } }).blur( function(){ if( $.trim(input.val()) == '' ){ input.val(originalvalue); } }); } </script>
5.返回头部滑动动画
<script> 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; }); </script>
6.获取鼠标位置
<script> $(document).ready(function () { $(document).mousemove(function(e){ $('#XY').html("X : " + e.pageX + " | Y : " + e.pageY); }); }); </script>
7.判断元素是否存在
<script> $(document).ready(function() { if ($('#XY').length){ alert('元素存在!') }else{ alert('元素不存在!') } }); </script>
8.点击 div 也可以跳转
<script> $(document).ready(function() { $("div").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); }); </script>
9.根据浏览器大小添加不同的样式
<style> body.large{ font-size:20px; } body.large a{ font-size:20px; color:red; } </style> <body> <ul> <li><a title="百　度" target="_blank" href="http://www.baidu.com/index.php?tn=monline_5_dg">百　度</a></li> <li><a title="Google" target="_blank" href="http://i.firefoxchina.cn/parts/google_rdr.html">Google</a></li> <li><a title="新浪" target="_blank" href="http://www.sina.com.cn/">新浪</a></li> </ul> <script> $(document).ready(function() { function checkWindowSize() { if ( $(window).width() > 900 ) { $('body').addClass('large'); }else{ $('body').removeClass('large'); } } $(window).resize(checkWindowSize); }); </script> </body>
10.设置 div 在屏幕中央
<style> #XY{ width:460px; height:300px; background:#aaa; } </style> <body> <div id="XY"></div> <script> $(document).ready(function() { jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); return this; } //use $("#XY").center(); }); </script> </body>
11.创建自己的选择器
<style> #XY1{ width:560px; height:300px; background:#aaa; } #XY2{ width:360px; height:300px; background:#aaa; } </style> <body> <div id="XY1" class="box"></div> <div id="XY2" class="box"></div> <script> $(document).ready(function() { $.extend($.expr[':'], { moreThen500px: function(a) { return $(a).width() > 500; } }); $('.box:moreThen500px').click(function() { alert(); }); }); </script> </body>
12.关闭所有动画效果
<style> #XY{ width:40px; height:100px; background:#aaa; } </style> <body> <button id="XY1" class="box">开始动画</button> <button id="XY2" class="box">关闭动画</button> <button id="XY3" class="box">开启动画</button> <div id="XY" class="box"></div> <script> $(document).ready(function() { $("#XY1").click(function(){ animateIt(); }); $("#XY2").click(function(){ jQuery.fx.off = true; }); $("#XY3").click(function(){ jQuery.fx.off = false; }); }); function animateIt() { $("#XY").slideToggle("slow"); } </script> </body>
13.检测鼠标的右键和左键
<script> $(document).ready(function() { $("#XY").mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 ; 2 = 鼠标中键; 3 = 鼠标右键 }) }); </script>
14.回车提交表单
<script> $(document).ready(function() { $("input").keyup(function(e){ if(e.which=="13"){ alert("回车提交!") } }) }); </script>
15.设置全局 Ajax 参数
<style> #load{ display:none; } </style> <body> <div id="load">加载中...</div> <input type="button" id="send1" value="ajax"/> <div id="resText1"></div> <script> $(document).ready(function() { $('#send1').click(function() { $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",function(data){ $("#resText1").empty(); $.each(data.items, function( i,item ){ $("<img/> ").attr("src", item.media.m ).appendTo("#resText1"); if ( i == 3 ) { return false; } }); } ); }); $.ajaxPrefilter(function( options ) { options.global = true; }); $("#load").ajaxStart(function(){ showLoading(); //显示loading disableButtons(); //禁用按钮 }); $("#load").ajaxComplete(function(){ hideLoading(); //隐藏loading enableButtons(); //启用按钮 }); }); function showLoading(){ $("#load").show(); } function hideLoading(){ $("#load").hide(); } function disableButtons(){ $("#send1").attr("disabled","disabled"); } function enableButtons(){ $("#send1").removeAttr("disabled"); } </script> </body>
16.获取选中的下拉框
<input type="button" id="send1" value="get" onclick="getObj()"/> <select id="someElement"> <option>一班</option> <option>二班</option> <option>三班</option> </select> <script> function getObj(){ var $obj = $('#someElement').find('option:selected'); alert( $obj.val() ); } </script>
17.切换复选框
<button >toggle</button> <input type="checkbox" value="1" />篮球 <input type="checkbox" value="2" />足球 <input type="checkbox" value="3" />羽毛球 <script> var tog = false; $('button').click(function(){ $("input[type=checkbox]").attr("checked",!tog); tog = !tog; }); </script>
18.使用 siblings() 来选择同辈元素
<style> li.active{ font-size:20px; color:red; } </style> <body> <ul id="nav"> <li>Google</li> <li>百　度</li> <li>新浪</li> </ul> <script> /* 不这样做 $('#nav li').click(function(){ $('#nav li').removeClass('active'); $(this).addClass('active'); }); */ //替代做法是 $('#nav li').click(function(){ $(this).addClass('active') .siblings().removeClass('active'); }); </script> </body>
19.个性化链接
<style type="text/css"> body { margin: 10px auto; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; color: #999999; } a { color:#333399; } a:hover { text-decoration: none; } a.pdf { background: url(img/file-red.gif) no-repeat; padding-left: 16px; } a.zip { background: url(img/file-orange.gif) no-repeat; padding-left: 16px; } a.psd { background: url(img/file-blue.gif) no-repeat; padding-left: 16px; } </style> <script src="../../scripts/jquery.js" type="text/javascript"></script> <body> <p><a href="http://www.webdesignerwall.com/file/wdw-logo.pdf">PDF file</a> (wdw-logo.pdf)</p> <p><a href="http://www.webdesignerwall.com/file/wdw-logo.psd">PSD file</a> (wdw-logo.psd)</p> <p><a href="http://www.webdesignerwall.com/file/wdw-logo.zip">Zip file</a> (wdw-logo.zip)</p> <script type="text/javascript"> $(document).ready(function(){ $("a[href$='pdf']").addClass("pdf"); $("a[href$='zip']").addClass("zip"); $("a[href$='psd']").addClass("psd"); }); </script> </body>
20.在一段时间之后自动隐藏或关闭元素
<p><button>Run</button></p> <div class="first">Test</div> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function() { $("div").slideUp(300).delay(3000).fadeIn(400); }); /* //这是1.3.2中我们使用setTimeout来实现的方式 setTimeout(function() { $('div').fadeIn(400) }, 3000); */ //而在1.4之后的版本可以使用delay()这一功能来实现的方式 //$("div").slideUp(300).delay(3000).fadeIn(400); }); </script>
21.使用Firefox和Firebug来记录事件日志
button>Run</button></p> <div class="first">Test</div> <script type="text/javascript"> // 在firebug上查看 jQuery.log = jQuery.fn.log = function (msg) { if (console){ console.log("%s: %o", msg, this); } return this; }; $(document).ready(function(){ $("button").click(function() { $('#someDiv').hide().log('div被隐藏'); }); }); </script>
22.为任何与选择器相匹配的元素绑定事件
<style> .hover{ background:#f60; } </style> <body> <table > <tr> <td>1111</td> <td>2222</td> <td>3333</td> </tr> <tr> <td>1111</td> <td>2222</td> <td>3333</td> </tr> <tr> <td>1111</td> <td>2222</td> <td>3333</td> </tr> </table> <script type="text/javascript"> $(document).ready(function(){ /* // 为table里面的td元素绑定click事件，不管td元素是一直存在还是动态创建的 // jQuery 1.4.2之前使用的方式 $("table").each(function(){ $("td", this).live("click", function(){ $(this).toggleClass("hover"); }); }); // jQuery 1.4.2 使用的方式 $("table").delegate("td", "click", function(){ $(this).toggleClass("hover"); }); */ // jQuery 1.7.1使用的方式 $("table").on("click","td",function(){ $(this).toggleClass("hover"); }); }); </script> </body>
23.使用css钩子
jQuery.cssHooks 是 1.4.3 新增的方法，当你定义新的 css Hooks时实际上定义的是 getter 和 setter 方法，比如，border-radius这个圆角属性想要成功应用于 firefox、webkit 等浏览器，需要增加属性前缀，比如-moz-border-radius和-webkit-border-radius。你可以通过定义 CSSHooks 将其封装成统一的接口borderRadius，而不是一 一设置属性。代码如下：
<style> .box{ width:200px; height:200px; margin:10px; background:#333; } </style> <body> <div id="rect" class="box"></div> <script> /*! Copyright (c) 2010 Burin Asavesna (http://helloburin.com) * Licensed under the MIT License (LICENSE.txt). */ (function($) { // borderRadius get hooks var div = document.createElement('div'), divStyle = div.style, support = $.support, dirs = "TopLeft TopRight BottomRight BottomLeft".split(" "); // WebKit supports "borderRadius" as well as "WebKitBorderRadius", weird support.borderRadius = divStyle.MozBorderRadius === ''? 'MozBorderRadius' : (divStyle.MsBorderRadius === ''? 'MsBorderRadius' : (divStyle.WebkitBorderRadius === ''? 'WebkitBorderRadius' : (divStyle.OBorderRadius === ''? 'OBorderRadius' : (divStyle.borderRadius === ''? 'BorderRadius' : false)))); div = null; function borderCornerRadius(direction, prefix) { prefix = prefix === undefined || prefix === '' ? 'border' : prefix + 'Border'; if ( support.borderRadius && support.borderRadius == "MozBorderRadius" ) { // e.g. MozBorderRadiusTopleft return prefix + "Radius" + direction.charAt(0).toUpperCase()+direction.substr(1).toLowerCase(); } else { // e.g. WebKitBorderTopLeftRadius, borderTopLeftRadius, etc return prefix + direction + "Radius"; } } if ( support.borderRadius && support.borderRadius !== "BorderRadius" ) { var vendor_prefix = support.borderRadius.replace('BorderRadius',''); $.cssHooks.borderRadius = { get: function( elem, computed, extra ) { // return each of the directions, topleft, topright, bottomright, bottomleft return $.map(dirs, function( dir ) { return $.css(elem, borderCornerRadius( dir, vendor_prefix )); }).join(" "); }, set: function( elem, value ) { // takes in a single value or shorthand (just letting the browser handle this) // e.g. 5px to set all, or 5px 0 0 5px to set left corners elem.style[ borderCornerRadius( '', vendor_prefix ) ] = value; } }; $.each(dirs, function( i, dir ) { $.cssHooks[ "borderRadius" + dir ] = { get: function( elem, computed, extra ) { return $.css(elem, borderCornerRadius( dir, vendor_prefix )); }, set: function( elem, value ) { elem.style[ borderCornerRadius( dir, vendor_prefix ) ] = value; } }; }); } })(jQuery); //use $('#rect').css('borderRadius',10); </script> </body>
24.$.proxy() 的使用
使用回调方法的缺点之一是当执行类库中的方法后，上下文对象被设置到另外一个元素，比如：
<div id="panel" style="display:none"> <button>Close</button> </div>
执行下面代码：
<script> $('#panel').fadeIn(function(){ $('#panel button').click(function(){ $(this).fadeOut(); }); }); </script>
你将遇到问题，button元素会消失，而不是panel元素。可以使用 $.proxy 方法解决这个问题，代码如下：
<script> $('#panel').fadeIn(function(){ // Using $.proxy : $('#panel button').click($.proxy(function(){ // this 指向 #panel $(this).fadeOut(); },this)); }); </script>
这样才正确的执行。
25.限制Text-Area 域中的字符的个数
<textarea id="mytextarea"></textarea> <script> 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; }else if(type == "textarea"){ this.onkeypress = function(e){ var ob = e || event; var keyCode = ob.keyCode; var hasSelection = 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 && !hasSelection); }; this.onkeyup = function(){ if(this.value.length > max){ this.value = this.value.substring(0,max); } }; } }); }; //use $('#mytextarea').maxLength(10); </script>
26.本地存储
本地存储是 HTML5 提供的特性之一。它提供了非常简单的 API 接口，便于添加你的数据到 localStorage 全局属性中，代码如下：
localStorage.someData="This is going to be saved";
事实上对于老的浏览器来说，这并不是个好消息，因为他们不支持，但是我们可以使用 jQuery 的插件。
27.解析 json 数据时报 parseError 错误
jQuery 在1.4 版本后，采用了更为严格的 json 解析方式，即所有内容都必须要有双引号，如果升级 jQuery 版本后，加载 json 报错，有可能就是这个原因。比如：
//1.4 之前版本，key 没引号，这样没问题
{
key : "28CATEGORY"，
status : "0"
}
但升级成 jQuery1.4后，都必须加上双引号，格式如下：
{
"key" : "28CATEGORY"，
"status" : "0"
}
28.从元素中除去 HTML
<body> <div> <p>锋利的<a href="#nogo">jQuery</a></p> </div> <script> (function($) { $.fn.stripHtml = function() { var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi; this.each(function() { $(this).html( $(this).html().replace(regexp,'') ); }); return $(this); } })(jQuery); //用法： $('div').stripHtml(); </script> </body>
29.扩展 String 对象的方法
<div> <input type="text" /><button >check</button> </div> <script> $.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*$)| | /g, ""); }, trans:function() { return this.replace(/</g, '<').replace(/>/g,'>').replace(/"/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; i<this.length; i+=1) { var ch = this.charAt(i); if (ch!=' '&& ch!=" " && ch!=" " && ch!=" ") {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; } }); $("button").click(function(){ alert( $("input").val().isInteger() ); }); </script>