jQueryの必須実践スキル（後編）_jquery

この記事の例は、古典的で実用的な jQuery コード開発テクニックをまとめたものです。皆さんの参考に共有してください。詳細は以下の通りです。

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

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

13. 画像が読み込まれているか確認します
場合によっては、後続の操作を実行できるように、画像がロードされていることを確認する必要があります:

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

img を他の ID またはクラスに置き換えて、指定したイメージが読み込まれているかどうかを確認できます。
14. 破損した画像を自動的に修正します
Web サイト上で壊れた画像リンクを見つけた場合は、簡単に置き換えることができない画像に置き換えることができます。この簡単なコードを追加すると、多くの手間を省くことができます:

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

Web サイトに壊れた画像リンクがない場合でも、このコードを追加しても問題はありません。
15. マウスオーバーによるクラス属性の切り替え
ユーザーがクリック可能な要素の上にマウスを置いたときの効果を変更したい場合、次のコードは、ユーザーが要素の上にマウスを置いたときに、ユーザーがマウスを離れたときにクラス属性を追加します。属性は自動的にキャンセルされます:

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

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

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

注: CSS を直接使用してこの効果を実現する方が良い解決策である可能性がありますが、その方法を知っておく必要があります。
16. 入力フィールドを無効にする
場合によっては、ユーザーが何らかのアクション (「規約を読む」チェックボックスをオンにするなど) を実行するまで、フォームの送信ボタンまたは入力フィールドを無効にする必要がある場合があります。有効にするまでは、無効な属性を追加できます:

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

18. フェード/スライドを切り替えます
フェードとスライドは、jQuery でよく使用されるアニメーション効果で、要素の表示を改善できます。ただし、要素が表示されるときに最初の効果を使用し、要素が消えるときに 2 番目の効果を使用するようにしたい場合は、次のようにすることができます:
// フェード

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

19. シンプルなアコーディオンエフェクト
アコーディオン効果をすばやく簡単に実現する方法は次のとおりです:
// すべてのパネルを閉じます

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

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

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

このコードは一連の要素をループし、要素の高さを要素内の最大の高さに設定します。
21. 要素が空かどうかを確認します
これにより、要素が空かどうかを確認できます。

$(document).ready(function() {
 if ($('#id').html()) {
 // do something
 }
});

22. 要素を置換します
div または他のものを置き換えますか?

$(document).ready(function() {
 $('#id').replaceWith('
<DIV>I have been replaced</DIV>

');
});

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。