jQueryを記述する上で気をつけるポイント

jQuery



jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。
jQueryを適切に記述する事である程度の改善は出来るので、しっかりと覚えましょう。


セレクターの指定はID

やむを得ずクラス名で指定しなければいけない場合以外は必ず「ID名」を指定しましょう。


同じIDでの指定でも
OK

$("#target").css({'color':'red'});

 

NG

$("div#target").css({'color':'red'});

同じセレクタは変数化する

OK

var target = $('.target p');
target.css({'background-color':'red'});
target.show();


NG

$('.target p').css({'background-color':'red'});
$('.target p').show();

連続した処理はメソッドチェーンを使う

$('#target p').css({'background-color':'red'}).show();

jQuery本体は必ず最新の物を使う

jQueryはホスティングされているもの(CDN)を使う

ファイルデータの大きいjQuery本体をCDNにする事で実際には色々なメリットがあります。

メリット

  • 高速化
  • 他サイトでのキャッシュが期待できる（※）
  • 自サーバーにJQueryを置く必要がない


などですが、
一方、万が一CDNがダウンしてしまった場合などには使えなくなってしまいます。このようなトラブルが起こったときに代替策として、フォールバックという方法があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- CDNが使えない場合は自サーバーに置いたjQueryファイルを読み込む -->
<script>
window.jQuery || document.write('<script src="js/jquery-3.2.1.min.js"><\/script>');
</script>

coco-factory.jp