jQuery2 - Web徒然なるままに

jQueryの作法
　1.$を有効にするためjQueryを先に読み込ませる。
＜HTML＞

<script src="../jquery-1.9.1.min.js"></script>
<script src="sample.js"></script>

2.jQueryで取得した要素オブジェクトと、javascriptで取得したオブジェクトは異なるものである。
　・javascriptのdocument.getElementByTagName⇒NodeList（全ての要素に対する指示はfor文を使う必要がある。）
　・jQueryの$('セレクタ')⇒jQueryオブジェクト（セレクタの要素に対して一括で指定が行える。）

3.セレクタ・・・取得したい要素を指定するためのもの
　例＞ $(セレクタ);
4.メソッド・・・jQueryが用意している様々な機能
　例＞jQueryオブジェクト.メソッド名（引数,引数,引数,･･･）;
※下記の『.css()』、『.html()』、『.attr()』がメソッドにあたります。
　　　メソッドの引数は、'key',と'val'を指定します。　例）.attr('key', 'val')

＜html＞

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Helloを表示</title>
<script src="../jquery-1.9.1.min.js"></script>
<script src="sample.js"></script>
</head>
<body>
<!--本文-->
<div id="div1">
	<span id="span1">span1</span>
	<span id="span2">span2</span>
</div>
<div id="div2" class="div2class">
	<span class="span3">span3</span>
	<span class="span4">span4</span>
</div>
<div class="div3">
	<span id="span3">span3</span>
	<span id="span4">span4</span>
</div>
<div class="div3">
	<span id="span3">span3</span>
	<span id="span4">span4</span>
</div>

</body>
</html>

＜jQuery＞

//$(function(){}が複数書ける（window.onloadの変わり）
$(function(){
	 //全てのdeiv要素を取得
	 var $div= $('div');
	 console.log($div);
	});

$(function(){		 
	 //id名がdiv1の要素を取得
	 var $div1 =$('#div1');
	 console.log($div1);
	});
	
$(function(){	
    //id名がdiv1の子要素のspan要素を取得
    var $span = $('#div1 span');
	 console.log($span);
	});

$(function(){	
    //id名がdiv1の子要素のspan要素を取得
    var $span = $('#div1 span');
	 console.log($span);
});

$(function(){	
   //id名（div2）とclass名が同時に指定されている場合のclass名の取得
   console.log($('#div2').attr('class'));
});
	
$(function(){
	//クラス名がdiv3の文字色を赤にする		 
	 $('.div3').css('color','red');
});

$(function(){	 
	//全てのdiv要素のうち、２番目のdiv(要素)
	 var $div2 = $('div:eq(1)');
	 console.log($div2);
	 //要素の中身のHTMLを変更と背景を変更（つなげて複数書く事をメソッドチェインという）
	 $div2
	 	  .html('<p>変更</p>')
	 	  .css('backgroundColor','#ddd');
});

$(function(){
	//まとめてCSSを設定する
	var Summary = {
  		margin:"10px",
  		paddingTop:"5px",
  		border:"1px solid #330066"
	}
	$('#div1').css(Summary);
});

$(function(){
	//CSSは{}でくくった方がスムーズに書ける
	$("#div1").css({position: "absolute",  top: "100px", left: "100px"});
	$("#div2").css({borderLeft:"8px solid #009900",paddingTop:"3px"});
});