[송규남의 IT다이어리] 제이쿼리(jQuery) 네번째 이야기
노용철
view : 540
[송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기 4
안녕하세요. 중앙HTA의 송규남 강사입니다.
지난 시간에 이어 jQuery 네번재 강좌를 시작해 보겠습니다.
이번 시간에는 jQuery에서 Attribute(속성)을 얻어오거나 설정하는 방법 등을 설명 드리려고 합니다.
입력된 ID라든지 비밀번호 등을 자바스크립트에서 사용하려면 Attribute를 사용하는 방법을 이해하셔야 하는데요!!
jQuery 사이트의 API에 가보시면 Attributes라는 메뉴를 살펴보시면 사용방법 등이 자세하게 나와 있습니다.
자 그럼 간단한 예제를 만들어 볼까요?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//input 요소중 type속성이 button인 요소를 click할때 function실행
$("input[type='button']").click(function(){
var id=$("#id").val();//value속성값 얻어오기
var pwd=$("#pwd").val();//value속성값 얻어오기
alert("아이디:" + id +",비밀번호:" + pwd);
});
});
</script>
</head>
<body>
id <input type="text" id="id"> <br/>
pwd <input type="password" id="pwd"><br/>
<input
type="button" value="click" >
</body>
</html>
실행을 시켜보면 click버튼을 눌렀을 때 val() 함수를 통하여 입력된 값을 메시지 창으로 출력합니다.
html() 함수는 html 콘텐츠를 넣거나 html 콘텐츠를 얻어올 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[value=click]").click(function(){
$("#list").html("<p>" + $("#msg").val() + "</p>");
});
});
</script>
</head>
<body>
<input type="text" id="msg"> <br/>
<input type="button" value="click" >
<div id="list">
</div>
</body>
</html>
아래코드는 id속성이 list인 요소에 입력된 텍스트를 넣습니다.
html()함수의 괄호에 문자열이 있으면 문자열을 html형태로 넣고 괄호에 아무런 값이 없으면 html 콘텐츠를 얻어옵니다.
예를 들면
$("#list").html(“html로 추가되요~”); è list에 문자열이 추가되요
var str=$(“#list”).html(); è list의 html값이 str에 저장됩니다.
Attribute관련 함수들이 대부분 괄호안에 값이 비어있으면 속성값을 리턴하는 형태이고
괄호안에 값이 있으면 속성값으로 설정되는 형태입니다.
$(“#msg”).val(“hello”); //id속성이 msg인 요소의 value속성이 ‘hello’가 됩니다.
var txt=$(“#msg”).val();//id속성이 msg인 요소의 value속성이 리턴되어 txt에 저장됩니다.
이러한 원리로 다른 Attribute 관련 함수들도 사용할 수 있겠죠?
오늘 제이쿼리 강좌는 여기서 마무리 하겠습니다^^
다음 강좌에서는 더 유익한 정보로 찾아오도록 하겠습니다!!
<저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>
