每個前端應該知道的jquery 細節

spademan發表於2015-10-24
前端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內容的都隱藏

相關文章