読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

メソッド

メソッド

  • jQueryオブジェクトが持っているメソッドを実行する
  • それに何かする
スタイルを変更する
  • css
  • show /hide
  • width / height
アニメーションさせる
  • fadeIn / fadeOut
  • slideDown / slideUp
  • animate
内容や属性を変更する
  • text / html
  • attr
  • val
  • addClass / removeClass
動かす・消す・新しく要素を作る
  • append / appendTo
  • prepend / prependTo
  • remove
  • $('HTMLの断片')
それぞれについて処理する
  • each

スタイルを変更する - CSS

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
$(function(){
	$('#div1').css('border', '3px solid red');
	$('#div2').css('background', 'pink');
	$('#div3').css('opacity', 0.5);
});

※opacity:不透明度

要素の表示/非表示を変更する - show/hide

<div id="div1">最初は非表示になっているdiv</div>
<div id="div2">最初は表示されているdiv</div>
$(function(){
	$('#div1').show();
	$('#div2').hide();
});

要素の幅/高さを変更する - width/height

<div id="div1">width</div>
<div id="div2">height</div>
$(function(){
	$('#div1').width(300);
	$('#div2').height(300);
});

フェードアニメーション - fadeIn/fadeOut

<div class="container">
<div id="div1">fadeIn example.</div>
<div id="div2">fadeOut example.</div>
</div>
$(function(){
	$('#div1').fadeIn();
	$('#div2').fadeOut();
});
body {
  font-size:5em;
}
.container {
  height:300px;
}
#div1 {
  background:pink; 
  display:none;
}
#div2 {
  background:yellow; 
  display:block;
}

スライドアニメーション - slideDown/slideUp

<div class="container">
<div id="div1">slideDown example.</div>
<div id="div2">slideUp example.</div>
</div>
$(function(){
	$('#div1').slideDown();
	$('#div2').slideUp();
});
body {
  font-size:5em;
}
.container {
  height:300px;
}
#div1 {
  background:pink; 
  display:none;
}
#div2 {
  background:yellow; 
  display:block;
}

汎用的なアニメーション - animate

<div id="div1">box</div>
$(function(){
	$('#div1').animate({
		top: 200,
		left: 400
	});
});
#div1{
	background:pink;
	position:absolute;
	top:0;
	left:0;
	padding:50px;
}

要素の内容をまるごと書き換え - text/html

<div id="div1">入っていたテキスト</div>
<div id="div2">入っていたテキスト</div>
<div id="div3">入っていたテキスト</div>
<div id="div4">入っていたテキスト</div>
$(function(){
	$('#div1').text('textメソッドでの内容書き換え');
	$('#div2').html('htmlメソッドでの内容書き換え');
	$('#div3').text('<strong>textメソッド</strong>での内容書き換え');
	$('#div4').html('<strong>htmlメソッド</strong>での内容書き換え');
});

要素の内容を空にする - empty

<div id="div1">入っていたテキスト</div>
$(function(){
	$('#div1').empty();
});
div {
  border:3px solid #000;
  padding:10px;
}

要素の属性値を変更する - attr

<img src="img1.gif" alt="">
<img src="img1.gif" alt="" id="changeThis">
<img src="img1.gif" alt="">
<img src="img1.gif" alt="">
$(function(){
	$('#changeThis').attr('src','img2.gif');
});

要素の入力値を変更する - val

<form action="#" method="get">
<input id="input1" type="text" size="40" value="テキストフィールドです" />
<textarea id="textarea1" rows="3" cols="20">テキストエリアです</textarea>
<select id="select1">
<option value="saitama">埼玉</option>
<option value="tokyo">東京</option>
<option value="kanagawa">神奈川</option>
</select>
<select id="select2" multiple="multiple">
<option value="shinjukuku">新宿区</option>
<option value="shibuyaku">渋谷区</option>
<option value="chiyodaku">千代田区</option>
</select>
</form>
$(function(){
	$('#input1').val('テキストフィールドの値を書き換えました');
	$('#textarea1').val('テキストエリアの値を書き換えました');
	$('#select1').val('tokyo');
	$('#select2').val(['shibuyaku','chiyodaku']);
});

要素のクラスを追加/削除 - addClass/removeClass

<div id="div1">div1</div>
<div id="div2" class="box">div2</div>
<div id="div3" class="box">div3</div>
<div id="div4" class="box alert">div4</div>
$(function(){
	$('#div1').addClass('box');
	$('#div2').removeClass('box');
	$('#div3').addClass('alert');
	$('#div4').removeClass('alert');
});
div {
  margin:0 0 10px;
  padding:10px;
}
.box {
  border:3px solid #0F0;
}
.alert {
  border-color:#F00;
}

要素を移動する1 - append

<div id="basket">basket</div>
<div id="apple">apple</div>
<div id="banana">banana</div>
<div id="orange">orange</div>
$(function(){
	var basket = $('#basket');
	var apple = $('#apple');
	var banana = $('#banana');
	var orange = $('#orange');
	basket.append(apple);
	basket.append(banana);
	basket.append(orange);
});
#basket { background:#98FB98; padding:10px; }
#apple { background:red; margin:5px; }
#banana { background:yellow; margin:5px; }
#orange { background:orange; margin:5px; }

要素を移動する2 - appendTo

<div id="basket">basket</div>
<div id="apple">apple</div>
<div id="banana">banana</div>
<div id="orange">orange</div>
$(function(){
	var basket = $('#basket');
	var apple = $('#apple');
	var banana = $('#banana');
	var orange = $('#orange');
	apple.appendTo(basket);
	banana.appendTo(basket);
	orange.appendTo(basket);
});

要素を移動する3 - prepend

<div id="basket">basket</div>
<div id="apple">apple</div>
<div id="banana">banana</div>
<div id="orange">orange</div>
$(function(){
	var basket = $('#basket');
	var apple = $('#apple');
	var banana = $('#banana');
	var orange = $('#orange');
	basket.prepend(apple);
	basket.prepend(banana);
	basket.prepend(orange);
});

要素を新しく作る - $(文字列)

<div id="div1"></div>
$(function(){
	var div1 = $('#div1');
	$('<img src="img1.gif" alt="">').appendTo(div1);
});

要素を削除する - remove

<div id="div1">入っていたテキスト</div>
$(function(){
	$('#div1').remove();
});

クリックを監視する - click

<div id="div1">div!</div>
$(function(){
	$('#div1').click(function(){
		$('#div1').text('クリックされました');
	});
});

マウスののりおりを監視する1 - mouseenter/mouseleave

<div id="div1">div!</div>
$(function(){
	$('#div1').mouseenter(function(){
		$('#div1').text('マウスのりました');
	});
	$('#div1').mouseleave(function(){
		$('#div1').text('マウスおりました');
	});
});

マウスののりおりを監視する2 - hover

<div id="div1">div!</div>
$(function(){
	$('#div1').hover(function(){
		$('#div1').text('マウスのりました');
	}, function(){
		$('#div1').text('マウスおりました');
	});
});

フォーカスを監視する - focus/blur

<input type="text" id="input1">
$(function(){
	$('#input1').focus(function(){
		$('#input1').addClass('active');
	});
	$('#input1').blur(function(){
		$('#input1').removeClass('active');
	});
});

イベントとthis - 失敗

<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
$(function(){
	var elements = $('.clickTest');
	elements.click(function(){
		elements.text('クリックされました');
	});
});

イベントとthis - 成功

<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
$(function(){
	$('.clickTest').click(function(){
		$(this).text('クリックされました');
	});
});

それぞれについて処理する - each

<div class="animal">cat</div>
<div class="animal">dog</div>
<div class="animal">turtle</div>
<div class="animal">tiger</div>
$(function(){
	$('.animal').each(function(){
		var name = $(this).text();
		alert(name);
	});
});

値や内容をセットする/取得する

<div id="div1">div!</div>
$(function(){
	var div1 = $('#div1');
	alert(div1.width());
	alert(div1.height());
	alert(div1.css('font-size'));
});