Category Archives: jquery

HTML5ゲーム開発—キャンバス(CANVAS)を作成

コード:

var CANVAS_WIDTH = 470;
var CANVAS_HEIGHT = 310;
var canvasElement = $(“<canvas width='” + CANVAS_WIDTH +

“‘ height='” + CANVAS_HEIGHT + “‘></canvas>”);
var canvas = canvasElement.get(0).getContext(“2d”);
canvasElement.appendTo(‘body’);

「jQuery入門」eq()で複数の要素を取得するサンプル

①htmlコード
<ul><li>dataAA</li>
<li>dataBB</li>
<li>dataCC</li>
</ul>
②JSコード
$(function() {
var len = $(‘li’).length;
for (var i=0; i<len; i++) {
var cc = $(‘li’).eq(i).text();
console.log(cc);
}
});

「jQuery入門」選択されているセレクトボックス項目の削除、追加方法

1.htmlコード
<select id=”cftLst”>
<option value=”data1″>テストデータAA</option>
<option value=”data2″>テストデータBB</option>
<option value=”data3″>テストデータCC</option>
</select>

<button id=”cftBtn”>選択</button>

2.選択されている項目の削除
$(document).ready(function(){
$(“#cftBtn”).click( function(){
$(‘#cftLst > option:selected’).remove();
});
});

3.項目の追加
$(document).ready(function(){
$(“#cftBtn”).click( function(){
$(‘#cftLst’).append($(‘<option>’).html(“テストデータ4”).val(“testDD”));
});
});

「jQuery入門」セレクタを複数指定するコード

htmlコード
<div id=”cft1″>
<p>test data 111</p>
</div>
<div>
<p class=”cft2″>test data 222</p>
</div>

JSコード
$(‘#cft1, .cft2’).css(‘color’,’#474747′);

「jQuery入門」addClass()でcssクラスを追加するサンプル

1.htmlコード
<body>
<h1>data1</h1>
<h2>data2</h2>
<p>data3</p>
<p>data4</p>
<div>test data5</div>
<br>
<button>テスト</button>
</body>

2.JSコード
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“h1,h2,p”).addClass(“yellow”);
$(“div”).addClass(“changfa”);
});
});
</script>

3.CSSコード
<style type=”text/css”>
.changfa
{
font-weight:bold;
font-size:xx-large;
}
.yellow
{
color:yellow;
}
</style>

 

「jquery入門」parent().is(xxx)と$(“tr:hidden”)の使い方

1.Booleanis(expr)
htmlコード
<form><input type=”checkbox” /></form>
JSコード
$(“input[type=’checkbox’]”).parent().is(“form”)
結果
true

2.Array<Element(s)>:hidden
htmlコード
<table> <tr style=”display:none”><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>

JSコード
$(“tr:hidden”)

結果
[ <tr style=”display:none”><td>Value 1</td></tr> ]

3.(“input:hidden”)
htmlコード
<form> <input type=”text” name=”email” /> <input type=”hidden” name=”id” /> </form>

JSコード
$(“input:hidden”)
結果
[ <input type=”hidden” name=”id” /> ]

「jquery入門」each()でulの要素数を取得するコード

①htmlコード
<ul>
<li>test data 11</li>
<li>test data 22</li>
<li>test data 33</li>
</ul>

②JSコード
$(function() {
var cft = 0;
$(‘li’).each(function(){
cft++;
});
console.log(cft);
});

「jquery入門」parent().is()と$(“tr:hidden”)の使い方

1.Booleanis(expr)
htmlコード
<form><input type=”checkbox” /></form>
JSコード
$(“input[type=’checkbox’]”).parent().is(“form”)
結果
true

2.Array<Element(s)>:hidden
htmlコード
<table> <tr style=”display:none”><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>

JSコード
$(“tr:hidden”)

結果
[ <tr style=”display:none”><td>Value 1</td></tr> ]

3.(“input:hidden”)
htmlコード
<form> <input type=”text” name=”email” /> <input type=”hidden” name=”id” /> </form>

JSコード
$(“input:hidden”)
結果
[ <input type=”hidden” name=”id” /> ]

「jQuery入門」aリンクにクリックイベントを設定する

①htmlコード
<a id=”fileDL” href=”#” >ダウンロード
</a>

②JSコード
$(‘a[id=fileDL]’).on(‘click’, function() {
//処理コード
}
});

 

 

「ajax入門」return falseでsubmit処理を中断させるサンプル

JSコード
$(‘button[type=submit]’).click(function () {
var errFlg = false;

$.ajax({
url: ‘/xxx.do’,
type: ‘POST’,
async: false,
error : function(data) {
console.log(data);
},
data: {
address: $(‘#address’).val()
},
success: function (data) {
if (data.result == “success”) {
//処理コード
}else {
errFlg = true;
}
}
});

if (errFlg ) {
return false;
}
}