开发中可能会用到的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 相关文章推荐
Script的加载方法小结
Jan 12 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
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
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
Django在win10下的安装并创建工程
2017/11/20 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
python进度条显示之tqmd模块
2020/08/22 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
学生出入校管理制度
2014/01/16 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
刑事和解协议书范本
2014/11/19 职场文书
网络舆情信息简报
2015/07/21 职场文书
小学教师教学反思
2016/02/24 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
mysql sql常用语句大全
2022/06/21 MySQL
小程序自定义轮播图圆点组件
2022/06/25 Javascript
python playwrigh框架入门安装使用
2022/07/23 Python