jQuery技巧

1.禁止页面的右键菜单

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

2.新窗口打开页面

$(document).ready(function() {
   //Example 1: Every link will open in a new window
   $('a[href^="http://"]').attr("target", "_blank");

   //Example 2: Links with the rel="external" attribute will only open in a new window
   $('a[@rel$='external']').click(function(){
      this.target = "_blank";
   });
});
// use
<a href="http://www.opensourcehunter.com" rel=external>open link</a>

3.判读浏览器类型

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
    // do something
}

// Target Safari
if( $.browser.safari ){
    // do something
}

// Target Chrome
if( $.browser.chrome){
    // do something
}

// Target Camino
if( $.browser.camino){
    // do something
}

// Target Opera
if( $.browser.opera){
    // do something
}

// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
    // do something
}

// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
    // do something
}
});

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

$(document).ready(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()) == originvalue) {
            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;
};
// use
$("#goheader").click(function(){
    $("body").scrollTo(500);
    return false;
});

6.获取鼠标位置

$(document).ready(function() {
   $(document).mousemove(function(e){
    $('#XY').html("X: " + e.pageX + " | Y :" + e.pageY);
  });
// use
<DIV id=XY></DIV>
});

7.判断元素是否存在

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

8.点击div也可以跳转

$("div").click(function(){
    window.location = $(this).find("a").attr("href");
    return false;
});
// use
<div><a href="index.html">home</a></div>

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

$(document).ready(function(){
function checkWindowSize() {
    if($(window).width > 1200){
        $('body').addClass('large');
    } else{
        $('body').removeClass('large');
    }
}
// 调整浏览器窗口的大小时，发生 resize 事件。
$(window).realize(checkWindowSize);
});

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

11.创建自己的选择器

$(document).ready(function() {
   $.extend($.expr[':'], {
       moreThen500px: function(a) {
           return $(a).width() > 500;
      }
   });
  $('.box:moreThen500px').click(function() {
      // creating a simple js alert box
      alert('The element that you have clicked is over 1000 pixels wide');
  });
});

12.关闭所有动画效果

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

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

$(document).ready(function(){
    $("#XY").mousedown(function(e){
    // which 属性指示按了哪个键或按钮。
        alert(e.which);//1=鼠标左键，2=鼠标中键，3=鼠标右键
    })
});

14.回车提交表单

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

15.设置全局Ajax参数

$("#load").ajaxStart(function()){
    showLoading();//显示loading
    disableButtons();//禁用按钮
};
$("#load").ajaxComplete(function()){
    hideLoading();//隐藏loading
    enableButtons();//启用按钮
};

16.获取选中的下拉框

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

17.切换复选框

var tog = false;
$('button').click(function(){
    $("input[type="checkbox"]").attr("checked",!tog);
    tog =!tog;
});

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

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

19.个性化连接

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

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

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

22.关闭所有动画效果

23.使用css钩子

24.$.proxy()的使用

25.限制Text-Area域中的字符的个数

26.本地存储

27.解析json数据时报parseError错误

28.从元素中除去HTML

29.扩展String对象的方法