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

��4�µè�²��ß°�á�£

��±�Ê Å�Å�

ZI_RY%�0!-2�Ă

13年7月15日月曜日

http://atnd.org/events/38403




ÛFj%�0!-2�PR]J?ĈĈ

àZÉücB�<ÍWVe]HN8


%�0!-2i�<T��ëãYÁ�i

â�WÈCfÍWVfjSJXĆ

xsm}H]HN8


LDS�ÅZâ�SJCU

%�0!-2YòÆiHR^N;T·;]J8

ăĀ;T?÷¢@:g[

ÒúWtsn�S�F;Ć


DYöÃZ6Ö§S

��ÞñHV@d�PR>e]J8

��#-*(!

%�0!-2�1��#//+��%,0!-2��*(�


http://jquery.com

http://jquery.com

�ÅðJ�¬


��ëãi¿HR¼W�gf

¼W�gNëãiÁ�Jf

m}smW�¶FKf

�ÅðJ�¬



�ÅðJ�¬


�=[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Ć




$(‘#tonkatsu’)�S�´�Ë]JĆ

��Yq~mrT�å



<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’)�



<body>




</body>


��q~mrS





<body>




</body>


��q~mrS





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



�ÅðJ�¬



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

　豚骨

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

��S�´HNëãZê9Á�SA]J

トンカツ



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

ëãY��i©ÇSA]JĆ �*'*-y�wuk -! iî«

ëãY��¹¥i�´SA]JĆ

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

�*'*-y�wuk

red

-! �i�´



$(‘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>

¯¸¡ ¯¸�



$(‘#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”



$(‘#tonsoku’).removeClass( ‘on’ );

ëãY�'�..i�ąSA]JĆ *)m|pi�ą


class=”on”



$(‘#tonsoku’).removeClass( ‘on’ );

ëãY�'�..i�ąSA]JĆ *)m|pi�ą




$(‘#tonsoku’).hasClass( ‘on’ );

ëãW�'�..@:f?ÞñSA]J8 *)m|pi¾PR;f?Þñ


class=”on”

$(‘#tonkatsu’).hasClass( ‘on’ );

true

false



var $subuta=$(‘<div>酢豚</div>’);ëãWëãYþ��ą@SA]J8

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

<span>豚足</span>




$(‘#tonkatsu’).append( $subuta );


<div>酢豚</div><span>豚足</span>






$subuta.remove();

<span>豚足</span>






$subuta.remove();$(‘#tonkatsu’).empty();


m}smW�¶FKf

�ÅðJ�¬


<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/


http://www.emstudio.jp/free/data1038/

http://www.emstudio.jp/free/data1038/

m}smW�¶FKf


/* css */

.on { color:red; background-color:black;}

DjVºIY#/('T�..iÔ�H]HN8


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( ... とかも同じ動きになるよ！


m}smW�¶FKf



$(this).toggleClass(‘on’);} );

/#$.W½FgNëã@�e]J

DgY�SJXĆ

ĄÂY�W½FgNëã@:PRÁ��Ë]JĆ


m}smW�¶FKf

$(this).toggleClass(‘on’);

:P7/*""'!�'�..iòÆHRV?PNSJX83��*�


/*""'!�'�..Z�� '�..�T�-!(*1!�'�..�i��WæeýH]J


m}smW�¶FKf

[sample URL] http://jsdo.it/itoKami1123/AoYC

動いているデモ！


m}smW�¶FKf



} );

DgZ�

console.log( event );

�*).*'!�'*"W�HR^]Hb<

TDhSY!1!)/PRVjSHb<?Ĉ


m}smW�¶FKf



} );

��DgZ��


�*).*'!�'*"W�HR^]Hb<

¹¥@�ÌSJXĆ


m}smW�¶FKf



} );

��DgZ��


�*).*'!�'*"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


m}smW�¶FKf

event.target

event.currentTarget



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<Ć


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


m}smW�¶FKf

div.soto_gawa

div.uchi_gawa



Û ISJX


m}smW�¶FKf

div.soto_gawa

div.uchi_gawa


:PĀ<Ć



m}smW�¶FKf

div.soto_gawa

div.uchi_gawa

内側をクリック

event.target


m}smW�¶FKf

div.soto_gawa

div.uchi_gawa



event.target

event.currentTarget

lz�vÙ×¦»SJ

Õ¤Ylz�v�ç


m}smW�¶FKf

div.soto_gawa

div.uchi_gawa



event.target

event.currentTarget

lz�vZíëãW�ÀH]JĆ

lz�vÙ×¦»SJ

Õ¤Ylz�v�ç


m}smW�¶FKf

L`L` !'!"�/!PR�SHb<?ĈĈ !'!"�/!lz�viÚāHR^]Hb<Ć


$('#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Úā�


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Ĉ


m}smW�¶FKf

div.soto_gawa2

div.uchi


DjVl{�oS�;R;f^N;SJ8


m}smW�¶FKf

div.soto_gawa2

div.uchi


event.targetevent.currentTarget/#$.

lz�vÙ×¦»SJ

event. delegateTarget


lz�vÜì¦»


m}smW�¶FKf

div.soto_gawa2

div.uchi


event.targetevent.currentTarget/#$.

lz�vÙ×¦»SJ

event. delegateTarget


lz�vÜì¦»


m}smW�¶FKf

<div id="soto_gawa" class=”soto”> 外側だよ～ん <div class=”uchi” > 内側だよ～ん </div>

</div>

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


m}smW�¶FKf

<div id="soto_gawa" class=”soto”> 外側だよ～ん <div class=”uchi” > 内側だよ～ん </div>

</div>

<div class=”uchi” > 内２</div>

ª�SÜìHR;fYS��Yëã@¨=R`lz�viÜì�ËfY@{}svSJĆ

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


Ï£`chHCg[äAiðFKR�F;Ć

�ÅZ7%�0!-2YÎéi®HOC

ðFKR;NOA]HNĆ


�?÷¢@:g[U<MĆ


>H];SJĆ

:e@T<EG;]HNĆ


Business

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