Category Archives: jquery

「jQuery入門」scrollTop()でスクロール位置取得サンプルコード

1.JSコード
<script type=”text/javascript”>
$(document).ready(function(){
$(“.btnAA”).click(function(){
$(“div”).scrollTop(120);
});
$(“.btnBB”).click(function(){
alert($(“div”).scrollTop()+” px”);
});
});
</script>

2.htmlコード
<div style=”border:1px solid black;width:200px;height:200px;overflow:auto”>
テストデータ
</div>
<button class=”btnAA”>テストA</button>
<br />
<button class=”btnBB”>テストB</button>
</body>
</html>

「jQuery入門」.find()、.next()と.parents()の使い方

1.子要素の指定– .find()
<div class=”abc”>
<div class=”a11″>
<div class=”a12″>
<p>test data122</p>
</div>
</div>
</div>

$(‘.abc’).find(‘p’);

2.兄弟要素の指定– .next()
htmlコード
<ul>
<li>21</li>
<li>22</li>
<li class=”def”></li>
<li>23</li>
</ul>

JSコード
$(‘.def’).next();

3.親要素の指定– .parents()
htmlコード
<div>
<p>
<span>122333</span>
</p>
</div>
JSコード
$(‘span’).parents(‘div’);

4.thisの親要素や子要素の指定
$(this).parent();
$(this).children(‘p’);

「jQuery入門」before(), after(), prepend(), append()の使い方

1.htmlコード
<div id=”jstest”>要素挿入テスト</div>

2.JSコード
$(function(){
$(‘#jstest’)
.before(‘<div>11</div>’)
.after(‘<div>22</div>’)
.prepend(‘<p>33</p>’)
.append(‘<p>44</p>’);
});
3.実行結果
<div>11</div>
<div id=”jstest”>
<p>33</p>
要素挿入テスト
<p>44</p>
<div>22</div>

「jQuery入門」propでチェックボックスを全選択、全解除する

1.htmlコード
<div class=”cftAll”>
<input type=”checkbox” id=”cftAllPA”><label for=”cftAllPA”>全選択・全解除</label>
</div>
<div>
<input type=”checkbox” id=”chkAA”><label for=”chkAA”>項目PA</label>
<input type=”checkbox” id=”chkBB”><label for=”chkBB”>項目PB</label>
</div>

2.JSコード
$(‘.cftAll input,.cftAll label’).click(function(){
var elements = $(this).closest(‘.cftAll’).next().find(‘input’);
if($(this).is(‘:checked’)) {
$(elements).prop(‘checked’, true);
} else {
$(elements).prop(‘checked’, false);
}
});

「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 {
// 表示処理
}