jQueryではじめるJavaScript ：処理１

2010年10月22日開発日誌

jQueryではじめるJavaScript ：処理１

今回はjQueryの第３回目、「処理」について進めていきます。
第１回、第２回で「なにを　どうするか」の「なにを」の箇所を勉強しましたが、処理は「どうするか」の部分です。

実はjQueryを知るまでは、私もJavaScriptが苦手でした。
HTMLやCSSとの結びつきが難解で、ブラウザ依存する箇所でもあり、頭を悩ませていました。
ところがjQueryを使うとその問題を軽々クリアし、「なにを　どうするか」の部分が簡単に表現できるようになります。まさに「必要は発明の母」と言ったところですね。

それでは今日はjQueryの処理の部分の紹介をしていきます。

今回作ったものはこちらからダウンロードできます。sample3.zip

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</title>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      function changeStyle()
      {
        $('#sun').css('color', '#f33');
      }
    </script>
  </head>

  <body>
    <div>
      真っ赤な<span id="sun">太陽</span><br />
      <input type="button" onclick="changeStyle();" value="変更" />
    </div>
  </body>

</html>

ブラウザ表示

ボタンを押してみますと、「太陽」のところが赤文字に書き換わりました！

$('#sun').css('color', '#f33');

このプログラムは、ID 'sun' の要素のCSSのプロパティ 'color' を '#f33' に変更する処理をしています。

ちなみに複数のプロパティを変更したい場合は

function changeStyle()
{
  $('#sun').css('color', '#f33');
  $('#sun').css('font-weight', 'bold');
}

上のように複数並べて書けばできますが、
次のような書き方もできます。処理が数珠繋ぎになっていることから"メソッドチェーン"と呼ばれます。

function changeStyle()
{
  $('#sun').css('color', '#f33').css('font-weight', 'bold');
}

次のようにオブジェクトを使って書くこともできます。

function changeStyle()
{
  $('#sun').css({'color':'#f33', 'font-weight':'bold'});
}

jQueryの特徴的なところなのですが、１つの関数で複数の処理ができるようになっています。最初は混乱するかもしれませんが、覚える関数名が少なくてすむのでなかなか便利です。

たとえば、上の処理とは逆に現在、設定されているものを取得したい場合は

function getStyle()
{
  alert('color : ' + $('#sun').css('color'));
}

これをボタンのonclickに設置するとアラートウィンドウで値が取得できます。

次回はこれらをつかって、ちょっと動くものをつくってみたいと思います。

（teruhisa）

jQueryではじめるJavaScript ： 処理１

jQueryではじめるJavaScript ：処理１