当前位置:  编程技术>技术文章 iis7站长之家

开发中可能会用到的jQuery小技巧

    来源: 互联网  发布时间:2014-08-25

    本文导语:  1) 禁止右键 在开发 Web 应用的时候,有些情况需要禁用右键单击功能。使用此代码,jQuery 开发人员可以在网页上禁用鼠标右键点击。代码如下: 代码如下: $(document).ready(function() { //catch the right-click context menu $(document).bind("contex...

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

    
 
 

您可能感兴趣的文章:

  • 软件开发dailybuilder一般都会用到那些命令啊.
  • 调查:请问各位在开发中有多少人能真正用到EJB?
  • linux 下QT和GTK开发会用到哪些工具?
  • 从问的问题看得出来,大家都是新手。大都问怎么配置,哪有入门资料等等问题,对于平时开发用到得问得很少。也体现出这里大家很少用java进行开发,大都刚开始学习。
  • 我开发一个GTk的应用程序,其中需要用到QT的一个头文件,应该如何引入该头文件?
  • 用jbuilder开发的程序,其中用到了xylayout,将应用程序做成了jar文件,运行jar文件时,提示错误。请大家多帮忙
  • 大型机开发主要用到什么技术,大型机主要用在什么项目中!
  • 请问各位高手,rmi和ejb有什么关系。开发客户端为javaapplet的多层结构系统怎样用到他们???
  • 开发板往PC机传输数据时,速度慢可能有哪些原因?
  • 请问一下在44B0上用miniGUI做界面开发的可能性
  • 过两天可能要用JAVA~开发一个什么工程项目管理的什么软件~具体怎么样我还不知道~
  • 我用的是atmel一个成熟的开发板。有一个触摸屏驱动程序,以<M>的方式编译为模块,编译时提示某个外部函数没有定义,但如果以<*>的方式编译进内核,则不会出错。请教下可能是什么原因?
  • 我开发了一个程序,在LINUX下,会自动死掉,请问可能什么原因?
  • 我是一位非计算机专业的研究生,想学习unix系统、网络管理员,并获得sun公司的认证证书,以后想从事unix环境下的开发工作,请各位指点一下,有没有可能?
  • 干了一年测试转作UNIX下C开发!!可能么?
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • SQLServer 数据库开发顶级技巧
  • Android开发技巧之像QQ一样输入文字和表情图像
  • Android开发技巧之ViewStub控件惰性装载
  • Android开发技巧之永不关闭的Toast信息框(长时间显示而非系统关闭)
  • Android开发技巧之在a标签或TextView控件中单击链接弹出Activity(自定义动作)
  • 解析Android开发优化之:从代码角度进行优化的技巧
  • Android开发技巧之我的菜单我做主(自定义菜单)
  • VS2012+MySQL+SilverLight5的MVVM开发模式介绍
  • linux 嵌入式开发用不用买开发板,买什么样的开发板?
  • ios app 开发中ipa重新签名步骤介绍
  • 请问shell 开发能开发什么样的程序?硬件的驱动程序是否能够开发呢?
  • 几个windows平台C++开发错误举例
  • 请问在Linux 下用C开发移动增值软件都有什么开发工具啊,我以前一直在Windows下用VC开发
  • IOS开发:UIScrollView类介绍及如何简单地截获touch事件
  • 我常未开发过Linux下的程序,请问Linux下可以使用那些开发工具,最好的开发工具是什么版本?
  • nginx最新主线开发版1.5.4发布及下载地址
  • 我是学习web开发的,主要是java开发SSH开发框架和ajax等。我想知道有没有必要学习一下linux相关知识。
  • Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
  • 各位设备驱动开发的朋友,请问,linux设备驱动开发和网络编程开发哪一样工资比较高呀?
  • ​基于Docker的大数据开发实践
  • Linux Kernel/Network 技术QQ群14888802,只加有内核开发、TCP/IP协议栈开发的程序员,不加新手和做应用开发的程序员。
  • Android及andriod无线网络Wifi开发的几点注意事项
  • 驱动程序开发和嵌入式开发有什么联系吗?
  • Linux 下c++开发error while loading shared libraries问题解决
  • linux 嵌入式开发用买开发板吗?
  • Android开发需要的几点注意事项总结
  • web开发和嵌入式开发哪个更有挑战
  • IOS开发之socket网络编程(基于SimpleNetworkStreams的c/s程序)
  • 请问在哪下载嵌入式Linux开发平台???想学嵌入式开发!!!




  • 特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3