jQuery使用技巧

1.禁用网页上的右键菜单

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

2.新窗口打开页面

$(document).ready(function(){    $('a[href^="https://www.google.com"]').attr("target","_blank");// href的超链接会在新窗口打开  <a href="https://www.google.com" rel="newwindows">newwindow</a>$("a[rel$='newwindow']").click(function(){        this.target="_blank";    });});

3.判断浏览器的类型

在jQuery 1.3版本之后,官方推荐使用$.support 来代替$.browser
jQuery 1.9版本之后 删除了$.browser,使用对应的$.support即可

$(document).ready(function(){    var $browser=$.browser;    //Firefox 1.8+    if($browser.mozilla&&$browser.version>='1.8'){}    //Safari    if($browser.safari){}    //Chrome    if($browser.chrome){}    //Opera    if($browser.opera){}    //IE6 -    if($browser.msie&&$browser.version<=6){}    //IE6 +    if($browser.msie&&$browser.version>6){}});

对应的原生JavaScript的判断浏览器类型:

浏览器代码名称：navigator.appCodeName    浏览器名称：navigator.appName    浏览器版本号：navigator.appVersion    对Java的支持：navigator.javaEnabled()    MIME类型（数组）：navigator.mimeTypes    系统平台：navigator.platform    插件（数组）：navigator.plugins    用户代理：navigator.userAgent

<script type="text/javascript">        var Sys = {};        var ua = navigator.userAgent.toLowerCase();        var s;        (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :        (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :        (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :        (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :        (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;        //以下进行测试        if (Sys.ie) document.write('IE: ' + Sys.ie);        if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);        if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);        if (Sys.opera) document.write('Opera: ' + Sys.opera);        if (Sys.safari) document.write('Safari: ' + Sys.safari);    </script>

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

$(document).ready(function(){    $("input.text").val("请输入文字内容...");    textWaterMark($("input.text"));});function textWaterMark(txtObj){    var origVal=txtObj.val();    txtObj.focus(function(){     if($.trim(txtObj.val())==origVal){            txtObj.val('');        }    }).blur(function(){        if($.trim(txtObj.val())==origVal){            txtObj.val(origVal);        }    });}

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 false;//防止冒泡});

6.获取鼠标的位置

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

js的原生方法,可以参考这篇文章:
http://www.cnblogs.com/dolphinX/archive/2012/10/09/2717119.html

7.判断元素是否存在

$(document).ready(function(){    if($("#id").length>0){} //建议使用>0 的方式,因为$("#id")返回的是一个jquery对象,而length返回的是个数,但是我在个别浏览器测试下只有>0的才走里面的代码,到现在也不知道为何。});

8.点击某些html元素跳转(div span等)

<span><a href="https://www.google.com"></a></span>;$("span").click(function(){    windows.location.href=$(this).find("a").attr("href");    retrun false;});

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

  jQuery.fn.checkWindowSize=function(){    if($(window).width()>1200){       $('body').addClass('bodyClass');    }    else{     $('body').removeClass('bodyClass');    }    return this;};$(document).ready(function(){   $(window).checkWindowSize();});

10.设置元素在屏幕中心

 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;};$(document).ready(function(){   $("#id").center();});