jquery常用的12个小功能.docxVIP

jQuery开发，感兴12个jquery jQuery开发，感兴 趣的小伙伴们可以参考一下 返回顶部 使用JQuery的animate和scrollTop方法可以创建简单地返回顶部的动画： // Back to top $(a.top).click(function (e) { nbsp;e.preventDefault(); nbsp;$(document.body).animate({scrollTop: 0}, 800); }); HTML中得有一个按钮： lt;!-- Create an anchor tag --gt; lt;a class=top href=#gt;Back to toplt;/agt; 可以改变scrollTop的值来定位滚动条的位置。 图片预加载 如果页面使用了很多不是最初加载便可见的图片，有必要进行预加载： $.preloadImages = function () { nbsp;for (var i = 0; i lt; arguments.length; i++) { nbsp;$(img).attr(src, arguments[i]); nbsp;} }; $.preloadImages(img/hover-on.png, img/hover-off.png); 判断图片是否完全加载 有时需要图片完全加载才能进行后面的操作，下面的这段脚本可以实现： $(img).load(function () { nbsp;console.log(image load successful); }); 你也可以通过带id或者class的img标签来判断某张特定的图片是否完全加载 自动修复损坏图片 如果图片损坏，可以用另外一张进行替换： $(img).on(error, function () { nbsp;$(this).prop(src, img/broken.png); }); Hover状态的类切换 class改变它 class改变它 的视觉效果，鼠标指针离开该元素时，就移开刚刚添加的 class： $(.btn).hover(function () { nbsp;$(this).addClass(hover); nbsp;}, function () { nbsp;$(this).removeClass(hover); nbsp;}); 一个更简单的方式是使用 toggleClass： $(.btn).hover(function () { nbsp;$(this).toggleClass(hover); })； Note: CSS may be a faster solution in this case but its still worthwhile to know this. 输入框 的不可编辑 有时，你想要表单的提交按钮或者文本框变的不可编辑， 直到用户完成某个特定的动作， 通过修改input元素的disabled属性来实现： $(input[type=submit]).prop(disabled, true); 再次调用prop方法将disabled值改为false,就可以更改元素状态： $(input[type=submit]).prop(disabled, false); 停止链接加载 若你不想点击链接跳转到另一个页面或者重新加载页面，仅仅只想让它做点别的事情， 如触发其它脚本，则需要阻止链接的默认行为 ： $(a.no-link).click(function (e) { nbsp;e.preventDefault(); }); Fade/Slide 切换 Slideing和fading是很常用的 JQuery动画。如果你想要在用户产生点击事件时显示 一个元素，可以用fadeIn或者slideDown ,若要实现第一次点击显示元素而第二次点击隐藏 元素的效果，可以参考下面的脚本： // Fade $(.btn).click(function () { nbsp;$(.element).fadeToggle(slow); }); // Toggle $(.btn).click(function () { nbsp;$(.element).slideToggle(slow); }); 简单地手风琴 下面的这段脚本可以简单实现手风琴效果： // Close all panels $(#accordion).find(.content).hide(); // Accordion $(#accordion).find(.accordion-header).click(function () { nbsp;var next = $(this).next(); nbsp;next.sl