属性値の変更・取得・削除、要素の置き換え

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属性の削除しています。
その結果、画像に設定されたリンクが削除されているのが
確認できます。

実行結果はこちらです。

<!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>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

font-weight:100;

margin:0 auto;}

</style>

</head>

<body>

<p></p>

</div>

$(document).ready(function(){

$("img").attr("src","kuroneko.jpg");

$("p").text($("img").attr("src") );

$("a").removeAttr("href");

});

</script>

</body>

</html>