読者です 読者をやめる 読者になる 読者になる

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

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

jQueryで属性を操作するサンプル

<スポンサーリンク>

attrメソッドで属性を設定する

attr(属性の名前,値);

サンプルはこちら。

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>jQueryサンプル</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('#button').click(function() {
    $('input[type="text"]').attr(
      { value: 'valueを設定するでござる!', title:'value!!!'}
    );
  });

});
</script>
</head>
<body>

<input type="text" value="" />
<br/>
<input type="button" value="valueを設定" id="button"/>
<div></div>
</body>
</html>

ボタンを押すと、テキストボックスの中に「valueを設定するでござる!」という文字が入力される。

attrメソッドで属性を取得する。

attr(attribute);

attributeで指定した属性の値を取得する。
下のサンプルで言うと、

var imgsrc = $('img').attr('src');

の部分。ここでimgタグの、src属性の値を取得している。

サンプル

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>jQueryサンプル</title>
<style type="text/css">
img {
  width:230px;
  height:300px
}

div img {
  width:500px;
  height:600px;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('#button').click(function() {
    console.log("hoge");
    var imgsrc = $('img').attr('src');
    console.log("imgタグのsrc属性は:" + imgsrc);
    $('div').append('<p>' + imgsrc + '</p>');

  });
  $('#expand').click(function() {
    var imgElm = $('img');
    $('div').append(imgElm);
  });
});
</script>
</head>
<body>
<img src="images/image1.jpg" />
<img src="images/image2.jpg" />
<br/>
<input type="button" value="attrを表示" id="button"/>
<input type="button" value="拡大" id="expand"/>
<hr>
<div></div>
</body>
</html>

このサンプルでボタンを押すと、属性の値が表示されたり、画像が拡大されて表示されたりする。

読んだ本

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

感謝のプログラミング

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