日本鍼灸理療専門学校・日本柔道整復専門学校 | 学校法人 花 …日本鍼灸理療専門学校・日本柔道整復専門学校 | 学校法人 花田 ...
はじめてのjQuery入門 01 2013年7月14日(日)
-
Upload
toshio-ehara -
Category
Business
-
view
798 -
download
5
description
Transcript of はじめてのjQuery入門 01 2013年7月14日(日)
![Page 1: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/1.jpg)
������4�µè�²���ß°�á�£
��±�Ê Å�Å�
ZI_RY%�0!-2�Ă
13年7月15日月曜日
![Page 2: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/2.jpg)
ÛFj%�0!-2�PR]J?ĈĈ
àZÉücB�<ÍWVe]HN8
13年7月15日月曜日
![Page 3: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/3.jpg)
%�0!-2i�<T����ëãYÁ�i
â�WÈCfÍWVfjSJXĆ
xsm}H]HN8
13年7月15日月曜日
![Page 4: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/4.jpg)
LDS�ÅZâ�SJCU
%�0!-2YòÆiHR^N;T·;]J8
ăĀ;T?÷¢@:g[
ÒúWtsn�S�F;Ć
13年7月15日月曜日
![Page 5: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/5.jpg)
DYöÃZ6Ö§S
��ÞñHV@d�PR>e]J8
����������������#-*(!
%�0!-2�1�����#//+���%,0!-2��*(�
13年7月15日月曜日
![Page 6: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/6.jpg)
�ÅðJ�¬
13年7月15日月曜日
![Page 7: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/7.jpg)
����ëãi¿HR¼W�gf
¼W�gNëãiÁ�Jf
m}smW�¶FKf
�ÅðJ�¬
13年7月15日月曜日
![Page 8: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/8.jpg)
����ëãi¿HR¼W�gf
�ÅðJ�¬
13年7月15日月曜日
![Page 9: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/9.jpg)
�=[DY����Y�S$ @�/*)&�/.0�Yëãi�´HN;TA
<html> <body> <div id=”tonsoku”></div> <div id=”tonkatsu”></div> <div id=”tonkotsu”></div> </body></html>
$(‘#tonkatsu’)�S�´�Ë]JĆ
����ëãi¿HR¼W�gf
13年7月15日月曜日
![Page 10: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/10.jpg)
����ëãi¿HR¼W�gf
$(‘#tonkatsu’)�S�´�Ë]JĆ
���Yq~mrT�å
13年7月15日月曜日
![Page 11: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/11.jpg)
����ëãi¿HR¼W�gf
<body>
<div id=”tonsoku” class=”udon” ></div>
<div id=”tonkatsu”></div>
<div id=”tonkotsu” class=”udon” ></div>
</body>
id指定による取得 $(‘#tonkatsu’)�
���q~mrS
class指定による取得 $(‘.udon’)�
tag指定による取得 $(‘div’)�
13年7月15日月曜日
![Page 12: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/12.jpg)
����ëãi¿HR¼W�gf
<body>
<div id=”tonsoku” class=”udon” ></div>
<div id=”tonkatsu”></div>
<div id=”tonkotsu” class=”udon” ></div>
</body>
id指定による取得 $(‘#tonkatsu’)�
���q~mrS
class指定による取得 $(‘.udon’)�
tag指定による取得 $(‘div’)�
13年7月15日月曜日
![Page 13: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/13.jpg)
����ëãi¿HR¼W�gf
<body>
<div id=”tonsoku” class=”udon” ></div>
<div id=”tonkatsu”></div>
<div id=”tonkotsu” class=”udon” ></div>
</body>
id指定による取得 $(‘#tonkatsu’)�
���q~mrS
class指定による取得 $(‘.udon’)�
tag指定による取得 $(‘div’)�
13年7月15日月曜日
![Page 14: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/14.jpg)
����ëãi¿HR¼W�gf
CSSと同じ記述で取得できます!分かりやすいですね。
13年7月15日月曜日
![Page 15: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/15.jpg)
¼W�gNëãiÁ�Jf
�ÅðJ�¬
13年7月15日月曜日
![Page 16: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/16.jpg)
¼W�gNëãiÁ�Jf
<body> <div id=”tonsoku”>豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body> 豚足
豚骨
$(‘#tonkatsu’).css(‘color’,‘red’);
���S�´HNëãZê9Á�SA]J
トンカツ
13年7月15日月曜日
![Page 17: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/17.jpg)
¼W�gNëãiÁ�Jf
$(‘#tonkatsu’).css( ‘color’ , ‘red’ );
ëãY���i©ÇSA]JĆ �*'*-y�wuk -! iî«
ëãY���¹¥i�´SA]JĆ
var color = $(‘#tonkatsu’).css( ‘color’);
�*'*-y�wuk
red
-! �i�´
13年7月15日月曜日
![Page 18: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/18.jpg)
¼W�gNëãiÁ�Jf
$(‘img’).attr( ‘id’ , ‘myPic’ );
ëãY¯¸i©ÇSA]JĆ $ ¯¸W (2�$�iî«
ëãY¯¸i�´SA]JĆ
var img_id = $(‘img’).attr( ‘id’ );
$ ¯¸?d
myPic
(2�$�i�´
<tag xxx=”xxx” ></tag>
¯¸¡ ¯¸�
13年7月15日月曜日
![Page 19: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/19.jpg)
¼W�gNëãiÁ�Jf
$(‘#tonsoku’).addClass( ‘on’ );
ëãY�'�..iþ�SA]JĆ *)m|piþ�
<body> <div id=”tonsoku” >豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body>
class=”on”
13年7月15日月曜日
![Page 20: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/20.jpg)
¼W�gNëãiÁ�Jf
$(‘#tonsoku’).removeClass( ‘on’ );
ëãY�'�..i�ąSA]JĆ *)m|pi�ą
<body> <div id=”tonsoku” >豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body>
class=”on”
13年7月15日月曜日
![Page 21: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/21.jpg)
¼W�gNëãiÁ�Jf
$(‘#tonsoku’).removeClass( ‘on’ );
ëãY�'�..i�ąSA]JĆ *)m|pi�ą
<body> <div id=”tonsoku” >豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body>
13年7月15日月曜日
![Page 22: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/22.jpg)
¼W�gNëãiÁ�Jf
$(‘#tonsoku’).hasClass( ‘on’ );
ëãW�'�..@:f?ÞñSA]J8 *)m|pi¾PR;f?Þñ
<body> <div id=”tonsoku” >豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body>
class=”on”
$(‘#tonkatsu’).hasClass( ‘on’ );
true
false
13年7月15日月曜日
![Page 23: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/23.jpg)
¼W�gNëãiÁ�Jf
var $subuta=$(‘<div>酢豚</div>’);ëãWëãYþ���ą@SA]J8
<body> <div id=”tonsoku” > </div> </body>
<span>豚足</span>
13年7月15日月曜日
![Page 24: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/24.jpg)
¼W�gNëãiÁ�Jf
var $subuta=$(‘<div>酢豚</div>’);ëãWëãYþ���ą@SA]J8
$(‘#tonkatsu’).append( $subuta );
<body> <div id=”tonsoku” > </div> </body>
<div>酢豚</div><span>豚足</span>
13年7月15日月曜日
![Page 25: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/25.jpg)
¼W�gNëãiÁ�Jf
var $subuta=$(‘<div>酢豚</div>’);ëãWëãYþ���ą@SA]J8
$(‘#tonkatsu’).append( $subuta );
<body> <div id=”tonsoku” > </div> </body>
$subuta.remove();
<span>豚足</span>
13年7月15日月曜日
![Page 26: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/26.jpg)
¼W�gNëãiÁ�Jf
var $subuta=$(‘<div>酢豚</div>’);ëãWëãYþ���ą@SA]J8
$(‘#tonkatsu’).append( $subuta );
<body> <div id=”tonsoku” > </div> </body>
$subuta.remove();$(‘#tonkatsu’).empty();
13年7月15日月曜日
![Page 27: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/27.jpg)
m}smW�¶FKf
�ÅðJ�¬
13年7月15日月曜日
![Page 28: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/28.jpg)
<body> <div id=”tonsoku”>豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body>
豚骨トンカツ
m}smW�¶FKf
豚足
ôøim}smJfÐWê@�ùJf`Yi�PR^]Hb<Ć
エムスタジオ様の指の素材を使わせて頂いております。http://www.emstudio.jp/free/data1038/
13年7月15日月曜日
![Page 29: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/29.jpg)
m}smW�¶FKf
<body> <div id=”tonsoku” >豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body>
/* css */
.on { color:red; background-color:black;}
DjVºIY#/('T�..iÔ�H]HN8
13年7月15日月曜日
![Page 30: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/30.jpg)
m}smW�¶FKf
$(‘#tonsoku’).on ( ‘click’, function(event){
$(this).toggleClass(‘on’);} );
lz�v¡
ĄÂiÚā
m}smJfT�YĄÂ@�A]JĆ
lz�vZD<aPRÚāH]J8
$(‘#tonsoku’).bind ( ‘click’, ... とか
$(‘#tonsoku’).click( ... とか も同じ動きになるよ!
13年7月15日月曜日
![Page 31: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/31.jpg)
m}smW�¶FKf
<body> <div id=”tonsoku” >豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body>
$(‘#tonsoku’).on ( ‘click’, function(event){
$(this).toggleClass(‘on’);} );
/#$.W½FgNëã@�e]J
DgY�SJXĆ
ĄÂY�W½FgNëã@:PRÁ��Ë]JĆ
13年7月15日月曜日
![Page 32: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/32.jpg)
m}smW�¶FKf
$(this).toggleClass(‘on’);
:P7/*""'!�'�..iòÆHRV?PNSJX83��*�
<body> <div id=”tonsoku” >豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body>
/*""'!�'�..Z�� �'�..�T�-!(*1!�'�..�i��WæeýH]J
13年7月15日月曜日
![Page 33: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/33.jpg)
m}smW�¶FKf
[sample URL] http://jsdo.it/itoKami1123/AoYC
動いているデモ!
13年7月15日月曜日
![Page 34: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/34.jpg)
m}smW�¶FKf
$(‘#tonsoku’).on ( ‘click’, function(event){
$(this).toggleClass(‘on’);
} );
DgZ�
console.log( event );
�*).*'!�'*"W�HR^]Hb<
TDhSY!1!)/PRVjSHb<?Ĉ
13年7月15日月曜日
![Page 35: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/35.jpg)
m}smW�¶FKf
$(‘#tonsoku’).on ( ‘click’, function(event){
$(this).toggleClass(‘on’);
} );
��DgZ��
console.log( event );
�*).*'!�'*"W�HR^]Hb<
¹¥@�ÌSJXĆ
13年7月15日月曜日
![Page 36: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/36.jpg)
m}smW�¶FKf
$(‘#tonsoku’).on ( ‘click’, function(event){
$(this).toggleClass(‘on’);
} );
��DgZ��
console.log( event );
�*).*'!�'*"W�HR^]Hb<
ɳWDY��-"!/ĄÿiòÆHN;T·;]J813年7月15日月曜日
![Page 37: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/37.jpg)
m}smW�¶FKf
event.target
event.currentTarget
event.delegateTarget
event.relatedTarget5DgZ(*0.!*1!-�(*0.!*0/SH?Ù×HV;lz�vdHB�ÅZó\RËRV;YSÝØH]J88
13年7月15日月曜日
![Page 38: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/38.jpg)
m}smW�¶FKf
event.target
event.currentTarget
event.delegateTarget
13年7月15日月曜日
![Page 39: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/39.jpg)
m}smW�¶FKf
event.targetevent.currentTarget
<div id="soto_gawa" class=”soto”> 外側だよ~ん <div id="uchi_gawa" class=”uchi” > 内側だよ~ん </div></div>
DjV����S
$('#soto_gawa').on( 'click', function( event){ console.log( 'this', this); console.log('event.target:', event.target); console.log('event.currentTarge:', event.currentTarget);});
DjV��1���-$+/i�PR^fT88
6ćQZ�@Ā<YSHb<?ĈïHR^]Hb<Ć
13年7月15日月曜日
![Page 40: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/40.jpg)
m}smW�¶FKfevent.targetevent.currentTarget
<div id="soto_gawa" > 外側だよ~ん <div id="uchi_gawa" > 内側だよ~ん </div></div>
DjV����S
$('#soto_gawa').on( 'click', function( event){ console.log( 'this', this); console.log( 'event.target:', event.target); console.log( 'event.currentTarge:', event.currentTarget);});
DjV��1���-$+/i�PR^fT88
div.soto_gawa
div.uchi_gawa
外側をクリック内側をクリック
��im}smHN¦�Tª�im}smHN¦�iÑûHR^]Hb<8
13年7月15日月曜日
![Page 41: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/41.jpg)
m}smW�¶FKf
div.soto_gawa
div.uchi_gawa
外側をクリック内側をクリック
$('#soto_gawa').on( 'click', function( event){ console.log( 'this', this); console.log( 'event.target:', event.target); console.log( 'event.currentTarge:', event.currentTarget);});
Û ISJX
13年7月15日月曜日
![Page 42: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/42.jpg)
m}smW�¶FKf
div.soto_gawa
div.uchi_gawa
外側をクリック内側をクリック
:PĀ<Ć
$('#soto_gawa').on( 'click', function( event){ console.log( 'this', this); console.log( 'event.target:', event.target); console.log( 'event.currentTarge:', event.currentTarget);});
13年7月15日月曜日
![Page 43: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/43.jpg)
m}smW�¶FKf
div.soto_gawa
div.uchi_gawa
内側をクリック
event.target
13年7月15日月曜日
![Page 44: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/44.jpg)
m}smW�¶FKf
div.soto_gawa
div.uchi_gawa
内側をクリック
$('#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
lz�vÙצ»SJ
Õ¤Ylz�v�ç
13年7月15日月曜日
![Page 45: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/45.jpg)
m}smW�¶FKf
div.soto_gawa
div.uchi_gawa
内側をクリック
$('#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
lz�vZíëãW�ÀH]JĆ
lz�vÙצ»SJ
Õ¤Ylz�v�ç
13年7月15日月曜日
![Page 46: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/46.jpg)
m}smW�¶FKf
L`L` !'!"�/!PR�SHb<?ĈĈ !'!"�/!lz�viÚāHR^]Hb<Ć
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);} );
lz�võ
!'!"�/!lz�vZÚāÄÓ@Ā;]JX8
lz�vÚā�
13年7月15日月曜日
![Page 47: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/47.jpg)
m}smW�¶FKf
$('#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);} );
!1!)/�/�-"!/T�!1!)/��0--!)/��-"!/@ ISJX
!'!"�/!��-"!/ZU<adªSÜìHR;fëã^N;SJ8
FPAT ÍW��Yëãim}smHR�*).*'!�'*"SÞñHR^fT88Ĉ
13年7月15日月曜日
![Page 48: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/48.jpg)
m}smW�¶FKf
div.soto_gawa2
div.uchi
内側をクリック
DjVl{�oS�;R;f^N;SJ8
13年7月15日月曜日
![Page 49: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/49.jpg)
m}smW�¶FKf
div.soto_gawa2
div.uchi
内側をクリック
event.targetevent.currentTarget/#$.
lz�vÙצ»SJ
event. delegateTarget
DjVl{�oS�;R;f^N;SJ8
lz�vÜ즻
13年7月15日月曜日
![Page 50: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/50.jpg)
m}smW�¶FKf
div.soto_gawa2
div.uchi
内側をクリック
event.targetevent.currentTarget/#$.
lz�vÙצ»SJ
event. delegateTarget
DjVl{�oS�;R;f^N;SJ8
lz�vÜ즻
13年7月15日月曜日
![Page 51: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/51.jpg)
m}smW�¶FKf
<div id="soto_gawa" class=”soto”> 外側だよ~ん <div class=”uchi” > 内側だよ~ん </div>
</div>
なので!のように途中で追加しても$(‘#soto_gawa’).append(‘<div class=”uchi” >内2</div>’);
13年7月15日月曜日
![Page 52: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/52.jpg)
m}smW�¶FKf
<div id="soto_gawa" class=”soto”> 外側だよ~ん <div class=”uchi” > 内側だよ~ん </div>
</div>
<div class=”uchi” > 内2</div>
ª�SÜìHR;fYS��Yëã@¨=R`lz�viÜì�ËfY@{}svSJĆ
なので!のように途中で追加しても$(‘#soto_gawa’).append(‘<div class=”uchi” >内2</div>’);
13年7月15日月曜日
![Page 53: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/53.jpg)
Ï£`chHCg[äAiðFKR�F;Ć
�ÅZ7%�0!-2YÎéi®HOC
ðFKR;NOA]HNĆ
13年7月15日月曜日
![Page 54: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/54.jpg)
�?÷¢@:g[U<MĆ
13年7月15日月曜日
![Page 55: はじめてのjQuery入門 01 2013年7月14日(日)](https://reader034.fdocument.pub/reader034/viewer/2022052619/556600c6d8b42a2a4d8b4e6b/html5/thumbnails/55.jpg)
>H];SJĆ
:e@T<EG;]HNĆ
13年7月15日月曜日