誰もが知っている 15 の jquery ヒントを共有する

誰もが知っている 15 の jquery ヒントを共有する_jquery

WBOY

リリース： 2016-05-16 15:28:13

オリジナル

1563 人が閲覧しました

jQuery アプリケーションの改善に役立つ 15 のよく知られた jQuery のヒントをみんなで共有してください

トップに戻るボタン
画像のプリロード
画像がロードされているかどうかを確認します
破損した画像を自動的に修復します
ホバースイッチクラス
入力を無効にする
リンクの読み込みを停止
フェード/スライドを切り替えます
シンプルなアコーディオン
2 つの DIV を同じ高さにします
ブラウザのタブ/新しいウィンドウで外部リンクを開きます
テキストに基づいて要素を取得します
目に見える変化のトリガー
Ajax 呼び出しエラー処理
チェーン操作

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 ミリ秒間ページをスクロールさせます。

注: スクロールトップの悪質な動作をいくつか見てみましょう。

2. 画像のプリロード

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

ログイン後にコピー

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

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

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

ログイン後にコピー

特定の画像がロードされ、ID またはクラスを含む誰もが知っている 15 の jquery ヒントを共有する_jquery タグで置き換えられているかどうかを確認することもできます。

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

サイト上で壊れた画像リンクを見つけた場合、それらを 1 つずつ置き換えるのは面倒な場合があります。この単純なコードにより、多くのトラブルを回避できます:

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

ログイン後にコピー

toggleClass メソッドをより簡単に使用したい場合は、必要な CSS を追加するだけです:

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

ログイン後にコピー

注: CSS はこの場合の簡単な解決策ですが、それでも知っておく価値はあります。

6. 入力を無効にする

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

コードをコピーコードは次のとおりです:

$('input[type="submit"]' ).prop ('無効'、true);

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

コードをコピーコードは次のとおりです:

$('input[type="submit"]' ).prop ('無効'、false);

7. リンクの読み込みを停止します

特定の Web ページにリンクしたくない場合や、ページをリロードしたくない場合は、他のスクリプトをトリガーするなど、別のことを実行する必要がある場合があります。契約違反行為を防ぐためのヒントは次のとおりです:

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

ログイン後にコピー

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

スライドとフェードイン/フェードアウトは、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;
});

ログイン後にコピー

通过添加这个脚本，你需要做的则是必要的HTML操作在你的页面上。

10、使两个DIV同等高度

有时你会想要两个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());
});

ログイン後にコピー

11、在浏览器标签/新窗口打开外部链接

在新的浏览器标签或窗口中打开外部链接，并确保在同一个标签或窗口中打开的是同一个源的链接：

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

ログイン後にコピー

备注：window.location.origin 在IE10不工作。

12、根据文本获取元素

通过jQuery中的contains()选择器，你能找到一个元素内的文本内容。如果文本不存在，则这个元素将被隐藏：

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

ログイン後にコピー

13、可见变化的触发

当用户不再聚焦或者重新聚焦一个标签时触发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缓存方法是最好的做法，导致更短、更快的代码。

以上就是本文的全部内容，希望帮助大家提高jQuery应用能力。