开发中可能会用到的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处理xml格式的返回数据(实例解析)
Nov 28 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
vue实现日历表格(element-ui)
Sep 24 Javascript
JavaScript 定时器详情
Nov 11 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/10/09 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
javascript函数库-集合框架
2007/04/27 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
python 剪切移动文件的实现代码
2018/08/02 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
销售部主管岗位职责
2013/12/18 职场文书
医院党员公开承诺书
2014/08/30 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
教师个人事迹材料
2014/12/17 职场文书
病房管理制度范本
2015/08/06 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python