开发中可能会用到的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 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
数组Array的排序sort方法
Feb 17 Javascript
微信小程序block的使用教程
Apr 01 Javascript
VUE安装使用教程详解
Jun 03 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 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
php中看实例学正则表达式
2006/12/25 PHP
让PHP支持页面回退的两种方法
2008/01/10 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
python中wx模块的具体使用方法
2020/05/15 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
我的长生果教学反思
2014/04/28 职场文书
需求分析说明书
2014/05/09 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
郭明义观后感
2015/06/08 职场文书
同乡会致辞
2015/07/30 职场文书