<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('.box1 button').on('click', function(){
$('li:first, li:last').css('background', 'yellow');
$('li:eq(5)').css('background', 'red');
$('li:lt(4)').css({'font-size':'2.0em', 'font-weight':'bold' })
})
$('.box2 button').on('click', function(){
$('#result2 table tr:even').css('background', 'lightblue')
//$('#result2 tr:even')
//$('#result2 tr').filter(':even')
$('#result2 tr').filter(':odd').css('background', 'lightgray');
$('#result2 tr').first().css('background', 'black')
.css('color', 'white')
.css('font-size', '1.5em')
.css('font-weight', 'bold');
/* $('#result2 tr: first').css('background', 'black')
.css('color', 'white')
.css('font-size', '1.5em')
.css('font-weight', 'bold'); */
})
})
</script>
<style>
table{
border : 2px solid orange;
}
td{
width: 300px;
height: 40px;
text-align : center;
padding : 10px;
}
</style>
</head>
<body>
<div class = "box box1">
기본필터<br>
: first, :last, :eq(idx), :gt(idx), :It(idx)<br>
: even, :odd, :not(selector)<br>
<br>
$('li:first, li:last').css('background', 'yellow');<br>
$('li:eq(5)').css('background', 'red');<br>
$('li:lt(4)').css({'font-size':'2.0em', 'font-weight':'bold' })<br>
<br>
권장사항 아님 - 필터링 메소드로 변환 <br>
$('li').frist() $('li').last(), $('li').eq(5)<br>
$("li:first") <=> $("li").filter(":first")
<br>
<button type = "button">확인</button>
<div id = "result1">
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
<li> four </li>
<li> five </li>
<li> six</li>
<li> seven</li>
<li>eight</li>
<li>nine</li>
</ul>
</div>
</div>
<div class = "box box2">
기본필터<br>
: even, :odd, :not(selector)<br>
<br>
권장사항 아님 - 필터링 메소드로 변환 <br>
$('li').filter(:even), $('li').filter(:odd)<br>
<br>
<button type = "button">확인</button>
<div id = "result2">
<table border="1">
<tr>
<td>이이템</td>
<td>가격</td>
</tr>
<tr>
<td>ONE</td>
<td>1000</td>
</tr>
<tr>
<td>TWO</td>
<td>10000</td>
</tr>
<tr>
<td>THREE</td>
<td>1000</td>
</tr>
<tr>
<td>FOUR</td>
<td>1000</td>
</tr>
<tr>
<td>FIVE</td>
<td>1000</td>
</tr>
<tr>
<td>SIX</td>
<td>1000</td>
</tr>
<tr>
<td>SEVEN</td>
<td>1000</td>
</tr>
<tr>
<td>EIGHT</td>
<td>1000</td>
</tr>
<tr>
<td>NINE</td>
<td>1000</td>
</tr>
<tr>
<td>TEN</td>
<td>1000</td>
</tr>
</table>
</div>
</div>
</body>
</html>
신입 개발자 입니다!!!