250x250
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 비전공 개발자
- 개발자
- CSS
- jQuery
- SWIFT
- css3
- iPhone
- react
- keyframes
- Animation
- php
- HTML
- javascript
- effect
- html5
- IOS
- 자바스크립트
- button
- xcode
- 비전공자
- 애니메이션
- iOS 개발자
- image
- 풀스택
- 프론트엔드
- 백엔드
- MAC
- ipad
- front-end
- hover
Archives
- Today
- Total
비전공자 개발일기
JQuery8 본문
728x90
SMALL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Element Traversing</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
.container * {
display: block;
border: 1px solid lightgray;
padding: 5px;
margin: 15px;
}
.boldFont {
color: green;
font-weight: 700;
}
</style>
</head>
<body>
<h1>트리 탐색</h1>
<p>특정 요소로부터 다른 요소들과의 관계를 통해 선택하길 원하는 요소까지 DOM트리를 검색해 나아가는 과정</p>
<ol>
<li>조상 요소 탐색</li>
<li>형제 요소 탐색</li>
<li>자손 요소 탐색</li>
</ol>
<h1>조상 요소의 탐색</h1>
<h2>parent()</h2>
<p>
선택한 요소의 부모 요소를 선택<br>
선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 부모 요소만을 선택할 수도 있음
</p>
<button id="parent_btn">p요소의 부모 요소</button>
<div class="container">
<div>div요소
<div>div요소
<ul>ul요소
<li>li요소</li>
<li>
li요소
<p class="point">p 요소(기준)
<span>span 요소</span>
</p>
</li>
<li>li요소</li>
</ul>
</div>
</div>
</div>
<script>
$(function () {
$("#parent_btn").on("click", function () {
$(".point").parent() // <p>요소의 부모 요소를 선택함.
.css({
"border": "2px solid red"
})
})
})
</script>
<h2>parents()</h2>
<p>
선택한 요소의 조상 요소를 모두 선택<br>
선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 조상 요소만을 선택할 수도 있음
</p>
<button id="parents_btn">p요소의 조상 요소</button>
<script>
$(function () {
$("#parents_btn").on("click", function () {
$(".point").parents("div") //.point요소의 조상 요소 중에서 <div>요소를 모두 선택함
.css({
"border": "2px solid red"
})
})
})
</script>
<h2>parentsUntil()</h2>
<p>
선택한 요소의 조상 요소중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택<br>
선택자를 인수로 전달하지 않으면, parent()와 같이 선택한 요소의 조상 요소를 모두 선택
</p>
<button id="parentsUntil_btn">p요소의 조상 요소</button>
<script>
$(function () {
$("#parentsUntil_btn").on("click", function () {
// .point요소의 조상 요소 중에서 첫 번째 <div>요소의 바로 이전까지의 요소를 모두 선택함
$(".point").parentsUntil("div").css({
"border": "2px solid red"
})
})
})
</script>
<h2>closest()</h2>
<p>
자신을 포함한 조상 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 요소를 선택<br>
이 메소드가 요소의 집합을 구하는 방식은 parents()와 비슷하지만, 해당 요소의 조상 요소뿐만 아니라 해당 요소 자신까지도 검사
</p>
<button id="closest_btn">closest()</button>
<div class="container">
<div>div요소
<div>div요소
<ul>ul요소
<li>li요소</li>
<li>
li요소
<div id="origin">div 요소(기준)
<span>span 요소</span>
</div>
</li>
<li>li요소
<p>p요소</p>
</li>
</ul>
</div>
</div>
</div>
<script>
$(function () {
$("#closest_btn").on("click", function () {
// id가 origin인 요소 자신과 조상 요소 중에서 첫번째 div 요소를 선택
$("#origin").closest("div").css({
"border": "2px solid green"
})
})
})
</script>
<h1>형제 요소의 탐색</h1>
<h2>siblings()</h2>
<p>선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택</p>
<button id="siblings_btn">h4 요소의 형제 요소</button>
<div class="container">
<div>div</div>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4(기준)</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>p</p>
</div>
<script>
$(function () {
$("#siblings_btn").on("click", function () {
// h4 요소의 형제 요소를 모두 선택
$("h4").siblings().css({
"border": "2px solid red"
})
})
})
</script>
<h2>next()</h2>
<p>선택한 요소의 바로 다음에 위치한 형제 요소를 선택</p>
<button id="next_btn">h4 요소의 형제 요소</button>
<script>
$(function () {
$("#next_btn").on("click", function () {
$("h4").next().css({
"border": "2px solid blue"
})
})
})
</script>
<h2>nextAll()</h2>
<p>선택한 요소의 다음에 위치한 형제 요소를 모두 선택<br> 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 형제 요소만을 선택할 수도 있음</p>
<button id="nextAll_btn">h4 요소의 형제 요소</button>
<script>
$(function () {
$("#nextAll_btn").on("click", function () {
$("h4").nextAll().css({
"border": "2px solid yellow"
})
})
})
</script>
<h2>nextUntil()</h2>
<p>선택한 요소의 형제 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택<br> 선택자를 인수로 전달하지 않으면, nextAll()과 동일</p>
<button id="nextUntil_btn">h4 요소의 형제 요소</button>
<script>
$(function () {
$("#nextUntil_btn").on("click", function () {
// h4요소의 형제 요소 중에서 첫 번째 p 요소의 바로 이전까지의 모든 요소를 선택
$("h4").nextUntil("p").css({
"border": "2px solid skyblue"
})
})
})
</script>
<h2>prev()</h2>
<p>선택한 요소의 바로 이전에 위치한 형제 요소를 선택</p>
<button id="prev_btn">prev()</button>
<script>
$(function () {
$("#prev_btn").on("click", function () {
$("h4").prev().css({
"border": "2px solid brown"
})
})
})
</script>
<h2>prevAll()</h2>
<p>선택한 요소의 이전에 위치한 형제 요소를 모두 선택</p>
<button id="prevAll_btn">prevAll()</button>
<script>
$(function () {
$("#prevAll_btn").on("click", function () {
$("h4").prevAll().css({
"border": "2px solid navy"
})
})
})
</script>
<h2>prevUntil()</h2>
<p>선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택</p>
<button id="prevUntil_btn">prevUntil</button>
<script>
$(function () {
$("#prevUntil_btn").on("click", function () {
$("h4").prevUntil("div").css({
"border": "2px solid purple"
})
})
})
</script>
<h1>자손 요소의 탐색</h1>
<h2>children()</h2>
<p>선택한 요소의 자식 요소를 모두 선택<br>선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 자식 요소만을 선택할 수도 있음</p>
<button id="children_btn">children</button>
<script>
$(function () {
$("#children_btn").on("click", function () {
$("ul").children().css({
"border": "2px solid #129dba"
})
})
})
</script>
<h2>find()</h2>
<p>선택한 요소의 자손 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택<br> *를 인수로 전달하여, 선택한 요소의 자손 모두를 선택할 수도 있음</p>
<button id="find_btn">find</button>
<script>
$(function () {
$("#find_btn").on("click", function () {
$("li").find("*").css({
"border": "2px solid orange"
})
})
})
</script>
<h1>add()</h1>
<p>선택한 요소의 집합에 전달받은 요소를 추가</p>
<button id="add_btn">add</button>
<ul>
<li class="add">첫 번째</li>
<li class="add">두 번째</li>
<li class="add">세 번째</li>
<li class="add">네 번째</li>
</ul>
<p class="add">첫 번째 단락</p>
<div>첫 번째 상자</div>
<script>
$(function () {
$("#add_btn").on("click", function () {
$("li.add").add("p.add").css("color", "skyblue")
})
})
</script>
<p>append() vs add()</p>
<p>선택한 요소의 마지막에 새로운 요소나 콘텐츠를 추가하는 메소드 vs 선택한 요소의 집합에 인수로 전달받은 요소를 추가하는 메소드</p>
<h1>each()</h1>
<p>선택한 요소 집합의 요소마다 전달받은 콜백함수를 실행</p>
<button id="each_btn">클래스 추가 및 제거</button>
<script>
$(function () {
$("#each_btn").on("click", function () {
$("li.add").each(function () {
$(this).toggleClass("boldFont")
})
})
})
</script>
<h1>end()</h1>
<p>마지막으로 실행한 메소드의 실행 전 상태로 선택한 요소의 집합을 복원</p>
<button id="end_btn">div 요소 선택</button>
<div class="container">
<div id="divBox">div요소
<p>p요소</p>
</div>
</div>
<script>
$(function () {
$("#end_btn").on("click", function () {
// $("#divBox").find("p").css({"border": "2px solid red"})
$("#divBox").find("p").end().css({
"border": "2px solid red"
})
// #divBox 요소의 자손 요소 중에서 p요소를 모두 선택하고, 선택된 요소의 집합을 find() 메소드의 실행 전으로 복원
// 따라서, #divBox인 요소의 CSS 스타일을 설정하는 것
})
})
</script>
<h1>offsetParent()</h1>
<p>
선택한 요소를 위치시킬 때 기준으로 사용된 <b>조상 요소</b>를 선택<br>
정적 위치(static position) 지정 방식을 제외한 다른 방식(relative, fixed, absolute)으로 위치가 설정된 요소가 위치를 정할 때 기준이 될 수 있음<br>
위와 같은 위치가 설정된 요소가 존재하지 않으면, <html>요소를 기준으로
</p>
<button id="offsetParent_btn">요소의 위치 정보</button>
<div class="container">
<div>div요소
<ul style="position: relative;">ul요소
<li>li요소</li>
<li>
li요소
<p id="para">p요소
<span>span요소</span>
</p>
</li>
<li>li요소</li>
</ul>
</div>
</div>
<script>
$(function () {
$("#offsetParent_btn").on("click", function () {
// $("#para").offsetParent().css("border", "2px solid pink")
$("#para").offsetParent().css({
"border": "2px solid pink"
})
})
})
</script>
<h1>contents()</h1>
<p>선택한 요소의 자식 요소를 텍스트 노드와 주석 노드까지 모두 포함하여 선택</p>
<button id="content_btn">a 요소의 배경색 변경</button><br><br>
<iframe src="http://tcpschool.com" style="width: 95%; height: 400px;"></iframe>
<script>
$(function() {
$("#content_btn").on("click", function() {
$("iframe").contents().find("a").css("backgroundColor", "blue")
})
})
</script>
</body>
</html>728x90
LIST