开发中可能会用到的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操作文本框readOnly
May 15 Javascript
js兼容标准的表格变色效果
Jun 28 Javascript
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
Node.js实现数据推送
2016/04/14 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
python制作企业邮箱的爆破脚本
2016/10/05 Python
Python工程师面试必备25条知识点
2018/01/17 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
教师自荐信范文
2013/12/09 职场文书
护理专业学生的求职信范文
2013/12/11 职场文书
设计顾问服务计划书
2014/05/04 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
社区植树节活动总结
2015/02/06 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
幼儿园小班教学反思
2016/03/03 职场文书