开发中可能会用到的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 THICKBOX弹出层插件
Aug 30 Javascript
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
vue实现文件上传功能
Aug 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
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
初始Nodejs
2014/11/08 NodeJs
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
canvas绘制多边形
2017/02/24 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
Python全局变量操作详解
2015/04/14 Python
python套接字流重定向实例汇总
2016/03/03 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Python使用pymysql小技巧
2017/06/04 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Python之reload流程实例代码解析
2018/01/29 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
行政专员求职信范文
2014/05/03 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
汽车转让协议书范本
2014/12/07 职场文书
培训督导岗位职责
2015/04/10 职场文书
三八节活动简报
2015/07/20 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
mysql脏页是什么
2021/07/26 MySQL
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
Python实现批量自动整理文件
2022/03/16 Python
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers