开发中可能会用到的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 相关文章推荐
jQuery对象和DOM对象相互转化
Apr 24 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
vue.js表格分页示例
Oct 18 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 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中把有符号整型转换为无符号整型方法
2015/05/27 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
载入进度条 效果
2006/07/08 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python 产生token及token验证的方法
2018/12/26 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
numpy基础教程之np.linalg
2019/02/12 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Python内存映射文件读写方式
2020/04/24 Python
Python中logger日志模块详解
2020/08/04 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
小学德育工作经验交流材料
2014/05/22 职场文书
个人求职自荐信范文
2014/06/20 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
三年级学生期末评语
2014/12/26 职场文书
求职推荐信范文
2015/03/27 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers