前端开发必知的15个jQuery小技巧
下面这些简单的小技巧能够帮助你玩转jQuery。
1、返回顶部按钮
通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画:
// Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); <!-- Create an anchor tag --> <a class="top" href="#">Back to top</a>
改变scrollTop 的值可以更改你想要放置滚动条的位置。所有你真正需要做的是在800毫秒的时间内设置文档主体的动画,直到它滚动到文档的顶部。
注:小心scrollTop的一些错误行为。
2、预加载图像
如果你的网页要使用大量开始不可见的(例如,悬停的)图像,那么可以预加载这些图像:
$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('<img>').attr('src', arguments[i]); } }; $.preloadImages('img/hover-on.png', 'img/hover-off.png');
3、检查图像是否加载
有时为了继续脚本,你可能需要检查图像是否全部加载完毕:
$('img').load(function () { console.log('image load successful'); });
你也可以用ID或类替换<img>标签来检查某个特定的图像是否被加载。
4、自动修复破坏的图像
逐个替换已经破坏的图像链接是非常痛苦的。不过,下面这段简单的代码可以帮助你:
$('img').on('error', function () { if(!$(this).hasClass('broken-image')) { $(this).prop('src', 'img/broken.png').addClass('broken-image'); } });
即使没有任何断掉的链接,加上这一段代码也不会让你有任何损失。
5、悬停切换类
假设你希望当用户将鼠标悬停在可点击的元素上时,它会改变颜色。那么你可以在用户悬停的时候添加类到元素中,反之则删除类:
$('.btn').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); });
你只需要添加必要的CSS即可。更简单的方法是使用toggleClass 方法:
$('.btn').hover(function () { $(this).toggleClass('hover'); });
注:可能在这种情况下,CSS这种解决方案更快,不过了解这个方法很有必要。
6、禁用输入字段
有时候,你可能想要禁用表格的提交按钮或它的某一项文字输入直到用户执行了特定操作(例如,勾选“我已阅读相关条款”复选框)。添加 disabled属性到你的输入就可以在你想要的时候才启用它:
$('input[type="submit"]').prop('disabled', true);
然后你只需要运行输入的prop 方法就可以了,不过disabled 的值要设置为false:
$('input[type="submit"]').prop('disabled', false);
7、停止加载链接
有时候,你既不需要链接到某个特定的网页,也不想要重新加载页面——你可能希望链接做点别的事情,例如说触发一些其他脚本。这就要在阻止默认动作上做文章了:
$('a.no-link').click(function (e) { e.preventDefault(); });
8、淡入/滑动切换
滑动和淡入都是我们用jQuery做动画的时候大量运用的东西。如果你只是想在用户点击之后展示一个元素的话,那么用fadeIn 和slideDown 方法就很完美。但是,如果你想要元素在第一次点击的时候出现,然后在第二次点击的时候消失的话,那么可以试试下面的代码:
// Fade $('.btn').click(function () { $('.element').fadeToggle('slow'); }); // Toggle $('.btn').click(function () { $('.element').slideToggle('slow'); });
9、简单的手风琴
这是一个可快速生成手风琴的简单方法:
// Close all panels $('#accordion').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').click(function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); return false; });
通过添加这个脚本,你真正需要做的仅仅是在页面上添加必要的HTML元素,这样它就可以运行工作了。
10、让两个div高度相同
有时候,你需要让两个div无论包含什么内容都拥有相同的高度:
$('.div').css('min-height', $('.main-div').height());
设置 min-height,这意味着它可以比主div大但绝对不能比主div小。不过,还有一种更灵活的方法是遍历一组元素,然后将高度设置为最高的那个元素的高度:
var $columns = $('.column'); var height = 0; $columns.each(function () { if ($(this).height() > height) { height = $(this).height(); } }); $columns.height(height);
如果你希望所有列的高度相同:
var $rows = $('.same-height-columns'); $rows.each(function () { $(this).find('.column').height($(this).height()); });
11、在新标签页/窗口打开外部链接
在一个新的浏览器tab或窗口中打开外部链接,并确保同一个来源的链接能在同一个tab或者窗口中打开:
$('a[href^="http"]').attr('target', '_blank'); $('a[href^="//"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
注意:window.location.origin 在IE10中无效。修复的时候要小心这个问题。
12、通过文本查找元素
通过使用jQuery中的contains() 选择器,你可以找到元素内容的文本。如果文本不存在,那就隐藏该元素:
var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide();
13、在改变Visibility时触发
当用户不再关注某个tab,或重新聚焦原来的那个tab上时,触发JavaScript:
$(document).on('visibilitychange', function (e) { if (e.target.visibilityState === "visible") { console.log('Tab is now in view!'); } else if (e.target.visibilityState === "hidden") { console.log('Tab is now hidden!'); } });
14、AJAX调用错误处理
当Ajax调用返回404或500错误时,就执行错误处理程序。如果没有定义处理程序,其他的jQuery代码或会就此罢工。定义一个全局的Ajax错误处理程序:
$(document).ajaxError(function (e, xhr, settings, error) { console.log(error); });
15、链式插件调用
jQuery允许“链式”插件的方法调用,以减轻反复查询DOM并创建多个jQuery对象的过程。比方说,下面的代码片段代表了你的插件方法调用:
$('#elem').show(); $('#elem').html('bla'); $('#elem').otherStuff();
通过使用链式,可以大大改善:
$('#elem') .show() .html('bla') .otherStuff();
还有一种方法是在(前缀$)变量中高速缓存元素:
var $elem = $('#elem'); $elem.hide(); $elem.html('bla'); $elem.otherStuff();
链式和高速缓存的方法都是jQuery中可以让代码变得更短和更快的代最佳做法。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
相关文章
- 这篇文章主要介绍了jquery实现加载更多"转圈圈"效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-11-10
- 最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性...2015-10-30
- 有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考,具体如下:先来看如下运行效果截图:在线演示地址如下:http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
- JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
- 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧。废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过,不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译...2014-05-31
- 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07
jquery中常用的SET和GET$(”#msg”).html循环介绍
复制代码 代码如下: $(”#msg”).html(); //返回id为msg的元素节点的html内容。 $(”#msg”).html(”new content“); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $(”...2013-10-13jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03- 直接为大家介绍制作过程,希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30
- jquery中jquery.offset().top / left用于获取div距离窗口的距离,jquery.position().top / left 用于获取距离父级div的距离(必须是绝对定位的div)。 (1)先介绍jquery.offset().top / left css: 复制代码 代码如下: *{ mar...2013-10-13
- 本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果。分享给大家供大家参考,具体如下:这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在“上一页”“下一页”上,立即浮现出所对应的图...2015-10-30
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
这篇文章将使用jQuery,并结合PHP,将Fckeditor发布的内容进行分页,并且实现无刷新切换页面。 本文假设你是WEB开发人员,掌握了jQuery和PHP相关知识,并且熟知Fckeditor的配置和使用。...2015-10-23- jQuery实现带玻璃流光质感的手风琴特效是一款基于jQuery+CSS3实现的带玻璃流光质感的手风琴特效,分享给大家,具体如下效果图:具体代码如下:html代码: <section class="strips"> <article class="strips__strip"> <di...2015-11-24
jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合...2014-05-31jQuery+slidereveal实现的面板滑动侧边展出效果
我们借助一款jQuery插件:slidereveal.js,可以使用它控制面板左右侧滑出与隐藏等效果,项目地址:https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15- jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自...2015-10-30
- 在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互目的....2016-04-27
- 本文实例讲述了jquery实现模拟百分比进度条渐变效果代码。分享给大家供大家参考,具体如下:这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样。运行效果截图如下:在线演示地址如下:http://demo.jb51.net...2015-10-30