728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style type="text/css">
.back{
color: #ffff00;
}
</style>
</head>
<body>
<table border="1">
<col width="50"><col width="200"><col width="150">
<tr>
<th>๋ฒํธ</th><th>์ด๋ฆ</th><th>๋์ด</th>
</tr>
<tr class="cls">
<th>1</th><td>ํ๊ธธ๋</td><td>24</td>
</tr>
<tr class="cls">
<th>2</th><td>์ฑ์ถํฅ</td><td>16</td>
</tr>
<tr class="cls">
<th>3</th><td>์ผ์ง๋งค</td><td>22</td>
</tr>
</table>
<p>p tag</p>
<button type="button">๋ฒํผ</button>
<button type="button" id="lovebtn">input</button>
<script type="text/javascript">
$(document).ready(function(){
$("tr.cls").mouseover(function() {
$(this).css("background", "#00ff00");
});
$("tr.cls").mouseout(function() { //์ผ์ ๋ถ๋ถ๋ง css๋ฅผ ์ ์ฉ์ํฌ๋ class๋ฅผ ์ค์ ํ๊ณ ํ๊ทธ.ํด๋์ค๋ช
์ผ๋ก ์ ๊ทผํ๋ค.
$(this).css("background", "#fff");
});
$("button").click(function() {
//setter
$("p").css("background", "#0000ff");
$("p").text("์ฌ๊ธฐ๋ p ํ๊ทธ");
//getter
let color = $("p").css("background"); //property
let text = $("p").text();
//attribute , ์์ฑ์ ์ถ๊ฐํ ๋(id๊ฐ์ ์ถ๊ฐ)
$("p").attr("id","pid");
alert($('p').attr("id")); //id ํ์ธ
//css์ถ๊ฐ
/* $("p").attr("class","back"); */
$("p").addClass("back"); //์์ ์๋๋ ๋์ผํ๊ฒ ์ฒ๋ฆฌ ํด๋์ค๋ฅผ ์ ์ฉํ์.
// html(), text(), val(), css(), attr(), prop() ์์ฃผ์ฐ์ธ๋ค.
});
$("#btn").click(function(){
$("p").removeClass("back");
});
});
</script>
</body>
</html>
๋๊ธ