开发中可能会用到的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 相关文章推荐
js GridView 实现自动计算操作代码
Mar 25 Javascript
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 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数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
对Python中数组的几种使用方法总结
2018/06/28 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
运动会广播稿80字
2014/01/23 职场文书
团队精神的演讲稿
2014/05/14 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
2015年信访工作总结
2015/04/07 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL