menu
menu

キーワード検索

 

8月更新・前月(7月)の人気記事トップ10 - 8/1/2019

  1. ( 2 ↑) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 1 ↓) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 6 ↑) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 3 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  5. ( 7 ↑) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  6. ( 4 ↓) 【Mac】Safariでソースコードを見る方法
  7. ( 8 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  8. ( 9 ↑) 【制作Tips】画面解像度一覧表
  9. (圏外↑) 【Perl】Windows 10にActivePerlをインストール
  10. (圏外↑) 【jQuery】入門5. jQueryで日時を表示
このエントリーをはてなブックマークに追加

【制作Tips】prototypeとjQuery

【制作Tips】prototypeとjQuery

こんにちは(¬v¬)

今回はPrototypeとjQueryについてです。

最近のWeb制作においてJavaScriptは欠かせない存在となりました。そのJavaScript/Ajaxの中でも特にprototypeとjQueryといったフレームワークやライブラリはWeb制作の現場において必須項目となりつつあります。

今回そのprototypeやjQueryを使うために必要な準備について解説します。

prototypeとjQuery

prototypeの導入

prototype.js(http://www.prototypejs.org/)を公式サイトからダウンロードします。

ダウンロードしたファイルを任意の場所に保存します。ここでは「/common/js/」にダウンロードしたファイルを保存します。head要素内に次の一行を追加します。

ファイル名はダウンロードしたファイル名を入力します。

今回ダウンロードしたファイルはprototype.jsなのでそれがファイル名になります。


<script src="/common/js/prototype.js"></script>

これでprototypeが使えるようになりました。

jQueryの導入

jquery.js(http://jquery.com/)を公式サイトからダウンロードします。

ダウンロードしたファイルを任意の場所に保存します。ここでは/common/js/にダウンロードしたファイルを保存します。head要素内に次の一行を追加します。ファイル名はダウンロードしたファイル名を入力します。今回ダウンロードしたファイルはjquery-1.8.2.min.jsなのでそれがファイル名になります。


<script src="/common/js/jquery-1.8.2.min.js"></script>

これでjQueryが使えるようになりました。

prototypeとjQueryの共存

prototypeとjQueryは競合(コンフリクト)します。なのでprototypeとjQueryを一緒に使うことはできません。サイト設計の段階でどちらのライブラリを使うか決めておかなければなりません。

ただ、どうしても使わざるおえない場合があります。その場合の対処方法です。

jQueryにはjQuery.noConflict()という関数がありますのでそれを使ってprototypeとjQueryを共存させます。

まずprototypeとjQueryを読み込みます。prototype、jQueryの順で読み込ませます。prototypeのプラグインもjQueryの前に読み込ませます。


<script src="/common/js/prototype.js"></script>
<script src="/common/js/prototypeのプラグイン.js"></script>
<script src="/common/js/jquery.js"></script>

jQueryを読み込んだ後に次のコードを読み込ませます。


<script>
var j$ = jQuery.noConflict();//引数にtrueを指定すると$、jQuery共に無効になる。
</script>

あとは使用するjQueryのライブラリで定義されている$をj$に全置換すればprototypeとjQueryが共存できるようになります。

Result

サンプルデモ

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