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

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

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

1.回到顶部

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

// 回到顶部  $('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内容的都隐藏