开发中实用的jQuery技巧
2014-03-12 12:13
246 查看
今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员。jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 HTML 的客户端脚本。网络中有大量的 jQuery 插件,有助于在短时间内通过简单容易的方法创建网站。
今天我们选取了几个对 jQuery 开发人员非常有用的代码片段。希望你的下一个项目中能用得上这些代码。
1、 禁止右键
在开发 Web 应用的时候,有些情况需要禁用右键单击功能。使用此代码,jQuery 开发人员可以在网页上禁用鼠标右键点击。代码如下:
2、文本缩放
使用下面的代码,用户可以更具需要增大或者缩放网页中的字体大小,代码如下:
3、在新窗口打开链接
使用这个 jQuery 代码,用户会点击你的网站的任何链接都会在新的窗口中打开。如下:
4、样式表切换
你知道网站换肤是怎么做的吗?下面的代码可以帮助你实现样式表切换功能,如下:
5、回到顶部
这是现在网站中很常用的回到顶部功能,特别适合页面很长的情况。代码很简单,如下:
6、获取鼠标的 X、Y 坐标
下面的代码可以获取鼠标的 X,Y 坐标,代码如下:
7、检测当前鼠标的坐标
使用下面的代码,能够在任何支持 jQuery 的地方获取当前鼠标的坐标,如下:
8、预加载图片
这个图片预加载片段让你能够快速的预先载入图片,不需要等待。代码如下:
调用方法:
判断图片是否已加载:
今天我们选取了几个对 jQuery 开发人员非常有用的代码片段。希望你的下一个项目中能用得上这些代码。
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…'); });
相关文章推荐
- 20个实用的webApp前端开发技巧
- 20个实用的webApp前端开发技巧
- JQuery实用技巧--学会你也是大神(1)——插件的制作技巧
- jQuery实用技巧必备(中)
- 8个超实用的jQuery技巧攻略
- Windows Phone 实用开发技巧(22):使用日志记录当前信息与异常信息
- 分享50个使你成为高级javascript开发者的jQuery的代码开发技巧 - 第一部分
- 15个值得开发人员关注的jQuery开发技巧和心得
- Android开发实用技巧:判断当前系统语言版本
- Windows Phone 实用开发技巧(2):使用TombstoneHelper简化墓碑操作
- 50 个高级 jQuery 代码开发技巧
- 开发中可能会用到的几个 jQuery 小提示和技巧
- Spring portlet mvc jquery 开发常用技巧
- 25个实用的jQuery技巧和解决方案
- 15个值得开发者关注的jQuery开发技巧和心得
- WinJS实用开发技巧(5):学习资料推荐
- 开发中可能会用到的几个 jQuery 小提示和技巧
- jQuery 1.4实用技巧
- Android开发工具Eclipse实用技巧
- jquery的实用技巧,非常实用