12,673
回編集
差分
ナビゲーションに移動
検索に移動
ページの作成:「==jQuery Tips== [jQuery][JavaScript] *リファレンス http://docs.jquery.com/Main_Page *リファレンス(日本語) http://semooh.jp/jquery/ *入門 http://www.o…」
==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");
=====例=====
[[File:0735_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);
}
}
:
<blockquote>ただし、XMLが文字列として取得されるので、jQuery でXMLとして利用するには、DOMへの変換が必要</blockquote>
=====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");
});
[[File:0736_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 : 対象の要素の子(直下の子供のみ)を取得
[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");
=====例=====
[[File:0735_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);
}
}
:
<blockquote>ただし、XMLが文字列として取得されるので、jQuery でXMLとして利用するには、DOMへの変換が必要</blockquote>
=====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");
});
[[File:0736_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 : 対象の要素の子(直下の子供のみ)を取得
© 2006 矢木浩人
