📝 jQuery
🖥️ 1. 탐색(traversing)
1-1. 특정 요소를 기준으로 하여 주변을 탐색하기
next() : 현재 요소를 기준으로 다음 요소를 리턴한다.
prev() : 현재 요소를 기준으로 이전 요소를 리턴한다.
parent() : 현재 요소의 상위 요소를 리턴한다.
children() : 현재 요소의 하위 요소들을 배열로 리턴한다.
eq() : 현재 요소의 하위 요소 중에서 n번째 요소를 선택한다. (n값은 0부터 시작)
find() : HTML 요소가 인접해있지 않더라도 하위 태그 중에서 가장 가까운 요소를 검색한다.
📝 예제
EX1)
<head>
...
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
td { width: 100px; height: 100px; text-align: center; }
</style>
</head>
<body>
<table border="1">
<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>
</table>
<script>
$("td:eq(4)").css('background','tomato');
$("td").eq(2).css('background','powderblue');
$("td:eq(4)").next().css('background','orange');
$("td").eq(4).prev().css('background','SlateBlue');
$("td:eq(4)").parent().css('color','blue');
$("td:eq(4)").parent().next().css('color', 'red');
$("td:eq(4)").parent().prev().css('color', 'MediumSeaGreen');
$("td:eq(4)").parent().next().children().css('text-decoration', 'underline');
$("td:eq(4)").parent().next().children().eq(1).css("font-weight", "bold");
</script>
</body>
EX2)
<head>
...
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="first">
<li class="foo">list item1</li>
<li>list item2</li>
<li class="bar">list item3</li>
</ul>
<ul id="second">
<li class="foo">list item1</li>
<li>list item2</li>
<li class="bar">list item3</li>
</ul>
<script>
$("#first").find('.foo').css('background-color', 'tomato').end()
.find('.bar').css('background-color', 'orange');
</script>
</body>
