jquery常用的12个小功能.docxVIP

  • 1
  • 0
  • 约3.6千字
  • 约 3页
  • 2021-07-29 发布于天津
  • 举报
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

文档评论(0)

1亿VIP精品文档

相关文档