jQueryとは
- 世界でもっとも利用されているJavaScriptライブラリの一つです。jQueryを使用することで、インタラクティブな仕掛けも簡単なコードで実装することが可能となります。
jQueryのメリット
- クロスブラウザに対応している。
JavaScriptでは、同じコードがブラウザによって期待どうりに動作しないこがよくあります。jQueryを利用すれば、基本的なブラウザの解釈の違いにすべて対応している為、ブラウザの違いを意識する手間が省けます。特に何かと鬼門になるIE6を意識しなくてすむのは何より大きなメリットです。 - ソースコードを短く記述できる。
- 拡張性が高い。
jQueryのデメリット
- jQueryなどのプラグインをたくさん使用していると他のプラグインとconflictが発生して動作しなくなる場合があります。
- 使い方にもよりますが、JavaScriptと比較すると実行速度が極端に遅くなる場合があります。（特にIEの場合）。
jQuery 覚え書き
jQuery：デジタル時計を表示する方法
jQueryでデジタル時計を表示するサンプルコードです。 jQueryのソースコード jQuery(function($) { jQuery.extend({ clock : function clock(target) … 続きを読む jQuery：デジタル時計を表示する方法
JavaScript：連続クリック対応方法
画面上に設置したボタンを連続でクリックされた場合に予期しない挙動を引き起こす事が良くあります。 そういう場合の対応方法についてメモしておきます。 基本的に対応する方法としては以下の様な方法があります。 ボタンのdisab … 続きを読む JavaScript：連続クリック対応方法
jQuery UI「Sortable」を利用してマウスドラッグで要素を移動する方法
jQuery UI「Sortable」を利用したHTML要素の入れ替え方法をメモしておきます。 「Sortable」を利用すると<li>タグの要素などをマウスポインタで選択してドラッグすることでその要素の移動 … 続きを読む jQuery UI「Sortable」を利用してマウスドラッグで要素を移動する方法
jQueryイベント一覧
jQueryで良く利用されるイベント（ショートカットメソッド）の一覧です。
jQueryでのHTMLフォーム部品操作方法
jQueryを使用してHTMLのフォーム部品となる「テキストボックス」、「ラジオボタン」、「チェックボックス」、「リストボックス」を操作する方法をご紹介します。 テキストボックスの操作方法 テキストボックスへ値を設定 H … 続きを読む jQueryでのHTMLフォーム部品操作方法
jQueryでテーブル操作する方法
行を追加する $("#rowAdd").click(function() { // <tr>（先頭行）要素をコピーし、元の行の直下に追加 $("#table-tbody>tr").eq(0).clone … 続きを読む jQueryでテーブル操作する方法
jQuery 「Datepicker」でカレンダー入力
フォーム入力でテキストボックスなどへ日付項目を作成する際、ユーザに直接日付を入力してもらうのではかなり勝手が良くありません。 こういう場合は日付項目をクリックした時に「カレンダーダイアログ」を表示してあげるとユーザビリテ … 続きを読む jQuery 「Datepicker」でカレンダー入力
jQuery 「PowerTip」でコメント表示
感覚的にはEXCELのコメント表示の様な事をHTMLでも実装出来ないか調べていたら、ツールチップ（吹き出し）を表示する機能がjQueryのプラグインにありましたので使用方法をご紹介します。 ※ツールチップ（tooltip … 続きを読む jQuery 「PowerTip」でコメント表示
jQuery 「zebra_dialog」でモーダルダイアログを表示
JavaScript標準のalertやconfirmだと味気ないダイアログが表示されますが、jQueryのプラグインを利用すれば洗練されたデザインのダイアログを簡単に利用する事が可能です。このようなカスタムダイアログやモ … 続きを読む jQuery 「zebra_dialog」でモーダルダイアログを表示
jQuery 「numeric」で数値入力制限
jqueryで数値入力制限してくれるプラグインです。今回紹介する「jquery.numeric.js」は正／負、整数／小数点チェック、更に全角チェックまでしてくれるので使い勝手の良いプラグインかと思われます。 ダウンロー … 続きを読む jQuery 「numeric」で数値入力制限
jQuery：タブ表示の方法
jQuery UIを利用したタブ表示方法をご紹介します。 タブ表示手順 jQuery UIのダウンロードページにアクセスします。 ⇒http://jqueryui.com/download/ デフォルトでは「Toggle … 続きを読む jQuery：タブ表示の方法
jQuery：アコーディオンメニューの表示方法
アコーディオンメニュー表示手順 jQuery UIのダウンロードページにアクセスします。 ⇒http://jqueryui.com/download/ デフォルトでは「Toggle All」にチェックが付いているので、チ … 続きを読む jQuery：アコーディオンメニューの表示方法
jQuery：複数選択出来るドロップダウン「jQuery UI MultiSelect Widget」の使用方法
HTML標準のリストボックスで複数選択可能とする場合にはmultiple属性を指定して実装しますが、HTML標準のままでは複数選択する場合にctrlキーを押下したまま選択する必要があるので慣れていない方には操作しにくい面 … 続きを読む jQuery：複数選択出来るドロップダウン「jQuery UI MultiSelect Widget」の使用方法
jQuery 「elevatezoom.js」で画像拡大表示
画像でのマウスオーバー時、画像の一部をズームして拡大表示することが出来るjQueryプラグイン「elevatezoom.js」の使用方法をご紹介します。 導入手順 プラグイン「elevatezoom.js」のダウンロード … 続きを読む jQuery 「elevatezoom.js」で画像拡大表示
jQuery 「Lightbox2」で画像拡大表示
画像をクリックするとその画像を拡大表示することが出来るjQueryプラグイン「Lightbox2」の使用方法をご紹介します。 導入手順 プラグイン「Lightbox2」のダウンロード ダウンロード先：http://lok … 続きを読む jQuery 「Lightbox2」で画像拡大表示
jQuery：Web上に3Dアルバム風に画像を表示出来る「OneBook3d」の使用方法
WEB上でフォトアルバムを再現出来るjQueryプラグイン「OneBook3d」の利用方法をご紹介します。 「OneBook3d」の特徴 WEB上に非常にオシャレなフォトアルバムを設置することが出来ます。 画像をズームし … 続きを読む jQuery：Web上に3Dアルバム風に画像を表示出来る「OneBook3d」の使用方法
jQueryでマウスオーバー時に画像を切り替える方法
jQueryでプラグインを使用せずに画像でマウスオーバーした時に、表示画像を切替える方法をご紹介します。 プラグイン「elevatezoom.js」のダウンロード 必要となるファイル jQuery本体「jquery-1. … 続きを読む jQueryでマウスオーバー時に画像を切り替える方法
jQuery：画像のスライドショーを簡単に設置出来る「bxslider」の使用方法
画像のスライドショーを簡単に設置出来るjQueryプラグイン「bxslider」の利用方法をご紹介します。 「bxslider」の特徴 WEB上に簡単に画像のスライドショーを設置出来ます。 オプションが豊富なので多彩な設 … 続きを読む jQuery：画像のスライドショーを簡単に設置出来る「bxslider」の使用方法
jQueryとJavaScriptの実行速度比較
簡単なサンプルで動かす分にはあまり気にすることはないのですが、業務でWeb画面を作成する場合、コーディングが楽になるからと言ってjQueryを使用する場合には十分注意する必要があります。 サンプル画面で数行・数十行の一覧 … 続きを読む jQueryとJavaScriptの実行速度比較
jQueryプラグインでのスクロールテーブル作成方法
業務でスクロールテーブルを作成する必要が出てきたのでjQueryプラグインでどうにかならないか調べて見ました。 どうもrowspanやcolspanを使用している場合は上手く動作しないケースが多いようです。 どうしてもプ … 続きを読む jQueryプラグインでのスクロールテーブル作成方法