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.判断浏览器的类型

$.support

$.browser

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

浏览器代码名称：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);
});
});

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