Category Archives: JavaScript

「jQuery入門」blockUI()で要素を指定するサンプル

サンプルコード:
<script>
$(function(){
$(‘#testBtn’).click(function() {
$.blockUI({
message: $(‘#cft’) ,
css: {
border: ‘none’,
padding: ’20px’,
color: ‘#fff’
});
});
$(‘#OK’).click(function() {
$.unblockUI();
//some code
});
$(‘#NG’).click(function() {
$.unblockUI();
return false;
});
});
</script>
<div id=”cft” >
<p>登録しますか?</p>
<input type=”button” id=”OK” value=”登録” />
<input type=”button” id=”NG” value=”キャンセル” />
</div>
<input type=”button” id=”testBtn” value=”テスト” /

「jQUery入門」$.blockUIの使い方

JSコード:
<script>
$(function(){
$(‘#testbtn’).click(function(){
$.blockUI({
message : ‘テストメッセージ’,
css : {
padding : ‘xxx’,
backgroundColor : ‘xxx’,
}
});
$.ajax({
type :”POST”,
async :false,
url: “xxxx”,
//some code
}).done(function() {
// …
}).always(function() {
$.unblockUI();
});
});
});
</script>
<input type=”button” id=”testbtn” value=”テスト” />

「jQUery入門」$(“:checkbox:checked”).parents(“tr”).find()のサンプル

1.Htmlコード
<table>
<tr>
<td><input type=”checkbox” name=”test”></td>
<td><input type=”text”></td><td><input type=”text”></td>
</tr>
<tr>
<td><input type=”checkbox” name=”test”></td>
<td><input type=”text”></td><td><input type=”text”></td>
</tr>
</table>
<input type=”button” value=”テスト”>

2.jqueryコード
$(function(){
$(“:button”).click(function() {
// 選択された行のinputタグを検索
var ctn = $(“:checkbox:checked”).parents(“tr”).find(“input:text”);
// inputタグを遍歴して、val()で値を取得
var msg = .map(function() {return $(this).val();}).get().join(“, “);
alert(“123456″+msg);
});
});

「jQuery入門」each()で複数要素をループで処理するコード

1.htmlコード
<table class=”cft”>
<tr>
<th></th>
<th>test data1</th>
<th>test data2</th>
<th>test data3 </th>
</tr>
<tr>
<td>data1</td>
<td><input type=”checkbox” name=”flgAA” value=”20″></td>
<td><input type=”checkbox” name=”flgAA” value=”21″></td>
<td><input type=”checkbox” name=”flgAA” value=”22″></td>
</tr>
<tr>
<td>data2</td>
<td><input type=”checkbox” name=”flgBB” value=”20″></td>
<td><input type=”checkbox” name=”flgBB” value=”21″></td>
<td><input type=”checkbox” name=”flgBB” value=”22″></td>
</tr>
</table>
<button type=”submit” value=””>検証</button>

 

2.jQueryコード
jQuery(function($){
$(‘form’).submit(function() {
var ff = ”;
$(‘.cft tr’).each(function(index , val){
if ($(val).find(‘input:checkbox’).size()>0){
if (!$(val).find(‘input:checkbox’).is(‘:checked’)){
ff += ’88’;
}
}
});
if (ff!=”) {
alert(“007″+ff);
return false;
}else{
alert(’99’);
}
});
});

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

1.find()で子孫要素を取得
$(“table.demoTbl”).find(“td”).css(“background-color”, “red”);

2.children()で子要素を取得
$(“table.demoTbl”).children(“tbody”).children(“tr”).children(“td”).css(“background-color”, “blue”);

3.自身の親のtdを取得
$(this).parents(“td”);

「jQuery入門」チェックボックスのチェック状態を調べるサンプル

方法1
if($(“#chkItem:checked”).val()) {
alert(“チェックされています。”);
}
else {
alert(“チェックされていません。”);
}
方法2

if($(“#chkItem”).prop(‘checked’)) {
alert(“チェックされています。”);
}
else {
alert(“チェックされていません。”);
}
方法3

if($(‘#chkItem’).is(‘:checked’)) {
alert(“チェックされています。”);
}
else {
alert(“チェックされていません。”);
}

「jQuery入門」function関数の使い方

JSコード:
$(function() {
$(‘#testButton’).click(doUserInfo);
function doUserInfo() {
var uuId = $(“#userId”).val();
$(‘#userId’).val(“changfatun” + uuId);

}
})

「jQuery入門」テキストボックス(textbox)内データの取得コード

JSコード:
jQuery(function ($) {
$(“#btnInfo”).click( function() {
var msgHint = “アカウント:”;
var cusData = $(“#txtCust”).val();
$(“#txtCust”).val( msgHint +cusData );
});
});

「jQuery入門」ラジオボタン(radio)、チェックボックス(checkbox)の値を取得する

1.radioの値を判定
var flag = $(“input[name=’radio”+i+”‘]:checked”).val();
alert(“11″+flag);

2.checkboxの値を判定
var items = document.getElementsByName(“chk”);
for(var i=0;i<items.length;i++){
if(items[i].checked){
alert(“22″+items[i]);
}
}

「jQuery入門」selectタグにoptionタグを追加するサンプルコード

JSコード:
var stationName = {
tamati: ‘田町’,
ooimati: ‘大井町’,
shinagawa: ‘品川’,
oosaki: ‘大崎’,
shibuya: ‘渋谷’,
shinnjuku: ‘新宿’
},
$select = $(‘.stationSelect’),
$option,
isSelected;

$.each(stationName, function (value, name) {
isSelected = (value === ‘shibuya’ || value === ‘shinnjuku’);
$option = $(‘<option>’)
.val(value)
.text(name)
.prop(‘selected’, isSelected);
$select.append($option);
});

1 / 2812345...1020...最後 »