本帖最后由 子烨在路上 于 2017-7-10 11:48 编辑
在《锋利的jQuery》中整理的几个现在还常用的jQuery代码片段。
1.禁用页面，禁用页面的右键菜单
[JavaScript] 纯文本查看 复制代码 //禁用右键菜单
$(document).ready(function(){
$(document).bind('contextmenu',function(e){
return false;
})
})2.新窗口打开界面
[JavaScript] 纯文本查看 复制代码 //新窗口打开界面
$(document).ready(function(){
//1.href='http://'的超链接将会在新窗口打开连接
$('a[href^="http://"]').attr("target","_blank")
//rel='external'的超链接将会在新窗口打开连接
$('a[rel$="external"]').click(function(){
this.target = "_blank";
})
})3.判断浏览器类型
[JavaScript] 纯文本查看 复制代码 //判断浏览器类型[/align] $(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.输入文本框获取或者失去焦点
[JavaScript] 纯文本查看 复制代码 <!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.返回头部滑动动画
[JavaScript] 纯文本查看 复制代码 //返回头部滑动动画[/align] 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;
})
6.获取鼠标位置
[JavaScript] 纯文本查看 复制代码 //获取鼠标位置[/align] $(document).ready(function(){
$(document).mousemove(function(e){
$("#XY").html("X:"+e.pageX+" Y:"+e.pageY)
})
})7.判断元素是否存在
[JavaScript] 纯文本查看 复制代码 //判断元素是否存在[/align] $(document).ready(function(){
if($('#id').length){
//do something
}
})
8.点击div也可以跳转
[JavaScript] 纯文本查看 复制代码 //点击div也可以跳转[/align] $('div').click(function(){
window.location = $(this).find("a").attr("href");
})
//使用
<div><a href = "index.html">回到首页</a></div>
9.设置div在屏幕中央
[JavaScript] 纯文本查看 复制代码 //设置div在屏幕中央[/align] $(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.回车提交
[JavaScript] 纯文本查看 复制代码 //回车提交表单[/align] $(document).ready(function(){
$('input').keyup(function(e){
if(e.which=='13'){
alert('回车提交')
}
})
})
11.设置Ajax全局参数
[JavaScript] 纯文本查看 复制代码 //设置全局Ajax参数[/align] $('#load').ajaxStart(function(){
showLoading();//显示loading
disableButton();//禁用按钮
})
$('#load').ajaxComplete(function(){
hideLoading();//隐藏按钮
enableButtons();//启用按钮
})
12.获取选中的下拉框
[JavaScript] 纯文本查看 复制代码 //获取攒中的下拉框[/align] $('#element').find('option:selected');
$('#element option:selected')
| 
收藏
淘帖
踩
