Jquery技巧(必须掌握)(2)

// 关闭所有面板 $('#accordion').find('.content').hide(); // 手风琴效果 $('#accordion').find('.accordion-header').click(function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); return false; });

通过添加这段脚本,你实际要做的只是提供必要的 HTML 元素以便它正常运行。

使两个 div 等高

有时你希望无论两个 div 各自包含什么内容,它们总有相同的高度:

$('.div').css('min-height', $('.main-div').height());

这个例子设置了 min-height,意味着高度可以大于主 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()); });

在新标签页 / 新窗口打开外部链接

在一个新的浏览器标签页或窗口中打开外部链接,并确保相同来源的链接在同一个标签页或者窗口中打开:

$('a[href^="http"]').attr('target', '_blank'); $('a[href^="//"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self');

注: window.location.origin 在 IE10 中不可用. 这个修复方案 正是关注于该问题。

通过文本查找元素

通过使用 jQuery 的 contains() 选择器,你能够查找元素内容中的文本。若文本不存在,该元素将被隐藏:

var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide();

在 visibility 属性变化时触发

当用户的焦点离开或者重新回到某个标签页时,触发 Javasrcipt:

$(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!'); } });

Ajax 调用错误处理

当一个 Ajax 调用返回 404 或 500 错误时,错误处理程序将被执行。若错误处理未被定义,其它 jQuery 代码可能不再有效。所以定义一个全局的 Ajax 错误处理:

$(document).ajaxError(function (e, xhr, settings, error) { console.log(error); });

链式插件调用

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。

检查 jQuery 是否加载

在使用 jQuery 进行任何操作之前,你需要先确认它已经加载:

if (typeof jQuery == 'undefined') { console.log('jQuery hasn\'t loaded'); } else { console.log('jQuery has loaded'); }

返回顶部按钮

利用 jQuery 中的 animate 和 scrollTop 方法,你无需插件就可以创建简单的 scroll up 效果:

// 返回顶部 $('a.top').click(function (e) { e.preventDefault(); $(document.body).animate({scrollTop: 0}, 800); }); <!-- 设置锚 --> <a href="#">Back to top</a>

调整 scrollTop 的值即可改变滚动着陆位置。你实际所做的是在 800 毫秒内不断设置文档主体的位置,直到它滚动到顶部。

预加载图片

如果你的网页使用了大量并非立即可见的图片(例如悬停鼠标触发的图片),那么预加载这些图片就显得很有意义了:

$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('<img>').attr('src', arguments[i]); } }; $.preloadImages('img/hover-on.png', 'img/hover-off.png');

判断图片是否加载完成

在有些情况下,为了继续执行脚本,你需要检查图片是否已经完全加载:

$('img').load(function () { console.log('image load successful'); });

同样,换用一个带有 id 或者 class 属性的 <img> 标签,你也可以检查特定图片是否加载完成。

自动修复失效图片

如果你在你的网站上发现了失效的图片链接,逐个去替换它们将会是个苦差。这段简单的代码可以很大程度地减轻痛苦:

$('img').on('error', function () { if(!$(this).hasClass('broken-image')) { $(this).prop('src', 'img/broken.png').addClass('broken-image'); } });

即使你暂无任何失效的链接,添加这段代码也不会有任何损失。

鼠标悬停切换 class

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgyjpd.html