Mais conteúdo relacionado
Mais de Toshio Ehara (12)
はじめてのjQuery入門 01 2013年7月14日(日)
- 11. <body>
<div id=”tonsoku” class=”udon” ></div>
<div id=”tonkatsu”></div>
<div id=”tonkotsu” class=”udon” ></div>
</body>
id指定による取得 $(‘#tonkatsu’)
class指定による取得 $(‘.udon’)
tag指定による取得 $(‘div’)
13年7月15日月曜日
- 12. <body>
<div id=”tonsoku” class=”udon” ></div>
<div id=”tonkatsu”></div>
<div id=”tonkotsu” class=”udon” ></div>
</body>
id指定による取得 $(‘#tonkatsu’)
class指定による取得 $(‘.udon’)
tag指定による取得 $(‘div’)
13年7月15日月曜日
- 13. <body>
<div id=”tonsoku” class=”udon” ></div>
<div id=”tonkatsu”></div>
<div id=”tonkotsu” class=”udon” ></div>
</body>
id指定による取得 $(‘#tonkatsu’)
class指定による取得 $(‘.udon’)
tag指定による取得 $(‘div’)
13年7月15日月曜日
- 18. $(‘img’).attr( ‘id’ , ‘myPic’ );
var img_id = $(‘img’).attr( ‘id’ );
myPic
<tag xxx=”xxx” ></tag>
13年7月15日月曜日
- 30. $(‘#tonsoku’).on ( ‘click’, function(event){
$(this).toggleClass(‘on’);
} );
$(‘#tonsoku’).bind ( ‘click’, ... とか
$(‘#tonsoku’).click( ... とか も同じ動きになるよ!
13年7月15日月曜日
- 40. event.target
event.currentTarget
<div id="soto_gawa" >
外側だよ∼ん
<div id="uchi_gawa" >
内側だよ∼ん
</div>
</div>
$('#soto_gawa').on( 'click', function( event){
console.log( 'this', this);
console.log( 'event.target:', event.target);
console.log( 'event.currentTarge:', event.currentTarget);
});
div.soto_gawa
div.uchi_gawa
外側をクリック内側をクリック
13年7月15日月曜日
- 46. event.delegateTarget
$('#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);
} );
13年7月15日月曜日
- 47. $('#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);
} );
13年7月15日月曜日