Category Archives: jquery

「jquery入門」val().change()の使い方

例1
$(‘#userForm’).find(‘input[type=”text”]’).val(‘yamada’).change();

例2
$(“#cftLoginTime”).change(function(){
//処理コード
});
例3
$(“input”).val(“yamada”).change();

「jQuery入門」$(document).on()の使い方

1.$(document).on(イベント, セレクタ, 関数)
例1
$(document).on(‘input keyup’, ‘#member_name’, function() {
//処理コード
});
例2
$(document).on(‘click’, ‘#reg_btn’, function(){
//処理コード
});

2.$(セレクタ).on(イベント, 関数)
$(‘#reg_btn’).on(‘click’, function(){
//処理コード
});

「jQuery入門」keydown()とkeyup()のサンプル

1.JSコード
<script src=”/jssou/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“input”).keydown(function(){
$(“input”).css(“background-color”, “red”);
});
$(“input”).keyup(function(){
$(“input”).css(“background-color”, “green”);
});
});
</script>

2.htmlコード
名前 <input type=”text”>
<p>onkeyupイベントのテスト</p>

「jQuery入門」hasClass()の判定サンプル

JSコード
if (!$(“#kdfc”).hasClass(‘active’)) {
//classがactiveの場合
$(“#kdfc”).next().slideToggle();
$(“#kdfc”).toggleClass(“active”);
}

「jQuery入門」is(‘:hidden’)の判定サンプル

JSコード
if ($(‘#cftIdLst’).is(‘:hidden’)) {
// 非表示の場合
$(“#cftIdLst”).next().slideToggle();
$(“#cftIdLst”).toggleClass(“active”);
}

「jQuery入門」next().focus()でフォーカスを移動させる方法

JSPコード
<div>
<s:textfield name=”memberCode1″ maxlength=”3″ class=”cft_kk”> –
<s:textfield name=”memberCode2″ maxlength=”3″ class=”cft_kk”> –
<s:textfield name=”memberCode3″ maxlength=”3″ class=”cft_kk”> –
</div>
<input type=”submit” value=”会員コード” />”

jQueryコード
$(‘input[name^=”memberCode”]’).keyup(function() {
if ($(this).val().length >= $(this).attr(‘maxlength’)) {
$(this).next().focus();
}
});

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

サンプルコード:
var ccArea = { 31:”品川区”, 32:”目黒区”, 33:”渋谷区”, 34:”新宿区”, 35:”豊島区” };
$.each(ccArea, function(i, val) {
console.log(i + ‘: ‘ + val);
});

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

3 / 1112345...10...最後 »