반응형
*Form Control의 값 설정/ 값 얻기
-
값 얻기
-
$(selector).val()
-
값 설정
-
$(selector).val(값);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{width: 1000px; heigth:600px; margin:0px auto; }
#getValue{width:498px; height:598px; border:1px solid #333; float:left;}
#setValue{width:498px; height:598px; border:1px solid #333; float:right;}
</style>
<!-- CDN을 사용하여 jQuery를 다운로드 받아 사용. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//이름이 유일한 HTML Form Control 얻기
$("#btn").click(function(){
var output="<ul>";
//text 값 얻기
output+="<li>text :"+$("#text").val()+"</li>";
//password
output+="<li>password :"+$("#pass").val()+"</li>";
//hidden
output+="<li>hidden :"+$("#hid").val()+"</li>";
//checkbox : value가 설정되어있지 않으면 on이 나온다.
output+="<li>checkbox :"+$("#flag").val()+"</li>";
//date
output+="<li>date(HTML5 Control) :"+$("#date").val()+"</li>";
//select
output+="<li>select :"+$("#loc").val()+"</li>";
//file : 경로는 가상의 경로명이 나온다.(보안문제->크롬만?)
output+="<li>file :"+$("#file").val()+"</li>";
//textarea
output+="<li>textarea :"+$("#ta").val()+"</li>";
$("#value").html(output);
if(confirm("전송하시겠습니까?")){//404
//document.frm.submit();//도 되긴 되는데...
$("#frm").submit();//jquery에서 제공하는 함수
}//end if
});//click
//값 설정
$("#btnSet").click(function(){
//text 값 설정
$("#text1").val("김");
//password 값 설정 :*(방향?양?문자?)로 보여준다
$("#pass1").val("123456");
//hidden 값 설정
$("#hid1").val("히든태그의 값");
//date 값 설정 : yyyy-mm-dd의 형식을 가진 값
$("#date1").val("2019-05-15");
//file 값 설정 : file은 값 설정이 되지 않는다.(보안의 이슈)
//$("#file1").val("c:/div/env.bat");
//textarea 값 설정
var msg="널 향한 설레임은 \n오늘 부터 우리는\n꿈꾸며 기도하는 오늘부터 우리는"
$("#ta1").val(msg);
});//click
});//ready
</script>
</head>
<body>
<div id="wrap">
<div id="getValue">
<strong>값 얻기</strong>
<form name="frm" action="test.jsp" id="frm"><!-- 백엔드로 값을 넘길때에는 name이 꼬오오오오옥 필요 / jQuery에서 중요한건 id -->
<label>text</label>
<input type="text" name="text" class="inputBox" value="오늘부터 우리는" id="text"/><br/>
<label>password</label>
<input type="password" name="pass" class="inputBox" value="여자친구" id="pass"/><br/>
<label>hidden</label>
<input type="hidden" name="hid" value="2019-02-22" id="hid"/><br/>
<label>checkbox</label><!-- value가 없는 checkbox는 on이 넘어간다. -->
<input type="checkbox" name="flag" id="flag"/>로그인 유지<br/>
<label>날짜선택</label><!-- HTML5에서 지원되는 Control 그전엔 없다! -->
<input type="date" name="date" id="date"/><br/>
<label>지역선택</label>
<select name="loc" id="loc">
<option value="서울">서울</option>
<option value="경기">경기</option>
<option value="강원">강원</option>
<option value="충청">충청</option>
</select><br/>
<label>파일선택</label><!-- 값을 얻을 수는 있는데 설정은 되지 않는다. -->
<input type="file"name="file"id="file"class="inputBox"/><br/>
<label>ta</label><!-- 값을 넣을때는 value로 넣긴 하는데 태그사이에 넣어쓴다../textarea사이에선 엔터를 치지 않는다+공백도 -->
<textarea class="inputBox"name="ta"id="ta"style="width:300px;height:100px">소원,은하,엄지,유쥬,신비,예린</textarea>
<br/>
<input type="button" value="값얻기" class="btn" id="btn"/>
<input type="reset" value="초기화" class="btn" id="rst"/>
</form>
<div id="value"></div>
</div>
<div id="setValue">
<strong>값 설정</strong>
<form name="frm1"id="frm1">
<label>text</label>
<input type="text" name="text" class="inputBox" id="text1"/><br/>
<label>password</label>
<input type="password" name="pass" class="inputBox" id="pass1"/><br/>
<label>hidden</label>
<input type="hidden" name="hid" id="hid1"/><br/>
<label>날짜선택</label>
<input type="date" name="date" id="date1"/><br/>
<label>파일선택</label>
<input type="file"name="file"id="file1"class="inputBox"/><br/>
<label>ta</label>
<textarea class="inputBox"name="ta"id="ta1"style="width:300px;height:100px"></textarea>
<br/>
<input type="button" value="값설정" class="btn" id="btnSet"/>
<input type="reset" value="초기화" class="btn"/><!-- jQuery에서 하는게 아니라 id뺌~ -->
</form>
</div>
</div>
</body>
</html>
-
checkbox check상태
-
is( ) 함수 사용=>boolean
-
$(selector).is(":checked")//선택되었니?
-
ex)
-
<input type="checkbox" name="hobby" value="a"/>a
-
..b
-
..c
-
..d라면
-
var arr=$("[name='hobby']");
-
$.each(arr,function(i,cb(입력된 배열방에 들어있는 checkbox control한개=>HTML Object(객체)){
-
if($(cb).is(":checked")){//cb를 this로 바꾸면 나랑 가장 가까운 객체를 가리킴으로 cb가 자동으로 가짐
-
//체크된 객체의 값을 얻을 수 있다.
-
}
-
});
-
checkbox를 체크되도록 설정=>HTML의 속성추가(속성명='값')
-
(ex/체크하나를 체크하면 나머지도 주르륵)
-
속성변경
-
attr : 속성이 추가만 되고 재추가/변경이 되지 않는다.
-
$(selector).attr("속성명","값");
-
prop : 속성이 추가되고 추가된 속성이 존재한다면 값이 변경도 된다.
-
$(selector).prop("속성명","값");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<!-- CDN을 사용하여 jQuery를 다운로드 받아 사용. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
//체크박스 중 선택된 체크박스의 값(제목)을 얻는다.
//alert($("input:eq(0)").is(":checked"));
var checkArr=$("[name='movie']");//이름이 같은 Control들은 배열로 나온다.
//alert(checkArr.length);
var data="[{'movie':'해리포터','synopsis':'해리포터가 비밀의 방에 들어가기 위해 비밀번호를 찾아 나가는데...'},"+
"{'movie':'사바하','synopsis':'가나다라마바 사바하!!!'},"+
"{'movie':'극한직업','synopsis':'마약반 형사가 지금까지 이런 맛은 없었다...새로운 마약을 발견하는 영화.'},"+
"{'movie':'신데렐라','synopsis':'신데렐라가 유리구두를 잃어 버리고 마는데...'}]"
var movieJsonArr=eval("("+data+")")//문자열 데이터를 JSONArray로 생성
var output="<ul>";
$.each(checkArr,function(i,checkbox){
//alert($(checkbox).is(":checked"));
//alert($(this).is(":checked"));
var checkMovie="";
if($(this).is(":checked")){
checkMovie=$(this).val();
output+="<li>"+$(this).val()+"</li>";
//선택된 영화의 줄거리를 가지고 있는 JSONArray에서 값 얻기
$.each(movieJsonArr,function(i,movieJson){
//if(movieJson.movie==$(checkbox).val()){
if(movieJson.movie==checkMovie){
output+="<li> 줄거리: "+movieJson.synopsis+"</li>";
}//end if
});//each
}//end if
});//each
output+="</ul>";
$("#movieView").html(output);
});//click
$("#btn1").click(function(){
/* 라디오는 여러개 중 하나만 선택되므로 selector:checked를 사용하면 선택된 값 하나를 얻을 수 있다. */
//alert($("[name='movie1']:checked").val() );//라디오는 하나만 선택해 컨트롤의 체크를 확인해 값을 가져올수 있다.
/* 배열을 반복시켜 선택된 라디오가 존재한다면 값을 얻는 코드. */
/* var radioArr=$("[name='movie1']");
$.each(radioArr,function(i,radio){
if($(this).is(":checked")){
alert($(this).val() );
}//end if
});//each */
var img=$("[name='movie1']:checked").val();
if(img==undefined){
alert("포스터를 선택해 주세요.");
return;
}//end if
//<img>태그에 포스터로 속성 설정
$("#img").attr("src","images/"+img+".png");
});//click
$("#flag").click(function(){
var flag=$(this).is(":checked");
var movieArr=$("[name='movie']");
$.each(movieArr, function(i,movie){
//name="movie"인 체크박스의 체크상태를 변경하는 속성을 넣는다.
//$(movie).attr("checked",flag);
$(movie).prop("checked",flag);
});//each
});//click
});//ready
</script>
</head>
<body>
<div>
<label>감상한 영화 선택</label><br/>
<input type="checkbox"name="flag" id="flag"/>전체 선택<br/>
<input type="checkbox"name="movie" value="해리포터"/>해리포터와 비밀의 방<br/>
<input type="checkbox"name="movie" value="사바하"/>사바하<br/>
<input type="checkbox"name="movie" value="극한직업"/>극한직업<br/>
<input type="checkbox"name="movie" value="신데렐라"/>신데렐라<br/>
<input type="button" value="선택한 값얻기" class="btn" id="btn"/>
<div id="movieView" style="height:250px;"></div>
<input type="radio"name="movie1" value="harry"/>해리포터와 비밀의 방<br/>
<input type="radio"name="movie1" value="sabaha"/>사바하<br/>
<input type="radio"name="movie1" value="extreme"/>극한직업<br/>
<input type="radio"name="movie1" value="cinderella"/>신데렐라<br/>
<input type="button" value="포스터 보기" class="btn" id="btn1"/>
<div >
<img id="img"/>
</div>
</div>
</body>
</html>
*태그 추가하기( DOM->html(),text() )
-
$(selector).append("추가할 내용")
-
$(selector).remove();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<!-- CDN을 사용하여 jQuery를 다운로드 받아 사용. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//var cnt=0;
$("#btnInput").click(function(){
var name=$("#name").val();
var age=$("#age").val();
var addr=$("#addr").val();
//입력값으로 table에 행을 추가
$("#tab:last").append("<tr><td>"+name+"</td><td>"+age+"</td><td>"+addr+"</td></tr>");
});//click
$("#btnRemove").click(function(){
//마지막 추가된 행 삭제
//alert($("tab tr").length);
if($("#tab tr").length!=1){
//if(cnt>0){
//if($("#tab:last tr:last")!=$("#tab:first th:first")){
$("#tab:last tr:last").remove();
//cnt++;
}//end if
});//click
$("#l_add").click(function(){
//입력폼 추가
var output="<div>자격증 명<input type='text'name='license'class='inputBox'><br/>"
+"취득일 :<input type='date'name='l_date'>"
+"발급기관 :<input type='text' class='inputBox'/></div>";
if($("#licenseFrm div").length<5){/* "#licenseFrm>div" */
$("#licenseFrm").append(output);
}else{
alert("자격증은 5개까지 입력 가능합니다!@")
}//end else
});//click
$("#l_remove").click(function(){
//$("#licenseFrm").children().last().remove();
$("#licenseFrm div:last").remove();
});//click
});//ready
</script>
</head>
<body>
<div>
<label>이름</label><input type="text"name="name" class="inputBox"id="name"/>
<label>나이</label><input type="text"name="age" class="inputBox"id="age"/>
<label>주소</label><input type="text"name="addr" class="inputBox"id="addr"/>
<input type="button" value="행추가" class="btn"id="btnInput"/>
<input type="button" value="마지막행 삭제" class="btn"id="btnRemove"/>
</div>
<table border="1" id="tab">
<tr>
<th width="80">이름</th>
<th width="40">나이</th>
<th width="200">주소</th>
</tr>
</table>
<div id="licenseDiv" style="width:500px;">
<div>
<span style="float:left">자격사항</span>
<span style="float:right;">
<a href="#void"><img src="images/add.png" title="자격사항 추가" id="l_add"></a>
<a href="#void"><img src="images/remove.png" title="자격사항 삭제" id="l_remove"></a>
<!-- href를 적지않으면 나를 다시 요청(갱신해) 다시요청! -->
</span>
</div>
<div id="licenseFrm" style="clear:both;"><!-- clear:both 셋팅이 아래로 내려오는것 방지 -->
</div>
</div>
</body>
</html>
반응형
'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글
| 86일차-JavaEE_Servlet/Life cycle (0) | 2019.03.07 |
|---|---|
| 85일차-jQuery_effect/plugin+Servlet (0) | 2019.03.07 |
| 83일차-jQuery_selector/Event Handling/DOM (0) | 2019.03.03 |
| 82일차-JavaScript_closure/class (0) | 2019.03.03 |
| 81일차-JavaScript_회원가입 추가/canvas,storage,JSON (0) | 2019.02.28 |