Category Archives: jquery

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

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

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

「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を無効にするサンプル

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

「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()のサンプル

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を選択するサンプル

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()のサンプル

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のページ間のパラメーターを渡すサンプル

サンプルコード:
$(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;
}

「jQuery入門」jsonデータを読み込むサンプル

JSコード:
$(function() {
var json = ‘[{“id”:”1″,”tagName”:”data1″},
{“id”:”2″,”tagName”:”data2″},
{“id”:”3″,”tagName”:”data3″},
{“id”:”4″,”tagName”:”data4″},
{“id”:”5″,”tagName”:”data5″}]’;
$.each(JSON.parse(json), function(idx, obj) {
console.log(idx+”***”+obj.tagName);
});
});

「jQuery入門」datepickerの日付フォーマットをyyyy/mm/ddに変更する方法

1.datepickerのHP
http://jqueryui.com/datepicker/
CSSコード
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<link rel=”stylesheet” href=”/resources/demos/style.css”>
JSコード
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

2.サンプル
<script type=”text/javascript”>
$(function() {
$(“#birthday”).datepicker();
$(‘#birthday’).datepicker(“option”, “dateFormat”, ‘yy/mm/dd’ );

});
</script>
<label>誕生日:<input type=”text” id=”birthday”></label><br/>

1 / 1012345...10...最後 »