Category Archives: jquery

「jQuery入門」each()でプラグインを作成するサンプル

Posted by soft on 2018年9月4日 「jQuery入門」each()でプラグインを作成するサンプル はコメントを受け付けていません。

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

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

「jQuery入門」イベントデリゲート( event.delegateTarget)を利用するサンプル

Posted by soft on 2018年9月1日 「jQuery入門」イベントデリゲート( event.delegateTarget)を利用するサンプル はコメントを受け付けていません。

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

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

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

「jQuery入門」$(セレクタ).trigger()でイベントを発生させる

Posted by soft on 2018年6月24日 「jQuery入門」$(セレクタ).trigger()でイベントを発生させる はコメントを受け付けていません。

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

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

「jQuery入門」filter(）メソッドの使い方

Posted by soft on 2018年6月17日 「jQuery入門」filter(）メソッドの使い方 はコメントを受け付けていません。

サンプル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’);

「jQuery入門」formでEnterを無効にするサンプル

Posted by soft on 2018年6月9日 「jQuery入門」formでEnterを無効にするサンプル はコメントを受け付けていません。

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

「jQuery入門」フィルタリングで要素を絞り込むサンプル

Posted by soft on 2018年6月5日 「jQuery入門」フィルタリングで要素を絞り込むサンプル はコメントを受け付けていません。

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”]’);

「Jquery入門」 text()、html() とval()のサンプル

Posted by soft on 2018年6月1日 「Jquery入門」 text()、html() とval()のサンプル はコメントを受け付けていません。

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

「jQuery入門」複数のIDを選択するサンプル

Posted by soft on 2018年5月30日 「jQuery入門」複数のIDを選択するサンプル はコメントを受け付けていません。

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]’)

jQuery.noConflict()のサンプル

Posted by soft on 2018年5月30日 jQuery.noConflict()のサンプル はコメントを受け付けていません。

JSコード
<script>
$.noConflict();
jQuery(document).ready(function(){
jQuery(“button”).click(function(){
jQuery(“p”).text(“jQuery test”);
});
});
</script>
</head>

<body>
<p>aaaa</p>
<button>click　test</button>

jQueryMobileのページ間のパラメーターを渡すサンプル

Posted by soft on 2018年5月12日 jQueryMobileのページ間のパラメーターを渡すサンプル はコメントを受け付けていません。

サンプルコード:
$(document).bind(‘pagebeforechange’,function(e,data){
if (typeof data.toPage !== “string”){
return;
}
var paramUrl = $.mobile.path.parseUrl(data.toPage);
var params = getUrlParamPage(paramUrl.search);
});

function getUrlParamPage(string) {
var obj = {};
if (string.indexOf(“?”) != -1) {
var string = string.substr(string.indexOf(“?”) + 1);
var strs = string.split(“&”);
for(var i = 0; i < strs.length; i ++) {
var tempArr = strs[i].split(“=”);
obj[tempArr[0]] = unescape(tempArr[1]);
}
}
return obj;
}

1 / 1112345...10...最後 »