jQuery技巧

1、禁用页面的右键菜单

$(function () {
        $(document).bind("contextmenu",function(e){
            return false;
        })
    });

View Code

2、新窗口打开页面

    $(function () {
//        例子1：href="http://"的超链接将会在新窗口打开链接
//        $("a[href^='http://']").attr("target","_blank");
//        例子2：rel="external"的超链接将会在新窗口打开链接
        $("a[rel$='external']").click(function(){
            this.target="_blank";
        });
//        use
//        <a href="http://www.cssrain.cn" rel="external">open link</a>
    });

View Code

3、判断浏览器类型

$(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以上")
    }  
});

View Code

需要注意的是，在jquery1.3版本之后，官方推荐使用$.support来代替$.browser这种检测方式。

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

$(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); 
        }  
    });  
}

View Code

5、返回头部滑动动画

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;
});

View Code

6、获取鼠标位置

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

View Code

7、判断元素是否存在

$(document).ready(function() {  
    if ($('#XY').length){  
       alert('元素存在!')
    }else{
       alert('元素不存在!')
    }
});

View Code

8、点击div也可以跳转

$(document).ready(function() {    
    $("div").click(function(){  
        window.location=$(this).find("a").attr("href"); 
        return false;  
    }); 
});

View Code

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

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

View Code

10、设置div在屏幕中央

$(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();  
});

View Code

11、创建自己的选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/zgy.css">
    <style>
        #XY1 {
            width: 560px;
            height: 300px;
            background: #aaa;
        }
        #XY2 {
            width: 360px;
            height: 300px;
            background: #aaa;
        }
    </style>
</head>
<body>
<div class="fz">
    <div id="XY1" class="box"></div>
    <div id="XY2" class="box"></div>
</div>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function () {
        $.extend($.expr[':'], {
            moreThen500px: function (a) {
                return $(a).width() > 500;
            }
        });
        $('.box:moreThen500px').click(function () {
            alert();
        });
    });
</script>
</html>

View Code

12、关闭所有动画效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/zgy.css">
    <style>
        #XY {
            width: 40px;
            height: 100px;
            background: #aaa;
        }
    </style>
</head>
<body>
<div class="fz">
    <button id="XY1" class="box">开始动画</button>
    <button id="XY2" class="box">关闭动画</button>
    <button id="XY3" class="box">开启动画</button>
    <div id="XY" class="box"></div>
</div>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<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>
</html>

View Code

13、检测鼠标右键和左键

$(document).ready(function() {  
    $("#XY").mousedown(function(e){
        alert(e.which)  // 1 = 鼠标左键 ; 2 = 鼠标中键; 3 = 鼠标右键
    })
});

View Code

14、回车提交表单

$(document).ready(function() {  
     $("input").keyup(function(e){
            if(e.which=="13"){
               alert("回车提交!")
            }
        })
});

View Code

15、设置全局ajax参数

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/zgy.css">
    <style>
        #load {
            display: none;
        }
    </style>
</head>
<body>
<div class="fz">
    <div id="load">加载中...</div>
    <input type="button" id="send1" value="ajax"/>

    <div id="resText1"></div>
</div>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<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>
</html>

View Code

16、获取选中的下拉框

    function getObj() {
//        var $obj = $('#someElement').find('option:selected');
//        或者
        var $obj=$("#someElement option:selected");
        alert($obj.val());
    }

View Code

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

$('#nav li').click(function(){
    $(this).addClass('active')
           .siblings().removeClass('active');
});

View Code

19、个性化链接

$(document).ready(function(){
    $("a[href$='pdf']").addClass("pdf");
    $("a[href$='zip']").addClass("zip");
    $("a[href$='psd']").addClass("psd");
});

View Code

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

$(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);
});

View Code

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

// 在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被隐藏');
    });
});

View Code

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

    $(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");
        });
    });

View Code

23、使用css钩子

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/zgy.css">
    <style>
        .box {
            width: 200px;
            height: 200px;
            margin: 10px;
            background: #333;
        }
    </style>
</head>
<body>
<div class="fz">
    <div id="rect" class="box"></div>
</div>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<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>
</html>

View Code

24、$.proxy()的使用

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

View Code

25、限制text-area域中的字符的个数

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);

View Code

26、本地存储

本地存储是HTML5提供的特性之一。它提供了非常简单的API接口，便于添加你的数据到localStorage全局属性中，代码如下：

localStorage.someData="this is going to be saved";

对于老的浏览器不支持，可以使用jquery插件 http://plugins.jquery.com/plugin-tags/localstorage

27、解析json数据时报pareseerror错误

jquery1.4版本后，采用了更为严格的json解析方式，即所有内容都必须要有双引号，如果升级jquery版本后，ajax加载json报错，可能就是这个原因。比如：

//1.4之前版本，key没有引号，这样没问题

{

key:"28CATEGORY",

status:"0"

}

//但升级1.4版本后，都必须加上双引号，格式如下：

{

"key":"28CATEGORY",

"status":"0"

}

28、从元素中去除HTML

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

View Code

29、扩展String对象的方法

$.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; i<this.length; i+=1) {
    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;
}
});

$("button").click(function(){
    alert(   $("input").val().isInteger()  );
});

View Code

posted @ 2015-02-04 16:53 psycho_z 阅读(154) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

jQuery技巧

公告