前端开发者都应知道的 jQuery 小技巧.docx

《前端开发者都应知道的 jQuery 小技巧.docx》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、一个简单技巧的集合，帮你提升jQuery技能。MattSmith发起的一个小项目，目前已有14个小技巧。伯乐在线会持续跟进更新。1.回到顶部按钮2.预加载图片3.检查图片是否加载完毕4.自动修复损坏的图片5.Hover上的Class开关6.禁用input字段7.停止链接加载8.淡入淡出/滑动开关9.简单的折叠效果10.将两个Div设为相同高度11.在新窗口打开外部链接12.找到文本元素13.切换可视与隐藏的触发器 回到顶部按钮通过使用jQuery中的 animate 和 scrollTop 方法，你无需插件便可创建一个简单地回到顶部动画：JavaScri

2、pt12345//Backtotop$('a.top').click(function(e){  e.preventDefault();  $(document.body).animate({scrollTop:0},800);});JavaScript12Backtotop将 scrollTop 的值改为你想要scrollbar停止的地方。然后你要做的就是，设置在800毫秒内回到顶部。预加载图片如果你的页面使用了大量不能初始可见的图片（例如绑定在hove

3、r上），预加载它们是十分有用的：JavaScript123456$.preloadImages=function(){  for(vari=0;i').attr('src',arguments[i]);  }}; 7$.preloadImages('img/hover-on.png','img/hover-off.png');检查图片是否加载完毕有时你或许要检查图片是否完全加载完毕，才能在脚本中进行后续操作：JavaScript123$('img').load(function(){ 

4、 console.log('imageloadsuccessful');});你也可以通过把img标签替换成ID或class，来检查特定图片是否加载完成。自动修复损坏的图片如果你发现自己网站的图片链接挂了，一个一个替换很麻烦。这段简单的代码可以帮上大忙：JavaScript123$('img').on('error',function(){  $(this).prop('src','img/broken.png');});即使你没有任何损坏的链接，增加这段代码也不会有什么影响。Hover上的Class切换如果用户的鼠标悬停在页面上某个可点击元素时，你想要

5、改变这个元素的视觉表现。可以使用下面这段代码，当用户悬停时，为该元素增加一个class；当用户鼠标离开后移除这个class：JavaScript12345$('.btn').hover(function(){  $(this).addClass('hover');},function(){  $(this).removeClass('hover');});你仅需增加必须的CSS。如果需要更简单的方式，还可以使用 toggleClass 方法：JavaScript123$('.btn').hover(function(){  $(this).toggleC

6、lass('hover');});注意：CSS或许是这个例子更快速的解决方式，但大家仍然值得知道这一点。禁用input字段有时你也许想让表单的提交按钮或其文本输入框变得不可用，直到用户执行了一个特定行为（例如确认“我已经阅读该条款”的复选框）。增加 disabled attribute到你的input，就可以实现自己想要的效果：JavaScript1$('input[type="submit"]').prop('disabled',true);当你想把 disabled 的值改为 false 时，仅需在该input上再运行一次 prop 方法。JavaS

7、cript1$('input[type="submit"]').prop('disabled',false);停止链接加载有时你不想链接跳转到某个页面或重加载该页面，而希望可以做一些其他事情，比如触发其他脚本。下面的代码是禁止默认行为的一个小诀窍：JavaScript123$('a.no-link').click(function(e){  e.preventDefault();});淡入淡出/滑动开关淡入淡出与滑动是我们经常使用jQuery 做成的动画效果。或许你只是想在用户点击某物时展现一个元素，使用 fadeIn 和 slideDown 都很棒。但

8、如果想让该元素在第一次点击时显现，第二次点击时消失，下面的代码可以很好地完成这个