ホームページ > 記事 > ウェブフロントエンド > フロントエンド プログラマーが知っておくべき jQuery のヒント
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 のいくつかの誤った動作に注意してください。
画像をプリロードする
Web ページで、最初は表示されない (ホバー時など) 多くの画像を使用する場合は、これらの画像をプリロードできます:
$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('<img alt="フロントエンド プログラマーが知っておくべき jQuery のヒント" >').attr('src', arguments[i]); } }; $.preloadImages('img/hover-on.png', 'img/hover-off.png');
画像が読み込まれているかどうかを確認します
スクリプトを続行すると、すべての画像がロードされているかどうかを確認する必要がある場合があります:
$('img').load(function () { console.log('image load successful'); });
タグを ID またはクラスに置き換えることによって、特定の画像がロードされているかどうかを確認することもできます。
壊れた画像を自動的に修正します
すでに壊れた画像リンクを1つずつ置き換えるのは非常に面倒です。ただし、次の簡単なコードが役立ちます:
$('img').on('error', function () { if(!$(this).hasClass('broken-image')) { $(this).prop('src', 'img/broken.png').addClass('broken-image'); } });
リンク切れがない場合でも、このコードを追加しても費用はかかりません。
Hover Toggle クラス
ユーザーがクリック可能な要素の上にマウスを置いたときに、その要素の色を変更したいとします。その後、ユーザーが要素にマウスを置いたときにクラスを要素に追加し、それ以外の場合は要素を削除できます。
$('.btn').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); });
必要な CSS を追加するだけです。より簡単な方法は、toggleClass メソッドを使用することです:
$('.btn').hover(function () { $(this).toggleClass('hover'); });
注: この場合、おそらく CSS ソリューションの方が高速ですが、このメソッドを理解する必要があります。
入力フィールドを無効にする
ユーザーが特定のアクションを実行するまで (たとえば、「規約を読みました」チェックボックスをオンにするなど)、フォームの送信ボタンまたはテキスト入力の 1 つを無効にしたい場合があります。必要に応じて、無効な属性を入力に追加して有効にします:
$('input[type="submit"]').prop('disabled', true);
次に、input prop メソッドを実行するだけですが、disabled の値を false に設定します:
$('input[type="submit"]').prop('disabled', false);
リンクの読み込みを停止します
特定の Web ページにリンクしたり、ページをリロードしたくない場合は、リンクに他のスクリプトをトリガーするなど、他のことを実行させたい場合があります。これには、デフォルトのアクションをブロックするという大騒ぎが必要です:
$('a.no-link').click(function (e) { e.preventDefault(); });
フェードイン/スライド切り替え
スライドとフェードはどちらも、jQuery を使用してアニメーション化するときによく使用するものです。ユーザーが要素をクリックした後にその要素を表示したいだけの場合は、fadeIn メソッドと slideDown メソッドを使用するのが最適です。ただし、要素を最初のクリックで表示し、2 回目のクリックで非表示にしたい場合は、次のコードを試すことができます:
// Fade $('.btn').click(function () { $('.element').fadeToggle('slow'); }); // Toggle $('.btn').click(function () { $('.element').slideToggle('slow'); });
简单的手风琴
这是一个可快速生成手风琴的简单方法:
// 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元素,这样它就可以运行工作了。
让两个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()); });
在新标签页/窗口打开外部链接
在一个新的浏览器tab或窗口中打开外部链接,并确保同一个来源的链接能在同一个tab或者窗口中打开:
$('a[href^="http"]').attr('target', '_blank'); $('a[href^="//"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
注意:window.location.origin 在IE10中无效。修复的时候要小心这个问题。
在改变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!'); } });
AJAX调用错误处理
当Ajax调用返回404或500错误时,就执行错误处理程序。如果没有定义处理程序,其他的jQuery代码或会就此罢工。定义一个全局的Ajax错误处理程序:
$(document).ajaxError(function (e, xhr, settings, error) { console.log(error); });
链式插件调用
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 Tips Everyone Should Know