先端開発に必要な15個のjQueryテクニック

これらの簡単なテクニックはあなたのjQueryを再生するのに役立ちます。
1、トップボタンに戻る
jQueryのanimateとscrollTopを使うことにより、プラグインなしでトップにスクロールする簡単なアニメーションを作成できます。

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

scrollTopの値を変えるとスクロールバーの位置を変更できます。本当に必要なのは、ドキュメント本体のアニメーションを800ミリ秒以内に設定して、ドキュメントの先頭にスクロールします。
注：scrollTopの誤動作に注意してください。
2、画像をプリロードする
あなたのウェブページが見えない画像（例えば、宙づりのような）を大量に使用する場合、これらの画像をプリロードすることができます。

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

3、画像のロードを確認する
シナリオを継続するためには、画像が全部読み込まれているかどうかを確認する必要があります。

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

特定の画像がロードされているかどうかをIDまたはクラスで置き換えることもできます。
4、破壊された画像を自動修復する
壊れた画像のリンクを一つ一つ置き換えるのはとてもつらいです。しかし、以下の簡単なコードはあなたを助けることができます。

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

壊れたリンクがなくても、このコードを入れても、あなたに損失はありません。
5、ストップ切替類
ユーザーがクリックできる要素にマウスをセットすると、色が変わります。ユーザーが停止している間に要素にクラスを追加してもいいです。逆にクラスを削除します。

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

必要なCSSを追加するだけでいいです。もっと簡単な方法はtogleClass方法を使うことです。

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

注：この場合、CSSという解決策はより速いかもしれませんが、この方法を知る必要があります。
6、入力フィールドを無効にする
場合によっては、表の提出ボタンまたはそのテキスト入力をユーザーが特定の操作を実行するまで無効にしたい場合があります。たとえば、「私はすでに関連条項を読んでいます。」チェックボックスにチェックしてください。disabled属性をあなたの入力に追加すると、あなたが欲しい時にのみ有効になります。$('input[type="submit"]').prop('disabled', true);そして入力したプロモーション方法を実行すればいいですが、disabledの値はfalseに設定します。$('input[type="submit"]').prop('disabled', false);7、リンクのロードを停止する
場合によっては、特定のページにリンクする必要もないし、ページを再読み込みしたくもないです。リンクして他のことをしたいかもしれません。例えば、他のスクリプトをトリガします。これはデフォルトの動作を阻止する上で文章を作ります。

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

8、フェードアウト/スライド切り替え
スライドとフェードは私たちがjQueryでアニメーションを作る時にたくさん使うものです。ユーザーがクリックした後に一つの要素を展示したいだけなら、fadeInとsdedownの方法で完璧です。しかし、初めてクリックした時に要素が現れて、二回クリックした時に消えたいなら、次のコードを試してみてもいいです。

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

このスクリプトを追加することで、本当に必要なのはページに必要なHTML要素を追加するだけで、作業が実行できます。
10、二つのdivの高さを同じにする
時には、二つのdivにどんな内容を含めても同じ高さを持つ必要があります。$('.div').css('min-height', $('.main-div').height());min-heightを設定すると、これはメインdivより大きいという意味ですが、決してメイン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());
});

11、新しいタブページ/ウィンドウで外部リンクを開く
新しいブラウザtabまたはウィンドウで外部リンクを開き、同じソースのリンクが同じtabまたはウィンドウで開くことができるようにする。

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

注意：window.location.origginはIE 10で無効です。修復する時はこの問題に注意してください。
12、テキストで要素を検索する
jQueryのcontains()を選択すると、要素の内容のテキストが見つかります。テキストが存在しない場合は、この要素を隠します。

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

13、Visibilityを変更する際にトリガする
ユーザーがもうあるtabに関心を持たなくなった時、または元のtabに焦点を合わせる時、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!');
}
});

14、AJAX呼び出しエラー処理
Ajax呼び出しが404または500に戻るとエラー処理プログラムが実行されます。処理手順が定義されていない場合、他のjQueryコードはストライキになります。グローバルのAjaxエラー処理プログラムを定義します。

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

15、チェーン式プラグインの呼び出し
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の中でコードをより短く、より速くすることができます。
以上が本文の全部です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてくれると同時に、私達を応援してください。