开发中可能会用到的jQuery小技巧


Posted in Javascript onMarch 07, 2014

1) 禁止右键
在开发 Web 应用的时候,有些情况需要禁用右键单击功能。使用此代码,jQuery 开发人员可以在网页上禁用鼠标右键点击。代码如下:

$(document).ready(function() { 
//catch the right-click context menu 
$(document).bind("contextmenu",function(e) { 
//warning prompt - optional 
alert("No right-clicking!"); //delete the default context menu 
return false; 
}); 
});

2) 文本缩放
使用下面的代码,用户可以更具需要增大或者缩放网页中的字体大小,代码如下:
$(document).ready(function() { 
//find the current font size 
var originalFontSize = $('html').css('font-size'); //Increase the text size 
$(".increaseFont").click(function() { 
var currentFontSize = $('html').css('font-size'); 
var currentFontSizeNumber = parseFloat(currentFontSize, 10); 
var newFontSize = currentFontSizeNumber*1.2; 
$('html').css('font-size', newFontSize); 
return false; 
}); 
//Decrease the Text Size 
$(".decreaseFont").click(function() { 
var currentFontSize = $('html').css('font-size'); 
var currentFontSizeNum = parseFloat(currentFontSize, 10); 
var newFontSize = currentFontSizeNum*0.8; 
$('html').css('font-size', newFontSize); 
return false; 
}); 
// Reset Font Size 
$(".resetFont").click(function(){ 
$('html').css('font-size', originalFontSize); 
}); 
});

3) 在新窗口打开链接
使用这个 jQuery 代码,用户会点击你的网站的任何链接都会在新的窗口中打开。如下:
$(document).ready(function() { 
//select all anchor tags that have http in the href 
//and apply the target=_blank 
$("a[href^='http']").attr('target','_blank'); 
});

4) 样式表切换
你知道网站换肤是怎么做的吗?下面的代码可以帮助你实现样式表切换功能,如下:
$(document).ready(function() { 
$("a.cssSwap").click(function() { 
//swap the link rel attribute with the value in the rel 
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 
}); 
});

5) 回到顶部
这是现在网站中很常用的回到顶部功能,特别适合页面很长的情况。代码很简单,如下:
$(document).ready(function() { 
//when the id="top" link is clicked 
$('#top').click(function() { 
//scoll the page back to the top 
$(document).scrollTo(0,500); 
} 
});

6) 获取鼠标的 X、Y 坐标
下面的代码可以获取鼠标的 X,Y 坐标,代码如下:
$().mousemove(function(e){ 
//display the x and y axis values inside the P element 
$('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); 
});

7) 检测当前鼠标的坐标
使用下面的代码,能够在任何支持 jQuery 的地方获取当前鼠标的坐标,如下:
$(document).ready(function() { 
$().mousemove(function(e){ 
$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY); 
});

8) 预加载图片
这个图片预加载片段让你能够快速的预先载入图片,不需要等待。代码如下:
jQuery.preloadImagesInWebPage = function() { 
for(var ctr = 0; ctr<arguments.length; ctr++){ 
jQuery("").attr("src", arguments[ctr]); 
} 
}

调用方法:
$.preloadImages("image1.gif", "image2.gif", "image3.gif"); 
判断图片是否已加载: 
$('#imageObject').attr('src', 'image1.gif').load(function() { 
alert('The image has been loaded…'); 
});
Javascript 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
javascript匿名函数应用示例介绍
Mar 07 #Javascript
js登录弹出层特效
Mar 07 #Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 #Javascript
js定时器(执行一次、重复执行)
Mar 07 #Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 #Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 #Javascript
JS调试必备的5个debug技巧
Mar 07 #Javascript
You might like
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
Python Flask-web表单使用详解
2017/11/18 Python
python框架中flask知识点总结
2018/08/17 Python
python发送告警邮件脚本
2018/09/17 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
python入门之基础语法学习笔记
2020/02/08 Python
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
思想政治自我鉴定
2013/10/06 职场文书
申论倡议书范文
2014/05/13 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
农业项目合作意向书
2015/05/08 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
导游词之镜泊湖
2019/12/09 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技