每个前端应该知道的jquery 细节

每个前端应该知道的jquery 细节

一组简单的小技巧收集,让你玩转jquery

1.回到顶部

不需要其他插件,简单通过使用jquery 中的 animate and scrollTop 方法,就能实现

// 回到顶部
$('a.top').click(function (e) {
  e.preventDefault();
  $(document.body).animate({scrollTop: 0}, 800);
});

<!--创建一个回到顶部的按钮 -->
<a class="top" href="#">Back to top</a>

通过 改变scrollTop的值控制滚动条到达哪个位置

2.预加载图片

如果你的页面有很多图片,并且默认情况下是看不到的,当你鼠标移动过的时候才出现,这时候就需要 预加载功能

$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $('img').attr('src', arguments[i]);
  }
};

$.preloadImages('img/hover-on.png', 'img/hover-off.png');

3.检测图片是否加载完成

有时候你需要去知道图片是否真正加载完成.

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

4.优雅处理加载不成功的图片

使用一张默认的图片来代替加载不成功的 图片

$('img').on('error', function () {
  $(this).prop('src', 'img/broken.png');
});

5.Hover事件切换类

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

混合写法,

$('.btn').hover(function () {
  $(this).toggleClass('hover');
});

6.禁用一个表单元素

比如有时候 ,只想提交一次表单,就可以设置禁用

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

如果想解禁 ,

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

7.阻止超链接的默认行为

有时候我们常常用超链接作为按钮,但是超链接本身是有链接 会跳转的,假如我们不想要跳转的时候 就需要阻止默认行为

$('a.no-link').click(function (e) {
  e.preventDefault();
});

8.fade(渐入渐出)效果和slide(下拉收起)效果的切换

// 渐入渐出
$('.btn').click(function () {
  $('.element').fadeToggle('slow');
});
// 下拉收起
$('.btn').click(function () {
  $('.element').slideToggle('slow');
});

9.动态设置两个div的高度一样

不管他们的内容怎样 他们的高度都会保持一致

通过css设置 最低高度值,

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

遍历设置一序列的元素的高度统一

var $rows = $('.same-height-columns');
$rows.each(function () {
  $(this).find('.column').height($(this).height());
});

10.新的标签或者窗口打开外部链接

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

注意: window.location.origin 不兼容IE10 解决方案

11.根据内容来寻找元素

通过 jquery的contains()方法

var search = $('#search').val();
$('div:not(:contains("'+search+'"))').hide();//表示如果没有包含search内容的都隐藏