Category Archives: jquery

「jquery入門」hide()、show()で要素を非表示、表示する

1.hide()で要素を非表示する
htmlコード
<button>click</button>
<p>1234455</p>

JSコード
$(function() {
$(‘button’).click(function(){
$(‘p’).hide();
});
});

2.show()で要素を表示する
htmlコード
<button>click</button>
<p >987654321</p>

JSコード
$(function() {
$(‘button’).click(function(){
$(‘p’).show();
});
});

「jquery入門」input type = “file” の値をリセットする

htmlコード
<button id=”fileClear” onclick=”retVal(‘txt’); return false;”>
クリア</button>
<input type=”file” id=”fileAttach” name=”fileAttach”>

JSコード
$(“#fileAttach”).val(”);

「jquery入門」$(“:checked”)の使い方

1.JSコード
<script type=”text/javascript” src=”/jquery/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.testBtn”).click(function(){
$(“:checked”).hide();
});
});
</script>

2.htmlコード
<button class=”testBtn”>選択</button>

「jQuery入門」$.getJSON() でjson形式データを受け取るサンプル

JSコード
<script type=”text/javascript” src=”/jquery/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$.getJSON(“/example/jquery/ajaxdemo.js”,function(result){
$.each(result, function(i, field){
$(“p”).append(field + ” “);
});
});
});
});
</script>
</head>

<body>
<button>jsonデータ取得</button>
<p>test data</p>

「jQuery入門」チェックボックスのonchange()とボタンのremoveClass()、addClass()のサンプル

①JSPコード
<input id=”reg_checkbox” type=”checkbox” >登録する
②jQueryコード
$(‘#reg_checkbox’).on(‘change’, function(){
if ($(this).is(‘:checked’)) {
$(‘.test_submit’).prop(‘disabled’, false);
$(‘.test_submit’).removeClass(“cft_class1”).addClass(“cft_class2”);
} else {
$(‘.test_submit’).prop(‘disabled’, true);
$(‘.test_submit’).removeClass(“cft_class2”).addClass(“cft_class1”);
}
});

HTML5アプリのタッチイベント処理(touch, click, pointerの実装)方法

サンプルコード:
<script>
var obj = document.getElementById(‘id’);
obj.addEventListener(‘touchstart’, touchStart, false);
obj.addEventListener(‘touchmove’, touchMove, false);
obj.addEventListener(‘touchend’, touchEnd, false);
var touchMove = function(event) {
if (event.targetTouches.length == 1) {
// prevent default
event.preventDefault();
var touch = event.targetTouches[0];
// do something
}

};
</script>

「html学習」inputタグ属性の使い方のまとめ

参考コード:

<input type=”color”value=”#6fbc6d”>
<input type=”date”>
<input type=”month”>
<input type=”week”>
<input type=”text”>
<input type=”email”
<input type=”tel”>
<input type=”url”>
<input type=”range”>
属性 required pattern list readonly

「jQuery入門」filter()で属性フィルタによるセレクタ指定

htmlコード
<ul>
<li class=”cft”>list item 1</li>
<li>list item 2
<ul>
<li><div><span>a</span></div>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

JSコード
<script>
$(‘li’).filter(‘.cft’).css(‘background-color’, ‘green’);
</script>

「HTML5開発」画像処理、衝突検出処理、音の追加処理サンプルコードまとめ

1.画像を利用する場合

player.sprite = Sprite(“player”);
player.draw = function() {
this.sprite.draw(canvas, this.x, this.y);
};
function Enemy(I) {


I.sprite = Sprite(“enemy”);
I.draw = function() {
this.sprite.draw(canvas, this.x, this.y);
};

}
2.衝突検出処理
function collides(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;

}

function handleCollisions() {
playerBullets.forEach(function(bullet) {
enemies.forEach(function(enemy) {
if (collides(bullet, enemy)) {
enemy.explode();
bullet.active = false;
}
});
});
enemies.forEach(function(enemy) {

if (collides(enemy, player)) {

enemy.explode();

player.explode();

}

});

}
function update() {

handleCollisions();

}

function Enemy(I) {


I.explode = function() {

this.active = false;

// Extra Credit: Add an explosion graphic

};
return I;

};

player.explode = function() {

this.active = false;

// Extra Credit: Add an explosion graphic and then end the game

};

3.音処理の追加
function Enemy(I) {

I.explode = function() {
this.active = false;
// Extra Credit: Add an explosion graphic
};
return I;
};

player.explode = function() {
this.active = false;
// Extra Credit: Add an explosion graphic and then end the game
};

「HTML5開発」爆弾を構成、追加、攻撃する処理方法

1.爆弾を構成:
var playerBullets = [];
function Bullet(I) {
I.active = true;
I.xVelocity = 0;
I.yVelocity = -I.speed;
I.width = 3;
I.height = 3;
I.color = “#000”;
I.inBounds = function() {
return I.x >= 0 && I.x <= CANVAS_WIDTH &&
I.y >= 0 && I.y <= CANVAS_HEIGHT;
};
I.draw = function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
};
I.update = function() {
I.x += I.xVelocity;
I.y += I.yVelocity;
I.active = I.active && I.inBounds();
};
return I;
}
2.爆弾を追加
player.shoot = function() {
var bulletPosition = this.midpoint();
playerBullets.push(Bullet({
speed: 5,
x: bulletPosition.x,
y: bulletPosition.y
}));

};

player.midpoint = function() {
return {
x: this.x + this.width/2,
y: this.y + this.height/2
};
};
3.攻撃を実現するためにupdateとdrawメソッドを修正
function update() {

playerBullets.forEach(function(bullet) {
bullet.update();
});
playerBullets = playerBullets.filter(function(bullet) {
return bullet.active;
});
}
function draw() {

playerBullets.forEach(function(bullet) {
bullet.draw();
});
}

4.敵側の処理
enemies = [];
function Enemy(I) {
I = I || {};
I.active = true;
I.age = Math.floor(Math.random() * 128);
I.color = “#A2B”;
I.x = CANVAS_WIDTH / 4 + Math.random() * CANVAS_WIDTH / 2;
I.y = 0;
I.xVelocity = 0
I.yVelocity = 2;
I.width = 32;
I.height = 32;
I.inBounds = function() {
return I.x >= 0 && I.x <= CANVAS_WIDTH &&
I.y >= 0 && I.y <= CANVAS_HEIGHT;
};
I.draw = function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
};
I.update = function() {
I.x += I.xVelocity;
I.y += I.yVelocity;
I.xVelocity = 3 * Math.sin(I.age * Math.PI / 64);
I.age++;
I.active = I.active && I.inBounds();
};
return I;

};

function update() {

enemies.forEach(function(enemy) {
enemy.update();
});
enemies = enemies.filter(function(enemy) {
return enemy.active;
});
if(Math.random() < 0.1) {
enemies.push(Enemy());
}
};
function draw() {

enemies.forEach(function(enemy) {
enemy.draw();
});
}