每個前端應該知道的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');</pre> 
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^="http://"]').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內容的都隱藏
</div>
原文 http://segmentfault.com/a/1190000003901468