Category Archives: jquery

「jQuery入門」$(‘td’).click()でクリックされたセルの位置を取得するコード

1.htmlコード
<table border=”1″>
<tr>
<td>test data 1-1</td>
<td>test data 1-2</td>
<td>test data 1-3</td>
</tr>
<tr>
<td>test data 2-1</td>
<td>test data 2-2</td>
<td>test data 2-3</td>
</tr>
</table>

2.JSコード
$(‘td’).click(function(){
var row = $(this).closest(‘tr’).index();
var col = this.cellIndex;
console.log(‘行: ‘ + row + ‘, 列: ‘ + col);
});

「jquery入門」 serialize()とserializeArray()の使い方

サンプルコード:
$(function() {
$(#cftBtn).click(function() {
var params1 = $(#myform).serialize();
var params2 = $(#myform).serializeArray();
console.log(params1);
//name=yamada&sex=false&age=26
console.log(params2);
//[{“name”:”yamada”,”sex”:”female”,”age”:”25″},
{“name”:”suzuki”,”sex”:”male”,”age”:”32″}]
$.ajax( {
type : POST,
url : ${contextPath}/User/doReg,
data : params1,
success : function(msg) {
alert(“success:”+ msg);
}
});
})
})

「jQuery入門」each()で配列の要素を抽出するサンプル

1.htmlコード
<div class=”dataShow”></div>

2.JSコード
$(function() {
var cft = [“data11”, “data22”, “data33”, “data44”, “data55”];
$.each(cft, function(index, element) {
$(‘.dataShow’).append(“インデックス:”+index + ‘要素:’ + element + ‘<br>’);
});

});

「jquery入門」:checkedでチェックされたチェックボックスを取得する

サンプル
$(“input[type=’checkbox’]:checked”)
$(“input[type=’checkbox’]”).filter(“:checked”)

「jQuery入門」モーダルダイアログを表示するサンプル

1.htmlコード
$(‘#testBtn’).click(function(){
$(‘#demo_dialog’).dialog(‘open’);
});
<div id=”demo_dialog”>
IT技術で世界を変わる
</div>

2.JSコード
$(“#demo_dialog”).dialog({
title: ‘jQueryダイアログのサンプル’,
dialogClass : ‘demoClass’,
resizable : false,
modal : true,
buttons : {
“はい” : function() {
//処理コード1
$(this).dialog(“close”);
},
“いいえ” : function() {
//処理コード2
$(this).dialog(“close”);
}
}
});

「jquery入門」css(“visibility”)で要素の表示を判定する

1.$(“.item”).each(function()
{
if ($(this).css(“visibility”) == “hidden”)
{
// 非表示処理
}
else
{
// 表示処理
}
})

2.is(‘:visible’)
if ($(‘#foo’).is(‘:visible’)) {
// 表示処理
} else {
// 非表示処理
}

3.is(‘:hidden’)
if ($(‘#foo’).is(‘:hidden’)) {
// 非表示処理
} else {
// 表示処理
}

「jquery入門」hide()、show()で要素を非表示、表示する

1.hide()で要素を非表示する
htmlコード
<button>click</button>
<p>1234455</p>

JSコード
$(function() {
$(‘button’).click(function(){
$(‘p’).hide();
});
});

2.show()で要素を表示する
htmlコード
<button>click</button>
<p >987654321</p>

JSコード
$(function() {
$(‘button’).click(function(){
$(‘p’).show();
});
});

「jquery入門」input type = “file” の値をリセットする

htmlコード
<button id=”fileClear” onclick=”retVal(‘txt’); return false;”>
クリア</button>
<input type=”file” id=”fileAttach” name=”fileAttach”>

JSコード
$(“#fileAttach”).val(”);

「jquery入門」$(“:checked”)の使い方

1.JSコード
<script type=”text/javascript” src=”/jquery/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.testBtn”).click(function(){
$(“:checked”).hide();
});
});
</script>

2.htmlコード
<button class=”testBtn”>選択</button>

「jQuery入門」$.getJSON() でjson形式データを受け取るサンプル

JSコード
<script type=”text/javascript” src=”/jquery/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$.getJSON(“/example/jquery/ajaxdemo.js”,function(result){
$.each(result, function(i, field){
$(“p”).append(field + ” “);
});
});
});
});
</script>
</head>

<body>
<button>jsonデータ取得</button>
<p>test data</p>