少しのコードで実装可能な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>

それでは実際にどんな事ができるのか見てみましょう!サンプルも作ったのでコードと合わせてみてみてください!コードはサンプル内の「HTML」「CSS」「JS」といった各タブをクリックすると表示されます :)

※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. マウスオーバーで画像を変更

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

See the Pen Change image by jQuery by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

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

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

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

See the Pen Adding target=blank by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

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

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

今開いているページ上部へスルスルッとジャンプします。よく見かける小技ですね!サンプル画面をスクロールし、画面下にある「ページトップへ」ボタンをクリックしてみてください。

See the Pen Go to page top by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

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

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

See the Pen Clickable div by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

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

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

See the Pen Colour odd rows in table by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

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

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

See the Pen Image not found by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

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

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

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

$.browser を使った方法を紹介していましたが、jQuery 1.9から削除され、現在は利用できなくなりました。

jQuery小技集 目次へ。

8. 画像のプリローダー

jquery 画像のプリローダー
ページコンテンツを全て読み込んでから画像を順番に読み込んでいきます。読込中はローディングgif画像を表示し、ひとつひとつフワッと表示させていきます。ギャラリーサイトにおすすめ。サンプルがうまく表示されていない場合は、画面右下の「RETURN」ボタンをクリックして再度読み込んでください。

See the Pen Loading images by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

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

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

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

$.browser を使った方法を紹介していましたが、jQuery 1.9から削除され、現在は利用できなくなりました。

jQuery小技集 目次へ。

10. Divを消す

指定したボタンをクリックすると、そのボタンのあるDiv全体が消えます。お知らせ表示などに使えそう。

See the Pen Delete div by click by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

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

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

See the Pen Change label colour when it’s focused by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

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

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

See the Pen Change the word in a text field by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

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

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

See the Pen Word count up by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

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

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

See the Pen Customize checkbox & radio button by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

15. スライドパネル

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

See the Pen Slide panel by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

16. アコーディオン

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

See the Pen According menu by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

17. ツールチップ

jquery ツールチップ

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

See the Pen Tooltip by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

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

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

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

See the Pen Print page by Mana (@manabox) on CodePen.

jQuery小技集 目次へ。

19. Twitter最新のTweetを表示

Twitterの最も新しいつぶやきを表示させます。

※Twitterの仕様変更により、現在はTwitter公式の埋め込みタイムラインが推奨されています。

jQuery小技集 目次へ。

20. 効果音を入れる

jquery 効果音を入れる

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

jQuery小技集 目次へ。


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

参考サイト:

シェアする

関連する記事

コメント