<%@ page contentType="text/html; charset=UTF-8"%>
<%@page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%String cp = request.getContextPath();%>
<!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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=cp %>/data/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("input[type=text], input[type=password]").css({
"border":"1px solid #ff1111"
,"width":"120px"
,"height":"20px"
,"margin-left":"3px"
,"padding":"2px;"
});
$("input:button").css({
"background":"#00ff00"
,"width":"120px"
,"height":"25px;"
});
$("input[type=text], input[type=password]").focus(
function(){
$(this).next("span").show(); // 현재 focus된 요소의 다음 span 태그를 show해줘라.
});
$("input[type=text], input[type=password]").blur(
function(){
$(this).next("span").hide();
});
});
$(function(){
$("#btn1").click(function(){
var s=$("span:eq(0)").text(); // 첫번째 span 태그의 text를 가져옴
alert(s);
var name=$("input[name='name']").val(); // 값을 가져올 떄 val() => value
if(!name){
alert("이름을 입력하세요...");
return;
}
var age=$("input[name='age']").val();
if(!age){
alert("나이를 입력하세요...");
return;
}
var id=$("input[name='id']").val();
if(!id){
alert("아이디를 입력하세요...");
return;
}
var pwd=$("input[name='pwd']").val();
if(!pwd){
alert("암호를 입력하세요...");
return;
}
});
});
$(function(){
$("#btn3").click(function(){
// var s=$("#aa").text(); // 내용이 보인다.
// var s=$("#aa").html(); // 태그가 보인다 (innerHTML)
// alert(s);
s="우리나라<b>대한민국</b>";
//$("#aa").text(s); //s의 내용 그대로 출력
$("#aa").html(s); //태그가 적용되어 출력 (innerHTML)
s=$("#aa").attr("sm"); // attr : 속성을 가져옴.
alert(s);
});
});
</script>
</head>
<body>
<form action="" name ="f">
<span>이름</span><input type="text" name="name" ><span style="display:none;">이름은 필수입니다.</span><br/>
<span>나이</span><input type="text" name="age"><span style="display:none;">나이는 필수입니다.</span><br/>
<span>아이디</span><input type="text" name="id"><span style="display:none;">아이디는 필수입니다.</span><br/>
<span>암호</span><input type="password" name="pwd"><span style="display:none;">암호는 필수입니다.</span><br/>
<input type="button" value="확인" id="btn1">
<input type="button" value="취소" id="btn2">
</form>
<br/>
<div id="aa" sm="cv대가">
안녕하세요..<b>jQuery</b><hr/>
반갑습니다..<b>Javascript</b><hr/>
<p>열공</p>
<p>열심히</p>
</div>
<input type="button" value="확인" id="btn3"/>
</body>
</html>
'jquery' 카테고리의 다른 글
| 커서 손가락 바꾸기 (0) | 2013.09.09 |
|---|---|
| jquery & ajax 이해하는 간단한 예제 (2) | 2013.08.07 |
| jquery + ajax (0) | 2013.08.07 |
| jquery 기본예제(jquery가 제공하는 dialog와 달력, 탭 tabs) (0) | 2013.08.07 |
| jquery 기본예제(동적으로 추가된 이벤트 처리할때 on) (0) | 2013.08.07 |