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)

  • 作者: Bear Bibeault,Yehuda Katz,吉川邦夫
  • 出版社/メーカー: 翔泳社
  • 発売日: 2011/08/31
  • メディア: 大型本
  • 購入: 8人 クリック: 296回
  • この商品を含むブログ (24件) を見る

感謝のプログラミング

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