요소의 관계로 요소 선택 방법
1. 상위 요소 선택
- 한 단계 위의 요소(부모) : $(selector).parent();
- 윗단계 모든 요소(조상) : $(selector).parents();
- 선택 요소와 지정 요소 사이의 조상 : $(selector).parentsUntil(other_selector);
예제)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>계층관계</title>
<style>
.ancestors * {
생략
}
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
$("#parent").click(function (){
$("span").parent().css({
"color": "red",
"border": "2px solid red"
});
});
$("#parents").click(function (){
$("span").parents().css({
"color": "red",
"border": "2px solid red"
});
});
$("#until").click(function (){
$("span").parentsUntil(".ancestors").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (grandparent)
<p>p (direct parent)
<span>span</span>
</p>
</div>
</div>
<button id="parent">부모선택</button>
<button id="parents">상위요소선택</button>
<button id="until">...까지선택</button>
</body>
</html>
2. 하위 요소 선택
- 한 단계 하위 요소(자식) : $(selector).children();
- 자손 요소 : $(selector).find("filter");
예제)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>계층관계-하위</title>
<style>
.ancestors * {
생략
}
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
$("#child").click(function (){
$(".parents").children().css({
"color": "red",
"border": "2px solid red"
});
});
$("#find").click(function (){
$(".parents").find("span").css({
"color": "red",
"border": "2px solid red"
});
});
$("#find2").click(function (){
$(".parents").find("*").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div class="ancestors">
<div class="parents" style="width:500px;">
div(.parents)
<ul>ul
<li>li
<span class="first">span</span>
</li>
</ul>
</div>
<div class="parents" style="width:500px;">
div(.parents)
<p>p
<span class="second">span</span>
</p>
</div>
</div>
<button id="child">자식찾기</button>
<button id="find">span 찾기</button>
<button id="find2">자식 전체 찾기</button>
</body>
</html>
3. 형제 요소 선택
- 모든 형제 요소 : $(selector).sibligns();
- 다음 요소 : $(selector).next();
- 다음 위치의 모든 요소 : $(selector).nextAll();
- 다음 요소부터 특정 요소 전까지 : $(selector).nextUntil(other_selector);
- 이전 요소 : $(selector).prev();
- 이전 모든 요소 " $(selector).prevAll();
- 이전 요소부터 특정 요소 전까지 : $(selector).prevUntil(other_selector);
예제)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>형제 관계</title>
<style>
.siblings * {
생략
}
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
$("#sib").click(function (){
// 선택자 요소를 제외한 형제 요소 선택
$("h2").siblings().css({
"color": "red",
"border": "2px solid red"
});
});
$("#next").click(function (){
$("h2").next().css({
"color": "red",
"border": "2px solid red"
});
});
$("#nextAll").click(function (){
$("h2").nextAll().css({
"color": "red",
"border": "2px solid red"
});
});
$("#nextUntil").click(function (){
$("h2").nextUntil("p").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div class="siblings">div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>p</p>
</div>
<button id="sib">sibling</button>
<button id="next">next</button>
<button id="nextAll">next all</button>
<button id="nextUntil">next until</button>
</body>
</html>
4. 필터링
- 선택한 요소들 중 첫 번째 : $(selector).first();
- 선택한 요소들 중 마지막 : $(selector).last();
- n번째 요소 : $(selector).eq(n);
- 선택한 요소들 중 재선택 : $(selector).filter(other_selector);
- 선택한 요소들 중 특정 요소 제외하고 선택 : $(selector).not(other_selector);
예제)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
$("#first").click(function () {
$("p").first().css("background-color", "yellow");
});
$("#last").click(function (){
$("p").last().css("background-color", "yellow");
});
</script>
</head>
<body>
<div style="border: 1px solid black;">
<p>첫번째 div 엘리먼트</p>
<p class="sel">두번째 div 엘리먼트</p>
<p>세번째 div 엘리먼트</p>
<p class="sel">네번째 div 엘리먼트</p>
</div>
<br>
<div style="border: 1px solid black;">
<p>다섯번째 div 엘리먼트</p>
<p class="sel">여섯번째 div 엘리먼트</p>
<p>일곱번째 div 엘리먼트</p>
<p class="sel">여덟번째 div 엘리먼트</p>
</div>
<button id="first">first</button>
<button id="last">last</button>
<button id="eq">eq(2)</button>
<button id="filter">filter</button>
<button id="not">not</button>
</body>
</html>
동적 이벤트 바인딩 처리
새로운 요소가 렌더링 후에 생성되었기 때문에, 다시 분석하여 이벤트를 처리하도록 작성한다. 다른 말로 추가된 요소의 이벤트 처리라 할 수 있겠다.
on() 메소드를 사용할 때 선택 대상은 문서이며, 처리할 이벤트와 이벤트가 발생하는 요소를 on() 메소드에 함께 작성한다.
예제)
$(document).on("click", "#del", function (){
$(this).parent().remove();
});
