はじめてのjQuery入門 01 2013年7月14日(日)

<html>
<body>
<div id=”tonsoku”></div>
<div id=”tonkatsu”></div>
<div id=”tonkotsu”></div>
</body>
</html>
$(‘#tonkatsu’)
13年7月15日月曜日

$(‘#tonkatsu’)

<body>
<div id=”tonsoku” class=”udon” ></div>
<div id=”tonkatsu”></div>
<div id=”tonkotsu” class=”udon” ></div>
</body>
id指定による取得 $(‘#tonkatsu’)
class指定による取得 $(‘.udon’)
tag指定による取得 $(‘div’)

CSSと同じ記述で取得できます！
分かりやすいですね。

<body>
<div id=”tonsoku”>豚足</div>
<div id=”tonkatsu”>トンカツ</div>
<div id=”tonkotsu”>豚骨</div>
</body>
豚足

豚骨
$(‘#tonkatsu’).css(‘color’,‘red’);
トンカツ

$(‘#tonkatsu’).css( ‘color’ , ‘red’ );
var color = $(‘#tonkatsu’).css( ‘color’);
red

$(‘img’).attr( ‘id’ , ‘myPic’ );
var img_id = $(‘img’).attr( ‘id’ );
myPic
<tag xxx=”xxx” ></tag>

$(‘#tonsoku’).addClass( ‘on’ );
<body>
<div id=”tonsoku” >豚足</div>
</body>
class=”on”

$(‘#tonsoku’).removeClass( ‘on’ );
<body>
</body>
class=”on”

$(‘#tonsoku’).removeClass( ‘on’ );
<body>
</body>

$(‘#tonsoku’).hasClass( ‘on’ );
<body>
</body>
class=”on”
$(‘#tonkatsu’).hasClass( ‘on’ );
true
false

var $subuta=$(‘<div>酢豚</div>’);
<body>
<div id=”tonsoku” >
</div>
</body>
<span>豚足</span>

$(‘#tonkatsu’).append( $subuta );
<body>
</div>
</body>
<div>酢豚</div>
<span>豚足</span>

<body>
</div>
</body>
$subuta.remove();
<span>豚足</span>

<body>
</div>
</body>
$subuta.remove();
$(‘#tonkatsu’).empty();

<body>
<div id=”tonsoku”>豚足</div>
</body>

豚骨
トンカツ
豚足
エムスタジオ様の指の素材を使わせて頂いております。
http://www.emstudio.jp/free/data1038/

<body>
</body>
/* css */
.on {
color:red;
background-color:black;
}

$(‘#tonsoku’).on ( ‘click’, function(event){
$(this).toggleClass(‘on’);
} );
$(‘#tonsoku’).bind ( ‘click’, ... とか
$(‘#tonsoku’).click( ... とかも同じ動きになるよ！

<body>
</body>
} );

[sample URL] http://jsdo.it/itoKami1123/AoYC
動いているデモ！

} );
console.log( event );

event.target
event.currentTarget
event.delegateTarget
event.relatedTarget

event.target
event.currentTarget

event.target
event.currentTarget
<div id="soto_gawa" class=”soto”>
外側だよ∼ん
<div id="uchi_gawa" class=”uchi” >
内側だよ∼ん
</div>
</div>
$('#soto_gawa').on( 'click', function( event){
console.log( 'this', this);
console.log('event.target:', event.target);
console.log('event.currentTarge:', event.currentTarget);
});

event.target
event.currentTarget
<div id="soto_gawa" >
外側だよ∼ん
<div id="uchi_gawa" >
内側だよ∼ん
</div>
</div>
console.log( 'event.target:', event.target);
console.log( 'event.currentTarge:', event.currentTarget);
});
div.soto_gawa
div.uchi_gawa
外側をクリック内側をクリック

div.soto_gawa
div.uchi_gawa
外側をクリック内側をクリック
});

div.soto_gawa
div.uchi_gawa
内側をクリック
event.target

div.soto_gawa
div.uchi_gawa
});
event.target
event.currentTarget

$('#soto_gawa2').on( 'click', '.uchi', function( event){
$(this).toggleClass('on');
console.log('this:', this);
console.log('event.target:',event.target);
console.log('event.currentTarge:',event.currentTarget);
console.log('event.delegateTarge:',event.delegateTarget);
} );

div.soto_gawa2
div.uchi

div.soto_gawa2
div.uchi
event.target
event.currentTarget
event. delegateTarget

外側だよ∼ん
<div class=”uchi” >
内側だよ∼ん
</div>
</div>
なので↓のように途中で追加しても
$(‘#soto_gawa’).append(‘<div class=”uchi” >内２</div>’);

外側だよ∼ん
内側だよ∼ん
</div>
</div>
内２
</div>
なので↓のように途中で追加しても
$(‘#soto_gawa’).append(‘<div class=”uchi” >内２</div>’);

はじめてのjQuery入門 01 2013年7月14日(日)

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

More from Toshio Ehara

More from Toshio Ehara (12)

Recently uploaded

Recently uploaded (6)

はじめてのjQuery入門 01 2013年7月14日(日)