感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQueryで要素を追加したり、属性値を取得するサンプル

<スポンサーリンク>

jQueryで要素を追加する

HTMLの断片を動的に生成し、bodyに追加したいときがある。
jQueryのメソッドを使って、要素を作成して追加するサンプルを以下に示す。
jQueryのすごいところは、いとも簡単に要素を作成し、それにcssを設定したり、clickしたときのクリックハンドラの設定までできてしまう。

<!DOCTYPE>
<html>
<head>
<title>SAMPLE</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('<img>',
  {
    src: 'images/a.jpg',
    alt: 'Hinami Kyoko',
    title: 'I like this girl',
    click: function() {
      alert($(this).attr('title'));
    }
  })
  .css({
    cursor: 'pointer',
    border: '1px solid black',
    padding: '12px 12px 20px 12px',
    backgroundColor: 'white'
  })
  .appendTo('body');
});

</script>
</head>
<body>

</body>
</html>

こちらは、ブラウザの読み込みが完了したタイミングで指定した画像を表示させる。
で、画像をクリックした時にはalertでtitle属性が表示されるようになっている。
こんな細かい設定まで全部jQueryでやれてしまう。

要素を反復処理させる

eachメソッドは、マッチした集合の全部の要素を操作して、それぞれの要素について渡された反復処理関数を呼び出す。
もうちょっと簡単な言い方をすると、オブジェクトや配列の要素を順に走査し、各要素に対してコールバック関数を実行する。
反復処理を止めてループから脱出したいときはコールバック関数からreturn falseすればいい。
言葉ではわかりづらいので、実例を見てみよう。

<!DOCTYPE>
<html>
<head>
<title>SAMPLE</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  var array = [ "good morning!", 'hello!', 'good night'];
  $.each(array, function() {
    alert(this);
  });
});

</script>
</head>
<body>

</body>
</html>

こんな感じで、eachに配列と関数を渡すと、配列の中身をグルグル回して処理することができる。

属性値を取得する

attr()メソッドを使えば読み込みと書き込みの両方の操作ができる。
attr()メソッドは、マッチした集合の最初の要素から属性値をフェッチ(取得)するのも、マッチした要素のすべてに属性値をセットすることにも使える。
jQueryで要素の属性値を取得するサンプルは以下の通り。

<!DOCTYPE>
<html>
<head>
<title>SAMPLE</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var imgsrc = $('img').attr('src');
    $('div').append('<p>' + imgsrc + '</p>');
    console.log(imgsrc); //images/a.jpg となる
  });
</script>
</head>
<body>
<img src="images/a.jpg" />
<img src="images/b.jpg" />
</body>
</html>

勉強した本

感謝のプログラミング

今回で感謝のプログラミングは【603時間目】
10000時間まで、あと【9397時間】