開発日誌 Web システムのツボ

jQueryではじめるJavaScript : セレクター操作

数週間、更新があいてしまっているうちにjQuery1.4がリリースされました。
この記事のソースは旧バージョンでも動きますのでご安心ください。

さて、今回はjQueryの肝であるセレクターの書き方を説明していきます。

前回のおさらいからです。(一部変更してあります)

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=Shift-JIS" />
    <style type="text/css">
      .red {
        color:#FF3333; font-weight:bold;
      }
      .blue {
        color:#3333FF; font-weight:bold;
      }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      function changeWord()
      {
        $('span').html('カバ');
      }
    </script>
  </head>

  <body>
    <p>「あれは<span class="blue">ネコ</span>ですか?」</p>
    <p>「いいえ、あれは<span class="red">イヌ</span>です」</p>
    <p><input type="button" value="カキカエル" onclick="changeWord();" /></p>
  </body>

</html>


ブラウザ表示
kakikae1.jpg

ボタンを押してみますと、書き換わりました!が・・・
すべての<span>の内容が「タヌキ」にかわってしまいました。

これじゃ範囲が広すぎて使いづらい時もあります
「イヌ」だけを「タヌキ」にする方法をないんでしょうか?

こういう時こそ「セレクター」の出番です!
コードを少し書かえ、ブラウザでみてみましょう。

index.html
$('span').html('タヌキ');
      ↓
$('span.red').html('タヌキ');

ブラウザ表示
kakikae2.gif

うまく「イヌ」の個所だけ書きかわりました!

それでは解説です。

$('span.red').html('タヌキ');
ここの書き方がポイントなのですが、「.」(ドット)の後ろに書かれた文字はHTML中のclassを意味しています。
したがって、この処理は「<span>タグでclass要素"red"のもの」の「子要素を'jQuery'に書き換え」という意味になります。

ID要素をつかって書換えたいときは、「.」(ドット)のかわりに「#」(シャープ)をつかって

$('span.id').html('タヌキ');
のように書きます。

他にもいろいろな方法がjQueryのサイトに載っていますが。。。
セレクターのドキュメント

とりあえずは「IDを使ったセレクター」と「classを使ったセレクター」の方法さえ覚えておけば、しばらくは大丈夫です。

次回はいろいろな「処理」の紹介をします。

(teruhisa)
Enhanced by Zemanta




Webシステムのツボとは

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

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

RSSを購読する

Monthly Archive