毎日10個以上の便利なjQueryスニペット

長年にわたり、jQueryライブラリーはすべてのWeb開発者の仕事の不可欠な部分になっています。 結局、使いやすく、高速で、非常に幅広い機能を備えています。 この記事では、自由に使用できる10個以上のスニペットのリストをまとめました。 独自のプロジェクトのニーズに簡単に適応できます。

ページの上部へのスムーズなスクロール

このリストを非常に人気のある便利なスニペットから始めましょう。これらの4行のコードにより、訪問者はページの下部にあるリンク（ID #top）をクリックするだけでスムーズに上部にスクロールできます。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出所

htmlテーブルの一番下にtheadを複製します

テーブルを読みやすくするには、テーブルヘッダーをテーブルの下部にコピーするとよいでしょう。 実際、これは次のスニペットが行うことです。

 var $tfoot = $('<tfoot></tfoot>'); $($('thead').clone(true, true).children().get().reverse()).each(function() { $tfoot.append($(this)); }); $tfoot.insertAfter('table thead');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出所

外部コンテンツをダウンロードする

特定の外部コンテンツをdivに追加する必要がありますか？ そのため、以下の例に示すように、jQueryを使用してこれを行うのは非常に簡単です。

 $("#content").load("somefile.html", function(response, status, xhr) { // error handling if(status == "error") { $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出所

同じ高さの列

列を使用してサイトのコンテンツを表示する場合、列の高さが同じであれば、見栄えが良くなります。 以下のコードは、.colクラスを持つすべてのdiv要素を取得し、それらの高さを最高の要素に設定します。 とても助かりました！

 var maxheight = 0; $("div.col").each(function() { if($(this).height() > maxheight) { maxheight = $(this).height(); } }); $("div.col").height(maxheight);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出所

テーブルストライプ（ゼブラ）

データが表形式で表示される場合、各行の異なる色によって読みやすさが一意に向上します。 以下は、CSSクラスをテーブルの2番目（偶数）行ごとに自動的に追加するためのスニペットです。

 $(document).ready(function(){ $("table tr:even").addClass('stripe'); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出所

部分ページ更新

ページの一部のみを更新する必要がある場合は、これらの3行のコードが間違いなく役立ちます。 例では、IDが#refreshのdivは10秒ごとに自動的に更新されます。

 setInterval(function() { $("#refresh").load(location.href+" #refresh>*",""); }, 10000); // milliseconds to wait
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出所

画像のプリロード

jQueryを使用すると、バックグラウンドで画像を簡単にプリロードできるため、訪問者は必要な画像を永遠に待つ必要がありません。 コードを使用する準備ができました。8行目の画像のリストを編集するだけです。

 $.preloadImages = function() { for(var i = 0; i<arguments.length; i++) { $("<img />").attr("src", arguments[i]); } } $(document).ready(function() { $.preloadImages("hoverimage1.jpg","hoverimage2.jpg"); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出所

新しいウィンドウまたは新しいタブで外部リンクを開きます

target = "_ blank"属性を使用すると、新しいウィンドウでリンクを開くことができます。 ただし、これは外部リンクを開く場合に適用され、ドメイン内リンクは同じウィンドウで開く必要があります。

このコードは外部リンクを見つけ、見つかった要素にtarget = "_ blank"属性を追加します。

 $('a').each(function() { var a = new RegExp('/' + window.location.host + '/'); if(!a.test(this.href)) { $(this).click(function(event) { event.preventDefault(); event.stopPropagation(); window.open(this.href, '_blank'); }); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出所

ビューポートのDivの幅/高さ

この便利なコードを使用すると、ビューポートの幅/高さにまたがるdivを作成できます。 コードはウィンドウのサイズ変更もサポートしています。 モーダルダイアログとポップアップウィンドウの優れたソリューション。

 // global vars var winWidth = $(window).width(); var winHeight = $(window).height(); // set initial div height / width $('div').css({ 'width': winWidth, 'height': winHeight, }); // make sure div stays full width/height on resize $(window).resize(function(){ $('div').css({ 'width': winWidth, 'height': winHeight, }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出所

パスワードの複雑さのチェック

ユーザーに独立したパスワードの選択肢を提供する場合、パスワードがどれほど複雑であるかを示すとよいでしょう。 スニペットコードはまさにそれを行います。



まず、入力フィールドを作成します。

 <input type="password" name="pass" id="pass" /> <span id="passstrength"></span>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、小さなjQueryコード。 入力されたパスワードは正規表現を使用してチェックされ、これに基づいて、ユーザーはパスワードがどれほど複雑であるかについてのメッセージが表示されます。

 $('#pass').keyup(function(e) { var strongRegex = new RegExp("^(?=.{8,})(?=.*[AZ])(?=.*[az])(?=.*[0-9])(?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[AZ])(?=.*[az]))|((?=.*[AZ])(?=.*[0-9]))|((?=.*[az])(?=.*[0-9]))).*$", "g"); var enoughRegex = new RegExp("(?=.{6,}).*", "g"); if (false == enoughRegex.test($(this).val())) { $('#passstrength').html('More Characters'); } else if (strongRegex.test($(this).val())) { $('#passstrength').className = 'ok'; $('#passstrength').html('Strong!'); } else if (mediumRegex.test($(this).val())) { $('#passstrength').className = 'alert'; $('#passstrength').html('Medium!'); } else { $('#passstrength').className = 'error'; $('#passstrength').html('Weak!'); } return true; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出所

画像のサイズ変更

もちろん、サーバー側で画像のサイズを変更できます（たとえば、PHPとGDライブラリを使用）が、jQueryを使用してクライアント側でこれを行うと便利な場合があります。 これがスニペットです。

 $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(this).height(); if(width > maxWidth){ ratio = maxWidth / width; $(this).css("width", maxWidth); $(this).css("height", height * ratio); height = height * ratio; } var width = $(this).width(); var height = $(this).height(); if(height > maxHeight){ ratio = maxHeight / height; $(this).css("height", maxHeight); $(this).css("width", width * ratio); width = width * ratio; } }); //$("#contentpage img").show(); // IMAGE RESIZE });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出所

コンテンツを自動的にスクロールする

Twitterなどの一部のサイトは、スクロールによってコンテンツをアップロードします。 つまり、ページが下にスクロールされると、すべてのコンテンツがページに動的にロードされます。

以下は、サイトでこの効果を実現する方法の例です。

 var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if(loading == false){ loading = true; $('#loadingbar').css("display","block"); $.get("load.php?start="+$('#loaded_max').val(), function(loaded){ $('body').append(loaded); $('#loaded_max').val(parseInt($('#loaded_max').val())+50); $('#loadingbar').css("display","none"); loading = false; }); } } }); $(document).ready(function() { $('#loaded_max').val(50); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出所

画像が読み込まれたかどうかを確認します

これは、画像を処理するときによく使用するスニペットです。これは、画像が読み込まれたかどうかを確認するための最良の方法だからです。

 var imgsrc = 'img/image1.png'; $('<img/>').load(function () { alert('image loaded'); }).error(function () { alert('error loading image'); }).attr('src', imgsrc);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出所

リストをアルファベット順に並べ替えます

場合によっては、長いリストをアルファベット順に並べ替えることが非常に便利です。 このスニペットはすべてのリストを受け入れ、ソートします。

 $(function() { $.fn.sortList = function() { var mylist = $(this); var listitems = $('li', mylist).get(); listitems.sort(function(a, b) { var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA < compB) ? -1 : 1; }); $.each(listitems, function(i, itm) { mylist.append(itm); }); } $("ul#demoOne").sortList(); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出所