jQuery_jquery で一般的に使用されるいくつかのテクニックのまとめ

はじめに

jQuery の存在により、フロントエンド開発を学ぶ人は、ほんの数行のコードでニーズを達成できるようになります。しかし、その方法を本当に知っていますか。 jQuery を使用しますか? 実行後にコードが表示されません。実際、問題は jQuery の使い方を知っているかどうかにあります。開発中によく遭遇するアプリケーション例をいくつか紹介し、jQuery の別の世界を発見してください。

トップに戻るボタン

jQuery の animate メソッドとscrollTop メソッドを使用すると、単純なトップへスクロールするアニメーションを作成するためにプラグインを使用する必要はありません。

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

scrollTop の値を使用して、スクロールする位置を変更します。基本的にはこれがやるべきことです。文書の先頭までスクロールするまで、次の 800 ミリ秒間ページをスクロールさせます。

画像のプリロード

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');<br />

画像がロードされているかどうかを判断します

対応する js コードの実行を続行できるように、画像がロードされているかどうかを確認する必要がある場合があります:

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

私が経験した使用シナリオ: 一部の要素は、画像の実際のサイズに応じてサイズを変更し、絶対的な配置で配置する必要があります。要素のサイズ設定は、画像がロードされた後に計算できます。

破損した画像を自動的に修復します

Web サイト上で壊れた画像リンクを見つけた場合、それらを 1 つずつ置き換えるのは面倒な作業です。この単純なコードにより、多くの手間を省くことができます:

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

リンク切れがない場合でも、このコードを追加しても影響はありません。

入力を無効にする

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

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

必要なのは、入力ボックスで prop メソッドを再度実行することだけですが、無効な値を false に設定します。

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

prop 関数を理解していない jQuery 開発者にとって、最も一般的に使用されるのは attr 関数です。しかし、チェックボックス、ラジオ、セレクトを開発する際には、attr 関数が使用されることがわかります。属性を有効にすることができません。これは jQuery のバグだと思います。attr と prop の使用に関するいくつかの提案があります。

checked、selected、readonly、disabled などの属性を取得または設定する場合は、明らかに prop メソッドを使用する方が良いです

2 つの DIV を同じ高さにします

どのようなコンテンツが含まれているかに関係なく、2 つの DIV を同じ高さにしたい場合があります。

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

この例では、DIV の最小の高さを設定します。つまり、その高さは、設定された高さよりも大きくすることはできますが、それより小さくすることはできません。ただし、より柔軟なアプローチは、要素のセットをループし、最も高い要素の高さを高さとして設定することです:

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

テキストに基づいて要素を取得します

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