jQuery小技巧（一）

1.禁用页面的右键菜单

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

2.新窗口打开页面

 $(document).ready(function(){
       //例1:href="http://"的超链接将会在新窗口打开
        $('a[href^="http://"]').attr("target","_blank");

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

3.判断浏览器类型

 $(function(){
        var brow = $.browser;

        //Firefox 2 and above
        if(brow.mozilla && brow.version>="1.8"){
            alert("Firefox");
        }

        //Safari
        if(brow.safari){
            alert("Safari");
        }

        //chrome
        if(brow.chrome){
            alert("chrome");
        }

        //Opera
        if(brow.opera){
            alert("opera");
        }

        //IE6 and below
        if(brow.msie && brow.version <= 6){
            alert("<=IE6");
        }

        //above IE6
        if(brow.msie && brow.version > 6){
            alert(">IE6");
        }

    })

在jQ 1.3版本后,官方推荐使用$.support 来代替 $.browser
注意：以上方式不适用于1.9及以上版本

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

 $(function(){
            $('input.text1').val('Enter your search text here');
            textFill($('input.text1'));
        })
        function textFill(input){
            var originalvalue = input.val();
            input.focus(function(){
                if($.trim(input.val()) == originalvalue){ //如果输入框为原始内容,点击清空value,便于输入
                    input.val('');
                }
            }).blur(function(){
                if($.trim(input.val()) == ''){ //如果输入框内容为空,即上一步点击后没有进行输入,鼠标离开则恢复原始内容
                    input.val(originalvalue);
                }
            })
        }

5.返回头部滑动动画

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

6.获取鼠标位置

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

jQuery小技巧（一）

相关推荐