jQueryはHTMLの要素だけではなく、属性に設定されている値を
変更したり、取得出来たりします。
属性値の変更
attr()命令を使うと、属性値を変更できます。attr()は、
変更したい属性名と、変更後の属性地を括弧内に「,」区切りで
指定します。
$(セレクター).attr(“属性名”,”属性値”);
例を挙げると、img要素のsrc属性の値を変更したい場合は
以下のように設定します。
$(“img”).attr(“src”,”kuroneko.jpg”);
サンプルコードを実行すると、HTMLファイル上では、
img要素のsrc=”shironeko.jpg”だったのが、”kuroneko.jpg”に
切り替わっているのは確認できます。
属性値の取得
属性値の取得もattr()命令を使用します。attr()の括弧内に
属性名のみを指定すると、指定した属性値を取得できます。
$(“p”).text($(“img”).attr(“src”) );
実行すると、空のp要素のテキストにimg要素のsrcの情報が
設定され、出力されるのが確認できます。
属性値の削除
セレクターで指定した要素に特定の属性が設定されいて、
それを削除したいときはremoveAttr()命令で削除できます。
サンプルコードでは
a要素のリンク先を示す href属性の削除しています。
その結果、画像に設定されたリンクが削除されているのが
確認できます。
実行結果はこちらです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQueryStudy</title> <style> *{margin:0;padding:0;} #container{ width:640px; height:400px; font-weight:100; margin:0 auto;} </style> <script src="js/jquery-1.11.3.js"></script> </head> <body> <div id="container"> <a href="#"> <img src="shironeko.jpg" alt="" width="100" height="100"></a> <p></p> </div><!--contatiner--> <script> $(document).ready(function(){ $("img").attr("src","kuroneko.jpg"); $("p").text($("img").attr("src") ); $("a").removeAttr("href"); }); </script> </body> </html> |
コメント