2011年06月16日 過去Blog
ここでは、jQuery初心者の方へ向けに、jQueryの基本的な使い方、使うメリットなどをまとめていきます。jQueryは簡単なコードで、サイトに大きな効果をつけることが可能ですので、デザイナーさんやコーダーの方も是非、試してみてください☆
この記事は体系的にまとめているので、随時、追加・修正していきます。

jQueryを使う準備

jQueryのソースコードのダウンロード 上記のサイトでjQuery本体を入手します。 サイトの右側の「PRODUCTION (31KB, Minified and Gzipped)」にチェックが入っている状態でダウンロードします。 Minifiedというのは、実行動作が軽くなるように最適化されたファイルです。 日本語リファレンス 分からない事や、各種セレクタ、イベントなどは上記の日本語リファレンスが参考になります。 ノンプログラマーのためのjQuery入門

jQueryの基本的な使い方

1. ダウンロードしたjQuery本体をサーバにアップします。 一般的には、htmlのhead内で、アップしたjQueryを読み込みます。
ただし、script要素はページのどこに記述してもOKです。htmlやcssを先に読ませて表示させ、bodyタグの手前でscriptを読ませるという方法もあります。私はこれがオススメです。
<script src="jquery-1.6.1.min.js?ver=20101129" type="text/javascript"><!--mce:0--></script>
2. 実行したいjQueryが書かれたjsファイルを上記と同じくheadで読み込むか、htmlソースに直接記述します。 3. 実行したいjQueryが対象とするhtml要素をhtmlソースに配置します。実行したいscriptは、htmlソースに直接書く事も、外部から読ませることも可能です。script要素は、タグ内にsrcがある場合は、指定された外部ファイルを参照し、srcがなければ、scriptタグの中のコードを読みます。
多くのブラウザはjavascriptファイルの内容をキャッシュするので、外部ファイルにしておくと、二回目以降の表示を高速化出来ます。後々、他のサイトで、同じファイルを使い回す事も考えると外部ファイルでの使用がオススメです。
簡単な流れは以上で、完了です。これだけで動作します。

jQueryを使うメリット

  1. ライブラリに魅力がある上に、人気が高くユーザーがダントツで多いので、情報(ネット、本など)も比較的多い。
  2. 多くの利用者がいるので、開発終了などで、習得した技術が無駄になるリスクが低い。
  3. javascriptとは違う(簡単な)記述で、javascriptを利用することが出来る。
  4. cssに近い記述法を採用しているので、webデザイナーやhtmlマークアップエンジニアでも習得しやすい。
  5. 極めて短いコードでダイナミックな表現が可能になる。
  6. 非常に軽いライブラリなので、ページの読み込みなどの動作にほとんど影響を与えない。
  7. クロスブラウザー設計なので、IE 6以上、Firefox 2.0以上、Safari 3以上、Opera 9以上、Google Chromeなど、主要なブラウザに対応している。この点では、既にjavascriptをガンガン使いこなしている方にとっても魅力的かも。

jQueryを使う際の注意点

  1. prototype.jsやmootoolsなんかと一緒に使う事も可能ですが、コンフリクトを避けるため、基本的には、他のライブラリと併用せず、jQueryのみで使うべき
  2. javascriptファイルとhtmlファイルは、同じ文字コードにすべきです。特別な理由がなければ、utf-8を選ぶべきです。

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

iPhone アプリにアイコンを設定する

2010年12月09日 過去Blog
自作のiPhoneアプリにアイコンを設定する方法です。 まず、アイコンに使いたい画像を準備します。 画像サイズ 57px × 57px アイコン画像の設定 (1)プロジェクト内のResourceフォルダを右クリックし、既存のファイルを追加を選びます。そして、準備しておいた画像を選択、このとき表示される画面ないの「デスティネーション...」の項目をチェックし、追加します。 (2)その後、プロジ…
「iPhone アプリにアイコンを設定する」をはてなブックマークに追加

[11] NSUserDefaults を使ってデータを保存・取り出し

2010年12月20日 過去Blog
このチュートリアルでは、各種データをNSUserDefaultsを使って、保存、抽出する方法について説明します。 NSUserDefaults は、データベースの知識を必要としないので、SQLite3のようなデータベースを必要としない(ゲームのハイスコア、ログイン情報、アプリの設定など)、小規模のデータを扱う場合には便利で簡単です。 今回は、例として、初回時にアプリを起動し、名前を入力すると、保存され、次回以降の起動時には、保存された名前が自動的に名前が表示されるアプリケーションを作成します。 …
「[11] NSUserDefaults を使ってデータを保存・取り出し」をはてなブックマークに追加

広告や外部リンクなどで、サイト内のテーマが薄れるのを防ぐ、robots-nocontent

2010年03月10日 過去Blog
ウェブページは、ヘッダー、サイドメニュー、コンテンツ、フッターなど様々な要素から成り立ってる場合が多いと思います。 全てがページ内のキーワードと関連が深い場合はいいのですが、広告や、お問い合わせ欄、アクセスマップ、会社概要など、特にサイトのテーマとは関係ないページや関係ない箇所が散財すると思います。 ページ内に広告が表示されてる場合などはサイト内のテーマと関係が薄い場合も多々あると思います。 …
「広告や外部リンクなどで、サイト内のテーマが薄れるのを防ぐ、robots-nocontent」をはてなブックマークに追加

PHP 配列を展開する foreach

2010年06月08日 過去Blog
foreachで、配列を展開する foreach ($array as $key => $val) { echo $key ; echo $val; }
「PHP 配列を展開する foreach」をはてなブックマークに追加

iOS 4.2 sdkのABGroupAddMemberにバグ

2011年01月25日 過去Blog
ABAddressBookに関するアプリを勉強していたのですが、ABGroupAddMember が機能せず、困っていました。 日本語サイトでは情報が見当たらなかったので、いろいろ海外のサイトを調べていると同じように困っている方が大勢いるようでした。 …
「iOS 4.2 sdkのABGroupAddMemberにバグ」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy