はじめてのjquery入門 01 2013年7月14日(日)
DESCRIPTION
HTML5+α初心者勉強会 @福岡 第2回 2013年7月14日(日) 発表資料です〜!TRANSCRIPT
������4�µè�²���ß°�á�£
��±�Ê Å�Å�
ZI_RY%�0!-2�Ă
13年7月15日月曜日
ÛFj%�0!-2�PR]J?ĈĈ
àZÉücB�<ÍWVe]HN8
13年7月15日月曜日
%�0!-2i�<T����ëãYÁ�i
â�WÈCfÍWVfjSJXĆ
xsm}H]HN8
13年7月15日月曜日
LDS�ÅZâ�SJCU
%�0!-2YòÆiHR^N;T·;]J8
ăĀ;T?÷¢@:g[
ÒúWtsn�S�F;Ć
13年7月15日月曜日
DYöÃZ6Ö§S
��ÞñHV@d�PR>e]J8
����������������#-*(!
%�0!-2�1�����#//+���%,0!-2��*(�
13年7月15日月曜日
�ÅðJ�¬
13年7月15日月曜日
����ëãi¿HR¼W�gf
¼W�gNëãiÁ�Jf
m}smW�¶FKf
�ÅðJ�¬
13年7月15日月曜日
����ëãi¿HR¼W�gf
�ÅðJ�¬
13年7月15日月曜日
�=[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日月曜日
����ëãi¿HR¼W�gf
$(‘#tonkatsu’)�S�´�Ë]JĆ
���Yq~mrT�å
13年7月15日月曜日
����ëã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日月曜日
����ëã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日月曜日
����ëã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日月曜日
����ëãi¿HR¼W�gf
CSSと同じ記述で取得できます!分かりやすいですね。
13年7月15日月曜日
¼W�gNëãiÁ�Jf
�ÅðJ�¬
13年7月15日月曜日
¼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日月曜日
¼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日月曜日
¼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日月曜日
¼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日月曜日
¼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日月曜日
¼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日月曜日
¼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日月曜日
¼W�gNëãiÁ�Jf
var $subuta=$(‘<div>酢豚</div>’);ëãWëãYþ���ą@SA]J8
<body> <div id=”tonsoku” > </div> </body>
<span>豚足</span>
13年7月15日月曜日
¼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日月曜日
¼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日月曜日
¼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日月曜日
m}smW�¶FKf
�ÅðJ�¬
13年7月15日月曜日
<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日月曜日
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日月曜日
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日月曜日
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日月曜日
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日月曜日
m}smW�¶FKf
[sample URL] http://jsdo.it/itoKami1123/AoYC
動いているデモ!
13年7月15日月曜日
m}smW�¶FKf
$(‘#tonsoku’).on ( ‘click’, function(event){
$(this).toggleClass(‘on’);
} );
DgZ�
console.log( event );
�*).*'!�'*"W�HR^]Hb<
TDhSY!1!)/PRVjSHb<?Ĉ
13年7月15日月曜日
m}smW�¶FKf
$(‘#tonsoku’).on ( ‘click’, function(event){
$(this).toggleClass(‘on’);
} );
��DgZ��
console.log( event );
�*).*'!�'*"W�HR^]Hb<
¹¥@�ÌSJXĆ
13年7月15日月曜日
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日月曜日
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日月曜日
m}smW�¶FKf
event.target
event.currentTarget
event.delegateTarget
13年7月15日月曜日
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日月曜日
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日月曜日
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日月曜日
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日月曜日
m}smW�¶FKf
div.soto_gawa
div.uchi_gawa
内側をクリック
event.target
13年7月15日月曜日
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日月曜日
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日月曜日
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日月曜日
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日月曜日
m}smW�¶FKf
div.soto_gawa2
div.uchi
内側をクリック
DjVl{�oS�;R;f^N;SJ8
13年7月15日月曜日
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日月曜日
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日月曜日
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日月曜日
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日月曜日
Ï£`chHCg[äAiðFKR�F;Ć
�ÅZ7%�0!-2YÎéi®HOC
ðFKR;NOA]HNĆ
13年7月15日月曜日
�?÷¢@:g[U<MĆ
13年7月15日月曜日
>H];SJĆ
:e@T<EG;]HNĆ
13年7月15日月曜日