jQuery實(shí)用的一些技巧

niuxiaowei111 發(fā)布于2019-08-19 17:57 / 2633人閱讀

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

引子

jQuery的存在，讓學(xué)習(xí)前端開(kāi)發(fā)的人感到前端越來(lái)越容易入門(mén)了，用簡(jiǎn)單的幾行代碼就可以實(shí)現(xiàn)需求，但是，你真的會(huì)用jQuery么，當(dāng)代碼運(yùn)行后無(wú)法看到自己預(yù)期的效果，是不是覺(jué)得jQuery出了問(wèn)題，其實(shí)，問(wèn)題還是出在了自己會(huì)不會(huì)用上面。下面列舉一些開(kāi)發(fā)中經(jīng)常遇到的應(yīng)用實(shí)例，發(fā)現(xiàn)一下另一個(gè)不同的jQuery世界。

回到頂部按鈕

利用jQuery里的animate和scrollTop方法，你便不需要使用插件創(chuàng)建簡(jiǎn)單的滾動(dòng)到頂部動(dòng)畫(huà)。

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

通過(guò)scrollTop的值來(lái)改變你想要滾動(dòng)到的位置。其實(shí)你就是做了：在接下來(lái)的800毫秒中讓頁(yè)面滾動(dòng)，直到它滾動(dòng)到文檔的頂部。

圖片預(yù)加載

如果你的網(wǎng)頁(yè)使用了很多隱藏圖片文件（例如：鼠標(biāo)懸停展示的圖片），那么圖片的預(yù)加載是有意義的：

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

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

判斷圖片是否加載完

有時(shí)候你可能需要檢查圖像是否已經(jīng)加載完成，以便于可以繼續(xù)執(zhí)行相應(yīng)的js代碼：

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

曾經(jīng)遇到過(guò)的使用場(chǎng)景：有些元素需要按圖片的實(shí)際尺寸來(lái)設(shè)置其大小，以絕對(duì)布置方式放置。元素的大小設(shè)置可以在圖片加載完成后計(jì)算。

自動(dòng)修補(bǔ)破損圖像

如果你碰巧發(fā)現(xiàn)在你的網(wǎng)站上發(fā)現(xiàn)破損的圖像鏈接，一個(gè)個(gè)去替代他們是痛苦的。這個(gè)簡(jiǎn)單的代碼可以節(jié)省很多的麻煩：

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

即使你沒(méi)有任何斷開(kāi)的鏈接，加入這代碼也不會(huì)有任何影響。

禁用輸入

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

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

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

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

對(duì)地不了解prop函數(shù)的jQuery開(kāi)發(fā)者來(lái)說(shuō)，最常使用的是attr函數(shù)，可能開(kāi)發(fā)很多程序都沒(méi)有發(fā)現(xiàn)什么問(wèn)題，但是，在開(kāi)發(fā)例如checkbox、radio、select時(shí)，會(huì)發(fā)現(xiàn)使用attr無(wú)法讓屬性生效，以為是jQuery的bug，下面來(lái)說(shuō)說(shuō)attr和prop的使用建議:

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

使兩個(gè)DIV同等高度

有時(shí)你會(huì)想要兩個(gè)DIV有相同的高度，無(wú)論他們都有什么內(nèi)容：

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

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

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

根據(jù)文本獲取元素

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

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

可見(jiàn)變化的觸發(fā)

當(dāng)用戶不再聚焦或者重新聚焦一個(gè)標(biāo)簽時(shí)觸發(fā)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!");
  }
});

轉(zhuǎn)載：http://www.cnblogs.com