메뉴 건너뛰기

검색창 닫기

HEUKMYO

program1

140808_[jquery] val

2014.09.22 23:02 read.187

$("선택자").val();

input요소의 value값을 가져온다.

ex) $("input").val();


$("선택자").val("값");

input요소의 value값을 넣는다.

ex) $("input").val("aaaaaa");


예제1

jq_val_1.gif 


<!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" lang="ko" xml:lang="ko">
	<head>
		<meta name="generator" content="editplus" />
		<meta name="author" content="" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				$("button").click(function(){
					$("input").val("aaaaaa");
				});
			});
		//]]>
		</script>
	</head>
	<body>
		<input type="text" value="hello" />
		<button>OK</button>
	</body>
</html>


예제2

jq_val_2.gif 


<!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" lang="ko" xml:lang="ko">
	<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			div{width:100px;height:100px;background:blue}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				$("button").click(function(){
					var w=$("input").eq(0).val();
					var h=$("input").eq(1).val();
					var bg=$("input").eq(2).val();
					$("div").css({width:w,height:h,background:bg});
				});
			});
		//]]>
		</script>
	</head>
	<body>
		<!-- div의 input값으로 css 변경하기 -->
		<div></div>
		<p>가로: <input type="text" value="100" /></p>
		<p>세로: <input type="text" value="100" /></p>
		<p>배경: <input type="text" value="blue" /></p>
		<button>OK</button>
	</body>
</html>

예제3

jq_val_3.gif 


<!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" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
			#i1{position: absolute;left:0;top:0}
			#i2{position: absolute;left:180px;top:0}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				var count=0;
				var mySrc=null;
				var myId=null;
				$("img").click(function(){
					count++;
					if(count==1){
						//첫번째로 클릭
						mySrc=$(this).attr("src");
						myId=$(this).attr("id");
					}else{
						//두번째로 클릭
						var mySrc2=$(this).attr("src");//두번째 그림의 src
						$("#"+myId).attr("src",mySrc2);
						$(this).attr("src",mySrc);
						count=0;
					}
				});
			});
		//]]>
		</script>
	</head>
	<body>
		<!-- 이미지의 위치 바꾸기 -->
		<span id="i1"><img src="images/img_01.jpg" alt="" id="a" /></span><span id="i2"><img src="images/img_02.jpg" alt="" id="b" /></span>
	</body>
</html>


.css("속성")-스타일속성 값을 가져옴,.css("속성","값")-스타일속성 값을 넣는다.

.attr("속성")-속성 값을 넣는다속성 값을 가져옴,.attr("속성","값")-속성 값을 넣는다

.text()-텍스트를 모두 가져온다.,.text("str")-이전 내용을 무시하고 "str"를 넣는다.

.html()-html을 모두 가져온다.,.html("<h1></h1>")->이전 내용을 무시하고 h1요소를 넣는다.

.val()-input요소의 value값을 가져온다., .vql("vvv") - input요소의 value에 vvv를 넣는다.


,

추가메뉴 목록
위로