Category Archives: jquery

「jQuery入門」テーブルの行列位置を取得するサンプル

1.htmlコード
<table border=”1″>
<tr>
<td>テストデータAA</td>
<td>テストデータBB</td>
<td>テストデータCC</td>
</tr>
</table>

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

「jQuery入門」hiddenのフォームの内容を取得するコード

htmlコード
<input name=”username” type=”hidden” value=”yamada” />
JSコード
var val = $(‘:hidden[name=”username”]’).val();

「jQuery入門」prependTo()と.attr()の使い方

1.ラジオボタンの値を選択
$(“userId”).attr(“checked”, “checked”);

2.チェックボックスの値を選択
$(“addressId”).attr(“checked”, “checked”);

3.prependTo()
指定された要素に追加
<button id=”testBtn”>prependTo</button>
<ul id=”addressLst”>
<li>データ1</li>
<li>データ2</li>
<li>データ3</li>
</ul>

$(“#testBtn”).click(function(){
$(“<li>データ4</li>”).prependTo(“#addressLst”);
});

「jQuery入門」 $(“input”).blur()、$(“input”).focus()で要素を処理する

1.JSコード
<script type=”text/javascript” src=”/common/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“input”).focus(function(){
$(“input”).css(“background-color”,”#FFFFCC”);
});
$(“input”).blur(function(){
$(“input”).css(“background-color”,”#D6D6FF”);
});
});
</script>
</head>

2.htmlコード
名前を入力してください:
<input type=”text” id=”username” name=”username” />

「jQuery入門」remove()で要素を削除するサンプル

JSコード
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).remove(“.cft”);
});
});
</script>
</head>
<body>

htmlコード
<p>test data11</p>
<p class=”cft”><i>test data12</i></p>
<p class=”cft”><i>test data12</i></p>
<button>test3</button>

「jquery入門」$(“p”).css(“background-color”)のサンプル

①JSコード
<script>
$(document).ready(function(){
$(“button”).click(function(){
alert(“背景色: ” + $(“p”).css(“background-color”));
});
});
</script>

②htmlコード
<body>
<h2>test title</h2>
<p style=”background-color:#ff0000″>data11</p>
<p style=”background-color:#00ff00″>data12</p>
<p style=”background-color:#0000ff”>data13</p>
<button>検証ボタン</button>
</body>

「jQuery入門」$(“#id”).load()のサンプル

1.JSコード

<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#cftone”).$(“#cftone”).load((“/sikao/ajax/info.txt”);
});
});
</script>
2.htmlコード
<body>
<div id=”cftone”><h2>data</h2></div>
<button>getdata</button>
</body>

「jquery入門」on()メソッドで複数のイベントを定義するサンプル

1.htmlコード
<input type=”text” id=”txtAddress” value=”tokyo”>
<div id=”addrDetailShow”> </div>

2.JSコード
$(function(){
$(‘#txtAddress’).on({
keydown: function(){
$(‘#addrDetailShow’).text(‘address-data-11’);
},
keyup: function(){
$(‘#addrDetailShow’).text(‘address-data-12’);
},
blur: function(){
$(‘#addrDetailShow’).text(‘address-data-14’);
},
focus: function(){
$(‘#addrDetailShow’).text(‘address-data-13’);
}
});
});

「jQuery入門」 $.each()でオブジェクトループ処理をするサンプル

JSコード
$(function() {
var cft = {key1:’testAA’, key2:’testBB’, key3:’testCC’};
$.each(cft, function(key, val) {
console.log(key+’:’+val);

});
});

「jQuery入門」URLのクエリ文字列の配列から値を取得するコード

JSコード
var getResult = function() {
var result = [];

// クエリ文字列を取得して「&」で分割
var urlLst = window.location.search.substring(1).split(‘&’);
var chkTt;

urlLst.forEach( function(e, i, a) {
chkTt = e.split(‘=’);
result[ chkTt[0] ] = chkTt[1];
})

return result;
}

使い方
var ctnVars = getResult();
var username = ctnVars[‘username’];