1. insertAfter()와 before()메소드 활용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
<title> jquery </title>
<style>
.chapter{background-color:silver;}
.content{height:100px;border:1px solid red;}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function (){
//내용 뒤에 구분선<hr />삽입
$('<hr />').insertAfter(".content");
//top링크를 chapter앞에 추가
$('p.chapter:gt(0)').before("<a href = '#'>top</a>");
});
</script>
</head>
<body>
<p class="chapter">1 장</p>
<div class="content">
내용...
</div>
<p class="chapter">2 장</p>
<div class="content">
내용...
</div>
<p class="chapter">3 장</p>
<div class="content">
내용...
</div>
</body>
</html>
2. append()를 사용해서 번호 추가
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
<title> jquery </title>
<style>
.chapter{background-color:silver;}
.content{height:100px;border:1px solid red;}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function (){
//term CSS 클래스에 배경색 적용
$('.term').not(":odd").css('background-color','yellow')
.end()
.filter(":odd").css("background-color","lightblue");
//각각의 주석/용어 뒤에 번호 붙이기
$('.term').each(function(i){
$(this).append("<sup>" + (i + 1) + "</sup>");
});
});
</script>
</head>
<body>
<he>jQuery is a new kind of javascript library</h3>
<span class="term">jQuery</span> is a fast, small, and feature-rich <span class="term">JavaScript</span> library. It makes things like <span class="term">HTML</span> document traversal and manipulation, event handling, animation, and <span class="term">Ajax</span> much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
</div>
</body>
</html>
3.warp()메서드로 요소 감싸기
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
<title> jquery </title>
<style>
.chapter{background-color:silver;}
.content{height:100px;border:1px solid red;}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function (){
//<h3>...</h3>을 <u>태그로 묶자
$('h3').wrap("<u></u>");
//모든 a태그를 <li>로 묶자
//첫번째 링크앞에 동적으로 <ol>태그 삽입
$('<ol type="1" id="com"></ol>').insertBefore('a:eq(0)');
//모든 링크를 <li>로 감싸고 이를 <ol>태그에 추가
$('a').each(function(){
$(this).appendTo('#com').wrap('<li></li>');
});
});
</script>
</head>
<body>
<h3>.NET기술 관련 커뮤니티</h3>
<a href="#">SLIVER LIGHT</a>
<a href="#">.NET ALL(?)</a>
</body>
</html>
