jQuery有用的一些技能

2019年8月30日 159次阅读 来源: 大猛

引子

jQuery的存在，让进修前端开辟的人以为前端愈来愈轻易入门了，用简朴的几行代码就能够实现需求，然则，你真的会用jQuery么，当代码运转后没法看到本身预期的结果，是不是是以为jQuery出了题目，实在，题目照样出在了本身会不会用上面。下面枚举一些开辟中常常碰到的运用实例，发明一下另一个差别的jQuery天下。

回到顶部按钮

应用jQuery里的animate和scrollTop要领，你便不须要运用插件建立简朴的转动到顶部动画。

$('.top').click(function (e) {
  e.preventDefault();
  $('html, body').animate({scrollTop: 0}, 800);
});

经由过程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');

推断图片是不是加载完

偶然候你能够须要搜检图象是不是已加载完成，以便于能够继承实行响应的js代码：

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

曾碰到过的运用场景：有些元素须要按图片的现实尺寸来设置其大小，以相对安排体式格局安排。元素的大小设置能够在图片加载完成后盘算。

自动修补破坏图象

假如你恰巧发明在你的网站上发明破坏的图象链接，一个个去替换他们是痛楚的。这个简朴的代码能够节约许多的贫苦：

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

纵然你没有任何断开的链接，到场这代码也不会有任何影响。

禁用输入

偶然你能够须要用表单的提交按钮或许某个输入框直到用户实行了某个行动（比方：搜检“我已浏览条目”复选框）。在你的输入框上设置disabled属性，然后当你须要的时刻启用该属性：

$('input[type="submit"]').prop('disabled', true);

你须要做的只是须要在输入框上再次运转prop要领，但设置的被禁用值是false：

$('input[type="submit"]').prop('disabled', false);

对地不相识prop函数的jQuery开辟者来讲，最常运用的是attr函数，能够开辟许多顺序都没有发明什么题目，然则，在开辟比方checkbox、radio、select时，会发明运用attr没法让属性见效，以为是jQuery的bug，下面来讲说attr和prop的运用发起:

在碰到要猎取或设置checked,selected,readonly和disabled等属性时，用prop要领明显更好

使两个DIV一致高度

偶然你会想要两个DIV有雷同的高度，不管他们都有什么内容：

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

依据文本猎取元素

经由过程jQuery中的contains()选择器，你能找到一个元素内的文本内容。假如文本不存在，则这个元素将被隐蔽：

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

可见变化的触发

当用户不再聚焦或许从新聚焦一个标签时触发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!');
  }
});

转载：http://www.cnblogs.com

    原文作者：大猛
    原文地址: https://segmentfault.com/a/1190000004684984
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞