在《锋利的jQuery》中整理的几个现在还常用的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")
//rel='external'的超链接将会在新窗口打开连接
$('a[rel$="external"]').click(function(){
this.target = "_blank";
})
})
GIF.gif
3.判断浏览器类型
//判断浏览器类型
$(document).ready(function(){
if(/firefox/.test(navigator.userAgent.toLowerCase())){
console.log('火狐')
}
if(/webkit/.test(navigator.userAgent.toLowerCase())){
console.log('Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器')
}
if(/opera/.test(navigator.userAgent.toLowerCase())){
console.log('欧朋浏览器')
}
if(/msie/.test(navigator.userAgent.toLowerCase())){
console.log('ie')
}
//IE 6
if ('undefined' == typeof(document.body.style.maxHeight)) {
//
}
//IE 6-8
if (!$.support.leadingWhitespace) {
//
}
//IE11的检测方法
var ua=navigator.userAgent.toLowerCase();
if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
//浏览器类型
browserType = "IE";
//浏览器版本
browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];
}
})
4.输入文本框获取或者失去焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址"/>
<script src="jquery/jquery-3.0.0.min.js"></script>
<script>
//当获取焦点的时候
$('#address').focus(function(){
var tex = $(this).val();
if(tex == '请输入邮箱地址'){
$(this).val('');
}
})
//当失去焦点的时候
$('#address').blur(function(){
var tex = $(this).val();
if(tex == ''){
$(this).val('请输入邮箱地址');
}
})
</script>
</body>
</html>
5.返回头部滑动动画
//返回头部滑动动画
jQuery.fn.scrollTo = function(speed){
var targetOffset = $(this).offset().top;
$('html,body').stop().animate({scrollTop:targetOffset},speed);
return this
}
//使用
$(".returnTop").click(function(){
$("body").scrollTo(500);
return false;
})
GIF.gif
6.获取鼠标位置
//获取鼠标位置
$(document).ready(function(){
$(document).mousemove(function(e){
$("#XY").html("X:"+e.pageX+" Y:"+e.pageY)
})
})
GIF.gif
7.判断元素是否存在
//判断元素是否存在
$(document).ready(function(){
if($('#id').length){
//do something
}
})
8.点击div也可以跳转
//点击div也可以跳转
$('div').click(function(){
window.location = $(this).find("a").attr("href");
})
//使用
<div><a href = "index.html">回到首页</a></div>
9.设置div在屏幕中央
//设置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' )
}
//使用
$('#XY').center()
})
10.回车提交
//回车提交表单
$(document).ready(function(){
$('input').keyup(function(e){
if(e.which=='13'){
alert('回车提交')
}
})
})
11.设置Ajax全局参数
//设置全局Ajax参数
$('#load').ajaxStart(function(){
showLoading();//显示loading
disableButton();//禁用按钮
})
$('#load').ajaxComplete(function(){
hideLoading();//隐藏按钮
enableButtons();//启用按钮
})
12.获取选中的下拉框
//获取攒中的下拉框
$('#element').find('option:selected');
$('#element option:selected')
网友评论
其中发现 5.返回头部滑动动画 的原代码实现效果并没有返回到页面的最顶部，离顶部还有一点点距离，从您提供的GIF图中滚动条头部的黑色三角形没有变灰色，表示滚动条没有到顶部（我亲测了一下滚动到顶部三角形会变成灰色）
改成 $("html, body").stop().animate({scrollTop: 0}, speed); 就可以了
如有错误，请指正！thx