작성일 : 11-11-30 16:43
|
[JQuery] (JQuery Source) Append , InsertAfter , div 요소 변경 검색 삭제
|
 |
|
글쓴이 :
조형래
 조회 : 4,669
|
<title>DOM 요소 생성 후 원하는 요소에 추가</title>
<script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//[1] 태그안의 내용 초기화
$('#lblDisplay').empty();
//[2] 동적으로 태그 추가
var strHtml = $("<a href='#'>닷넷코리아</a><hr />");
$('#lblDisplay').append(strHtml);
});
</script>
<!--[1] 동적으로 태그 추가 -->
<span id="lblDisplay"><b>여기에 태그 추가</b></span>
<title>DOM 요소의 앞/뒤에 요소 추가</title>
<style type="text/css">
.Chapter { background-color:Silver; }
.Content { height:100px; border:1px solid red; }
</style>
<script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//[1] 내용 뒤에 구분선(<hr />) 삽입
$('<hr />').insertAfter(".Content");
//[2] TOP 링크를 Chapter 앞에 추가
$('p.Chapter:gt(0)').before("<a href='#'>TOP</a>");
});
</script>
<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>
<title>특정 용어에 대해서 번호 붙이기</title>
<script type="text/javascript">
$(document).ready(function () {
//[1] term CSS 클래스에 배경색 적용
$('.term')
.not(":odd").css("backgroundColor", "Yellow")
.end()
.filter(":odd").css("background-color", "LightBlue");
//[2] 각각의 주석/용어 뒤에 번호 붙이기
$('.term').each(function (i) { $(this).append("<sup>" + (i + 1) + "</sup>"); });
});
</script>
<h3>jQuery is a new kind of JavaScript Library.</h3>
<div>
<span class="term">jQuery</span> is a fast and concise <span class="term">JavaScript</span> Library
that simplifies <span class="term">HTML</span> document traversing,
event handling, animating, and <span class="term">Ajax</span> interactions
for rapid web development.
jQuery is designed to change the way that you write JavaScript.
</div>
<title>검색된 요소를 복사하기</title>
<style type="text/css">
#menu { background-color:Blue; color:White; }
#submenu { background-color:Silver;}
#content { height:100px; }
</style>
<script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//[!] 상단 메뉴를 복사(Clone)해서 하단 메뉴에 추가(Append)
$('#menu').clone().insertBefore('#submenu');
$('#menu').clone().prependTo('#submenu');
// 원래 하단 메뉴가 있는 위치
$('#menu').clone().appendTo('#submenu');
$('#menu').clone().insertAfter('#submenu');
});
</script>
<div id="menu">
HOME About
</div>
<div id="content">
상단 메뉴를 아래 하단메뉴에 복사
</div>
<div id="submenu">
여기는 하단메뉴 들어오는 곳
</div>
<title>검색된 요소를 변경하기</title>
<style type="text/css">
button { display:block; margin:3px; color:red; width:200px; }
div { color:red; border:2px solid blue; width:200px;
margin:3px; text-align:center; }
</style>
<script type="text/javascript">
$(document).ready(function () {
// 모든 버튼 요소를 클릭시
$("button").click(function () {
// 나자신(버튼)을 <div> 태그로 변경하자.
$(this).replaceWith("<div>" + $(this).text() + "</div>");
});
});
</script>
<button>First</button>
<button>Second</button>
<button>Third</button>
<title>검색된 요소를 완전 제거</title>
<style type="text/css">
div { background-color:Yellow; }
</style>
<script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//[1] 내용 지우기
$('#btnEmpty').click(function () {
$('div').empty();
$('div').append("<b>hi</b>"); // div에 추가 가능
});
//[2] 요소 없애기
$('#btnRemove').click(function () {
$('div').remove();
$('div').append("<b>hi</b>"); // div 없다.
});
});
</script>
<div>
<p>jQuery</p>
<p>Ajax</p>
</div>
<input type="button" id="btnEmpty" value="위 영역 삭제" />
<input type="button" id="btnRemove" value="위 영역 삭제" />
|
|
903
