マスターしなければならない jquery の 10 のヒント

迅速な開発に役立つ 10 の jQuery ヒント/コード スニペットを集めました。

1.トップに戻るボタン

animateとscrollTopを使うと、他のプラグインを使わずにトップに戻るアニメーションを実装できます。

// Back to top
$('a.top').click(function () {
  $(document.body).animate({scrollTop: 0}, 800);
  return false;
});
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

scrollTopの値を変更することでリターンとトップの間の距離を調整することができ、animateの第2パラメータはリターン動作の実行に必要な時間(単位:ミリ秒)です。

2. 画像をプリロードする

ページに非表示の画像が多数使用されている場合 (ホバー表示など)、画像をプリロードする必要がある場合があります:

$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $(&#39;<img>&#39;).attr(&#39;src&#39;, arguments[i]);
  }
};
$.preloadImages(&#39;img/hover1.png&#39;, &#39;img/hover2.png&#39;);

3. 画像がロードされているかどうかを確認する

次の操作を実行するには、イメージがロードされていることを確認してください:

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

img を他の ID またはクラスに置き換えて、指定したイメージがロードされているかどうかを確認できます。

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

Web サイト上で壊れた画像リンクを見つけた場合は、簡単に置き換えることができない画像に置き換えることができます。この簡単なコードを追加すると、多くの問題を回避できます:

$('img').on('error', function () {
  $(this).prop('src', 'img/broken.png');
});

ウェブサイトに壊れた画像リンクがない場合でも、このコードを追加しても問題はありません。

5. マウスホバー時にクラス属性を切り替える

ユーザーがクリック可能な要素の上にマウスを置いたときの効果を変更したい場合は、ユーザーがマウスを離したときに、要素のクラス属性の上にマウスを置いたときに次のコードを追加できます。 、クラス属性は自動的にキャンセルされます:

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

必要な CSS コードを追加するだけです。よりクリーンなコードが必要な場合は、toggleClass メソッドを使用できます:

$('.btn').hover(function () { 
  $(this).toggleClass('hover'); 
});

注: CSS を直接使用してこの効果を実現する方が良い解決策である可能性がありますが、それでもメソッドを知る必要があります。

6. 入力フィールドを無効にする

場合によっては、ユーザーが何らかのアクション (「規約を読む」チェックボックスをオンにするなど) を実行するまで、フォームの送信ボタンまたは入力フィールドを無効にする必要がある場合があります。無効にした属性は、有効にするまで追加できます:

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

必要なのは、removeAttr メソッドを実行し、削除する属性をパラメータとして渡すことだけです:

$('input[type="submit"]').removeAttr('disabled');

7. リンクが読み込まれないようにします

特定のページにリンクしたりリロードしたくない場合は、他のことを実行したり、他のスクリプトをトリガーしたりすることができます。

$('a.no-link').click(function (e) {
  e.preventDefault();
});

8. フェード/スライドを切り替える

8.と slide は jQuery にあるものです。アニメーション効果は要素の表示を改善するためによく使用されます。ただし、要素が表示されるときに最初の効果を使用し、要素が消えるときに 2 番目の効果を使用する場合は、次のようにすることができます:

// Fade
$('.btn').click(function () {
  $('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
  $('.element').slideToggle('slow');
});

9. シンプルなアコーディオン効果

これは素早く簡単な方法です。アコーディオン効果を実現するには:

// Close all panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function () {
  var next = $(this).next();
  next.slideToggle('fast');
  $('.content').not(next).slideUp('fast');
  return false;
});

10. 2 つの DIV を同じ高さにする

場合によっては、内部のコンテンツに関係なく、2 つの DIV を同じ高さにする必要があります。次のコード スニペットを使用できます:

var $columns = $('.column');
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);

このコードは、要素のグループをループし、要素の高さを要素内の最大の高さに設定します。

英語原文: jQuery TipsEveryone Should Know