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

//use

<a href= "http://www.cssrain.cn" rel="external">open link</a>

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

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

 4.返回头部滑动动画

 

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

5.获取鼠标位置

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

6.判断元素是否存在

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

7.点击div也可以跳转

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

///use
<div><a href = "index.html"></a></div>

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

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

9.设置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();
});

10.创建自己的选择器

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

11.关闭所有动画效果

$(document).ready(function(){
    jQuery.fx.off = true;
});

12.检测鼠标的右键和左键

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

13.回车提交表单

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

14.获取选中的下拉框

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

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

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

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

16.个性化链接

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

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

//这是1.3.2中我们使用setTimeout来实现的方式
setTimeout(function(){
    $('div').fadeIn(400)
},3000);
//而在1.4之后的版本可以使用delay()这一功能来实现的方式
$("div").slideUp(300).delay(3000).fadeIn(400);