- 追加された行はこのように表示されます。
- 削除された行は
このように表示されます。
!!!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
<div id="loading" style="display:none">計算中・・・</div>
::style
<style type="text/css">
#loading {
position: absolute;
top:200px;
left:200px;
padding: 8px;
background-color:lightyellow;
color: steelblue;
font-size:small;
text-align:center;
width:100px;
}
</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
<div id="hoge_panel">
<h3><a href="#">タイトル 1</a></h3>
<div>test1</div>
<h3><a href="#">タイトル 2</a></h3>
<div>test2</div>
<h3><a href="#">タイトル 3</a></h3>
<div>test3</div>
<h3><a href="#">タイトル 4</a></h3>
<div>test4</div>
</div>
$("#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('<span class="ui-icon ui-icon-triangle-1-s"></span>')
.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<selectBox.options.length; i++) {
if (selectBox.options[i].value == targetCode) {
selectBox.options[i] = new Option(newName, targetCode);
}
}
!!!HTML(テーブル)
!!選択された行のセルのテキストを取得
var tr = $("<tr>")
tr.click(function(){
var cols = $(this).children();
var col0_txt = $(cols[0]).text();
var col1_txt = $(cols[1]).text();
var col2_txt = $(cols[2]).text();
});
!!テーブルの行が選択された時にラジオボタンをONにする。
var tr = $("<tr>")
tr.click( function () {
$("#projects_table tbody tr").removeClass("selected_row");
$(this).addClass("selected_row");
$(this).children("td").children("input:radio").attr("checked","checked");
});
{{ref_image radio_on01.jpg}}
!!属性の設定
*'q'というidの value に test を設定
$('#q').attr('value', 'test');
// OR
$('#q').val('test')
!!テーブルの操作
::Script
// $.getJSON callback
function reload_date(json) {
if ($("#calc_expr_table tbody").length > 0) {
$("#calc_expr_table tbody").remove();
}
$("#calc_expr_table").append("<tbody></tbody>");
$("#calc_expr_table tbody").append(
"<tr><th>プログラムサイズ(KLOC)</th><td>" + json.kdsi + "</td></tr>" +
"<tr><th>工数(PM)</th><td>" + json.effort + "</td></tr>" +
"<tr><th>開発期間(M)</th><td>" + json.tdev + "</td></tr>" +
"<tr><th>プログラムサイズ(KLOC)</th><td>" + json.fsp + "</td></tr>" +
"<tr><th>生産性(KLOC/PM)</th><td>" + json.prod + "</td></tr>"
);
}
::HTML
<table id="calc_expr_table"></table>
!!!CSS
!!クラスの追加
*num_value id の要素のスタイルクラスを num_field に設定
$("#num_value").addClass("num_field");
!!!XML
!!XMLのタグ名を取得する
*http://blog.livedoor.jp/luna666luna/archives/3447449.html
$(xml).each(function(){
$(this).get(0).tagName;
});
!!!プラグイン
*http://plugins.jquery.com/
!!数値書式 jquery-numberformatter
*http://code.google.com/p/jquery-numberformatter/
$("#num_field").format({format:"#,###.00", locale:"us"});
!!角を丸くする jQuery Corner
*http://malsup.com/jquery/corner/
$("#message_area").corner();
!!テーブル操作
*http://www.designwalker.com/2009/09/jquery-table.html
*http://d.hatena.ne.jp/cyokodog/20080720/1216569757
!!Cookie
*http://archive.plugins.jquery.com/project/Cookie
!有効期限を設定する
var serviveDays = 30;
var date=new Date();
date.setTime(date.getTime()+(serviveDays*24*60*60*1000));
$.cookie("key_foo", "value_bar", {expires:date});
!!!API Memo
!!html()
*innerHTML と同じ
!!addClass(class), removeClass(class)
*指定した要素にCSSクラスを追加/削除
!!parent(expr),children(expr)
*parent : 対象の要素の親(先祖をさかのぼる)を取得
*children : 対象の要素の子(直下の子供のみ)を取得