jQuery attrとremoveAttr属性の取得と設定と削除
attrはattributeの略ですね。
英語で属性という意味です。
jQuery attr属性の設定する
サンプル
$(“セレクタ”).attr(“属性”,”値”)
サンプル
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“a”).attr(“href”,”http://jquery.navi-ch.net/”)
});
</script>
<title>
</title>
</head>
<body>
<a href=”#”>初心者向けjQuery入門</a>
<h3 class=”red”>red</h3>
<h3 class=”Green”>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</body>
</html>
jQuery attr属性の取得する
サンプル
$(“セレクタ”).attr(“属性名”)
サンプル
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“a”).attr(“href”,”http://jquery.navi-ch.net/”)
$(“h3”).html($(“a”).attr(“href”))
});
</script>
<div></div>
<a href=”#”>初心者向けjQuery入門</a>
<h3 class=”red”>red</h3>
<h3 class=”Green”>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
実行結果は
初心者向けjQuery入門
http://jquery.navi-ch.net/
http://jquery.navi-ch.net/
http://jquery.navi-ch.net/
http://jquery.navi-ch.net/
h3をhtmolの引数にattrで属性を取得してます。
jQuery removeAttr 属性を削除する
removeAttrは属性を削除します。
サンプル
$(“セレクタ”).removeAttr(“削除する属性名”)
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“a”).attr(“href”,”http://jquery.navi-ch.net/”)
$(“a”).removeAttr(“href”)
});
</script>
<title>
</title>
</head>
<body>
<div></div>
<a href=”#”>初心者向けjQuery入門</a>
<h3 class=”red”>red</h3>
<h3 class=”Green”>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</body>
</html>
実行結果は
初心者向けjQuery入門
red
Green
yellow
Blue
初心者向けjQuery入門のリンクがなくなっています。
