开发中可能会用到的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.Treeview添加右键菜单的实现代码
Oct 22 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
vue请求数据的三种方式
Mar 04 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
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去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
Python实现的Excel文件读写类
2015/07/30 Python
Python 从相对路径下import的方法
2018/12/04 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
怎样写演讲稿
2014/01/04 职场文书
优秀实习生感言
2014/03/01 职场文书
大班亲子运动会方案
2014/06/10 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
企业标语大全
2014/07/01 职场文书
基层党员对照检查材料
2014/08/25 职场文书
毕业典礼邀请函
2015/01/31 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
总经理年会致辞
2015/07/29 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang