Category Archives: jquery

「Jquery入門」return falseとpreventDedault() でformのsubmitを止める方法

1.「return false」のサンプル
$(‘#cftForm’).submit(function(event){
if (!$(‘#name’).val()) {
alert(‘name は空白です’);
return false;
};
})

2.「preventDefault」のサンプル
$(‘#cftForm’).submit(function(event){
if (!$(‘#name’).val()) {
alert(‘nameは空白です’);
event.preventDefault();
$(‘#name’).css(‘border-color’,’red’);
}
})

「jQuery入門」each()でそれぞれのliの要素を取得する

サンプルコード:
<script type=”text/javascript” src=”/jquery/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“li”).each(function(){
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>liの要素を表示button>
<ul>
<li>山田</li>
<li>大蔵</li>
<li>情報</li>
<li>技術</li>
<li>練習</li>
</ul>

「jQuery入門」attr()とremoveAttr()でhtmlのタグ要素の設定、削除

1.a要素に複数の属性を追加
$(‘a’).attr({
href: ‘http://www.sample.com/introduction/notice.html’,
title: ‘お知らせ’,
target: ‘_blank’
});

2.img要素に複数の属性を追加
$(function() {
$(‘img’).attr({alt: ‘出身’, title: ‘東京品川’, width: 320, height: 210});

});

3.div要素のid属性を削除
$(‘div’).removeAttr(‘id’);

「jQuery入門」ラジオボタン change()でイベント発動するサンプルコード

jQueryコード:
$(‘input:radio[name=”sampleAA”]’).change(function() {
if ($(this).val() == ‘true’ ) {
$(‘#sampleBB’).show();
$(‘input:radio[name=”sampleCC”]’).attr(“disabled”, “disabled”);
} else {
$(‘#sampleBB’).hide();
$(‘input:radio[name=”sampleCC”]’).removeAttr(“disabled”);

}

「jQuery入門」checkboxのcheckedプロパティを変更してchangeイベントを実行する

サンプルコード
$(‘input:checkbox[name=”sample1″]’).change(function(){
if ($(this).is(‘:checked’)) {
$(‘input:text[name=”sample2″]’).val(“10″);
$(‘input:text[name=”sample2”]’).attr(“readonly”, “readonly”);
$(‘#sample3’).hide();
} else {
$(‘input:text[name=”sample2″]’).val(“20″);
$(‘input:text[name=”sample2”]’).removeAttr(“readonly”);
$(‘#sample3’).show();
}

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

2 / 1012345...10...最後 »