jQuery に関する実践的なヒント-jsチュートリアル-php.cn

jQuery に関する実践的なヒント

零到壹度

リリース： 2018-03-28 10:31:45

オリジナル

1182 人が閲覧しました

この記事では主に jQuery に関する実践的なテクニックを紹介しますので、参考になると思います。編集者をフォローして見てみましょう。次の 10 個の jQuery の例は、誰もが Web デザインプロジェクトの効率を向上させるのに役立ちます。

jQuery に関する実践的なヒント

IEブラウザを検出

CSSを設計するとき、開発者やデザイナーにとってIEブラウザは間違いなく問題です。 IE6 の暗黒時代は過ぎ、IE ブラウザファミリの人気は低下していますが、依然としてそれを検出する必要があります。もちろん、次のスニペットを使用して他のブラウザを検出することもできます。

$(document).ready(function() { 
 
      if (navigator.userAgent.match(/msie/i) ){ 
 
        alert('I am an old fashioned Internet Explorer'); 
 
      } 
 
});

ログイン後にコピー

ページの上部までスムーズにスクロール

次は、jQuery の最も一般的な実装効果です。リンクをクリックすると、ページの上部までスムーズにスクロールします。新しいものは何もありませんが、ほぼすべての開発者が使用できます。

$("a[href='#top']").click(function() { 
 
  $("html, body").animate({ scrollTop: 0 }, "slow"); 
 
  return false; 
 
});

ログイン後にコピー

常に先頭に置く

次のコードスニペットでは、要素を常にページの先頭に表示できます。ご想像のとおり、ナビゲーションメニュー、ツールバー、その他の重要な情報を処理するのに最適です。

$(function(){ 
 
var $win = $(window) 
 
var $nav = $('.mytoolbar'); 
 
var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top; 
 
var isFixed=0; 
 
processScroll() 
 
$win.on('scroll', processScroll) 
 
function processScroll() { 
 
var i, scrollTop = $win.scrollTop() 
 
if (scrollTop >= navTop && !isFixed) { 
 
isFixed = 1 
 
$nav.addClass('subnav-fixed') 
 
} else if (scrollTop <p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);"><strong>HTMLタグを置き換える</strong></p><p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);">jQueryはHTMLタグを簡単に置き換えることができ、これによりさらに新しい可能性がもたらされます。 </p><pre style="overflow:auto;" class="brush:php;toolbar:false;">$('li').replaceWith(function(){ 
 
  return $("<p></p>").append($(this).contents()); 
 
});

ログイン後にコピー

画面の幅を検出する

モバイルデバイスの人気が従来のコンピューターをほぼ上回っている現在、小さな画面のサイズを検出することは非常に重要です。幸いなことに、この機能は jQuery を使用して簡単に実現できます。

var responsive_viewport = $(window).width(); 
 
/* if is below 481px */ 
 
if (responsive_viewport <p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);"><strong>破損した画像を自動的に修復します</strong></p><p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);"> サイトが非常に大きく、数年間オンラインになっている場合は、多かれ少なかれ破損した画像が存在します。この機能は破損した画像を検出し、選択に従ってそれらを置き換えます。 </p><pre style="overflow:auto;" class="brush:php;toolbar:false;">$('img').error(function(){ 
 
$(this).attr('src', 'img/broken.png'); 
 
});

ログイン後にコピー

コピー、ペースト、カット操作を検出

jQueryを使用すると、選択した要素のコピー、ペースト、カット操作を簡単に検出できます。

$("#textA").bind('copy', function() { 
 
    $('span').text('copy behaviour detected!') 
 
}); 
 
$("#textA").bind('paste', function() { 
 
    $('span').text('paste behaviour detected!') 
 
}); 
 
$("#textA").bind('cut', function() { 
 
    $('span').text('cut behaviour detected!') 
 
});

ログイン後にコピー

外部リンクに target="blank" 属性を自動的に追加します

外部サイトにリンクする場合、ページが新しいタブで開かれるようにするために、target="blank" 属性を使用することをお勧めします。問題は、target="blank" 属性が W3C 認定されていないことです。 jQuery は非常に役立ちます。次のスニペットは、現在のリンクが外部を指しているかどうかを検出し、外部を指している場合は、それに target="blank" 属性を自動的に追加します。

var root = location.protocol + '//' + location.host; 
 
$('a').not(':contains(root)').click(function(){ 
 
    this.target = "_blank"; 
 
});

ログイン後にコピー

ホバー時のフェードイン/フェードアウト

は、次のクリップを使用していつでも使用できるもう 1 つの「クラシック」エフェクトです。

$(document).ready(function(){ 
 
    $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads 
 
    $(".thumbs img").hover(function(){ 
 
        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover 
 
    },function(){ 
 
        $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout 
 
    }); 
 
});

ログイン後にコピー

テキスト/パスワード入力でのスペースを無効にする

メール、ユーザー名、パスワードのいずれであっても、多くの一般的なフィールドではスペースを使用する必要はありません。次のコードは、選択した入力内のすべてのスペースを簡単に無効にします。

りー

以上がjQuery に関する実践的なヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。