分享15个大家都熟知的jquery小技巧_jquery
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了分享15个大家都熟知的jquery小技巧_jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5417字，纯文字阅读大概需要8分钟。
内容图文
帮助提高你jQuery应用的15个大家都熟知的jquery小技巧，分享给大家
- 回到顶部按钮
- 图片预加载
- 判断图片是否加载完
- 自动修补破损图像
- Hover切换class类
- 禁用输入
- 停止正在加载的链接
- toggle fade/slide
- 简单的手风琴
- 使两个DIV同等高度
- 在浏览器标签/新窗口打开外部链接
- 根据文本获取元素
- 可见变化的触发
- Ajax调用错误处理
- 链式操作
1、回到顶部按钮
利用jQuery里的animate和scrollTop方法，你便不需要使用插件创建简单的滚动到顶部动画。
通过scrollTop的值来改变你想要滚动到的位置。其实你就是做了：在接下来的800毫秒中让页面滚动，直到它滚动到文档的顶部。
备注：来看一些scrollTop的调皮行为 。
2、图片预加载
如果你的网页使用了很多隐藏图片文件（例如：鼠标悬停展示的图片），那么图片的预加载是有意义的：
3、判断图片是否加载完
有时候你可能需要检查图像是否已经加载完成，以便于可以继续执行相应的js代码：
你还可以检查一个特定的图片是否加载完并且被带有Id或者class的标签代替。
4、自动修补破损图像
如果你碰巧发现在你的网站上发现破损的图像链接，一个个去替代他们是痛苦的。这个简单的代码可以节省很多的麻烦：
即使你没有任何断开的链接，加入这代码也不会有任何影响。
5、Hover切换class类
比方说，当用户将鼠标悬停在你页面上的元素时，你想改变其视觉效果。当用户鼠标悬停在元素上，你可以在该元素上添加一个class类，当鼠标停止悬停事件时移除此class类：
如果你想要一个更简单的方式使用toggleClass方法，则仅仅需要添加必要的CSS：
备注：CSS在这种情况下使用是一个快速的解决方案，但要知道这点知识依旧是值得去了解下的。
6、禁用输入
有时你可能需要用表单的提交按钮或者某个输入框直到用户执行了某个动作（比如：检查“我已阅读条款”复选框）。在你的输入框上设置disabled属性，然后当你需要的时候启用该属性：
你需要做的只是需要在输入框上再次运行prop方法，但设置的被禁用值是false：
7、停止正在加载的链接
有时你不想链接到特定的网页或者重新载入页面；你可能想让他们做一些其他事情，如触发一些其他的脚本。这是防止违约行动的技巧：
8、toggle fade/slide
滑动和淡入/淡出 是我们在jQuery中经常大量使用的动画。你可能仅仅想在用户做某些点击事件的时候显示一个元素，这时候需要淡入/淡出或者滑动方法。但是如果你需要那个元素在你第一次点击的时候出现，在第二次点击的时候消失，代码如下：
9、简单的手风琴
这是个简单快速的方法创建一个手风琴：
通过添加这个脚本，你需要做的则是必要的HTML操作在你的页面上。
10、使两个DIV同等高度
有时你会想要两个DIV有相同的高度，无论他们都有什么内容：
这个例子设置了DIV的最小高度，这意味着它的高度只可以比这个设置的高度大而不能小。然而，一个更灵活的方法是循环的一组元素，并设置将最高元素的高度作为高度：
如果你想要所有的列有相同的高度：
11、在浏览器标签/新窗口打开外部链接
在新的浏览器标签或窗口中打开外部链接，并确保在同一个标签或窗口中打开的是同一个源的链接：
备注：window.location.origin 在IE10不工作。
12、根据文本获取元素
通过jQuery中的contains()选择器，你能找到一个元素内的文本内容。如果文本不存在，则这个元素将被隐藏：
13、可见变化的触发
当用户不再聚焦或者重新聚焦一个标签时触发javascript脚本：
14、Ajax调用错误处理
当一个Ajax调用返回一个404或500的错误时，将执行该错误处理。如果该处理未定义，则其他jQuery代码便可能不会执行了。定义一个全局Ajax错误处理程序：
15、链式操作
jQuery允许通过链式操作来减轻反复查询DOM和创建多个jQuery对象的过程。比如下面是你的方法调用：
这代码可以通过链式大大的提高：
另一个方法是在一个可变的元素缓存（$作为前置）：
链式和jQuery缓存方法是最好的做法，导致更短、更快的代码。
以上就是本文的全部内容，希望帮助大家提高jQuery应用能力。
内容总结
以上是互联网集市为您收集整理的分享15个大家都熟知的jquery小技巧_jquery全部内容，希望文章能够帮你解决分享15个大家都熟知的jquery小技巧_jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。