버튼을 누르면 버튼의 value값을 불러오는 로직
<!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=EUC-KR">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script>
$(document).ready(function(){ // 이부분 필수 암기
$("input").click(function(){ // 이부분 필수 암기
alert($(this).val()); // 이부분 필수 암기
});
});
</script>
</head>
<body>
<input type="button" value="aa">
<input type="button" value="bb">
</body>
</html>
==============================
3번째 text를 클릭했을때 text1,2의 값을 더해서 출력하는 소스
<!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=EUC-KR">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$($("input")[2]).focus(function(){
var v1=parseInt($($("input")[0]).val());
var v2=parseInt($("input")[1].value);
$(this).val(v1+v2);
});
});
</script>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
============================================
jquery 이벤트처리 방식
==============
선택자. 이벤트명(function(){});
ex) $(":button").click(function(){
});
javascript이벤트 처리방식
==============
id명.on이벤트명=function(){};
==================================================
버튼 클릭시 버튼의 value가 alert창에 div를 클릭하면 text값이 alert에 뜨게 하는 로직
<!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=EUC-KR">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").click(function(){
alert($(this).val());
});
$("div").click(function(){
alert($(this).text());
});
});
</script>
</head>
<body>
<input type="button" value="def">
<div>abc</div>
</body>
</html>
========================================================
div테그 클릭시 def가 옆에 추가되도록 하는 소스
<!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=EUC-KR">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").click(function(){
$(this).append("def"); //append를 기억
});
});
</script>
</head>
<body>
<div>abc</div>
</body>
</html>
p210 append, p214 prepend 참고 공부할것!
=========================================================
시작하자마자 배열에 있는 시 명이 div 태그안으로 들어가는 로직.
<!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=EUC-KR">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script>
$(document).ready(function(){
var cityArray=['진주시','창원시','진해시'];
for(var i in cityArray)
$("div").append(cityArray[i]+"<br>");
});
</script>
</head>
<body>
<div></div>
</body>
</html>
=======================================================
a태그 클릭시 text창에 도시명이 뜨는 로직
<!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=EUC-KR">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script>
$(document).ready(function(){
var cityArray=['진주시','창원시','진해시'];
for(var i in cityArray)
$("div").append("<a href=#>"+cityArray[i]+"</a><br>");
$("a").click(function(){
$("input").val($(this).text());
});
});
</script>
</head>
<body>
<div>
</div>
<input type="text">
</body>
</html>
attr 태그의 속성을 바꾸는 명령어!
<!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=EUC-KR">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script>
$(document).ready(function(){
alert($("#b1").attr("value"));
//alert($($("input")[0]).attr("value"));
$("#b2").click(function(){
//$($("input")[1]).click(function(){
$(this).attr("value","ccc"); // 버튼의 value값을 바꾼다.
});
});
</script>
</head>
<body>
<input type="button" id="b1" value="aaa">
<input type="button" id="b2" value="bbb">
</body>
</html>
'jsp' 카테고리의 다른 글
| EL변경 (0) | 2013.11.25 |
|---|---|
| DB연동 회원가입,삭제 (0) | 2013.10.31 |
| DB 연동 (0) | 2013.10.30 |
| jsp와 db연동 (0) | 2013.10.28 |
| 선언문,request객체의메서드들,화면이동하기 (0) | 2013.10.23 |