开发中可能会用到的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 相关文章推荐
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
Node.js使用gm拼装sprite图片
Jul 04 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 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
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
Python文件和目录操作详解
2015/02/08 Python
python+opencv实现动态物体追踪
2018/01/09 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
python多进程重复加载的解决方式
2019/12/13 Python
Python通过socketserver处理多个链接
2020/03/18 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
质检部职责
2013/12/28 职场文书
公司活动邀请函
2014/01/24 职场文书
高中毕业自我评价
2014/02/08 职场文书
战略合作协议书范本
2014/04/18 职场文书
绿色小区申报材料
2014/08/22 职场文书
大学生交通专业求职信
2014/09/01 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
Android studio 简单计算器的编写
2022/05/20 Java/Android