继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

12个JQuery小贴士

IT程序狮
关注TA
已关注
手记 372
粉丝 2505
获赞 8.4万
返回顶部

使用JQuery的 animatescrollTop 方法可以创建简单地返回顶部的动画:

// Back to top
$('a.top').click(function (e) {
  e.preventDefault();
  $(document.body).animate({scrollTop: 0}, 800);
});

HTML中得有一个按钮:

<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

可以改变 scrollTop 的值来定位滚动条的位置。

图片预加载

如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载:

$.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 或者 classimg 标签来判断某张特定的图片是否完全加载

自动修复损坏图片

如果图片损坏,可以用另外一张进行替换:

$('img').on('error', function () {
  $(this).prop('src', 'img/broken.png');
});
Hover状态的类切换

当用户的鼠标指针悬浮在一个可以点击的元素上时,你可以通过添加一个 class 改变它的视觉效果,鼠标指针离开该元素时,就移开刚刚添加的 class

$('.btn').hover(function () {
  $(this).addClass('hover');
  }, function () {
    $(this).removeClass('hover');
  });

一个更简单的方式是使用 toggleClass

$('.btn').hover(function () {
  $(this).toggleClass('hover');
});
Note: CSS may be a faster solution in this case but it’s still worthwhile to know this.
输入框的不可编辑

有时,你想要表单的提交按钮或者文本框变的不可编辑,直到用户完成某个特定的动作,通过修改 input 元素的 disabled 属性来实现:

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

再次调用 prop 方法将 disabled 值改为 false,就可以更改元素状态:

$('input[type="submit"]').prop('disabled', false);
停止链接加载

若你不想点击链接跳转到另一个页面或者重新加载页面,仅仅只想让它做点别的事情,如触发其它脚本,则需要阻止链接的默认行为:

$('a.no-link').click(function (e) {
  e.preventDefault();
});
Fade/Slide切换

Slideing 和 fading 是很常用的 JQuery 动画。如果你想要在用户产生点击事件时显示一个元素,可以用 fadeIn 或者 slideDown,若要实现第一次点击显示元素而第二次点击隐藏元素的效果,可以参考下面的脚本:

// Fade
$('.btn').click(function () {
  $('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
  $('.element').slideToggle('slow');
});
简单地手风琴

下面的这段脚本可以简单实现手风琴效果:

// 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;
});
让两个Div等高

有时,需要让两个Div保持等高,而不管两个Div的内容如何:

$('.div').css('min-height', $(.main-div).height());
var $columns = $('.column');
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);

在上述的示例中,会循环一个元素集合,并将元素的高度设置成元素集合中高度最高的。若要所有 column 保持同样地高度,则可以这样:

var $rows = $('.same-height-columns');
$rows.each(function () {
  $(this).find('.column').height($(this).height());
});
在新的Tab/Window打开外链

在浏览器的新Tab/Window打开外链,并且在同一个Tab/Window打开同源的链接:

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

Note: window.location.origin doesn’t work in IE10. This fix takes care of the issue.

通过文本查找元素

利用 JQuery 的 contains() 选择器可以查找一个包含特定文本的元素,如果文本不存在,元素则隐藏:

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

前端开发者手册: Front-end Dev Handbook

英文原文:jQuery Tips Everyone Should Know
译文地址:淡忘~浅思 » [译]12个JQuey Tips

打开App,阅读手记
38人推荐
发表评论
随时随地看视频慕课网APP