JavaScript/JQuery
jquery 여러가지 method
Bohemian life
2012. 6. 18. 16:24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
<script src="./jquery-1.7.2.min.js">
</script>
<script>
$(document).ready(function(){
$('button:first').click(function(){
var animal=["dog", "cat", "kuma"];
// ul의 child로 "<li> dog </li> "를 붙이자
// android BaseAdapte getView(int index,.. )
$.each(animal, function(index, value){
//ul에 접근해서 파라미터 값을 child로 붙여라
$('ul:first').append("<li>"+value+"</li>");
// 대상을 ul에 child로 붙여라
$("<li>"+value+"!</li>").appendTo('ul:first');
});
});
$('button:eq(1)').click(function(){
$('ol >li').appendTo('ul');
//$('ul').append($('ol>li'));
});
$('button:eq(2)').click(function(){
$('ol :last-child').prependTo('ol');
});
// after 지정한 대상 뒤에 붙여라
$('button:eq(3)').click(function(){
$('<b> plus </b>').insertAfter('ol');
$('ol').after('<b> plus + </b>');
$('ol').after('<hr />');
});
// before 지정한 대상 앞에 붙여라
$('button:eq(4)').click(function(){
$('<b> plus </b>').insertBefore('ol');
$('ol').before('<b> plus + </b>');
$('ol').before('<hr />');
});
// wrap 각각 따로 감싸라
// <p> <b> 글자 </b> </p>
$('button:eq(5)').click(function(){
$('span').wrap("<div class='box'></div>");
});
// wrapAll() 한꺼번에 감싸라
$('button:eq(6)').click(function(){
$('span').wrapAll("<div class='box'></div>");
});
// replaceWith() replaceAll() 바꾸기 교체
$('button:eq(7)').click(function(){
$('li.second').replaceWith("<li> Change </li>");
$('li#second').replaceWith("<li> Change </li>");
$("<li> new Change</li>").replaceAll("li:first");
});
$('button:eq(8)').click(function(){
$('li.second').empty(); // 내용만 지우기
});
$('button:eq(9)').click(function(){
$('li:first').remove(); // 그냥 다 삭제
});
$('button:eq(10)').click(function(){
img=$('img').clone();
$('body').append(img);
});
// 엘리먼트의 가로길이 세로길이 정보
$('button:eq(11)').click(function(){
width=$('img').width();
height=$('img').height();
result="width :"+width+", height:"+height;
$('ol').append("<li>"+result+"</li>");
});
// 응용
$('img').click(function(event){
width=$(this).width();
height=$(this).height();
$(this).attr('width', width+5);
$(this).css('width' , width+5+"px");
});
//응용 2
$('img').mousemove(function(event){
offset=$(this).offset();
left=offset.left;
top=offset.top;
$('li:last').after(
"<li>left: "+left+", top:"+top+"</li>");
});
//outerWidth(), outerHeight() : 바깥쪽 margin까지 포함해서
outerWidth=$('div:last').outerWidth();
width=$('div:last').width();
$('div:last').next()
.text("outerWidth="+outerWidth+", width="+width);
});
</script>
<style>
.box{ border:1px solid black; margin:3px; }
</style>
</head>
<body>
<button>
append(), appendTo() 존재하지 않던 것을 만들어서 추가
</button>
<button>
append(), appendTo() 문서에 있는 엘리먼트를 다른곳에 추가
</button>
<button>prepend(), prependTo() 첫번째 자식으로 추가</button>
<button>after(), afterTo() </button>
<button>before(), beforeTo()</button>
<button>wrap() 개별적 복수</button>
<button>wrapAll() 전부 1개</button>
<button>replaceWith(), replaceAll()</button>
<button>empty()</button>
<button>remove()</button>
<button>clone()</button>
<button>width(), height() </button>
<button>width() height() 응용</button>
<button></button>
<img src="http://www.androidpub.com/files/member_extra_info/image_mark/234/234.gif" />
<ol><li> zero </li>
<li> first </li>
<li class="second"> second </li>
<li id="second"> third </li></ol>
<ul>
</ul>
<span> 첫번째 </span><span> 두번째 </span><span> 세번째 </span>
<br/>
<div style="width:50px; height:50px; margin:10px; padding:10px;
background-color:#6F9 ;
border:10px solid black;
" > </div>
<span></span>
</body>
</html>
