本文我们将为jQuery用户分享8个超实用的技巧攻略。jQuery是JavaScript最好的库之一,主要用于制作动画、事件处理,支持Ajax及HTML 脚本客户端。此外,jQuery还拥有各种插件,以帮助开发者在最短时间内快速创建网站/网页。
文中分享的这些实用代码,希望你会喜欢。
1)禁用右键单击功能
如果你想为用户节省网站信息,那么开发者可以使用这段代码——禁用右键单击功能。
<font><font>$(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; }); });</font></font>
2)使用jQuery设定文本大小
使用这段代码,用户可根据需求重新设定文本尺寸(增加或减少)。
<font><font>$(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); }); });</font></font>
3)在新窗口打开链接
使用这段代码会帮助用户在新窗口打开链接,为用户带来更好的用户体验。
$(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轴
<font><font>$().mousemove(function(e){ //display the x and y axis values inside the P element $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); });</font></font>
7)检测当前鼠标坐标
使用这个脚本,你可以在任何网络浏览器找到鼠标坐标。
$(document).ready(function() { $().mousemove(function(e) { $('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY); });
8)图片预加载
此段代码帮助用户快速加载图片或网页页面。
<font><font>jQuery.preloadImagesInWebPage = function() { for(var ctr = 0; ctr<arguments.length; ctr++) { jQuery("").attr("src", arguments[ctr]); } } To use the above method, you can use the following piece of code: $.preloadImages("image1.gif", "image2.gif", "image3.gif"); To check whether an image has been loaded, you can use the following piece of code: $('#imageObject').attr('src', 'image1.gif').load(function() { alert('The image has been loaded…'); });</font></font>
相关推荐
《超实用的jQuery代码段》精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台...
《超实用的jQuery代码段》精选近350个jQuery代码段,涵盖页面发中绝大多数要、技巧与方法,堪称*实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨设备、...
《超实用的jQuery代码段》精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台...
超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...
本书精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。本书的代码跨平台、跨设备、跨浏览器,充分向读者演示了如何...
《超实用的jQuery代码段》是一本专注于jQuery实践的书籍,其配套源码提供了一整套丰富的代码示例,帮助读者深入理解并掌握jQuery库在实际项目中的应用。jQuery是JavaScript的一个强大库,它简化了DOM操作、事件处理...
jQuery的一个非常实用的功能就是支持链式调用,即可以在一个方法调用后紧接着调用另一个方法。例如: - `$("p").click(function(){alert($(this).html());}).mouseover(function(){alert("mouseover event");});` 这...
在IT行业中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。在“超级好用jquery图表分析”这个主题中,我们将深入探讨如何利用jQuery来实现高效、直观的数据可视化...
jQuery 图片特效为网页设计带来了无限可能,通过学习和实践“超牛jquery图片特效”,你可以掌握一系列实用技巧,创造出引人入胜的视觉效果。无论是简单的切换效果,还是复杂的3D转换,jQuery都能让你得心应手。同时...
**jQuery简介** jQuery是一款高效、简洁的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互...同时,记得结合实践不断探索和学习新的jQuery技巧和最佳实践,以保持技术的更新和进步。
综上所述,这款插件是前端开发中一个实用的工具,它将jQuery的便捷性、HTML5的新特性、JavaScript的动态交互以及CSS的样式控制融合在一起,为网页的动态效果设计提供了一站式的解决方案。无论是新手还是经验丰富的...
在本文中,我们将深入探讨jQuery库中的8个实用功能代码,这些代码可以帮助开发者提升网站的交互性和用户体验。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互,使得开发者能更...
本篇文章将深入探讨两个使用jQuery实现的经典图片转换代码,它们具有极高的实用性和灵活性。 首先,我们来理解什么是图片转换。在网页中,图片转换通常指的是改变图片的显示方式,如更改尺寸、格式、透明度或动态...
【jQuery实现的超酷泡泡导航菜单效果】 在网页设计中,导航菜单是用户与网站交互的重要组成部分,它能...通过学习和实践这个例子,开发者可以进一步掌握前端开发中的动态效果实现技巧,同时增强网页设计的创新能力。
总的来说,"超炫酷的30个jQuery按钮悬停动画"不仅提供了丰富的设计灵感,还是一个实用的学习资源,帮助开发者提升网页交互设计技能,让网站更加生动有趣。通过实践和创新,你可以将这些技巧运用到自己的项目中,创造...