連載インデックスへ
 デザイナーのためのWeb学習帳 デザイナのためのWeb学習帳（4）

ざっくり覚えて始められる
jQueryセレクタ入門

株式会社ライブドア
インターフェースエンジニア 油井 大輔
2009/12/1
現在大流行中のjQuery。CSSセレクタのように使えるらしいけど、実際どうなの？ というデザイナのために、その基本をざっくり紹介

【おさらい】「jQuery」って何だっけ？

　jQueryとは、John Resig氏を中心として開発されている、オープンソースのJavaScriptライブラリです。DOM操作を中心としたプログラミングに向いており、エンジニアはもちろんのことマークアップエンジニアやデザイナの間で広く普及しています。

　jQueryについての詳細は、下記記事をご参照ください。

jQuery、プラグイン、jQuery UI、Web経由のCDNとは
CSSの書き方も分かるjQueryプラグイン実践活用法（1）　基本／おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説

◇ jQueryをダウンロードするには

　jQueryをダウンロードするには、jQueryオフィシャルサイトのDownloadページを開きます。

http://docs.jquery.com/Downloading_jQuery

Downloading jQuery - jQuery JavaScript Library via kwout

- PR -

　開いた先にある「Download jQuery」の項目をたどって、ファイルをダウンロードしましょう。2009年11月時点での最新バージョンは1.3.2です。圧縮版と非圧縮版がありますが、通常プロジェクトで使う際には転送量を低く抑えることのできる圧縮版を使えばいいでしょう。

◇ jQueryをHTMLページ内で呼び出すには

　jQueryをページ内へインクルードする方法は、通常のJavaScriptファイルをインクルードする手順と同じでHTML内の<head>タグの中で<script>タグによってインクルードします。

<html>
<head>
  <title>jQuery</title>
  <script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
</head>
<body>
 
</body>
</html>

　<script>タグの「src」属性の値は、環境により変えてください。

jQueryセレクタの基本的な使い方

　jQueryの最も顕著な特徴は、「jQueryセレクタ」と呼ばれるものです。jQueryセレクタを使うと、CSSでHTMLの要素（タグ）を選択するような感覚で、HTML内の要素をピックアップできます。

◇ jQueryセレクタが起点

　そしてjQueryによりプログラミングする際には、この「jQueryセレクタ」を起点にして行うことになります。「jQueryセレクタにより要素を選択する」→「選択要素に対して何か処理を行う」この2つの繰り返しがjQueryによるプログラミングの最も基本となるものです。

jQuery("a") // ← jQueryセレクタにより要素を選択する
    .addClass("link") // ← 選択要素に対して何か処理を行う

◇ jQueryセレクタ用の関数

　jQueryをインクルードすると自動的に「jQuery」「$」という2つのjQueryセレクタ用の関数がインクルードされます。

　基本的には、どちらかを使えばいいのですが、場合によっては、ほかで使うライブラリが使っている名前と同じものになってしまうことがあるかもしれません。そういった場合には、「jQuery.noConflict」という関数を使います。これは、JavaScriptを使ううえで重複しやすい「$」という名前を別の名前に変えられるものです。

　使い方は簡単で、例えば「$」を「$j」にしたいのならば、以下のように書きます。

var $j = jQuery.noConflict(false);

　最新版では、noConflictの引数にtrueを指定することで、「jQuery」という名前も消すことがでます。

　次ページでは、最もよく使うjQueryセレクタを5つ紹介し、タグを指定した後どうするべきかについてざっくり説明します。

  1/3

　INDEX
デザイナのためのWeb勉強帳（4）　
ざっくり覚えて始められるjQueryセレクタ入門
Page1
【おさらい】「jQuery」って何だっけ？
jQueryセレクタの基本的な使い方
  Page2
最もよく使うjQueryセレクタ5つ
jQueryセレクタでタグを指定した後は？
  Page3
jQueryセレクタを使いこなすための3つの基本テクニック
後は、Web上にあるリファレンスで

デザイナーのためのWeb学習帳 バックナンバー 連載インデックスへ»


「デザインハック」コーナーへ


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事
  • なぜWebではなく電子書籍なのか？ （2012/2/20）
    電子書籍って何ができるの？ EPUB3ってどうなの？ 作り方は？ 電子書籍の基本から現場のプロの本音がぶつかった電子書籍ナイトをレポートする
  • Chrome for Android登場！ （2012/2/17）
    　 Chrome for Android、Google Chrome、Modernizr、CSSで変数を使う仕様、translate属性、WebRTC 1.0などHTML5関連トピック8連発
  • HTML5Reset、Firefox 10が話題に （2012/2/13）
    　ブラウザやHTMLバージョンの互換性問題を解消するリセットCSS「HTML5 Reset」、Firefox 10、Twitter BootstrapなどHTML5関連トピック8連発
  • コンテンツ政策ヲ転換セヨ！ （2012/2/10）
    mixiにしろTwitterにしろニコ動にしろ、ソーシャルサービスは伸びている。シロウトの個人が作るコンテンツで成り立つサービスだ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH