开发中可能会用到的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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
JavaScript 快捷键设置实现代码
Mar 13 Javascript
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 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将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
PHP中list方法用法示例
2016/12/01 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
微信小程序签到功能
2018/10/31 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
python回调函数的使用方法
2014/01/23 Python
python实现一次创建多级目录的方法
2015/05/15 Python
python学生信息管理系统
2018/03/13 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
python函数的作用域及关键字详解
2019/08/20 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
Python读写压缩文件的方法
2020/07/30 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
酒店人事专员岗位职责
2013/12/19 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
公休请假条
2014/04/11 职场文书
大学生社会实践评语
2014/04/25 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
召开会议通知范文
2015/04/15 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电