开发中可能会用到的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 相关文章推荐
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
深入浅析vue全局环境变量和模式
Apr 28 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开发GUI
2006/10/09 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
python提取内容关键词的方法
2015/03/16 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
python实现二叉树的遍历
2017/12/11 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python如何保证输入键入数字的方法
2019/08/23 Python
如何在django中实现分页功能
2020/04/22 Python
详解Python 最短匹配模式
2020/07/29 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
总经理文秘岗位职责
2014/02/03 职场文书
寄语学生的话
2014/04/10 职场文书
双方协议书
2014/04/22 职场文书
运动会演讲稿200字
2014/08/25 职场文书
面试感谢信范文
2015/01/22 职场文书