开发中可能会用到的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 相关文章推荐
网上抓的一个特效
May 11 Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
javascript radio 联动效果
Mar 04 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
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
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
多广告投放代码 推荐
2006/11/13 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
python多重继承新算法C3介绍
2014/09/28 Python
python基础教程项目三之万能的XML
2018/04/02 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
个人能力自我鉴赏
2014/01/25 职场文书
小班重阳节活动方案
2014/02/08 职场文书
婚礼司仪主持词
2014/03/14 职场文书
团队拓展活动总结
2014/08/27 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
分享几个简单MySQL优化小妙招
2022/03/31 MySQL
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL