このサイトはJavaScriptがオンになっていないと正常に表示されません

少しのコードで実装可能な20のjQuery小技集

thumb_jquery

素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します!「jQueryってなんだ?」という人もコピペで実装できますよ!サンプルも用意したのでぜひご覧ください!


jQueryの基本的な使い方

まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます。

<script type="text/javascript" src="js/jquery.js"></script>

そしてJavaScriptのコードを書いていきます。<head> 内に書く場合はこんな感じです。

<script type="text/javascript">

     $(function(){
          // ここにコードを書いていく。
     });

</script>

詳しい記述の仕方は「jquery [DokuWiki]」が参考になります。それでは実際にどんな事ができるのか見てみましょう!サンプルも作ったのでコードと合わせてみてみてください!

サンプル

※IE6~8, Firefox, Safari, Chromeで動作確認済

jQuery小技集 目次

  1. マウスオーバーで画像を変更
  2. 外部リンクを別タブで開く
  3. ページトップへスクロールする
  4. Div全体をクリックできるようにする
  5. テーブルの偶数・奇数の行の色を変える
  6. リンク切れ画像を差し替える
  7. CSSハックを使わずブラウザーごとにCSSを変更
  8. 画像のプリローダー
  9. IE6以下ユーザーにメッセージを表示
  10. Divを消す
  11. フォーカスしているフォームのラベルにクラスをつける
  12. フォームにテキストを入れておき、フォーカスで消す(文字色も変更)
  13. 入力文字数をカウント
  14. ラジオボタンとチェックボックスを装飾する
  15. スライドパネル
  16. アコーディオン
  17. ツールチップ
  18. プリントダイアログを表示
  19. Twitter最新のTweetを表示
  20. 効果音を入れる

1. マウスオーバーで画像を変更

jquery マウスオーバーで画像を変更

多くのサイトで使われている画像のマウスオーバー時の効果。CSSスプライトを使う事もできますが、画像を変える場合はこちらのコードがとっても便利!画像名の最後に、通常時の画像には「_off」を、マウスオーバー時の画像には「_on」を付けて保存するだけ!

jQuery

$(function(){
     $('a img').hover(function(){
        $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
          }, function(){
             if (!$(this).hasClass('currentPage')) {
             $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
        }
   });
});

HTML

<a href="#">
     <img src="images/btn_sample_off.jpg" width="196" height="47" />
</a>

» サンプルを見る

jQuery小技集 目次へ。

2. 外部リンクを別タブで開く

jquery 外部リンクを別タブで開く

http:// で始まるリンク先に、自動的に target="_blank" を追加します。

jQuery

$(function(){
     $("a[href^='http://']").attr("target","_blank");
});

HTML

<a href="http://google.com">Google検索</a>

» サンプルを見る

jQuery小技集 目次へ。

3. ページトップへスクロールする

jquery ページトップへスクロールする

今開いているページ上部へスルスルッとジャンプします。よく見かける小技ですね!このサンプルでは #wrapper のDivにジャンプするように設定しているので、コンテナーのIDもしくはクラスが違う場合はリンク先を変更してください。

jQuery

$(function(){
     $("#toTop a").click(function(){
     $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
     return false;
     })
});

HTML

<p id="toTop"><a href="#wrapper">ページトップへ</a></p>

» サンプルを見る

jQuery小技集 目次へ。

4. Div全体をクリックできるようにする

jquery Div全体をクリックできるようにする

Div全体をクリックし、Div内にあるリンク先へとびます。特にスマートフォン用Webサイトにはおすすめです!

jQuery

$(function(){
     $(".sampleBox").click(function(){
         window.location=$(this).find("a").attr("href");
         return false;
    });
});

HTML

 <div class="sampleBox">
      このDiv全体をクリックするとリンク先へジャンプします。
      スマートフォン用サイトにも最適!!
      このDiv全体をクリックするとリンク先へジャンプします。
      スマートフォン用サイトにも最適!!
      このDiv全体をクリックするとリンク先へジャンプします。
      スマートフォン用サイトにも最適!!
      <a href="http://webcreatorbox.com">Webクリエイターボックスへ</a>
</div>

CSS

.sampleBox{background: #ffc;padding:10px;cursor: pointer}

» サンプルを見る

jQuery小技集 目次へ。

5. テーブルの偶数・奇数の行の色を変える

jquery テーブルの偶数・奇数の行の色を変える

長いテーブルの場合、どこの行を見ているかわかりにくくなるので、うっすらと背景に色をつけて読みやすくしましょう。

jQuery

$(function(){
     $("tr:odd").addClass("odd");
});

HTML

<table>
     <tr>
          <td>こんな感じで</td>
          <td>奇数の行に</td>
     </tr>
     <tr>
          <td>色が</td>
          <td>つきます。</td>
     </tr>
     <tr>
          <td>こんな感じで</td>
          <td>奇数の行に</td>
     </tr>
     <tr>
          <td>色が</td>
          <td>つきます。</td>
     </tr>
</table>

CSS

table{background: #666}
tr{background: #fff}
td{padding: 5px}
.odd{background: #ddd }

» サンプルを見る

jQuery小技集 目次へ。

6. リンク切れ画像を差し替える

jquery リンク切れ画像を差し替える

URLを間違えていたり画像が消えていたりしたときに別の画像を代わりに表示させます。

jQuery

$(function () {
     $('img').error(function(){
          $(this).attr({src:'images/missing.jpg',alt:'画像が見つかりません'});
     });
});

HTML

<img src="sample.jpg" width="300" height="200" alt="サンプル画像" />

» サンプルを見る

jQuery小技集 目次へ。

7. CSSハックを使わずブラウザーごとにCSSを変更

jquery CSSハックを使わずブラウザーごとにCSSを変更

ブラウザーを判別してCSSを変更します。変更するCSSが複数あるなら、ブラウザー毎にクラスを変えると楽ですね。

jQuery

$(function () {
     // IE(IE7以上)
     if ($.browser.msie && $.browser.version > 6 ) $(".browserBox").css("background", "#ff99cc" );

     // IE(IE6以下)
     if ($.browser.msie && $.browser.version <= 6 ) $(".browserBox").css("background", "#ffff99" );   

     // Firefox
     if ($.browser.mozilla ) $(".browserBox").css("background", "#c8ffd0" );
    
     // Safari
     if( $.browser.webkit ) $(".browserBox").css("background", "#b1e1ff" );
});

HTML

<div class="browserBox">
     <p>
          背景色をブラウザー毎に変えています。IE7以上だとピンク、IE6以下だと黄色、
          Firefoxだと緑、Safari, Chromeだと青。
     </p>
</div>

» サンプルを見る

jQuery小技集 目次へ。

8. 画像のプリローダー

jquery 画像のプリローダー

ページコンテンツを全て読み込んでから画像を順番に読み込んでいきます。読込中はローディングgif画像を表示し、ひとつひとつフワッと表示させていきます。ギャラリーサイトにおすすめ。

jQuery

$(function () {
     $('.imgBox img').hide();//ページ上の画像を隠す
});

var i = 0;
var int=0;
$(window).bind("load", function() {//ページコンテンツのロードが完了後、機能させる
     var int = setInterval("doThis(i)",500);//フェードするスピード
});

function doThis() {
     var images = $('img').length;//画像の数を数える
     if (i >= images) {// ループ
          clearInterval(int);//最後の画像までいくとループ終了
    }
    $('img:hidden').eq(0).fadeIn(500);//一つずつ表示する
    i++;
} 

HTML

<div class="imgBox">
     <img height="226" width="300" src="images/beach.jpg">
     <img height="226" width="300" src="images/sunset.jpg">
</div>

CSS

.imgBox{background:url(images/loading.gif) 50% 50% no-repeat;}

» サンプルを見る

jQuery小技集 目次へ。

9. IE6以下ユーザーにメッセージを表示

jquery IE6以下ユーザーにメッセージを表示

IE6以下のブラウザーでみると、ページ上部にメッセージが表示されます。

jQuery

$(function () {
     if ( $.browser.msie && $.browser.version <= 6 ) {
             $('body').prepend('<div class="error">あなたは旧式ブラウザをご利用中です。このウェブサイトを快適に閲覧するにはブラウザをアップグレードしてください。</div>');
     }
});

CSS

.error{background:#ff6699;padding: 20px;text-align:center;}

» サンプルを見る

jQuery小技集 目次へ。

10. Divを消す

jquery Divを消す

指定したボタンをクリックすると、そのボタンのあるDiv全体が消えます。上記IE6ユーザーへのメッセージと合わせて使ってみるといいかも。

jQuery

$(function () {
     $(".deleteBox .delete").click(function(){
         $(this).parents(".deleteBox").animate({ opacity: "hide" }, "slow");
     });
});

HTML

<div class="deleteBox">
    <p>エラーメッセージ表示時に便利かもしれません。</p>
    <p class="delete">[ 閉じる ]</p>
</div>

CSS

.deleteBox{border: #ccc 1px solid; padding: 10px}
     .deleteBox .delete{cursor: pointer; color: #3cf; margin-top:10px;}

» サンプルを見る

jQuery小技集 目次へ。

11. フォーカスしているフォームのラベルにクラスをつける

jquery フォーカスしているフォームのラベルにクラスをつける

フォーム入力時に、今どの項目を選択しているのかがわかりやすくなります。

jQuery

$(function () {
     $("form :input").focus(function() {
          $("label[for='" + this.id + "']").addClass("labelfocus");
     });

     $("form :input").blur(function() {
          $("label[for='" + this.id + "']").removeClass("labelfocus");
     });
});

HTML

<form action="#">
     <label for="name">お名前</label>
     <input type="text" id="name" />&nbsp;
     <label for="spanail">メールアドレス</label>
     <input type="text" id="spanail" />
</form>

CSS

.labelfocus{color:#f39 }

» サンプルを見る

jQuery小技集 目次へ。

12. フォームにテキストを入れておき、フォーカスで消す(文字色も変更)

jquery フォームにテキストを入れておき、フォーカスで消す(文字色も変更)

フォーカスしていない時は控えめな色、フォーカスしたらそこに入力していることがわかるように色を変えます。

jQuery

$(function(){
     $(".focus").focus(function(){
          if(this.value == "キーワードを入力"){
               $(this).val("").css("color","#f39");
          }
     });
     $(".focus").blur(function(){
          if(this.value == ""){
               $(this).val("キーワードを入力").css("color","#969696");
          }
     });
});

HTML

<input type="text" class="focus" value="キーワードを入力" />

CSS

.focus{color: #969696}

» サンプルを見る

jQuery小技集 目次へ。

13. 入力文字数をカウント

jquery 入力文字数をカウント

テキストエリア内の入力文字数を数えていき、指定した文字数になると数字の色を変えます。

jQuery

$(function () {
     $("textarea").keyup(function(){
          var counter = $(this).val().length;
        $("#countUp").text(counter);
        if(counter == 0){
            $("#countUp").text("0");
        }
        if(counter >= 10){
            $("#countUp").css("color","red");
        } else{$("#countUp").css("color","#666");}
    });
});

HTML

<textarea cols="30" rows="10"></textarea>
<p id="countUp">0</p>

» サンプルを見る

jQuery小技集 目次へ。

14. ラジオボタンとチェックボックスを装飾する

jquery ラジオボタンとチェックボックスを装飾する

過去記事「CSS3とjQueryでフォームを美しく装飾する方法」でも紹介した技です。チェックボックス、ラジオボタンの上に画像をかぶせて装飾しています。

jQuery

$(function(){    $(".checkbox").change(function(){
        if($(this).is(":checked")){
            $(this).next("label").addClass("LabelSelected");
        }else{
            $(this).next("label").removeClass("LabelSelected");
        }
    });
    $(".radio").change(function(){
        if($(this).is(":checked")){
            $(".RadioSelected:not(:checked)").removeClass("RadioSelected");
            $(this).next("label").addClass("RadioSelected");
        }
    });
});

HTML

<!-- チェックボックス --><div>
     <input id="CheckBox1" type="checkbox" class="checkbox"/>
     <label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">Checkbox 1</label>
     <input id="CheckBox2" type="checkbox" class="checkbox"/>
     <label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">Checkbox 2</label>    
</div>

<!-- ラジオボタン -->              
<div>
     <input id="Radio1" type="radio" class="radio" name="group1" >
     <label id="Label1" for="Radio1" class="radiolabel">Radio 1</label>
     <input id="Radio2" type="radio" class="radio" name="group1"/>         
     <label id="Label2" for="Radio2" class="radiolabel">Radio 2</label>    
     <input id="Radio3" type="radio" class="radio" name="group1"/>
     <label id="Label3" for="Radio3" class="radiolabel">Radio 3</label>
</div>

CSS

.checkbox,.radio{     z-index: -1;
     position: absolute;
     }
     .CheckBoxLabelClass{
          background: #fff url("images/checkbox.png") no-repeat 2px 0;
          margin-right:20px;
          padding-left:22px;
          }
    
     .radiolabel{
          background: #fff url("images/radio.png") no-repeat 2px 0;
          margin-right:20px;
          padding-left:22px;
          }
         
.LabelSelected,.RadioSelected{
     background-position: 2px bottom;
     }

» サンプルを見る

jQuery小技集 目次へ。

15. スライドパネル

jquery スライドパネル

ボタンを押すと指定したコンテンツがスルスルッと現れます。ページが長くなった時に使うとスッキリ見えます。

jQuery

$(function(){
     $(".open").click(function(){
      $("#slideBox").slideToggle("slow");
     });
});

HTML

<p class="open">ボタン</p>
<div id="slideBox">
     もう一度ボタンをクリックすると閉じます。個人的に使う機会の多いスライドパネル。
     ぜひお試しアレ。もう一度ボタンをクリックすると閉じます。個人的に使う機会の多いスライドパネル。
     ぜひお試しアレ。
</div>

CSS

.open{
     background: #fc6;
     color: #fff;
     cursor: pointer;
     width:45px;
     padding: 10px
     }
#slideBox{
     padding: 10px;
     border: 1px #ccc solid;
     display:none;
     }

» サンプルを見る

jQuery小技集 目次へ。

16. アコーディオン

jquery アコーディオン

上記スライドパネルの同じような動きですね。メニュー・サブメニューなんかに使えそうです。

jQuery

$(function() {
   $('#accordion dd').hide();
   $('#accordion dt a').click(function(){
       $('#accordion dd').slideUp();
       $(this).parent().next().slideDown();
       return false;
   });
});

HTML

<dl id="accordion">
     <dt><a href="">カテゴリー1</a></dt>
     <dd><a href="#">サブカテゴリー1</a>|<a href="#">サブカテゴリー2</a>|<a href="#">サブカテゴリー3</a></dd>              
     <dt><a href="">カテゴリー2</a></dt>
     <dd><a href="#">サブカテゴリー1</a>|<a href="#">サブカテゴリー2</a>|<a href="#">サブカテゴリー3</a></dd>              
     <dt><a href="">カテゴリー3</a></dt>
     <dd><a href="#">サブカテゴリー1</a>|<a href="#">サブカテゴリー2</a>|<a href="#">サブカテゴリー3</a></dd>
     <dt><a href="">カテゴリー4</a></dt>
     <dd><a href="#">サブカテゴリー1</a>|<a href="#">サブカテゴリー2</a>|<a href="#">サブカテゴリー3</a></dd>              
     <dt><a href="">カテゴリー5</a></dt>
     <dd><a href="#">サブカテゴリー1</a>|<a href="#">サブカテゴリー2</a>|<a href="#">サブカテゴリー3</a></dd>
</dl>

CSS

#accordion{
     border: 1px #ccc solid;
     border-top:none;
     width:450px;
     }
#accordion dt{
     background: #ddd;
     padding: 10px;
     border-top: 1px #ccc solid;
     }
     #accordion dt a{color: #000; text-decoration:none;display:block;}
#accordion dd{padding: 10px}

» サンプルを見る

jQuery小技集 目次へ。

17. ツールチップ

jquery ツールチップ

シンプルなツールチップです。より使いやすいサイトにするためには必須機能かもしれませんね。

jQuery

$(function(){
     $(".tooltip a").hover(function() {
        $(this).next("span").animate({opacity: "show", top: "-75"}, "slow");}, function() {
               $(this).next("span").animate({opacity: "hide", top: "-85"}, "fast");
     });
});

HTML

<ul class="tooltip">
     <li>
          <a href="http://www.webcreatorbox.com">Webクリエイターボックス</a>         
          <span>Webクリエイターボックスホームへ戻ります。</span>
     </li>
     <li>
          <a href="http://facebook.com/webcreatorbox.fb">Facebookファンページ</a>
          <span>Facebookアカウントをお持ちの方はぜひ「いいね!」</span>
     </li>
     <li>
          <a href="http://twitter.com/webcreatorbox">Twitter</a>
          <span>Twitterで毎日Webに関する情報をお届けしています。</span>
     </li>
</ul>

CSS

.tooltip {margin: 100px 0 0;list-style: none}
.tooltip li {
     margin: 0 10px;
     float: left;
     position: relative;
     text-align:center;
     }
.tooltip a {
     padding: 14px 10px;
     display: block;
     text-decoration: none;
     font-weight: bold;
     width:200px;
     }
.tooltip li span {
     background: #ffc;
     border: 1px solid #fc6;
     height: 45px;
     position: absolute;
     top: -85px;
     left: 0;
     text-align: center;
     padding: 20px 12px 10px;
     z-index: 2;
     display: none;
     }

» サンプルを見る

jQuery小技集 目次へ。

18. プリントダイアログを表示

jquery プリントダイアログを表示

.print というクラスがついたリンクをクリックするとプリントダイアログがポップアップするようになります。

jQuery

$(function(){
     $('a.print').click(function(){
          window.print();
          return false;
     });
});

HTML

<p><a href="#" class="print">このページを印刷する</a></p>

» サンプルを見る

jQuery小技集 目次へ。

19. Twitter最新のTweetを表示

jquery Twitter最新のTweetを表示

Twitterの最も新しいつぶやきを表示させます。下記コードの webcreatorbox の部分を自分のTwitterアカウント名に変更してください。

jQuery

$.getJSON("http://twitter.com/statuses/user_timeline/webcreatorbox.json?callback=?", function(data) {
     $("#twitter").html(data[0].text);
});

HTML

<p id="twitter"></p>

追記:リンクを生成する

Tweet内にURLがあった場合、自動でリンクを生成するには、上記 $("#twitter").html(data[0].text); を以下に変更します。

$.getJSON("http://twitter.com/statuses/user_timeline/webcreatorbox.json?callback=?", function(data) {
     jQuery("#twitter").append($('<p>').html(data[i].text.replace(/(http://[^s]+)b/g, '<a href="$1">$1</a>')));
});

» サンプルを見る

jQuery小技集 目次へ。

20. 効果音を入れる

jquery 効果音を入れる

リンクをクリック・マウスオーバーした時に効果音を鳴らします。あまり使わないかもしれませんが、以前依頼があったのでメモ。効果音は短いものを選ばないと、効果音が鳴る前にリンク先にとんでしまいます。

jQuery

$(function(){
  // クリック
  $('a.click').click(function(){
    $('embed').remove();
    $('body').append('<embed src="click.wav" autostart="true" hidden="true" loop="false">');
  });
});

$(function(){
  // マウスオーバー
  $('a.hover').mouseover(function(){
     $('embed').remove();
     $('body').append('<embed src="hover.wav" autostart="true" hidden="true" loop="false">');
 });
}); 

HTML

<p><a href="#" class="click">クリックすると効果音がなります</a></p>
<p><a href="#" class="hover">マウスオーバーすると効果音がなります</a></p>

» サンプルを見る

jQuery小技集 目次へ。

プラグインを使わなくても意外といろんな事ができちゃいますね!上記はすべて基本的なコードなので、いろいろカスタマイズしてみてください!

参考サイト:

Advertisement

関連する記事

シェアする

  • このエントリーをはてなブックマークに追加

コメント

Web関連記事・お知らせ

もっと表示

Web制作テクニック

もっと表示

インスピレーション・デザイン

もっと表示

Twitter 人気のつぶやき

もっと表示

サイト内検索

中の人ってこんな人

このブログの中の人、Manaです。

Webデザイナー+WebデベロッパーのManaです。 日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。 カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。 現在クリエイター専門の留学サポート企業「Frog」で素敵な広報担当してます。 さらに詳しく知りたいという方は詳細ページへ。 個人的などうでもいいことはTwitter @chibimanaでつぶやいてます。

  • ランダム
  • 新着記事