jQueryの基本(jQueryとは)

jQuery

jQuery、結構前からあるみたいですが自分は最近その存在を知りその便利さに衝撃を受けました。
そもそも、javascriptおよびjavascriptライブラリ自体を全く意識してなかったのですが。。

ということで、jQueryとはjavascriptのライブラリーで、htmlファイルからこのライブラリを読み込む
だけで、javascriptの機能をものすごく簡単にシンプルに使えます。

また、jQueryのプラグインも豊富に用意されているので、これらを使うことでかっこいいサイトが
簡単に作れてしまいます!

今度jQueryを駆使して作ったページをご紹介できればなぁ、と思っております。

jQueryの特徴

– もっとも使われているJavascriptのライブラリー
(その他だと、prototype.js, MooToolsがある)
– もっとも使われているので、ネット上に情報がそろっており、将来的にも安心
– コードが手軽
– 軽量
– クロスブラウザー設計

jQuery使用方法

jQueryを使用するためには、jQueryのライブラリが必要です。

1. jQueryライブラリの入手
http://jquery.com/
上記のjQueryの公式ページに行き、右側にある「↓Download(jQuery);」というボタンを
押してダウンロードしてください。

[コメント]
ファイル保存の表示が出ず、ソースが表示されてるページに飛んだ場合は、そのページでブラウザメニューの「ファイル」->「名前を付けて保存」で保存してください。

2012年2月現在では「jquery-1.7.1.min.js」というファイルでした。

また、ダウンロードボタンの上にあるチェックボックスはデフォルトで「PRODUCTION」
になってますが、これを「DEVELOPMENT」にチェックしなおしてダウンロードすると、
「jquery-1.7.1.js」のように、”min”がつかないファイルを入手できます。

これは、コメントや改行などを入れてソースコードを見やすくしたものです。
開発者などがソースをいじったり動きをみるためのもので、通常はmin付のファイルの
方が小さいのでこちらを選びます。

2. jQueryライブラリの使用方法
・jqueryライブラリの読み込み
htmlファイル内でscriptタグを使用しjqueryライブラリを読み込みます。
scriptタグはページ内のどこにでも記述できますが、一般的にはheadの中に記載します。
ただ、最近ではコンテンツの表示を優先させるためにbody要素を閉じる直前にscript要素を
記述するケースも増えてます。

・スクリプト実行タイミング
スクリプトを実行してもそのスクリプトが対象とするタグなどの要素が読み込まれていないと
正しく動作しません。
それでは困るので、HTMLドキュメントが全部読み込まれてからscriptの処理を実行させるように
する必要があります。それが「ready」というjQueryの関数です。
こんな感じに使います。

常に上記のような形でスクリプトを記載すると考えてよいと思います。

・スクリプトの記載場所
jQueryの機能を利用してスクリプトをhtmlファイル内に記載します。
scriptはHTMLファイル内に記載することも別ファイルとして記載することも可能です。
ただ、キャッシュによる高速性、メンテナンス性を考えると外部ファイルとして作った方が
よいと思います。

例:HTMLファイル内に記載した場合

簡単なスクリプト例を以下に記載します。

/

タイトルとURLをコピーしました