このページの内容

Awesome jQuery Tips Everyone Should Know

jQuery Tips Everyone Should Knowを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

目次

ヒント

noConflict()を使う
jQueryが読み込まれたか確認する
要素が存在するか確認する
.on()バインディングを使い、.click()は使わない
ページ先頭へ戻るボタン
画像をプリロードする
画像が読み込まれたか確認する
壊れた画像を自動的に修正する
AJAXでフォームを送信する
ホバー時にクラスを切り替える
入力フィールドを無効化する
リンクの読み込みを止める
jQueryセレクターをキャッシュする
フェード／スライドを切り替える
シンプルなアコーディオン
二つのDivを同じ高さにする
外部リンクを新しいタブ／ウィンドウで開く
テキストで要素を見つける
可視性の変更時にトリガーする
AJAX呼出しのエラー処理
プラグイン呼出しを連鎖する
リスト項目をアルファベット順に並べ替える
右クリックを無効化する

`noConflict()`を使う

jQueryが使う$エイリアスは、他のJavaScriptライブラリでも使われます。jQueryが別ライブラリの$オブジェクトと競合しないよう、ドキュメントの先頭でnoConflict()メソッドを使います。

jQuery.noConflict();

これ以降はjQuery変数名で、$の代わりにjQueryオブジェクトを参照します（例: jQuery('div p').hide()）。同じページに複数のjQueryバージョンがある場合（推奨しません）、noConflict()を使い特定のバージョンへエイリアスを設定できます。

let $x = jQuery.noConflict();

^{目次に戻る}

jQueryが読み込まれたか確認する

jQueryで何かを行う前に、まず読み込まれていることを確かめる必要があります。

if (typeof jQuery == "undefined") {
  console.log("jQuery hasn't loaded");
} else {
  console.log("jQuery has loaded");
}

これで準備完了です。

^{目次に戻る}

要素が存在するか確認する

HTML要素を使う前に、それがDOMの一部であることを確認する必要があります。

if ($("#selector").length) {
  //do something with element
}

^{目次に戻る}

`.on()`バインディングを使い、`.click()`は使わない

.on()を使うと、複数イベントを追加できるなど、.click()より多くの利点があります。

.on('click tap hover')

また、動的に作成された要素にもバインディングが適用されます（DOM要素へ動的追加される要素を毎回手動でバインドする必要はありません）。

さらに名前空間を設定できます。

.on('click.menuOpening')

名前空間により特定イベントを解除できます（例: .off('click.menuOpening')）。

^{目次に戻る}

ページ先頭へ戻るボタン

jQueryのanimate・scrollTopメソッドを使えば、単純な先頭スクロールアニメーションにプラグインは不要です。

// Back to top
$(".container").on("click", ".back-to-top", function (e) {
  e.preventDefault();
  $("html, body").animate({ scrollTop: 0 }, 800);
});


<div class="container">
  <a href="#" class="back-to-top">Back to top</a>
</div>

scrollTop値を変えると、スクロールバーの到達位置が変わります。実際には、ドキュメント本体を800ミリ秒かけて先頭へスクロールするようアニメーションさせています。

注記: scrollTopには不安定な挙動があるため注意してください。

^{目次に戻る}

画像をプリロードする

Webページで最初は表示されない画像（ホバー時など）を多く使う場合は、プリロードすることが合理的です。

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

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

^{目次に戻る}

画像が読み込まれたか確認する

スクリプトを続行するために、画像が完全に読み込まれたか確認する必要があることがあります。

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

特定の画像だけが読み込まれたか確認するには、<img>タグをIDまたはクラスに置き換えることもできます。

^{目次に戻る}

壊れた画像を自動的に修正する

サイトで壊れた画像リンクを見つけた際、それらを一つずつ置換するのは大変です。この単純なコードで多くの手間を省けます。

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

壊れた画像を隠したい場合は、代わりに次のスニペットを使えます。

$("img").on("error", function () {
  $(this).hide();
});

^{目次に戻る}

AJAXでフォームを送信する

jQuery AJAXメソッドは、テキスト、HTML、XML、JSONをリクエストする一般的な手段です。AJAXでフォームを送るには、val()メソッドでユーザー入力を収集できます。

$.post("sign_up.php", {
  user_name: $("input[name=user_name]").val(),
  email: $("input[name=email]").val(),
  password: $("input[name=password]").val(),
});

ただし、これらのval()呼出しはすべてコストが高く、.val()を<textarea>要素に使うとブラウザーが報告する値から改行文字が取り除かれます。ユーザー入力を収集するより良い方法は、文字列として収集するserialize()関数を使うことです。

$.post("sign_up", $("#sign-up-form").serialize());

^{目次に戻る}

ホバー時にクラスを切り替える

ユーザーがページ上のクリック可能な要素にホバーしたとき、見た目を変えたいとします。ホバー中は要素へクラスを追加し、ホバーを止めたらクラスを削除できます。

$(".btn").on(
  "hover",
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

必要なCSSを追加します。さらに簡単な方法が必要なら、toggleClassメソッドを使います。

$(".btn").on("hover", function () {
  $(this).toggleClass("hover");
});

注記: この場合はCSSのほうが高速な解決策かもしれませんが、知っておく価値はあります。

^{目次に戻る}

入力フィールドを無効化する

フォーム送信ボタンまたはテキスト入力を、ユーザーが特定の操作（例: 「規約を読みました」チェックボックス）を行うまで無効にしたい場合があります。入力にdisabled属性を追加し、必要なときに有効化します。

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

入力でpropメソッドを再度実行し、disabledの値をfalseに設定するだけです。

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

^{目次に戻る}

リンクの読み込みを止める

リンクを特定のWebページへ遷移させず、ページも再読み込みせず、別のスクリプトを起動するなど別のことをさせたい場合があります。既定の動作を防ぐには次を使います。

$("a.no-link").on("click", function (e) {
  e.preventDefault();
});

^{目次に戻る}

jQueryセレクターをキャッシュする

どのプロジェクトでも、同じセレクターを何度も書くことがあります。$('.element')セレクターは、以前に実行済みかどうかに関係なく毎回DOM全体を検索します。代わりにセレクターを一度実行し、結果を変数へ格納できます。

var blocks = $("#blocks").find("li");

これで毎回DOMを検索せず、必要な場所でblocks変数を使えます。

$("#hideBlocks").on("click", function () {
  blocks.fadeOut();
});

$("#showBlocks").on("click", function () {
  blocks.fadeIn();
});

jQueryセレクターのキャッシュは優れた性能改善になります。

^{目次に戻る}

フェード／スライドを切り替える

スライドとフェードはjQueryのアニメーションで一般的です。クリック時に要素を表示するにはfadeIn・slideDownメソッドが適していますが、最初のクリックで現れ、二度目のクリックで消えるようにするには次を使えます。

// Fade
$(".btn").on("click", function () {
  $(".element").fadeToggle("slow");
});

// Toggle
$(".btn").on("click", function () {
  $(".element").slideToggle("slow");
});

^{目次に戻る}

シンプルなアコーディオン

素早くアコーディオンを作るシンプルな方法です。

// Close all panels
$("#accordion").find(".content").hide();

// Accordion
$("#accordion")
  .find(".accordion-header")
  .on("click", function () {
    var next = $(this).next();
    next.slideToggle("fast");
    $(".content").not(next).slideUp("fast");
    return false;
  });

このスクリプトを追加すれば、Webページ側では動作に必要なHTMLを用意するだけです。

^{目次に戻る}

二つのDivを同じ高さにする

内容に関係なく二つのdivを同じ高さにしたい場合があります。

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

この例はmin-heightを設定するため、メイン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());
});

注記: これはCSSで複数の方法により実現できますが、必要に応じてjQueryでの方法を知っておくと便利です。

^{目次に戻る}

外部リンクを新しいタブ／ウィンドウで開く

外部リンクを新しいブラウザータブまたはウィンドウで開き、同一オリジンのリンクは同じタブまたはウィンドウで開くようにします。

$('a[href^="http"]').attr("target", "_blank");
$('a[href^="//"]').attr("target", "_blank");
$('a[href^="' + window.location.origin + '"]').attr("target", "_self");

^{目次に戻る}

テキストで要素を見つける

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!");
  }
});

^{目次に戻る}

AJAX呼出しのエラー処理

AJAX呼出しが404または500エラーを返すと、エラーハンドラーが実行されます。ハンドラーが未定義の場合、他のjQueryコードが意図どおり動かないことがあります。グローバルAJAXエラーハンドラーを定義するには次を使います。

$(document).on("ajaxError", function (e, xhr, settings, error) {
  console.log(error);
});

^{目次に戻る}

プラグイン呼出しを連鎖する

jQueryではプラグインメソッド呼出しを「連鎖」できるため、DOMの繰返し検索と複数のjQueryオブジェクト作成を抑えられます。次のスニペットがプラグインメソッド呼出しだとします。

$("#elem").show();
$("#elem").html("bla");
$("#elem").otherStuff();

連鎖を使うと大幅に改善できます。

$("#elem").show().html("bla").otherStuff();

代替として、要素を（$を先頭に付けた）変数へキャッシュできます。

var $elem = $("#elem");
$elem.hide();
$elem.html("bla");
$elem.otherStuff();

jQueryの連鎖とキャッシュは、より短く高速なコードにつながるベストプラクティスです。

^{目次に戻る}

リスト項目をアルファベット順に並べ替える

リストの項目が多くなりすぎることがあります。CMSがコンテンツを生成し、それらをアルファベット順にしたい場合を考えます。

var ul = $("#list"),
  lis = $("li", ul).get();

lis.sort(function (a, b) {
  return $(a).text().toUpperCase() < $(b).text().toUpperCase() ? -1 : 1;
});

ul.append(lis);

これで完了です。

^{目次に戻る}

右クリックを無効化する

右クリックを無効にしたい場合、ページ全体に対して設定できます。

$(document).ready(function () {
  $(document).bind("contextmenu", function (e) {
    return false;
  });
});

特定の要素に対して同じことを行うこともできます。

$(document).ready(function () {
  $("#submit").bind("contextmenu", function (e) {
    return false;
  });
});

^{目次に戻る}

サポート

Chrome、Firefox、Safari、Opera、Edge、IE11の現行バージョン。

^{目次に戻る}

翻訳

^{目次に戻る}