JQUERY-요소탐색

임재헌·2023년 3월 31일

JQUERY

목록 보기
9/16
<!DOCTYPE html>   
<html lang="ko"> 
<head>
    <meta charset="UTF-8">
<title>09_요소탐색</title> 
<style>
table {
            border-collapse:collapse;
            font:bold 50px Arial, Helvetica, sans-serif;
            margin: auto;
        }

        table td {
            padding:20px 35px;
        }
</style>
<!-- jquery import -->
<script src="jquery-3.6.4.min.js"></script>  
</head>
<body >
   <h3>요소탐색</h3>
<table border="5">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </tbody>
</table>

<script>
//dom 구조에서 원하는 요소까지 이동하고 찾아가는 것
$("td").eq(2).css("background","crimson")
    .prev().css("background","cyan")    //이전요소로 이동
    .parent()   //첫번째 tr
    .next()     //두번째 tr
    .children() //두번째 자손 td
    .eq(1).css("background","magenta");  //5

</script>
</body>
</html>
profile
임재헌
이전 포스트

JQUERY-요소생성

다음 포스트

JQUERY-Add

0개의 댓글