반응형
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<style>
</style>
<body>
<div class="parent">
<div class="parent2">
<div class="parent1">
<h1> heading 1 </h1>
<h2> heading 2 </h2>
<p> 손자 p </p>
</div>
</div>
<p class="child"> 자식 p1 </p>
<p> 자식 p2 </p>
</div>
<script>
$(document).ready(function(){
$('.parent').children().css('font-style','italic');
// parent라는 클래스의 후손을 선택해 적용 (여기선 전체적용 됨)
$('h1').parent().css('border','3px solid');
// h1의 부모요소를 선택해 적용 (parent1을 의미)
$('h1').parents('.parent').css('border','6px orange double');
// h1의 조상 parent를 탐색 (아빠는 parent1 조상은 그 위로 전부 parent2와 parent둘다 조상)
$('.parent').children('.parent2').css('background','black');
// parent 클래스의 바로 아들인 parent2를 찾아서 적용시킴 (후손x)
$('.parent').find('h2').css('background','gray');
// .parent의 하위 후손 h2를 검색한다('parent밑에 있는 애들은 다 후손이 됨')
$('h1').next().css('font-size','50px');
// h1태그의 다음 거 즉 h2의 크기를 바꾸도록 적용
$('p').prev().css('color','blue');
// p태그가 있는 곳에 전에 거를 파란색으로 바꾸게한다.여기선(parent2와 h2와 .child가 바뀐다.)
$('.child').siblings().css('background','red');
//child클래스 있는곳 왼쪽 오른쪽으로 css적용 (prev + next)하지만 자기자신은 적용x 여기선(parent2와 자식p2가 적인 p태그)
});
</script>
</body>
</html>📝parent()
자신바로 위(부모)를 선택합니다.
📝parents()
매개변수에 지정한 이름의 조상을 선택합니다.
📝children()
매개 변수에 지정한 자식을 선택(후손x)
📝find()
그 밑에 있는 모든 자식 + 후손을 찾아 선택합니다.
📝sibilings
매개 변수에 지정한 형제요소(왼쪽 1개 오른쪽 1개)태그를 선택합니다.
📝prev()
이전 형제 요소를 선택합니다. 자기 바로 위에 있는 태그 선택합니다.
📝next()
다음 형제 요소를 선택합니다. 자기 바로 아래 있는 태그를 선택합니다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<style>
</style>
<body>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li class="fourth">fourth</li>
<li><em>fifth</em></li>
<li>sixth</li>
</ul>
<script>
$(document).ready(function(){
$('li').eq(1).css('font-size','2em');
// li중 1번째 인덱스 속성값 바꿈 (배열취급)
$('li').filter('.fourth').css('font-style','italic');
// fourth라는 클래스 이름에 적용시킴
$('li').first().css('background-color','orange');
// li의 첫번째 요소 (0번째 인덱스)
$('li').last().css('border','3px solid');
// li의 마지막 요소에 적용
$('li').has('em').css('border','3px dotted');
// li안에 em이라는 자식태그가 있는 곳에 적용
});
</script>
</body>
</html>📝eq()
인덱스로 지정하는 것입니다.
📝.filter()
id나 클래스 등으로 적용시키는 것입니다.
📝.first()
첫번째 요소를 적용시키겠다는 의미입니다.
📝.last()
li의 마지막 요소에 적용시킵니다.
📝.has()
안에 어떤 지정된 요소가 있을 경우 그 요소에 적용시킵니다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<ul>
<li>Home</li>
<li>Process</li>
<li>About</li>
<li class="select">Contact</li>
</ul>
<script>
$(function(){
$('ul')
.append('<li>append</li>')
.children('li').last().css('border','3px solid');
$('ul')
.prepend('<li>prepend</li>')
.children('li').first().css('border','3px solid');
$('ul')
.after('<div>안녕하세요 끝입니다.</div>');
$('ul')
.before('<div>안녕하세요 앞입니다.</div>');
});
</script>
</body>
</html>📝append(추가할 태그)
선택자 안의 요소중 맨 뒤에 추가합니다.
📝prepend(추가할 태그)
선택자 안의 요소중 맨 앞에 추가합니다.
📝after(추가할 태그)
선택자의 뒤에 추가합니다 (형제)
📝before(추가할 태그)
선택자의 앞에 추가합니다 (형제)
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<figure>
<img src ="1.jfif" width ="200" height="200">
<img src ="2.jfif" width ="200" height="200">
<img src ="3.jfif" width ="200" height="200">
<img src ="4.jfif" width ="200" height="200">
</figure>
<button onclick ="img_move()">appendTo</button>
<button onclick ="img_prepend()">prependTo</button>
<script>
function img_move(){
$('img').first().appendTo('figure');
}
function img_prepend(){
$('img').last().prependTo('figure');
}
</script>
</body>
</html>
📝appendTo(요소명)
지정한 선택자(요소) 안의 뒤에 추가합니다.
📝prependTo(요소명)
지정한 선택자(요소) 안의 앞에 추가합니다.
반응형