jQuery 技巧

如今，越来越多的人在使用 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="百&#12288;度" target="_blank" href="http://www.baidu.com/index.php?tn=monline_5_dg">百&#12288;度</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>百&#12288;度</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(/&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; 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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jwen1994/p/10794722.html