!!!jQuery Tips [jQuery][JavaScript] *リファレンス http://docs.jquery.com/Main_Page *リファレンス(日本語) http://semooh.jp/jquery/ *入門 http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.3.1/index.html !!!ロジック !!文字列操作 !トリミング var s = $.trim(s); !!繰り返し !each() からの脱出 ::オブジェクトの内容がブランクか判定 *each()からは、return false で脱出できる(関数は抜けない) function isBlank(input) { if (input == null) { return true; } if ($.type(input) == "string") { return ($.trim(input) == ""); } var flg = true; $(input).each(function(){ var obj = $(this); if ($.trim(obj.val()) != "" || $.trim(obj.text()) != "") { flg = false; return false; } }); return flg; } !!!機能 !!読み込み中メッセージを表示 ::html
::style ::表示 $("#loading").show("normal"); ::消す $("#loading").hide("normal"); ::例 {{ref_image jquery_msg_win01.jpg}} !!!配列 !!配列に値が存在するか調べる *http://api.jquery.com/jQuery.inArray *存在しない場合、-1 $.inArray("val",array); !!配列を変換 *jQuery.map var newArray = $.map(array, function(val,index){ return parseInt(val.trim()); }); !!!Ajax !!エラーの場合、レスポンスボディ(たとえばXML)は jqXHR.responseText から取得 $.ajax({ url:url, success: function(data, textStatus, jqXHR) { : }, error:function(jqXHR, textStatus, errorThrown) { var xml = jqXHR.responseText; if (xml != null) { alert(xml); } else { alert(errorThrown); } } : ""ただし、XMLが文字列として取得されるので、jQuery でXMLとして利用するには、DOMへの変換が必要 ::XML文字列をDOMに変換するライブラリ *http://outwestmedia.com/jquery-plugins/xmldom/ !!よくわからないHTTPステータスコードでエラーとなることがある *WinInet のエラーの可能性 http://support.microsoft.com/kb/193625 12029 ERROR_INTERNET_CANNOT_CONNECT he attempt to connect to the server failed. !!Httpリクエストヘッダーを設定する *http://api.jquery.com/jQuery.ajax/ *beforeSendを利用する $.ajaxSetup({ beforeSend: function(xhr) { xhr.setRequestHeader("If-Modified-Since", "Thu, 01 Jun 1970 00:00:00 GMT"); } }); !!!UI !!Dialog を自動で閉じる *http://jqueryui.com/demos/dialog/ var dialog = $("#dlg_message"); dialog.dialog("open"); setTimeout(function(){ if (dialog.dialog("isOpen")) { dialog.dialog("close"); } }, 800); !!Accordion UI をすべて展開状態にする ::Accordion UI をすべて展開状態にすることには対応していないため、独自に実装する *http://docs.jquery.com/UI/API/1.8/Accordion ::例 *http://jsbin.com/eqape $("#hoge_panel").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset") .find("h3").addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom") .hover(function() { $(this).toggleClass("ui-state-hover"); }) .prepend('') .click(function() { $(this) .toggleClass("ui-accordion-header-active ui-corner-bottom") .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end() .next().toggleClass("ui-accordion-content-active").slideToggle(); return false; }).next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").show() ; !!Accordion UI 内容の高さを制御する *heightStyle を 設定する。 *http://api.jqueryui.com/accordion/#option-heightStyle $(".selector").accordion({"heightStyle":"content"}); !!ローディングアイコンをなるべく画面の中央に表示 $("#loading").css({ function() { return $(window).innerWidth() / 2;}, top : function() { return $(document).scrollTop() + $(window).innerHeight() / 2; } }); $("#loading").show(); !!!DOM !!jQueryオブジェクトからDOMオブジェクトを得る var domObj = jObj.get(0); !!!HTML !!選択されたラジオボタンの value を取得する。 var sel_val = $("input:radio[@name='radio_button_name']:checked").val(); !!複数マッチした要素から、特定の要素を取得する。 *http://api.jquery.com/category/traversing/ var first_h2 = $("h2").first(); !!IEで動的にセレクトボックスの項目を変更できない ::IEで正しく動作しない $("option","#selectboxId").each(function(){ if ($(this).val() == targetCode) { $(this).text(newName); } }); ::DOMを操作する(IEでもOK) var selectBox = document.getElementById("selectboxId"); for (var i=0; i