jQuery+CSS+HTML로 만든 랜덤 색상 디스플레이 툴(미완성).
위의 각 색상이 들어있는 직사각형을 누르면 해당 직사각형의 색상이 랜덤하게 바뀌고 '한꺼번에 바꾸기' 버튼을 클릭하면 3개의 직사각형 속 색상이 한꺼번에 바뀐다.
바뀐 색상의 값은 직사각형 안에 각각 검은색과 흰색으로 표시되게 했다.

14/8/14 목

오늘의 jQuery 공부.

DOM(Document Object Model)내용 바꾸기.

자바스크립트 형식:
document.getElementsByTagName("p")[0].innerHTML = "바뀔 내용";
jQuery 형식:
$("p").html("바뀔 내용");

* 요소뒤에 들어갈 jQuery 매서드들의 형태는 html("내용"), css("color", "red"), animate({top:30}, 2000), toggle("slow") 등이 있다.
* $()는 jQuery()의 단축표기 형태이다. ()안에는 HTML요소, CSS Selector, Javascript Object가 들어갈 수 있다.

* class="className"이 여러 개이고 $(".className")으로 선택할 때 각각의 개별 클래스에 어떻게 접근해야 하는가 하는 문제로 한참을 헤메다.
var $cn = $(".className")으로 하면 $cn 변수(앞에 $는 안붙여도 되지만 요소의 내용을 반환받는 특별한 변수이기에 jQuery 프로그래머들이 일반 변수와 구별용으로 쓰는 관습)에 각 클래스의 내용들이 배열로 들어가게 되고 이 배열은
$cn[i].innerHTML = "바뀔 내용";
형식을 이용해 각각의 클래스에 접근할 수 있다.

* 또 다른 의문은 클래스 중 한개를 클릭했을 때 몇번째 클래스를 클릭한건지 알아낼 수 있는 방법이 있느냐 하는 것. 분명 있을 듯 해 보이긴 하는데 현재 못찾겠다.
각 색상 버튼 밑에 긁어서 복사할 수 있도록 3개의 <div class="picTxt">를 추가해 색상버튼과 동일한 색상코드를 보이게 하려고 시도했지만 이 의문을 풀지못해 실패. 전체 바꾸기의 경우엔 배열 변수 $picTxt에 $(".picTxt")를 저장하고(var $picTxt = $(".picTxt");) i 변수를 0으로 설정한뒤 each()함수 순환시 i를 1씩 증가시켜 $picTxt[i].innerHTML="#"+colNum; 형태로 나타내는 꼼수를 이용해 성공했지만 각 색상 버튼 클릭시 그 버튼의 바로 밑 picTxt에 색상코드를 보이게 하는 것이 안된다.(설명이 너무 지저분해 내가 나중에 봐도 알아보기 힘들겠군. --;)

//jQuery 코드: 
$(document).ready(function(){ //브라우저가 준비되면
	colorChange(); //첫 시작때 색상버튼 색 모두 바꾸기
	$("#clickA").click(function(){ //모두 바꿈 버튼 클릭시
		colorChange();
	});
	$(".pic").click(function(){ //각 색상 버튼 클릭시
		var colNum = rand16color();//16진수 랜덤 컬러값 받아 저장
		$(this).html("<strong>#"+colNum+"</strong><br>");
		$(this).append("<font color='#fff'>#"+colNum+"</font>");
		$(this).css({"background-color": "#"+colNum });
	});
	function colorChange(){ //색상버튼 색 모두 바꾸기
		var $picTxt = $(".picTxt");
		var i = 0;
		$(".pic").each(function(){
			var colNum = rand16color();//16진수 랜덤 컬러값 받아 저장
			$(this).html("<strong>#"+colNum+"</strong><br>");
			$(this).append("<font color='#fff'>#"+colNum+"</font>");
			$(this).css({"background-color": "#"+colNum });
			$picTxt[i].innerHTML="<strong>#"+colNum+"</strong>";
			i++;
		});
	}
	function rand16color(){ //랜덤한 16진수 color 생성반환.
		var colNum = Math.floor(Math.random()*16777215); 
		//0~16777215사이 랜덤숫자 생성
		colNum = colNum.toString(16);//16진수로 변형
		return colNum;
	}
});