<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CDN으로 jQuery 라이브러리 연결하기 - https://cdnjs.com/libraries/jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
div{border: 2px solid red; margin:5px;}
</style>
</head>
<body>
<div class="c1">개체조작 메소드1</div>
<div class="c1">개체조작 메소드2</div>
<div class="c2">개체조작 메소드3</div>
<div class="c2">개체조작 메소드4</div>
<ul id="list">
<li>객체 조작 메소드 AAAAA</li>
<li>객체 조작 메소드 BBBBB</li>
<li>객체 조작 메소드 CCCCC</li>
<li>객체 조작 메소드 DDDDD</li>
<li>객체 조작 메소드 EEEEE</li>
<li>객체 조작 메소드 FFFFF</li>
<li>객체 조작 메소드 GGGGG</li>
</ul>
<script>
$(function(){
//객체 조작
//wrap() : 선택자를 특정 태그로 각각 감쌈
$(".c1").wrap("<h1 />")
//wrapAll() : 선택자를 특정 태그로 한번에 감쌈
$(".c2").wrapAll("<div />")
$(".c2").wrapInner('<b />');
//unwrap() : 선택자의 부모객체를 지움
$(".c2").unwrap();
//each() : 여러 개의 객체를 순차적으로 접근
//index, li, li, li, li, li, li, li
$("#list>li").each(function(idx, obj){
//실행문
$(obj).html("<b>each문을 이용한 내용변경("+ idx +")</b>");
})
//map
})
</script>
<div id="">
<img src="../img/swisda.jpg" />
</div>
</body>
</html>결과
풀스택eDot