HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/practice.js"></script>
<title>실습</title>
</head>
<body>
<table border="1">
<tr><td>이름</td><td>주소</td></tr>
<tr><td>홍길동</td><td>서울시</td></tr>
<tr><td>이순신</td><td>제주시</td></tr>
<tr><td>왕건</td><td>경기도</td></tr>
</table>
</body>
</html>
JS
/**
*
*/
$(document).ready(function(){
$("tr:odd").css("backgroundColor","orange")
$("tr:first").css("backgroundColor","black").css("color","white")
//or// $("tr:first").css({"backgroundColor":"black","color":"white"})
//css에서는 background-color로 하는데 제이쿼리에서는 대문자로 구분함 backgroundColor
//css에서는 (스타일시트만들고 연결해서 )
/*tr:nth-child(even){
background-color:yellow;
}*/
//css에서는 (스타일시트만들고 연결해서 )
/*tr:nth-child(1){
background-color:black;
color:white;
}*/
var array=["고구마","감자","배추","고추"];
//항목이 따로 없으니까 상관 x
$.each(array,function(index,item){ //index빼도됨
var vege="";
vege += "<h1>"+item+"</h1>"
document.body.innerHTML+=vege;
})
})
결과
