attr()はタグにある src="" alt="" class="" title="" などの属性のバリューを変更する時に使います。
例えば
<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney" />
上にあるimgタグのsrc属性のバリューを変更したり、altの属性のバリューを変更する時に使います。
では、上のイメージをクリックするとsrc属性のバリューを変更してホンダ社のアシモが出るようにしてみましょう。
そうするためにはattr('','')の1番目は変更する属性の名を書きます、2番目は適用する属性のバリューを書きます。
var myimage = $('.myimage'); myimage.click(function(){ myimage.attr('src','/material/images/jQuery/asimo.png'); });
下にある東京ディズニーランドのシンデレラの城のイメージをクリックしてください、そうしたらイメージが変えます。
つまり、
<img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney" /> 上のコードが <img class="myimage" src="/material/images/jQuery/asimo.png" alt="disney" /> に変更されました。
では、直接やってみましょう。
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>EVERDEVEL :: jQuery</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script> <script> $(function(){ var myimage = $('.myimage'); myimage.click(function(){ myimage.attr('src','/material/images/jQuery/asimo.png'); }); }); </script> <style> </style> </head> <body> <img class="myimage" src="/material/images/jQuery/disney.jpg" alt="disney" /> </body> </html>
その意外にもaタグのhrefの属性のバリューを変えたり、することもできます。^^
ご覧くださってありがとうございます。お問い合わせと間違い説明はある場合、下にあるコメントにお願いいたします。
//=$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']?>コメント 0個
並べ替え