サンプルコード

サンプルコード

1.プラグインの定義
$.fn.txtChangePlugin = function(str) {
$(this).each(function() {
$(this).text(str).trigger(“change”);
});
};

2.プラグインの使用
例
if(xxx) {
$(“#infoId”).txtChangePlugin(“12345”)
}
else {
$(“#infoId”).txtChangePlugin(“67890”)
}

サンプルコード
$(“#cft”).on( “click”, “span”, function(event){

console.log( event.delegateTarget === this); // false
} );

$(“#cft span”).bind( “click”, function(event){
console.log( event.delegateTarget === this ); // true
} );

サンプルコード
$(this).on(‘click’, ‘#btnTest, function(){
$(‘#userInfo’).val( model.trs0101Bean.userName );
$(‘#userInfo’).trigger(‘change’);
}

// イベントハンドラ
$(document).on(‘change’, ‘#userInfo’, function(){
//イベント処理コード
}

サンプル1
1.1 htmlコード
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
1.2 JSコード
$(‘li’).filter(‘:even’).css(‘background-color’, ‘red’);

サンプル2
2.1 htmlコード
<ul>
<li><strong>list</strong> item 1 – one strong tag</li>
<li><strong>list</strong> item <strong>2</strong>
– two <span>strong tags</span></li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
2.2 JSコード
$(‘li’).filter(function(index) {
return $(‘strong’, this).length == 1;
}).css(‘background-color’, ‘green’);

JSコード
$(‘#cftForm’).keypress(function(e){
if (e.which == 13) {
return false;
}
});

1. タグ名=”input” と name属性が”model.cftKdfBean.address.value”と一致
$(‘input[name=”model.cftKdfBean.address.value”]’);

2. タグ名=”input” と name属性が”model.cftKdfBean.address.value”と不一致
$(‘input[name!=”model.cftKdfBean.address.value”]’);

3. タグ名=”input” と name属性が”model.cftKdfBean.address.value”と先頭一致
$(‘input[name^=”model.cftKdfBean.address.value”]’);

4. タグ名=”input” と name属性が”model.cftKdfBean.address.value”と末尾一致
$(‘input[name$=”model.cftKdfBean.address.value”]’);

5. タグ名=”input” と name属性が”model.cftKdfBean.address.value”と部分一致
$(‘input[name*=”model.cftKdfBean.address.value”]’);

JSコード
$(“#btn1”).click(function(){
$(“#cftTest1”).text(“Hello world!”);
});
$(“#btn2”).click(function(){
$(“#cftTest2”).html(“<b>Hello world!</b>”);
});
$(“#btn3”).click(function(){
$(“#cftTest3”).val(“test data”);
});

1.htmlコード
<div id=”changfa-one”>data 11</div>
<div id=”changfa-two”>data 12</div>
<div id=”changfa-three”>data 13</div>
<div id=”changfa-four”>data 14</div>

JSコード
前の部分が固定の場合は複数選択
var $cft = $(‘[id^=changfa-]’);

2.htmlコード
<div id=”11-kdf”>test 11</div>
<div id=”12-kdf”>test 12</div>
<div id=”13-kdf”>test 13</div>
<div id=”14-kdf”>test 14</div>

JSコード
後ろの部分が固定の場合は複数選択
var $kdf = $(‘[id$=kdf]’)