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

2015年8月3日

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>

-jQuery
-属性値取得, 属性値変更, 置き換え

comment コメントをキャンセル

: jQuery

イベント発生時に一度だけ処理を行うone()

この命令は、指定した要素で発生したイベントに対して、一度だけ実行する処理を設定します。 one()の括弧内にはイベントの発生条件を書きます。イベント発生の条件には、click,dblclick,m ...

: jQuery

親要素を取り除いたり、要素を削除する。

前回は要素を包む命令を取り上げました。今回はその逆、親要素を取り除いたり、要素を置き換えたりするものを紹介します。親要素を取り除く指定した親要素の取り除く場合は、unwrap()命令を使用しま ...

: jQuery

ページトップへスムーズにスクロールさせる。

今回は、ボタンをクリックしたらページのトップへ滑らかに遷移するというものを jQueryを使って作成します。１．jQueryのプラグインを入手する。今回は、トップページにスムーズに戻るためにイ ...

: jQuery

イベントが発生した要素を取得する

イベントを設定したい要素はひとつとは限らない場合が多々あります。今回は、eqセレクターを使って、複数のa要素に対してそれぞれ異なるクリックイベントを設定しています。 eqセレクターは以前も紹介し ...

jQuery

jQueryで聖剣伝説に出てくるリングメニューを作ってみる

タイトルの通り、聖剣伝説で登場する円状に広がるリング状のメニューを今回紹介します。サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Portfolio</title>
    
    <!--共通で使用するCSSを読み込む-->
    <link rel="stylesheet" type="text/css" href="">

    <!--共通で使用するjQueryを読み込む-->          
    <script src="js/jquery-1.11.3.js"></script>
    
    <!--　ｊQueryUIを読み込む-->
    <script src="js/ui/jquery-ui.js"></script> 
    
    <!--jQuery(flowerNav)を使用するために
    　　必要なCSS,JSファイルを読み込む-->
	<link rel="stylesheet" type="text/css" 
          href="js/flowernav.css">

    <script src="js/jquery.flowernav-1.0.js"></script>


    <style>
	
	*{margin:0;padding:0}

	p {
		font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
		 "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		 font-size:16px;
	}
	#container{}
		
	</style>
</head>
<body>
    
<div id="container">
    <nav id="flash">
    <ul>
        <!-- link used as button by default .btn -->
        <li><a href="#flash" class="btn my_button">click!</a>
            <!-- second level link will be used as childs -->
            <ul>
                <li><a href="#"><img src="img/CL004.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL005.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL006.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL007.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL009.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL010.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL012.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL019.JPG" width="100" height="100" ></a></li>
            </ul>
        </li>
    </ul>
    </nav>    
</div>

	<script>
	$(document).ready(function() {

		// no option initialisation, with dragging off and default settings (clockwise rotation)
		$('#nav').flowernav();
		
		// dragging enabled -> requires the "draggable" function of the jQuery UI Plugin / see jqueryui.com
		$('#nav').flowernav({drag:true});
		
		// initial callback function possible after plugin is invoked
		$('#nav').flowernav( {}, function(){ $('#log').append('"#'+this.id+'" flowernav inititated<br/>');} );
	
		// all of the default settings
		$('#flash').flowernav({
			radiusX			: 140, 		// radius of x axis in px, default: 110
			radiusY			: 110,		// radius of y axis in px, default: 110
			rotate			: true, 	// rotate items in a circle, default: true
			direction		: 'ccw', 	// counter clockwise rotation, default: clockwise
			speed			: 1, 		// speed inverse proportional 1 = fastest, default: 3
			oSpeed			: 1000, 	// speed of opening animation in ms, default: 500
			cSpeed			: 400,		// speed of closing animation in ms, default: 400
			easingOpen		: 'easeOutBounce', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin,
			easingClose		: 'easeInBack', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin,
			hoverStop		: true, 	// does stop the animation on item hover, default: true
			hoverOpacityIn	: 1,		// hover opacity of li's, default: 1
			hoverOpacityOut	: .4,		// opacity of li's , default: .5
			hoverSpeedIn	: 100,		// speed of hover toggle opacity animation in ms, default: 600
			hoverSpeedOut	: 700,		// speed of hover-out toggle opacity animation in ms, default: 600
			intv			: 10, 		// rotation interval time in ms, default: 10
			offset			: 45, 		// offset in circle in degrees, default: 0
			drag 			: true, 	// requires jquery ui plugin to function, default: false
			// callbacks
			btnClass		: '.btn',
			onOpenStart	: function(){ $('#log').append('"#'+this.attr('id')+' onOpenStart<br/>'); }, // at start of opening animation
			onOpenEnd	: function(){ $('#log').append('"#'+this.attr('id')+' onOpenEnd<br/>'); }, // at end of opening animation
			onCloseStart: function(){ $('#log').append('"#'+this.attr('id')+' onCloseStart<br/>'); }, // at start of closing animation
			onCloseEnd	: function(){ $('#log').append('"#'+this.attr('id')+' onCloseEnd<br/>'); } // at end of closing animation
		});
	});	
	</script>
</body>
</html>

100

101

<!doctype html>

<html>

<head>

<title>Portfolio</title>

<!--jQuery(flowerNav)を使用するために

　　必要なCSS,JSファイルを読み込む-->

href="js/flowernav.css">

<style>

*{margin:0;padding:0}

p {

font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",

"メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;

font-size:16px;

}

#container{}

</style>

</head>

<body>

<ul>

<li><a href="#flash" class="btn my_button">click!</a>

<ul>

</ul>

</li>

</ul>

</nav>

</div>

$(document).ready(function() {

// no option initialisation, with dragging off and default settings (clockwise rotation)

$('#nav').flowernav();

// dragging enabled -> requires the "draggable" function of the jQuery UI Plugin / see jqueryui.com

$('#nav').flowernav({drag:true});

// initial callback function possible after plugin is invoked

$('#nav').flowernav( {}, function(){ $('#log').append('"#'+this.id+'" flowernav inititated<br/>');} );

// all of the default settings

$('#flash').flowernav({

radiusX : 140, // radius of x axis in px, default: 110

radiusY : 110, // radius of y axis in px, default: 110

rotate : true, // rotate items in a circle, default: true

direction : 'ccw', // counter clockwise rotation, default: clockwise

speed : 1, // speed inverse proportional 1 = fastest, default: 3

oSpeed : 1000, // speed of opening animation in ms, default: 500

cSpeed : 400, // speed of closing animation in ms, default: 400

easingOpen : 'easeOutBounce', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin,

easingClose : 'easeInBack', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin,

hoverStop : true, // does stop the animation on item hover, default: true

hoverOpacityIn : 1, // hover opacity of li's, default: 1

hoverOpacityOut : .4, // opacity of li's , default: .5

hoverSpeedIn : 100, // speed of hover toggle opacity animation in ms, default: 600

hoverSpeedOut : 700, // speed of hover-out toggle opacity animation in ms, default: 600

intv : 10, // rotation interval time in ms, default: 10

offset : 45, // offset in circle in degrees, default: 0

drag : true, // requires jquery ui plugin to function, default: false

// callbacks

btnClass : '.btn',

onOpenStart : function(){ $('#log').append('"#'+this.attr('id')+' onOpenStart<br/>'); }, // at start of opening animation

onOpenEnd : function(){ $('#log').append('"#'+this.attr('id')+' onOpenEnd<br/>'); }, // at end of opening animation

onCloseStart: function(){ $('#log').append('"#'+this.attr('id')+' onCloseStart<br/>'); }, // at start of closing animation

onCloseEnd : function(){ $('#log').append('"#'+this.attr('id')+' onCloseEnd<br/>'); } // at end of closing animation

});

</script>

</body>

</html>

今回使用するプラ ...

親要素を取り除いたり、要素を削除する。

class属性の追加・削除