JQuery복습 - CSS 조작

//JQuery로 CSS를 조작 할 수 있다.
//addClass - 선택된 요소에 하나 이상의 클래스를 추가 할 수 있다.
//removeClass - 선택된 요소에 하나 이상의 클래스를 제거 할 수 있다.
//toggleClass - 선택된 요소에 클래스를 추가/제거를 반복 할 수 있다.
//css - style 속성을 지정 혹은 반환 (인자가 있느냐에 따라서 다름)

//https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_addclass
<style>
.important {
	font-weight: bold;
	font-size: xx-large;
}
.blue {
	color: blue;
}
</style>
$("h1, h2, p").addClass("blue"); //세개의 태그에 blue클래스 추가
$("div").addClass("important"); //모든 div클래스에 important클래스 추가
$("div").addClass("important blue"); //여러개의 CSS클래스를 추가하는것도 가능하다.

$("h1, h2, p").removeClass("blue"); // 클래스를 제거하는것도 가능하다.

$(h1, h2, p).toggleClass("blue"); // blue클래스를 추가/제거를 반복한다.

//css: 선택된 요소의 스타일 property를 하나 이상 지정하거나, 값을 반환 할 수 있다.
//css메서드에 전달되는 인자가 하나라면 property를 반환하고, 두개라면 "propertyname", "value"순으로 값을 지정 할 수 있다.

//"첫번째 매칭"되는 p태그의 background-color property를 반환하는 예제
$("p").css("background-color"); //첫!번!째! p태그의 background-color값을 반환한다.
//=> 모든 p태그의 background-color값을 가지고 오고 싶다면 우리의 영원한 친구 each메서드를 사용한다.

  $("p").each(function(){
 	 alert($(this).css("background-color"));
  })

//Css Property를 지정하는 예제 - 위 예제와는 다르게, 모든 p태그의 값을 변경한다.
$("p").css("background-color", "yellow");

//key & Value객체를 이용하여 여러개의 Css Property를 지정할 수도 있다.
css({"propertyname":"value", "propertyname2": "value", ....});
$("p").css({"background-color" : "yellow", "font-size" : "200%"});