jQuery實用的一些技巧

niuxiaowei111 發布于2019-08-19 17:57 / 2636人閱讀

摘要：元素的大小設置可以在圖片加載完成后計算。禁用輸入有時你可能需要用表單的提交按鈕或者某個輸入框直到用戶執行了某個動作比如檢查我已閱讀條款復選框。如果文本不存在，則這個元素將被隱藏可見變化的觸發當用戶不再聚焦或者重新聚焦一個標簽時觸發腳本轉載

引子

jQuery的存在，讓學習前端開發的人感到前端越來越容易入門了，用簡單的幾行代碼就可以實現需求，但是，你真的會用jQuery么，當代碼運行后無法看到自己預期的效果，是不是覺得jQuery出了問題，其實，問題還是出在了自己會不會用上面。下面列舉一些開發中經常遇到的應用實例，發現一下另一個不同的jQuery世界。

回到頂部按鈕

利用jQuery里的animate和scrollTop方法，你便不需要使用插件創建簡單的滾動到頂部動畫。

$(".top").click(function (e) {
  e.preventDefault();
  $("html, body").animate({scrollTop: 0}, 800);
});

通過scrollTop的值來改變你想要滾動到的位置。其實你就是做了：在接下來的800毫秒中讓頁面滾動，直到它滾動到文檔的頂部。

圖片預加載

如果你的網頁使用了很多隱藏圖片文件（例如：鼠標懸停展示的圖片），那么圖片的預加載是有意義的：

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

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

判斷圖片是否加載完

有時候你可能需要檢查圖像是否已經加載完成，以便于可以繼續執行相應的js代碼：

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

曾經遇到過的使用場景：有些元素需要按圖片的實際尺寸來設置其大小，以絕對布置方式放置。元素的大小設置可以在圖片加載完成后計算。

自動修補破損圖像

如果你碰巧發現在你的網站上發現破損的圖像鏈接，一個個去替代他們是痛苦的。這個簡單的代碼可以節省很多的麻煩：

$("img").on("error", function () {
  if(!$(this).hasClass("broken-image")) {
    $(this).prop("src", "img/broken.png").addClass("broken-image");
  }
});

即使你沒有任何斷開的鏈接，加入這代碼也不會有任何影響。

禁用輸入

有時你可能需要用表單的提交按鈕或者某個輸入框直到用戶執行了某個動作（比如：檢查“我已閱讀條款”復選框）。在你的輸入框上設置disabled屬性，然后當你需要的時候啟用該屬性：

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

你需要做的只是需要在輸入框上再次運行prop方法，但設置的被禁用值是false：

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

對地不了解prop函數的jQuery開發者來說，最常使用的是attr函數，可能開發很多程序都沒有發現什么問題，但是，在開發例如checkbox、radio、select時，會發現使用attr無法讓屬性生效，以為是jQuery的bug，下面來說說attr和prop的使用建議:

在遇到要獲取或設置checked,selected,readonly和disabled等屬性時，用prop方法顯然更好

使兩個DIV同等高度

有時你會想要兩個DIV有相同的高度，無論他們都有什么內容：

$(".div").css("min-height", $(".main-div").height());

這個例子設置了DIV的最小高度，這意味著它的高度只可以比這個設置的高度大而不能小。然而，一個更靈活的方法是循環的一組元素，并設置將最高元素的高度作為高度：

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());
});

根據文本獲取元素

通過jQuery中的contains()選擇器，你能找到一個元素內的文本內容。如果文本不存在，則這個元素將被隱藏：

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

可見變化的觸發

當用戶不再聚焦或者重新聚焦一個標簽時觸發javascript腳本：

$(document).on("visibilitychange", function (e) {
  if (e.target.visibilityState === "visible") {
    console.log("Tab is now in view!");
  } else if (e.target.visibilityState === "hidden") {
    console.log("Tab is now hidden!");
  }
});

轉載：http://www.cnblogs.com

云服務器 GPU云服務器 php實用的一些代碼實用技巧 PHP實用技巧 js實用技巧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79025.html

【JS實用技巧】利用冒泡機制，減少事件綁定，優化頁面性能

摘要：如何通過一些技巧，達到減少事件綁定，優化頁面性能的目的呢接下來介紹一下我個人對優化事件綁定的實踐。這里直接給出最佳實踐利用事件冒泡機制來為元素綁定事件。再加上由于創建太多的事件監聽，也會對頁面性能有影響。引言無論新手老手，在前端開發中，經常要為DOM元素綁定事件，以實現某些功能。如何通過一些JS技巧，達到減少事件綁定，優化頁面性能的目的呢？接下來介紹一下我個人對優化事件綁定的實踐。...

Jackwoo 2019-08-20 14:17 評論0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：筆者作為一位，將工作以來用到的各種優秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續更新… 一、...

Jonathan Shieber 2019-08-29 12:33 評論0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：筆者作為一位，將工作以來用到的各種優秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續更新… 一、...

SHERlocked93 2019-08-22 11:04 評論0 收藏0
CSS技巧

摘要：技巧使你的更加專業這是上關于技巧的一篇譯文，另外你也可以在本項目看到原文。列舉了一些很實用的技巧，比如給空內容的標簽添加內容，逗號分隔列表等等。排序算法看源碼，把它背下來吧排序算法的封裝。主要幫助初學者更好的掌握排序算法的實現。成為專業程序員路上用到的各種優秀資料、神器及框架成為一名專業程序員的道路上，需要堅持練習、學習與積累，技術方面既要有一定的廣度，更要有自己的深度。 Java...

DangoSky 2019-08-22 11:15 評論0 收藏0
CSS技巧

摘要：技巧使你的更加專業這是上關于技巧的一篇譯文，另外你也可以在本項目看到原文。列舉了一些很實用的技巧，比如給空內容的標簽添加內容，逗號分隔列表等等。排序算法看源碼，把它背下來吧排序算法的封裝。主要幫助初學者更好的掌握排序算法的實現。成為專業程序員路上用到的各種優秀資料、神器及框架成為一名專業程序員的道路上，需要堅持練習、學習與積累，技術方面既要有一定的廣度，更要有自己的深度。 Java...

zgbgx 2019-08-29 14:01 評論0 收藏0