分享15个大家都熟知的jquery小技巧(2)

$('.div').css('min-height', $('.main-div').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()); });

11、在浏览器标签/新窗口打开外部链接

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

$('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、可见变化的触发

当用户不再聚焦或者重新聚焦一个标签时触发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缓存方法是最好的做法,导致更短、更快的代码。

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

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