Jam's story
[JQuery] Traversing 본문
-부모 ,조부모, 중조부모
-자손 ,중손자
-형제
자기자신함수등록 arguments.callee
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.13 16:25:00</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex08.html</h3>
Traversing(횡단)
<button id="hider">Hide</button>
<button id="shower">Show</button>
<!-- div>span*10<lorem1 -->
<div>
<span>Lorem.</span><span>Asperiores.</span><span>Reiciendis?</span><br>
<span>Laborum.</span><span>Ab.</span><span>Quam?</span><span>Optio.</span>
<span>Aliquam.</span><span>Eius!</span><span>Delectus.</span>
</div>
<script>
$("#hider").click(function(){
//숨겨지고 난 후에 콜백함수 호출
$("span:last-child").hide("fast",function(){
//$(this).next()
//앞에 애도 빠르게 숨겨라 -> 즉 2개가 삭제됨
//자기자신함수등록 arguments.callee
$(this).prev().hide("fast",arguments.callee);
});
});
$("#shower").click(function(){
$("div>span").show();
});
</script>
</body>
</html>
$("div.foo").click(function(){
//this==div.foo
//div.foo 안에 자식 span태그
$("span",this).addClass("bar"); //$("div.foo span") 와 같은 표현
- parent 직계부모
- parents 모든부모
- parentsUntil ~까지 부모 -> 괄호 안은 포함되지 않는다.
- find 자식을 찾는 함수
- children 선택한 요소의 모든 직계 자식을 반환
- siblings([태그]) 모든자식
- next prev 다음, 이전
- nextAll prevAll 다음 모든 형제노드, 이전 모든 형제노드
- nextUntil prevUntil 다음의 태그 까지 이전의 태그 까지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.13 16:32:50</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
/* ancestors클래스안의 모든것들 */
.ancestors *{
display: block;
border: 2px solid lightgray;
color: lightgray;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<h3>ex08_02.html</h3>
<pre>
parent()
parents()
parentsUntil()
</pre>
<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>
<!-- <script>
$("div.foo").click(function(){
//this==div.foo
//div.foo 안에 자식 span태그
$("span",this).addClass("bar"); //$("div.foo span") 와 같은 표현
});
</script> -->
<script>
// $("span").parent() --> 직계 부모 ==li
//span태그의 부모를 찾아서 css 스타일 적용
$("span").parent().css(
{"color":"red",
"border":"2px solid red",
});
// $("span").parents() --> 모든 부모
$("span").parents().css(
{"color":"red",
"border":"2px solid blue",
});
// $("span").parents("ul") --> 그 조상들중에서 ul만
$("span").parents("ul").css(
{"color":"red",
"border":"2px solid violet",
});
// $("span").parentsUntil("div") --> div까지만의 부모
//"" (div)는 포함되지 않는다.
$("span").parentsUntil("div").css(
{"color":"red",
"border":"4px solid gray",
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.13 16:44:28</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.des *{
display: block;
border: 2px solid lightgray;
color: lightgray;
margin: 15px;
padding: 5px;
}
</style>
</head>
<body>
<h3>ex08_03.html</h3>
<pre>
parent():
parents():
parentsUntil():
후손(자손)
children() -선택한 요소의 모든 직계 자식을 반환
find()
</pre>
<div class="des" style="width:500px"> div(현재요소)
<p class="first">p
<span>span</span>
</p>
<p class="second">p
<span>span</span>
</p>
</div>
<script>
$("div")
//.children() //직계자식만 해당 즉 p태그
.children("p.first")
.css({
"color":"red",
"border":"2px solid red"
})
.end() //.children("p.first") 의 체이닝은 여기서 끝이다. 끊고 다시
.find("span")
//직계자식이 아닌 마지막끝까지 뒤져서 찾겠다.
//모든 하위자식 반환
//find("*") div 태그의 모든 자식들
.css({
"color":"blue",
"border":"2px solid blue"
});
</script>
</body>
</html>궁금한것
.end() --> .children("p.first") 의 체이닝은 여기서 끝이다. 그러므로 상위로 올라가니
div의 모든 span태그가 되는것
<div class="des" style="width:500px"> div(현재요소)
<p class="first">p
<span>span</span>
</p>
<p class="second">p
<span>span</span>
</p>
<span>테스트용: p의자식이아님</span>
</div><script>
$("div")
.children("p.first")
.css({
"color":"red",
"border":"2px solid red"
})
.end() //.children("p.first") 없애기
.find("span")
.css({
"color":"blue",
"border":"2px solid blue"
});
</script>
<div class="des" style="width:500px"> div(현재요소)
<p class="first">
<span>span</span>
</p>
<div>
<p class="second">
<b>bb</b>
<span>span</span>
</p>
</div>
<span>테스트용: p의자식이아님</span>
</div>
<script>
$("div")
.children("p")
.children("b")
.css({
"color":"red",
"border":"2px solid red"
})
.end() //b만없애니 p안의 span만 한칸만 이동하는것
.find("span")
.css({
"color":"blue",
"border":"2px solid blue"
});
</script>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.14 09:06:01</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body *{
display: block;
border:2px solid lightgray;
color: lightgray;
padding:5px;
margin:15px;
}
</style>
</head>
<body>
<pre>
조상
후손
형제
1. siblings() - 선택한 요소의 모든 형제 요소를 반환
2. next()
3. nextAll()
4. nextUntill()
5. prev()
6. prevAll()
7. prevUntill()
</pre>
<h3>ex01.html</h3>
<div>div
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
<script>
$(function(){
/* $("h2")
.siblings()
.css({
"color":"red",
"border":"2px solid red"
}); */
/* $("h2")
.siblings("p") //형제요소 필터링 가능
.css({
"color":"red",
"border":"2px solid red"
}); */
/*
$("h2")
.next() //h3
.css({
"color":"red",
"border":"2px solid red"
})
.end() //h2
.prev()// 이전형제요소 span
.css({
"color":"blue",
"border":"2px solid red"
}) */
/* $("h2")
//.nextAll() //다음 모든 형제요소
.prevAll() //이전 모든 형제요소
.css({
"color":"red",
"border":"2px solid red"
}); */
$("h2")
//.nextUntil("p") //다음의 p태그 까지
.prevUntil("p")//이전의 p태그 까지 //h2, p 둘다 포함안됨
.css({
"color":"pink",
"border":"2px solid red"
});
});
</script>
</body>
</html>
'WEB > JQuery' 카테고리의 다른 글
| [JQuery] $.fn= jQuery.fn = jQuery.prototype (0) | 2022.06.14 |
|---|---|
| [JQuery] jQuery noConflict() -$ 기호 충돌문제 해결 (0) | 2022.06.14 |
| [JQuery] event.preventDefault() - 링크이동안함 (0) | 2022.06.13 |
| [JQuery] 요소 넓이, 높이 (0) | 2022.06.13 |
| [JQuery] css 조작 방법 (0) | 2022.06.13 |
Comments