jQuery
- ITIL -ファンデーション認定資格の対策はこちら - シスコ CCNA対策はこちら - Javaプログラミング、サーブレット、JSPのまとめはこちら
|
ｊQueryについてのまとめサイト。プラグインのリファレンスやサンプルでなく、AJAXやメソッドチェーンでJavaScriptを書いていくやり方を速習、入門用として覚えられるようにしています。 ■jQuery --------------------------- jQuery(または$)でjQueryオブジェクトをあらわす $ショートカットと呼ぶ thisをjQueryオブジェクトとして扱いたい場合は，$(this)とラッパする ■実行 --------------------------- $(function(){ /*HTMLロード後に実行したい初期化コード*/ }) $(document).ready(function(){ /*上と同じ*/ }) ■匿名関数 --------------------------- $(function(){ $("#myDiv").css("color",red); }); ■関数 --------------------------- $(ini1); function ini1(){ $("#myDiv").css("color","red") } $(function(){ ini1() }); function ini1(){ $("#myDiv").css("color","red") } $(function() {alert(1)}) $("#btn1").click(function(){ $.ini1() }); $.ini1=function () { $("#myDiv").css("color","red") } ■メソッドチェーン --------------------------- jQueryオブジェクトを戻り値として返す関数を繋げて行く function drawRed(selector){ $(selector).css("color","red"); return $(selector); } drawRed("DIV.test").animate({fontSize:"5em"},1000); drawRed("DIV.testClass") .animate({fontSize: "5em"},1000,function(){ $(this).html("bye") }) .fadeOut("slow"); ---------------------------------- jQuery.fn.drawRed = function() { return this.css("color","red"); }; $("DIV.testClass") .drawRed() .animate({fontSize: "5em"},1000 ); ■構造化 CSS --------------------------- <div id="myTest">クリック！！い</div> <script type="text/javascript"> $("#myTest") .css("background","#FFF290") .css("width","120px") .css("height","120px") .click(function () { $(this).slideUp() }); </script> ■セレクタ --------------------------- IDセレクタ $('#mainArea').css("color",red); クラスセレクタ $('.wrapper').css("color",red); *全称セレクタ すべて jQuery("*").css("color","#888"); 子孫セレクタ id=test内のbタグすべて $("#test b").css("color","red"); >子セレクタ id=test直下のbタグ $("#test > b").css("color","red"); +隣接セレクタ id=testの次のDIVタグ jQuery("#test + div").css("color","red"); ~兄弟セレクタ id=testの兄弟のbタグとDIVタグ jQuery("#test ~ b,#test ~ div").css("color","red"); [] 属性セレクタ $('input[type="radio"]').css("color",red); $("[title]","#my1").css("color",red); $("[title!='title付き']","#my1").css("color",red); class属性が「your」で始まる $("[class^=your]","#my1") class属性が「test2」で終わる $("[class$=test2]","#my1") class属性のどこかに「Hoge」という文字列を含む $("[class*=Hoge]","#my1") class属性値の最後が「test2」で、かつ、 class属性値のどこかに「my」という文字列を含む $("[class$=test2][class*=my]","#my1") ,グループ化 id=testの兄弟のbタグとDIVタグ jQuery("#test ~ b,#test ~ div").css("color","red"); フィルタ id=test内のLiタグのはじめの要素 $("#test li:first").css("color","red"); $("#test li:not(first)").css("color","red"); :even 偶数、 :odd 奇数、 :eq(index) イコール、 :gt(index) 大なり、 :lt(index) 小なり、 :header <H>見出し要素、 :animated アニメーション中、 :contains(text) textを含む、 :empty 子要素を持たない、 :has(selector) selectorの要素を持つ、 :parent 子要素を持つ(つまり親である)、 :hidden、 :visible ■フォーム --------------------------- フォームセレクタ :input すべてのinput,textarea,selectやbuttonなどのForm要素 :text type属性がtextなすべてのinput要素 :password type属性がpasswordなすべてのinput要素 :radio type属性がradioなすべてのinput要素 :checkbox type属性がcheckbox なすべてのinput要素 :submit type属性がsubmit なすべてのinput要素 :image type属性がimage なすべてのinput要素 :reset type属性がreset なすべてのinput要素 :button button 要素とtype属性がbutton なすべてのinput要素 :file type属性がfile なすべてなすべてのinput要素 :hidden すべてのhiddenしている要素とtype属性がhiddenなすべてのinput要素 フォームフィルタ :enabled 使用可能な要素 :disabled 使用不可な要素 :checked チェックされた要素 :selected 選択された要素 $("form :input","#test1").css("background-color","#fff398"); チェックを入れる $("form :radio","#test2")[0].checked=true; $("form :checkbox","#test2")[2].checked=true; マウスホバー時の画像書き換え $("form :image","#test1").hover( function(){ $(this).attr("src","btn2.gif") }, function(){ $(this).attr("src","btn1.gif") } ); 入力してキーを放すと動作します $("form :text","#test1").keyup( function(){ //テキストフィールドの文字列を取得 var text =$("form :text","#test1") .get(0) .value; //入力されたらボタンを使えるようにする if( text != "" ) $("form :button","#test1") .attr("disabled",""); } ); $("form :file","#test1") //ボタンを使用可能にします .attr("disabled","") //選択ファイルが変わったらファイル名を表示 .change(function(){ alert("選択したファイル \n"+this.value); }); $("form :enabled","#test1") .val("入力してください") .focus(function(e){ $(this).val("") }); ■$("CSS文字列", コンテキスト) コンテキスト内でのフィルタ --------------------------- <div id="test"> <div id="myID">myID</div> <div class="myCLASS">myCLASS</div> <p>myP</p> <b>myB</b> <li>myLI</li> </div> id=test要素内全て jQuery(function($){ $("*","#test").click(function(event){ $(this).css("color","orange") }) }); id=test要素内から、""内のカンマで区切って列挙したすべての要素 jQuery("#myID,.myCLASS,P,LI","#test") .css("color","green"); ■エフェクト --------------------------- show() hide() toggle() slideDown() slideUp() slideToggle() fadeIn() fadeOut() animate() $("#change_h").animate({height: "30px"}); 指定された要素の表示・非表示を切り替えます $("#testId").toggle(); ■メソッド DOM系 --------------------------- DOM要素をHTMLで取得，もしくは指定したHTMLに差し替えます $("#testId2").html(); $("#testId2").html("hoge<b>hoge</b>") ; 全てのDOM要素のテキストコンテンツをつなぎ合わせた文字列を返します $("#testId2").text() ラジオボタンの値を取得もしくは設定します $('input[name="changer"]:checked').val(); attr() removeAttr() addClass() removeClass() toggleClass() 対象のDOM要素を削除します $("#testId3").remove() 対象のDOM要素の子要素の末尾に，指定されたものを追加します $("#testId3").append("hoge<b>hoge</b>") ; 対象の子要素を探し繋げる クリックしたthis内のclass:radio_switchのラジオボタンにチェックを入れる $(this).find('.radio_switch').attr('checked', true); empty() prepend() appendTo() prependTo() before() after() insertBefore() insertAfter() clone() wrap() remove() end() filter() not() next() prev() children() parent() parents() siblings() add() ■メソッド --------------------------- DIVタグの数 $("div").length; $("div", "#MyID").size(); DOM要素を配列で取得します $("div", "#MyID").get()[0]; $("div", "#MyID").get(1); それぞれのDOM要素に対して，指定した関数を実行します var $target = $("#MyID"); $("p", $target).each(function(){ alert( $(this).html() ); }); ■イベント --------------------------- blur、change、dblclick、error、focus、 keydown、 keypress、 keyup、 load、 mousedown、 mousemove、 mouseout、 mouseover、 mouseup、 resize、scroll、 select、 submit、unload http://api.jquery.com/category/events/ $("#mainArea").click(function(){ //ここにクリックされた時のスクリプト }); one(event,関数) 最初の1回だけalertがポップアップ $("#MyID").one('click', function(){ alert( "clicked!" ); }); hover(関数1,関数2) マウスオーバで関数1が呼び出されマウスアウトで関数2が呼び出されます $("#MyID").hover(function(){ $(this).addClass("background_red"); }, function(){ $(this).removeClass("background_red"); }); toggle(関数1,関数2) 対象オブジェクトがクリックされるたびに，関数1，関数2を交互に呼び出します $("#MyID").toggle(function(){ $(this).addClass("background_red"); }, function(){ $(this).removeClass("background_red"); }); bind("イベント名",関数) unbind("イベント名",関数) / unbind("イベント名") trigger("イベント名") ■グローバルイベント --------------------------- ajaxStart(callback)、ajaxSend(callback)、ajaxSuccess(callback)、ajaxError(callback)、ajaxComplete(callback)、ajaxStop(callback) DOM上のどの要素にも設定でき、AJAX通信が行われる際に呼び出されます。例えば通信中のローディング画像#loadingを出したいのであれば、次のような処理が考えられます。 $("#loading").bind("ajaxSend", function(){ $(this).show(); }).bind("ajaxComplete", function(){ $(this).hide(); }); この処理はどのAJAX通信でも呼び出されますが、中にはこういったGlobal Eventsを動かしたくない通信もあるかもしれません。そういった場合には、通信毎にglobalオプションを切り替えることで、実行を抑制することができます。 $.ajax({ url: "test.html", global: false, ... }); ■ユーティリティ関数 --------------------------- $.each(オブジェクト/配列,関数) オブジェクトまたは配列の全ての要素に対して，指定した関数を呼び出します $.each({ key1: "value1", key2: "value2" }, function(i){ alert( "引数: " + i + "\n値: " + this ); }); var data = [1,2]; $.each(data, function(i){ alert( "配列[" + i + "] = " + this ); }); $.extend(オブジェクト1,オブジェクト2) オブジェクト1にオブジェクト2の内容を加えます 同じものは上書き var settings = { key1: 1, key2: 2 }; var add = { key2: "あ", key3 : "い" }; $.extend(settings, add); $.grep(配列,関数,反転フラグ) 配列の各要素に対して関数を実行しその返り値が正のとき配列から要素を取り出します、反転フラグがtrueの場合誤のとき取り出します var data = [1,2,3,4]; var data2 = $.grep(data, function(i){ return (i % 2 == 0); }); $.map(配列,関数) 配列の各要素に対して関数を実行し，その関数の戻り値の配列を返します 関数がundefinedを返した場合は戻り値には含まれません 関数が配列を返した場合は，配列オブジェクトではなく，それぞれの値が戻り値の配列に追加されます var data = [1,2]; var data2 = $.map(data, function(i){ return [i*10, i*100]; }); $.merge(配列1,配列2) 指定された2つの配列をマージします var data1 = [1,2]; var data2 = [3,4]; var mergedata = $.merge(data1, data2); $.trim(文字列) 文字列の前後にある空白を取り除いた文字列を返します タブ、全角半角空白 var str = "\tこんにちは\n"; str = $.trim(str); ■参考URL --------------------------- http://jquery.com/ http://semooh.jp/jquery/ http://www.mikage.to/jquery/jquery_ref.html http://allabout.co.jp/internet/javascript/closeup/CU20080510A/index3.htm |
■Ajax (Basic AJAX) --------------------------- $.get(url,params,callback) $.post(url,params,callback) タイムアウト Ajax系のタイムアウトは $.ajaxSetup() 関数で指定できます 0を指定した場合は，タイムアウト処理を行いません． デフォルトでは0が設定されています $.ajaxSetup({ timeout: 2000 //単位はms }); load(url,params,callback) paramsを指定した場合はPOSTメソッド，指定しない場合はGETメソッド ステータスは，"success" か "error" のどちらか $("#target_ref_ajax_load").load("hello.html", function(html, status){ alert( "html: " + html + "\nstatus: " + status ); }); load( url +セレクタ ) msg2.txtを読み込んで その中のクラス名が.myloadの要素を選択 $("#a") .click(function () { $("#my1").load( "./msg2.txt .myload" ); }); サーバー側./msg2.txt <div class="myload">.myloadです</div> <div class="yourload">.yourloadです</div> load( url, data ) 第2引数でデータを渡します $("#a") .click(function () { $("#my1").load( "./msg.php" ,{ test1:"データ1", test2:"データ2" }); }); サーバー側 ./msg.php <?php $Data1 = $_POST['test1']; $Data2 = $_POST['test2']; ?> load( url, data, callback ) 第3引数は、受信完了時に起動するコールバック関数 $("#a") .click(function () { $("#my1").load( "./getnow.php", { type : this.id }, function(){ //thisは#my1 $(this) .css({background:"yellow"}) }); }); <?php $type = $_POST['type']; echo $type . 'is here'; ?> Ajaxリクエストが実行中になったときに ajaxStart のコールバックが呼び出され， 全てのリクエストの実行が完了したときに ajaxStop のコールバックが呼び出されます． 同時に複数のリクエストが実行された場合，ajaxStart/ajaxStopは最初と最後に1回ずつ呼び出されます． ajaxComplete / ajaxError / ajaxSuccess は，Ajaxリクエストが完了・失敗・成功したときにリクエスト毎に呼び出されます． 1回のリクエストで，ajaxCompleteが1回と，ajaxError/ajaxSuccessのどちらかが1回呼び出されます 読み込み中にアニメーションを表示させる，等の目的で利用できます $("#loading").ajaxStart(function(){ $(this).show(); }); $("#loading").ajaxStop(function(){ $(this).hide(); }); ■$.ajax --------------------------- //xhr、beforeSend、dataFilter、success、completeの順に出力 $("#btn1","#my1") .click(function () { $.ajax({ url: "test1.txt", type:"POST", cache:false, ifModified:true, timeout : 1000, data:{data: "あいう"}, scriptCharset:"UTF-8", jsonp : "fnc1", dataType : "jsonp", username:$('#name').val(), password:$('#pwd').val(), beforeSend:function(XHRoj){ $("#msg").append("<hr><b>beforeSend</b>"); }, error:function(XHR, status, errorThrown){ $("#msg").append(status); }, success: function(msg,textStatus){ $("#msg").append("<hr>success : "+msg); $("#msg").append(json.fnc1); }, complete: function (XHRoj, textStatus) { $("#msg").append("<hr>complete"); }, xhr: function () {$("#msg").append("<hr>xhr"); return $.ajax() }, dataFilter: function (data, type) { $("#msg").append("<hr>dataFilter"); return 1 } }); }); ■$.ajax() の引数optionのキー一覧 --------------------------- async boolean 非同期通信ならtrue(初期値) cache Boolean (jQuery 1.2以降)通信結果をキャッシュするならtrue(初期値) 「url?$_=xxxx」のランダム文字列が付く ifModified Boolean Last-Modifiedヘッダによる変更チェック timeout Number タイムアウト時間をミリ秒で設定。 global Boolean Global Eventsを実行するか。通常はtrue(初期値) 。ajaxStart(callback)、ajaxSend(callback)、ajaxSuccess(callback)、ajaxError(callback)、ajaxComplete(callback)、ajaxStop(callback) contentType String content-typeヘッダ値。初期値は"application/x-www-form-urlencoded type String "POST"か"GET"(初期値) url String リクエストを送信する先のURL。 data Object, String サーバへ送信する値。 「url?data=xxxx」というGETの書式で送出 processData Boolean dataに指定したオブジェクトをクエリ文字列に変換(encodeURI)するならtrue(初期値) username String 認証が必要な時に、ユーザ名を指定。 password String 認証が必要な時に、パスワードを指定。 dataType String サーバから返されるデータの型。"xml"、"html"、"text"、"script"、"json"、"jsonp"など。 scriptCharset String スクリプトを読み込む際のキャラセットを指定。 jsonp String JSONPリクエストで使用するコールバック関数のパラメータ名を設定します。何も指定をしないと"callback"になります。例えjsonp: 'onJsonPLoad'と指定すれば、実際のリクエストには onJsonPLoad=[関数名]が付与されます beforeSend Function リクエストが送信される前に呼ばれるAjax Event error Function 通信失敗時に呼び出されるAjax Event success Function 信が成功した場合に呼び出されるAjax Event complete Function 通信完了時に呼ばれる関数 dataFilter Function XMLHttpRequestによる戻りデータをフィルタリング xhr Function XMLHttpRequestオブジェクトを作成するためのコールバック関数。(jQuery1.2.6以前では利用できません) XMLHttpRequestの略 一般的なAjaxのXMLHttpRequestオブジェクトでは別ドメインへのアクセスができません scriptやjsonpなどを利用することで、別ドメインのデータを受信することも可能 ■getJSON( url, data, callback ) --------------------------- $("#test") .click(function () { $.getJSON( "./msg.js", function(data){ $("#my1").html( data.year + " 年の " + data.msg ); } ); }); サーバー側のJSONデータ ./msg.js {"year" : 2009,"msg" : "こんにちは"} getJSONで外部サイトからJSON jQuery1.2以降urlへ「&callback=?」をつけることで、別ドメインにあるJSONPコールバックを自動処理できる var url="http://api.wassr.jp/channel_message/list.json?name_en=jquery&callback=?" $("#test") .click(function () { $.getJSON( url , function(data){ $.each(data , function(i,item){ //5件 if(i<=5)$("#my1").append( item.body + "<br>" + item.nic + "<font size='-1'>"+ item.created_on +"</font>" +"<hr>" ); }) } ); }); サーバー側のJSONデータ サンプル http://api.wassr.jp/channel_message/list.json?name_en=jquery&callback JSONデータには改行を含むと上手く動作しない？？(見易さのために,後に改行するとエラーが) [ {"favorites":[], "body":"ちょっとテスト。", "html":"ちょっとテスト。", "created_on":"Tue, 18 Aug 2009 11:43:03 +0900", "user":{"profimg_last_updated_at":1215140156, "profile_image_url": "http://wassr.jp/user/tato/profile_img.png.32.1215140156", "nick":"toshirot","login_id":"tato"}, "channel": {"title":"jQuery","name_en":"jquery","onmitsu_fg":"0"}, "rid": "kyAaKfX1OL", "photo_url":null }, {"favorites":[], "body":".... ] ■getScript( url, callback ) --------------------------- jQuery1.2以降、別ドメインでも読み込むことが可能 msg.js側でojと言う名前のグローバルオブジェクトを作って受け取っています var url="http://game.gr.jp/about/cu/CU20090820A/msg.js"; $("#test") .click(function () { $.getScript( url, function(){ $("#my1").html( oj.year + " 年の " + oj.msg ); } ); }); 別ドメインサーバー側のJavascriptデータ ./msg.js var oj={ year : 2009, msg : "こんにちは" } ■サンプルプログラムAJAX データ送信 --------------------------- <div> <button id="btn1">ボタン</button> <div id="msg"></div> </div> <script type="text/javascript"> var url="./msg2.php"; //Ajax処理用メソッドを作成 $.detaTest=function (data) { $.ajax({ type:"POST", url: url, data:data, success: function(msg,status){ $("#msg").append(msg); } }); return false; } jQuery(function($){ //ボタンクリックで実行 $("#btn1").click(function(){ $.detaTest({"data[]":["かきく","けこ"]}) }); }); </script> <?php $parm=$_REQUEST["data"] ; $msg="サーバーは今--"; if (is_array($parm)){ foreach( $parm as $ary ){ $msg.= $ary ; } } else { $msg.= $parm ; } $msg.="--を受信しました"; $msg=htmlspecialchars($msg); echo($msg); ?> ■サンプルプログラムAJAX プログレスバー --------------------------- <style type="text/css"> #loading{ background:gold; border:2px solid #eee; width:0px; height:12px; display:none; } </style> <div> <p> <button id="c" class="jsbuttons">click</button> </p> <div id="loading"></div> <div id="msg"></div> </div> <script type="text/javascript"> jQuery(function($){ $("#loading") .bind("ajaxSend", function(){ $(this) .show() .animate({ width: 600 },5000) }) .bind("ajaxSuccess", function(){ $(this).stop().fadeOut() .css("width","0px") }); $("#c") .click(function () { $.ajax({ global:false, url: "./sleep2.php", beforeSend :function(XHR){ $("#msg").empty(); }, success: function(msg,status){ $("#msg").append(msg); } }); }); }); </script> サーバー側 <?php sleep(2); echo("2秒待って返事しました"); ?> ■サンプルプログラム基本 --------------------------- <script type="text/javascript"> jQuery( document ).ready( function() { if ( jQuery( "input[@name='m_price_all']:checked").val() == undefined ) { var val = "on"; } else { var val = jQuery( "input[@name='m_price_all']:checked").val(); } show(val); jQuery( ".slider_price").click( function() { show( jQuery(this).val() ); }); }); function show( val ) { if( val == "on" ) { jQuery( ".layout-slider" ).show(); } else { jQuery( ".layout-slider" ).hide(); } } </script> ■サンプルプログラム入力チェック --------------------------- $(function(){ //getJSONを使用 $("textarea").keyup(function(){ var this_input = this.name; var div_err = "#err_" + this.name; if(this.name!='age'){ $.getJSON("./js_check.php",{ type : this.name, data : this.value }, function(data,status){ var specify_input = "input[name=" + this_input + "]"; //alert(data.err); if(data.err=="e"){ $(specify_input).css("background-color","red"); $(div_err).css("color","red"); $(div_err).html(data.msg); }else{ //$(specify_input).css("background-color","transparent"); $(specify_input).css("background-color","#3399FF"); $(div_err).css("color","#3399FF"); $(div_err).html('OK!!'); } } ); } }); //$.ajaxを使用 細かく制御できる $("input").keyup(function(){ var this_input = this.name; var div_err = "#err_" + this.name; $(div_err).css("color","red"); if(this.name!='age'){ $.ajax({ url : "./js_check.php", type : "GET", cache : false, timeout : 1000, data : {type:this.name,data:this.value}, scriptCharset : "UTF-8", dataType : "json", beforeSend:function(XHRoj){ $(div_err).html('通信中'); }, error:function(XHR, status, errorThrown){ $(div_err).css("color","red"); $(div_err).html('通信エラー'); }, success: function(ans,textStatus){ var specify_input = "input[name=" + this_input + "]"; //alert(ans.err); if(ans.err=="e"){ $(specify_input).css("background-color","red"); $(div_err).css("color","red"); $(div_err).html(ans.msg); }else{ //$(specify_input).css("background-color","transparent"); $(specify_input).css("background-color","#3399FF"); $(div_err).css("color","#3399FF"); $(div_err).html('OK!!'); } } }); } }); }); サーバー側 JSONデータには改行を含むと上手く動作しない？？(見易さのために,後に改行するとエラーがでる) {"err" : "e","msg" : "ダメ"} ?> |