Category Archives: jquery

「jQuery入門」toggleClass()で複数cssを操作するサンプル

①htmlコード
<button id=”testBtn”>テスト</button>

②cssコード
.testAA {
//some code
}
.testBB {
//some code
}

③JSコード
$(function() {
$(‘#testBtn’).on(‘click’, function() {
$(this).toggleClass(‘testAA testBB’);
});
});

「jQuery入門」.keypress()でテキストボックスの変更を検知するサンプル

JSコード
<script type=”text/javascript”>
aa=0;
$(document).ready(function(){
$(“input”).keypress(function(){
$(“span”).text(aa+=1);
});
});
</script>
</head>
<body>
名前: <input type=”text” />
<p>計算:<span>0</span></p>
</body>

「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”)