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

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 またはクラスを含む タグで置き換えられているかどうかを確認することもできます。

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应用能力。