Category Archives: jquery

「jQuery入門」チェックボックスの項目を全てチェック、全て選択解除するサンプル

①htmlコード
<div id=”city”>
<input type=”checkbox” name=”cityAA” value=”1″>
<input type=”checkbox” name=”cityBB” value=”1″>
<input type=”checkbox” name=”cityCC” value=”1″>
<input type=”checkbox” name=”cityDD” value=”1″>
</div>
②JSコード
// すべての項目をチェック
$(‘#city input[type=checkbox]’).prop(‘checked’, true);

// すべての項目を選択解除
$(‘#city input[type=checkbox]’).prop(‘checked’, false);

「ajax入門」setTimeout()で数秒待ってからリダイレクトするサンプル

JSコード
$.ajax({
type:’POST’,
url: アクションURL,
data:パラメータ,
async:false,
dataType:’json’,
error : function(){
},
success:function(data){
//処理コード
if(条件){
setTimeout(function(){
window.location.href = “xxx”;
},10000);
}
}
});

「jQuery入門」addClass()とremoveClass()で行の色を変更するコード

方法1
$(“#tab tr”).hover(function(){
$(this).children(“td”).addClass(“hover”)
},function(){
$(this).children(“td”).removeClass(“hover”)
});

方法2
$(“#tab tr:gt(0)”).hover(function(){
$(this).children(“td”).addClass(“hover”);
},function(){
$(this).children(“td”).removeClass(“hover”);
});

「jQuery入門」テーブルの奇数、偶数の色を付けるサンプル

JSコード
$(“#tab tbody tr:odd”).css(“background-color”,”#bbf”);
$(“#tab tbody tr:even”).css(“background-color”,”#fff”);
$(“#tab tbody tr:odd”).addClass(“odd”);
$(“#tab tbody tr:even”).addClass(“even”);

「jQuery入門」テーブルのカラムと行番号を取得するサンプル

①htmlコード
<table id=”userlist” border=”1″>
<tr><td>userAA1</td><td>userBB1</td><td>userCC1</td></tr>
<tr><td>userAA2</td><td>userBB2</td><td>userCC2</td></tr>
<tr><td>userAA3</td><td>userBB3</td><td>userCC3</td></tr>
</table>

②JSコード
$(function() {
$(‘#userlist td’).on(‘click’, function() {
var td = $(this)[0];
var tr = $(this).closest(‘tr’)[0];
console.log(‘列番号:’ + td.cellIndex);
console.log(‘行番号:’ + tr.rowIndex);
console.log(‘内容:’ + $(this).text());
});
});

「jQuery入門」json形式の文字列をオブジェクトに変換する

JSコード
$.ajax({
type:’POST’,
url: xxx,
data:xxxx
async:false,
dataType:’json’,
error : function(){
},
success:function(data){
var obj = $.parseJSON(data)
if(obj.username===”yamada”){
//処理コード
}
}
});

「jQuery開発」DataTablesで検索、ソート、ページャー機能を作成するサンプル

JSコード
$(document).ready(function() {
$(‘#table’).on(‘order.dt’,
function() {
console.log(‘ソート’);
}).on(‘search.dt’,
function() {
console.log(‘検索’);
}).on(‘page.dt’,
function() {
console.log(‘ページャー’);
}).dataTable();
});

「jQuery入門」toggleClass()でクラスの追加または削除サンプル

①JSコード
$(document).ready(function(){
$(“button”).click(function(){
$(“h1,h2,p”).toggleClass(“yellow”);
});
});

②CSSコード
<style type=”text/css”>
.yellow
{
color:yellow;
}
</style>
</head>

③htmlコード
<body>
<h1>test data1</h1>
<h2>test data2</h2>
<p>test data3</p>
<p>test data4</p>
<button>検証ボタン</button>
</body>

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

1 / 612345...最後 »