はじめての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日(日)

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (10)

Más de Toshio Ehara

Más de Toshio Ehara (12)

Último

Último (8)

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