开发中可能会用到的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 对象定义方法 简单易学
Mar 22 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python基础教程之分支、循环简单用法
2016/06/16 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
如何使用python操作vmware
2019/07/27 Python
python re模块常见用法例举
2021/03/01 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
高校毕业生登记表自我鉴定
2013/11/03 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
入股协议书范本
2014/04/14 职场文书
先进工作者推荐材料
2014/12/23 职场文书
团员个人总结
2015/02/26 职场文书
高一英语教学反思
2016/03/03 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
MySQL系列之三 基础篇
2021/07/02 MySQL
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android
TS 类型兼容教程示例详解
2022/09/23 Javascript