jQueryオブジェクト

jQuery 授業



メソッド


  • jQueryオブジェクトが持っているメソッドを実行する




スタイルを変更する

  • show /hide
  • width / height


アニメーションさせる

  • fadeIn / fadeOut
  • slideDown / slideUp
  • animate


内容や属性を変更する

  • text / html
  • attr
  • val
  • addClass / removeClass


動かす・消す・新しく要素を作る

  • append / appendTo
  • prepend / prependTo
  • remove
  • $('HTMLの断片')


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

  • each



スタイルを変更する - CSS


  • ※opacity：不透明度




ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スタイルを変更する - CSS</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style>
body {
	background-color: #F93;
	}
	
#div1 {
	width: 200px;
	height: 200px;
	}

#div2 {		width: 200px;
	height: 200px;
	}

#div3 {
	width: 200px;
	height: 200px;
	}
</style>
</head>
<body>

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

<script>
$(function() {
	$('#div1').css('border', '3px solid red');
	$('#div2').css('background', 'pink');
// [ opactiy ]不透明度
	$('#div3').css('opactiy', 0.5);
});
</script>
</body>
</html>


ブラウザで表示【 Chrome 】