ãåç¥ãWebãã©ã¦ã¶ç¨ã®è»½éãªJavaScriptã©ã¤ãã©ãªãjQueryã(ã¸ã§ã¤ã¯ã¨ãªã¼)ãããã使ãã¨ãã¦ã§ããã©ã¦ã¶ç¨ã®JavaScriptã³ã¼ãããã容æã«è¨è¿°ã§ããããã«ãªãã¾ãã ãã®jQueryããªã¼ãã³ã½ã¼ã¹ã½ããã¦ã§ã¢(OSS)ã¨ãã¦æä¾ããã¦ãã¾ãããã©ã¤ã»ã³ã¹ã確èªãããã¨ãããã¾ããï¼ããã¦ããããã©ããªãµãã«ç¢ºèªãã¾ããã? å æ¥ããèªä½ã½ã¼ã¹ã³ã¼ãã«ãMITã©ã¤ã»ã³ã¹ãé©ç¨ããï¼ã¤ã®ããæ¹ãã¨ããè¨äºãæ¸ããã¨ããããã£ããå¤ãã®äººã«èªãã§é ãã¾ãããã©ã¤ã»ã³ã¹ã®é©ç¨æ¹æ³ããããåãããªãã¨ãã人ããã¾ã ã¾ã ããã£ã¦ãã¨ã ã¨æãã¾ãããããã£ã¦ãããããOSSã®ã©ã¤ã»ã³ã¹ãã©ã®ããã«é©ç¨ããã¦ãããããã¡ãã¨å®ä¾ãè¦ã¦ããªãå¯è½æ§ãé«ãããããªããã¨èãã¾ãããããã§ãä»åã¯ãjQueryãé¡æã«ã©ã¤ã»ã³ã¹ã®ç¢ºèªæ¹æ³ã解説ãã¾ãã æéã®ããããªãæ¹æ³ããã¯
1ååå (1) 24 (13) Android (45) ASP/VBScript/VBA (23) BlackandWhite (1) Blogger (35) chromewebapps/chromewebstore (48) ColdFusion (90) ColorMaker (3) css (115) D3.js (15) design (34) dos (3) DS/ãã©ã´ã³ã¯ã¨ã¹ã/ã²ã¼ã é¢é£ (68) emacs (8) Excel (3) facebook (86) Gears/sqlite (27) git (10) google (101) Google Ajax Search API (4) Google App Engine/Python (338) Google Chart Tools (7) GoogleCodeProjectHosting (22) Goo
jQuery ã使ã£ã¦ ãã¯ãªãã¯ãããæã«å·¦ãªãè¦ç´ ãæ¶ãã¦ãå³ãªãä½ãããªããã ã¨ããåä½ãããããã¨æã£ããæ¥æ¬èªã ã¨æ¤ç´¢ãã¦ãããã«çããåºã¦ããªãã£ãã®ã§ãã¾ã stackoverflow ãã解説ãç´¹ä»ãã¾ãã å®éã®ã³ã¼ãããã¡ãã $('#element').mousedown(function(event) { switch (event.which) { case 1: alert('Left mouse button pressed'); break; case 2: alert('Middle mouse button pressed'); break; case 3: alert('Right mouse button pressed'); break; default: alert('You have a strange mouse'); } });
ãµã¼ãã¹çµäºã®ãç¥ãã ãã¤ãYahoo! JAPANã®ãµã¼ãã¹ããå©ç¨ããã ãèª ã«ãããã¨ããããã¾ãã ã客æ§ãã¢ã¯ã»ã¹ããããµã¼ãã¹ã¯æ¬æ¥ã¾ã§ã«ãµã¼ãã¹ãçµäºãããã¾ããã ä»å¾ã¨ãYahoo! JAPANã®ãµã¼ãã¹ããæ顧ãã ããã¾ãããããããããé¡ããããã¾ãã
jQuery ã使ã£ã¦ããã¨ï¼HTMLElementã¯ã»ã¨ãã©ä½¿ããªãã®ã§ï¼åå¨ãå¿ãããã«ãªãã¾ãï¼ãããããã¾ã«å è¦ç´ ãåç §ãã¦å¤ãè¦ããï¼ã¨æãã¨ããEventãAddãããã¨æãã¨ããããã¾ãï¼ å HTMLè¦ç´ ãåå¾ããæ¹æ³ jquery#get ã使ãã¾ã ä¾ jQuery("#menu").get() //=> ã»ã¬ã¯ããããè¦ç´ ãå ¥ã£ãé åãä¸ã¤ã§ãé åã«å ¥ãã¦è¿ã jQuery("#menu").get(0)//ä¸ã¤ç® åç § http://api.jquery.com/get/ ã¨ã³ã³ã¾ã§æ¸ãã¦çµããã ã£ããã§ããï¼ äºä»¶çºç ãã©ã¦ã¶ãã¨ã«jQuery ã®æåãéããã§ã ãã©ã¦ã¶ãã¨ã«jQueryã®çµæã®è¡¨ç¤ºãéãã¾ãï¼ chrome safari opera firefox ã¾ã¨ãã㨠|ãã©ã¦ã¶|$(ã»ã¬ã¯ã¿)ã®æ»ãå¤|HTMLElementãåãã«ã¯| |chro
æ®æ®µã¯ $j(â#nameâ).val()ã®ããã«åã£ã¦ã¾ãããã ãã§ãã¯ããã¯ã¹ã¨ã©ã¸ãªãã¿ã³ã«ã¤ãã¦ã¯å¥ã®æ¸ãæ¹ãå¿ è¦ã¿ããã 以ä¸ãä¾ <form> <input name=âidâ type=âhiddenâ /> <select name=âprefâ> <option value=â1â³>NY</option> <option value=â2â³>LA</option> <option value=â3â³>SF</option> <option value=â4â³>CH</option> <option value=â5â³>FL</option> <option value=â6â³>IN</option> </select> <input name=âcolorâ type=âradioâ value=â1â³ />male <input name=âco
var result = $('#hoge').is(':visible');ã// true or false
<input type="radio" name="hoge" value="1"> <input type="radio" name="hoge" value="2"> <input type="radio" name="hoge" value="3">ä¸ã®ãããªã©ã¸ãªãã¿ã³ãããæã«ãé¸æããã¦ããvalueãåå¾ããæ¹æ³ã $("input[name=hoge]:checked").val() æ¬å½ã¯ãã£ã¨è¯ãããæ¹ãããã®ãããããªãããã©ãä½ç³»çã«åå¼·ãã¦ããæéããªãã ä»ä½ã£ã¦ãããµã¼ãã¹ã®å®æã®ããã«ã¨ã«ããåãç¶æ ãç®æãã¦ããã®ã§ãå¤å°ã®ç¡çç¢çæã¯è¨±å®¹ã
Google ã®ã¦ã§ããã°å ¬éãã¼ã«ã使ã£ã¦ãããã¹ããåçãåç»ãå ±æã§ãã¾ãã
2010/12/10ãã³ã¼ã¹ï¼å ç¥ãã£ã¦ã ãå ç¥ãã£ã¦ããè¨äºã¯ãããã¨ã¼ã¸ã§ã³ãæ§ããã°[netagent-blog.jp]ã«æ²è¼ããã¦ããè¨äºã§ãããç¾å¨ãããã¨ã¼ã¸ã§ã³ãã«å¨ç±ãã¦ããªãã©ã¤ã¿ã¼ã®è¨äºãå«ã¿ã¾ãã IE8+jQueryã«ããã¯ãã¹ãã¡ã¤ã³éä¿¡ã¨XDomainRequestã©ããã¼ã®ä½æ ããã«ã¡ã¯ããããã¨ã¼ã¸ã§ã³ãæ ªå¼ä¼ç¤¾ãç 究éçºé¨ã®é·è°·å·ã§ãã ãã£ããã§ãããã¿ãªããã¯ãAdvent Calendarãããåãã§ããããï¼ãAdvent Calendar ã¨è¨ãã°ãä¸è¬çã«ã¯ãã¯ãªã¹ãã¹ï¼12æ25æ¥ï¼ã¾ã§ã®æ®ãæ¥æ°ãã«ã¦ã³ããã¦ã³ããã«ã¬ã³ãã¼ãæãæµ®ãã¹ãããããã¾ããããããã§ç´¹ä»ãã Advent Calendar ã¨ã¯ãæ§ã ãªæ¥çãæè¡æ¹é¢ã§æ´»èºããã¦ããããã°ã©ãæå¿ããæ¯æ¥äº¤ä»£ã§1ã¤ãã¤æè¡çãªãããã¯ã¹ãç´¹ä»ããæè¡ç³»Webã¤ãã³ãã®ãã¨ã§ã
ååãç§ã¯ã¾ã ã§ãããã¨æ¸ãã¾ãããããã®æ¥ã®ãã¡ã«æ°æ¸©ä¸ãã£ãï½ ããã§ã¡ãã£ã¨éããããããªã£ããããâ¦èçã§å¯ã¦ã¦ã¡ãã£ã¨é¢¨éªå¼ãããã«ãªã£ãã®ã¯å ç·(ã»Ïã») æ¬é¡ã ã¯ãã¹ãã¡ã¤ã³ã§ã®éåæéä¿¡(XMLHttpRequest Level2)ãGoogle App Engineã§å®è£ ããã®ã§ã¡ã¢ãã¯ã¾ã£ããã¤ã³ããããã¤ãæ¸ãã¦ããã¾ãã ç¹ã«ããã£ãã®ã¯åºåãããå¨ãã Access-Control-Allow-Origin ããã¯ãã¡ãã¡ã®ãµã¤ãã«æ¸ããã¦ã¾ããããã®ããããã*ãã§åºåãã¦ãããã¨ä»ãã¡ã¤ã³ããã®éä¿¡ãåãä»ããããã«ãªãã¾ããã»ã»ã»ããããã ããããã¡ãªãã§ãã Access-Control-Allow-Methods ããã¤ãæå®ãã¦ãããªãã¨ãµã¼ãã¼ãåãä»ãã¦ããã¾ãããGETãªãGETãPOSTãªãPOSTã»ã»ã»ã¨æå®ãã¦ãããªãã¨ããã¾ãããããã¯
解説 ã¢ãã¡ã¼ã·ã§ã³ã®ãã¬ã¼ã ã¬ã¼ããè¨å®ããããããã£ã§ãã æå®ãããããªç§æ¯ã«ã¢ãã¡ã¼ã·ã§ã³å¦çãèµ·åãã¾ããããã©ã«ãã§ã¯ 13 ããªç§ã§ãã ãã®ããããã£ã«å°ããæ°å¤ãè¨å®ããã¨ãChrome ã®ãããªé«éãªãã©ã¦ã¶ã§ã¯ãã¢ãã¡ã¼ã·ã§ã³ãæ»ããã«åãããã«ãªãå¯è½æ§ãããã¾ãã ãã®ããããã£ã«å¤§ããæ°å¤ãè¨å®ããã¨ãã¢ãã¡ã¼ã·ã§ã³å¦çã大ããééã§èµ·åããããã«ãªããããã«ã¯ã«ã¯ããåãã«ãªãã¾ãã è¨å®å¤ / æ»ãå¤ Number: ã¢ãã¡ã¼ã·ã§ã³å¦çãèµ·åããéé(ããªç§)ã ä¾ ä¾1:ããã¹ãããã¯ã¹ã«ã¢ãã¡ã¼ã·ã§ã³å¦çãèµ·åããéé(ããªç§)ãå ¥åããè¨å®ãã¿ã³ãæ¼ãã¨ãjQuery.fx.interval ã®å¤ãè¨å®ãã¾ãã å®è¡ãã¿ã³ãæ¼ãã¨ãã¢ãã¡ã¼ã·ã§ã³ãã¾ããè²ã ãªå¤ãå ¥åãã¦ãã¢ãã¡ã¼ã·ã§ã³å¦çã®éãã確èªãã¦ã¿ã¦ãã ããã $("#run").click
<p>there friend!</p> <p>amigo!</p> $("p").prepend("<b>Hello </b>");
JavaScriptãæå¹ãªãã¼ã¸ã§ãã¿ã³ãã¯ãªãã¯ããã¨ãonClick ã¤ãã³ããçºçããã ãã¿ã³ãé£æããã¨ãFirefox ã Google Chrome ã§ã¯ onClick ã¤ãã³ããæ¼ãç¡ãåå¾ã§ããã ããããInternet Explorer ã§ã¯ã1ç§éã«1åããããã onClick ã¤ãã³ããåå¾ã§ããªãã onClick ã¤ãã³ãåå¾æ¼ãã®å¯¾çæ¹æ³ã¯ç°¡åã§ãonClick ã¤ãã³ãã®ä»£ããã« onMouseUp ã¤ãã³ããåå¾ããã°ããã onMouseUp ã¤ãã³ããªããInternet Explorer ã§ãã¿ã³é£æãã¦ããã¡ãã¨æ¼ãç¡ãåå¾ã§ããã ãã ããonClick ã¤ãã³ãã¯ãã¿ã³ã«ãã©ã¼ã«ã¹ã㦠Space ã Enter ãã¼ãæ¼ãã¦ãçºçãããã onMouseUp ã¤ãã³ãã¯ãã¼ãæ¼ãã¦ãçºçããªãã onMouseUp ã¤ãã³ããåå¾ãã
Events/jQuery.Event jQueryã®ã¤ãã³ãã·ã¹ãã ã¯ãW3Cæ¨æºã«æºæ ããå®è£ ã«ãªã£ã¦ãã¾ããã¤ãã³ããªãã¸ã§ã¯ãã¯jQueryã®ã¤ãã³ããã³ãã©ã¼ã«ç¢ºå®ã«æ¸¡ããã¾ããï¼ã³ã¼ã«ããã¯é¢æ°ã«å¼æ°ã¨ãã¦æ¸¡ããããwindow.eventãªã©ããåå¾ããã¿ã¤ãã®ãã©ã¦ã¶ã§ãã£ã¦ãããã®ãããªãã§ãã¯ã¯å¿ è¦ããã¾ããï¼ ãªãªã¸ãã«ã®ã¤ãã³ããªãã¸ã§ã¯ããæã¤æ®ã©ã®ããããã£ã¯ããã®ãªãã¸ã§ã¯ãã«ã³ãã¼ããã¾ãã ãã®ãªãã¸ã§ã¯ãã®ã³ã³ã¹ãã©ã¯ã¿ãå ¬éããã¦ãããtriggerãå¼ã¶éã«ç¨ãããã¾ãã ã³ã³ã¹ãã©ã¯ã¿ã§ã¯ããã¾ãããnewãªãã¬ã¼ã¿ã¯ãã£ã¦ããªãã¦ãæ§ãã¾ããã ã©ããã£ãå ´é¢ã§Eventãªãã¸ã§ã¯ããä½æããã®ãã¯ãtriggeré¢æ°ã®ããã¥ã¡ã³ããåç §ãã¦ä¸ããã Example: jQuery.Eventã new ãã¤ããã«ä½æãã var e = jQu
checkboxãcheckããã¦ããã©ãããå¤å¥ããã¡ã½ããã£ã¦jQueryå´ã«ç¨æããã¦ãªããã§ãããã twitterã§ãè²ã æãã¦ããã£ããã©æ¹æ³ã¨ãã¦ã¯3ã¤ãããããªã¼ã https://twitter.com/kyo_ago/status/11685019866 https://twitter.com/songmu/status/11675950113 https://twitter.com/rea/status/11675545507 ç´ ã®HTMLã¨ã¬ã¡ã³ãããåå¾ var checked = $('#elem').get(0).checked; ãã£ããjQuery使ã£ã¦ãã®ã«ã¨ããæããããªããªãããããã¯ãªãããªã is()ã§åå¾ var checked = $('#elem').is(':checked'); ãããä¸çªç´æçã§ã¯ãããããã§ããã£ã¡ãããæ°ãããã
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}