前端开发应该知道的一些JQuery小技巧(2)_H5之家 - 中国HTML5教程资源分享第一站

设置 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()); });在新标签页/窗口打开外部链接

在一个新的浏览器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中无效。修复的时候要小心这个问题。

通过文本查找元素

通过使用jQuery中的contains() 选择器，你可以找到元素内容的文本。如果文本不存在，那就隐藏该元素：

var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide();在改变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!'); } });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 Tips Everyone Should Know

翻译作者：码农网 – 小峰

原文链接：HelloWeb前端网 » 前端开发应该知道的一些JQuery小技巧 » 感谢您的浏览，希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群： 196291215 共同交流并结识同行，在这里说出您的收获与感想或有什么不同的观点，我们期待您的留言，分享，让我们一起进步！

or分享

脚本代码前端开发 helloweb 经验技巧 JQuery

网站前端静态页面目录组织结构响应式图片解决方案

CSS技巧收集—毛玻璃效果

Web前端知识体系精简

前后端分离实践

认识到应用-3分钟学会MarkDown