<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> jquery 공부1 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
div{
border:1px solid;
border-color:#D8D8D8;
font-family: "돋움","tahoma";
font-size: 9pt;
color:#696969;
margin:10px;
width:200px;
text-align:center;
}
span{
font-size: 15px;
font-family: "돋움","tahoma","bold";
}
</style>
<? include "../Anyjquery/jquery_inc.php"; ?>
<script language="javascript">
//alert(jQuery.browser.version); 브라우저 버전출력
$(function(){
//.click
//클릭후의 펑션을 넣는것임. 아래 내용은 클릭하면 숨기기
$("td").click(function(){
$(this).hide();
})
//전체 p태그를 jq 배열에 담아서 $(jq[배열위치])로 해당배열 위치 찾아서 alert 함
/*
var jq=$("p");
alert($(jq[1]).html());
*/
//.appendTo
//body 엘레먼트 내에 해당내용 입력함 - 맨 뒤쪽에 입력됨. 동일한 태그명(아래의 body)가 있는경우 모든 body에 삽입됨
/*
$("<div><p>Hello,World!</p></div>").appendTo("body");
*/
//.each=반복문
//p태그 내의 html 들을 result 안에 넣어서 alert 시킨것임
//주의)var로 생성된 것의 경우 appendTo 가 먹지않음. append 로 할것
var result="";
$("p").each(function(){
result+=$(this).html();
//alert(result);
})
$("#result").append(result);
//each(function(i,result){
//each 내에서 몇번째 element 인지 검색할때 사용.
//ex) each(function(몇번째배열인지,그에 해당하는 값을 넣는곳){}
/*
var result="";
var i=0;
$("p").each(function(i,find){
result+=$(find).html()+": "+(i+1)+"번째 element\n";
});
alert(result);
*/
//.size
//현재페이지에 해당 element가 몇개 있는지 확인할때는
/*
alert("div내에 있는 input 태그의 갯수는 "+$("div input").size()+"개 입니다.");
*/
//.eq
//$("element").eq(위치)로 해당 element내의 eq번째 배열을 select 함
$("#up_click_button").click(function(){
$("#write_box p").eq(0).appendTo("#list_box");
})
$("#down_click_button").click(function(){
$("#list_box p").eq(0).appendTo("#write_box");
})
});
</script>
</HEAD>
<BODY>
<table border="1">
<tr>
<td>클릭하면 사라짐</td>
</tr>
<tr>
<td>클릭하면 사라짐</td>
</tr>
<tr>
<td>클릭하면 사라짐</td>
</tr>
<tr>
<td>클릭하면 사라짐</td>
</tr>
</table>
<div id="list_box">
<span>제품리스트</span>
<p>제품1 </p>
<p>제품2 </p>
</div>
<div id="button_box">
<input type="button" id="up_click_button" value="올리기">
<input type="button" id="down_click_button" value="내리기">
</div>
<div id="write_box">
<span>장바구니</span>
</div>
<div id="result"></div>
</BODY>
</HTML>
'레이블', 반복문을 제어하자!
