jQuery Methods
추가 메서드
<!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>New Document</title>
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
/*
alert ("변경전\n\n" + $("#test1").html() );
$("#test1").html($("#test1").html() + "<span>새롭게 추가되는 내용입니다.</span>");
alert ("변경후\n\n" + $("#test1").html() );
*/
/*
alert ("변경전\n\n" + $("#test1").text() );
$("#test1").text($("#test1").html() + "<span>새롭게 추가되는 내용입니다.</span>");
*/
$("#btn").click( function(){
//alert( $("#name").val() );
$("#name").val( "낄낄낄" );
});
//$("#test1").append("<font color='red'>새로운 내용(append)</font>");
//$("<font color='red'>새로운 내용(appendTo)</font>").appendTo("#test2");
//$("#test1").prepend("<font color='red'>새로운 내용(prepend)</font>");
//$("<font color='red'>새로운 내용(prependTo)</font>").prependTo("#test2");
// 기존의 문서 내용을 append 또는 prepend 하면 그 내용이 이동한다.
//$("#test1").append( $("#test3") );
//$("#test3").appendTo("#test2");
//$("#test1").prepend( $("#test3") );
//$("#test3").prependTo("#test2");
//alert( $("body").html() );
//$("#test1").after("<font color='red'>새로운 내용(after)</font>");
//$("<font color='red'>새로운 내용(insertAfter)</font>").insertAfter("#test2");
//$("#test1").before("<font color='red'>새로운 내용(before)</font>");
//$("<font color='red'>새로운 내용(insertBefore)</font>").insertBefore("#test2");
//$("#test1").after( $("#test3") );
//$("#test1").before( $("#test3") );
//$("h2").wrap("<font color='green'></font>");
//$("h2").wrap("<font color='green'>font태그</font>");
//$("h2").wrapAll("<font color='green'></font>");
$("h2").wrapAll("<font color='green'>font태그</font>");
alert( $("body").html() );
});
</script>
<style type="text/css">
div { border: 1px solid red; margin:5px;}
</style>
</head>
<body>
<input type="text" id="name"><input type="button" id="btn" value="확인">
<br><br>
<h2>jQuery 메소드 예제</h2>
<div id="test1">
<span>첫째...</span><br>
둘째...
<p>셋째...</p>
</div>
<div id="test2">
<span>첫째...</span><br>
둘째...
<p>셋째...</p>
</div>
<span id="test3">
<h2>안녕하세요1</h2>
<h2>안녕하세요2</h2>
<h2>안녕하세요3</h2>
<h2>안녕하세요4</h2>
</span>
</body>
</html>
삭제 메소드
<!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>New Document</title>
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
$(".annotation").each(function(i){
var no =i+1;
$(this).after("<sub>"+no+"</sub>");
});
var rmBtn =null;
$("button").click(function(){
alert($(this).val());
// rmBtn=$(this).remove();
rmBtn=$(this).detach();
$("#detachTest").append(rmBtn);
});
var $prev=$("#prevBtn").clone();
// 걍 클론 은 기능은 복사 안함
var $next=$("#nextBtn").clone(true);
// 클론에 true까지 포함 => 기능까지 복사
$("div#bottomDiv").prepend($prev);
$("div#bottomDiv").append($next);
});
</script>
</head>
<body>
<button id="prevBtn">이전 페이지로</button>
<button id="nextBtn">다음 페이지로</button>
<h3>jQuery</h3>
<div><b>jQuery</b>는 가볍고 빠르며,간결한<span class="annotation">오픈소스</span>
스크립트라이브러리 입니다. <br>이를 이용하면 Rich 웹 UI를 개발 하는데 도움이 되는 다양한
기능들<br>즉,HTML 문서 <span class="annotation">트래버스</span>,
이벤트처리,애니메이션,<span class="annotation">Ajax</span>상호작용등을 지원하여
<br>빠르고 견고하게 리치 웹 애플리케이션 개발을 할수 있도록 지원 합니다.
</div><br>
<div id="bottomDiv"><span>기준</span></div>
<div id="detachTest">detach연습</div>
</body>
</html>
.
횡단*(Traversing) 메서드
<!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>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("div").eq(0).addClass("lightblue");
$("div").filter(":odd")
.eq(0).css("background","orange")
.end() // 방금 실행한 집합 이전으로 되돌린다.
.eq(1).css("background","blue")
.end()
.css("color","red");
var $myDiv=$("div").eq(5);
if($myDiv.is("div"))$myDiv.css("border","4px solid yellow");
if($myDiv.is(".orange, .blue, .lightblue"))$myDiv.text("칼라");
$("div").each(function(){
$(this).text($(this).text().toUpperCase());
});
});
</script>
<style>
div{width:60px; height:60px; margin:10px; float:left; border:2px solid blue;}
.blue {background:blue;}
.lightblue {background:lightblue;}
.orange {background:orange;}
</style>
</head>
<body>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div class="orange">f</div>
<div>g</div>
</body>
</html>
이 글은 스프링노트에서 작성되었습니다.
'J-Query' 카테고리의 다른 글
| 6일차 Utilities (0) | 2012.05.08 |
|---|---|
| 5일차 찾기관련()eq().. (0) | 2012.05.08 |
| 3일차 export/change (0) | 2012.05.08 |
| 2일차 Selectors (0) | 2012.05.08 |
| 1일차 get/function (0) | 2012.05.08 |
