jquery를 위한 JS 복습

<style>
	.c1{
		color:white; 
		background:black;
	}
	.c2{
		color:red; 
		background:#ddd;
	}
	.c3{
		color:orage; 
		background:blue;
	}
</style>
<script>
	$(function(){
		$("#f>li:nth-child(3n+1)").css('background','orange');//이건 또 1,2,3...임
		
		// addClass() - 클래스추가
		// removeClass() - 클래스 지우기
		// toggleClass() - 
		
		$("#f>li").eq(1).addClass('c1');
		$("#f>li").eq(1).removeClass('c1');
		
		$("#f>li").eq(2).addClass('c2');
		$("#f>li").eq(2).addClass('c3');
		$("#f>li").eq(2).removeClass('c3');
		
		$("#f>li").eq(4).toggleClass('c3');
		$("#f>li").eq(4).toggleClass('c3');
		
	});

물론 알아서 나쁠건 없지만 <li>에 가서 class=c1을 안쓰고 굳이 addClass(), removeClass()를 써야하나 싶다.

하지만, 굳이 알아야 될 필요가 없을것 같았던 내용도 나중에 잘 활용했던 경험이 있어서 기억은 해둬야겠다.

 

 

 

 

$("#list>li").each(function(idx, obj){
			$(obj).html("each()를 이용한 반복처리 ("+idx+")");
			$(obj).addClass('c1');
		});
		
		// map() : 배열을 이용한 반복문
		var hobby = ['축구','농구','넷플릭스 시청','독서','클라이밍','덕질'];
		// 배열을 이용해 <select> 태그를 만들어 body의 첫번째 태그로 추가
		
		var tag = "<select>";
		
		hobby.map(function(txt, idx){
			tag += "<option>" +txt+"_"+idx+"</option>";			
		});
		tag +="</select>";
		
		console.log(tag);
		
		// append() : 원래 내용 유지하면서 마지막으로 들어감
		// html() : 원래 있는 내용이 지워지고 새로운 내용으로 변경
		// prepend() : 원래 내용 유지하면서 처음으로 들어감
		
		$('body').prepend(tag);
		
	});

반복문인데 java에서 쓰던것보다 살짝 쉽게 사용할 수 있는것 같다.

 

 

 

 

<style>
	ul, li{
		background:#ddd;
		list-style-type:none; 
		margin:0; 
		padding:0;
	}
	li{
		float:left; 
		width:100px; 
		height:100px; 
		margin:5px; 
		padding:5px; 
		border:1px solid gray
	}
	li>img{
		width:100px; 
		height:100%;
	}

예전에 css 할때 배웠던 내용인데 역시 직접 다시 하나하나 지워보고 다시 써가면서 어떤 변화가 있는지 확인하는게 중요하다. <ul>, <ol> 의 도형 모양과 관련된 list-style-type과 <li>의 배치와 관련된 float 복습 완료!