開発日誌

jQueryではじめるJavaScript

今回からJavaScriptのライブラリ「jQuery」を紹介していきます。

jQueryというのはJavaScriptの汎用ライブラリーで軽量・強力なセレクター・各種ブラウザ対応が特徴です。

同じようなライブラリーとして「prototype.js」がありますが、最近はjQueryのほうが人気があるようです。わがジーピーオンラインでもJavaScriptを使用するときはこのライブラリーを使って開発しています。

汎用ライブラリーなのでいろいろなことができるのですが、今回は必要最小限の肝の部分だけ紹介します。


jQueryのプログラムはサイトの「↓Download(jQuery)」からダウンロードしてjquery.min.jsとリネームしてください。

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <title>jQueryではじめるJavaScript その1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('span').html('jQuery');
      });
    </script>
  </head>

  <body>
    <p>Hello <span>HTML</span> World.</p>
  </body>

</html>


ブラウザ表示
Hello jQuery World.

上記のように表示されたら成功です。

今回注目してもらいたい箇所はここの1行です。
 
$('span').html('jQuery');

これはjQueryで特徴的な書き方で
 $(セレクター).処理
という要素からできています。

「セレクター」
 後ろに書く「処理」が実行される箇所です。
 いろいろなセレクターがありますが、上記の「'span'」は<span>タグの箇所です。

「処理」
 いろいろな処理がありますが、上記の「html('...')」 はセレクターの子要素を'...'で書き換えます。>ドキュメント

つまり
 $('span').html('jQuery');
は、
「<span>タグの子要素を'jQuery'」に書き換えます。

同じようにspanの箇所をh1やtd等に変えれば、<h1>や<td>内を書き換えることができます。

次回は「jQueryのセレクターの説明」です。


(teruhisa)

Webシステムのツボとは

オープンソースの紹介や、プログラミング講座、フリーソフトのレビューなど、Webエンジニアが送る、つれづれ日記。
【隔週金曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive