-개발환경-
| IDE : Eclipse IDE for Enterprise Java Developers ver-2020-06 (4.16.0) Tomcat : Tomcat v8.0 Server JQuery : jquery-3.6.0.min.js |
-설정-
|
설정에는 두가지 방법이 있는데 , |
-jquery06_form연습3.html-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#infoBox').focus();//text에 포커스를 넣어줌
$(document).ready(function() {
$('.error').hide(); // onload되자마자 class가 error로 지정된 영역을 숨김
$('#single').submit(function(){
var userid=$('#infoBox').val().trim();
if ( userid == null || userid ==''){
$('#infoBox').val('');
$('.error').show();
return false;
}
return true;
});
$('#confirm').click(function(){
//선택된 과일 가격이 표시될 div 태그 내부의 내용을 지워준다.
//document.getElementById('result').innerHTML='';//js일 경우
$('#result').empty();
//input type이 checkbox 혹은 radio 일 경우 :checked를 이용
//참고로 , select 태그는 option:selected 를 이용
var count = $('input[name=chk]:checked').length;
if ( count == 0){
} else{
$('input[name=chk]:checked').each(function(index){ //checked 된것들을 선택
//체크한 체크 상자중에서 index에 해당되는 요소 1개를 얻어온다.
var chk = $('input[name=chk]:checked').eq(index);
$('#result').append('과일 이름 : '+chk.next().text()+', 가격 : '+chk.val()+'</br>');
});
}
});
$('input[name=chk]').click(function(){
//name 속성 값이 chk인 요소의 갯수로써,
//체크된 요소의 갯수를 비교한다
if( $('input[name=chk]').length==$('input[name=chk]:checked').length ){
$('input[name=all]').prop('checked',true);//checked의 값을 true로 변경하라.
}else{
$('input[name=all]').prop('checked',false);//checked의 값을 false로 변경하라.
}
});
$('input[name=all]').click(function(){
var checked= $('input[name=all]').prop('checked');
$('input[name=chk]').each(function(index){
//$('input[name=chk]').eq(index).prop('checked',checked);
$(this).prop('checked',checked);//윗 명령어와 동일
});
});
});
</script>
</head>
<body>
<form id="single" action="ok.html" method="post">
<div>
<span>사용자 ID</span>
<input id="infoBox" type="text" name="userid"/>
<span class="error" style="color: red; font-weight:bold;">반드시 입력해야 합니다</span>
</div>
<input type="submit" value="입력하기"/>
</form>
<fieldset style="width: 300px">
<legend>체크 여부 확인</legend>
<input type="checkbox" name="all"/>전체선택<br/>
<input type="checkbox" name="chk" value="1000"/><b>사과</b><br/>
<input type="checkbox" name="chk" value="2000"/><b>바나나</b><br/>
<input type="checkbox" name="chk" value="3000"/><b>오렌지</b><br/>
<input id="confirm" type="button" value="확인"/><br/>
<span>선택한 과일 가격</span>
<div id="result">
</div>
</fieldset>
</body>
</html>
|
cs |
-Description
GUI :
12 : text에 포커스를 넣어줌
15 : id 속성이 single로 지정된 form에서 submit 버튼이 클릭되면 실행할 이벤트를 지정한다
17 : 텍스트에 있는 글을 trim 처리후 userid에 저장
18~22 : userid에 들어 있는 값이 올바르지 않다면 해당 텍스트를 공백으로 만든후 ,
class 가 error인 태그를 보여준다. 그리고 false를 반환.
21,24 : // form의 유효성을 검사해서 오류가 발생되면 false를
//리턴시켜 action페이지로 넘어가지 않게 한다.
//반면 true가 리턴되면 action 페이지로 넘어감
27~43 : 체크 박스를 선택하고 확인 버튼을 클릭하면 체크 여부를 확인해서
그 결과를 id속성이 result로 지정된 div 태그 내부에 출력한다.
30 : id가 result인 태그에서, 내부의 내용을 지운다.
34: name속성으로 chk가 지정된 체크상자의 체크된 항목 개수를 검사한다.
40 : .next() : 선택된 요소 바로 다음에 위치한 형제 요소 한개를 선택한다.
45~53 : name 속성이 chk인 체크상자가 클릭되면
모든 체크 상자가 체크되었나 검사해서 전체 선택 체크 상자를 선택 또는 해제한다.
49 : 모든체크상자가 체크되면 name 속성이 all 인 요소의 checked 프로퍼티를
true로 변경한다.
55~61 : 전체 선택 체크박스가 클릭되면 모든 체크상자를 체크 또는 해제한다.
56 : prop 를 이용해 속성을 가져옴
-요약-
형제(sibling) 요소 탐색
//.siblings() : 선택된 요소의 형제 요소 중에서 지정한 선택자에 해당되는 모든 요소를 선택한다.
//.next() : 선택된 요소 바로 다음에 위치한 형제 요소 한개를 선택한다.
//.nextAll() : 선택된 요소 바로 다음에 위치한 형제 요소를 모두 선택한다.
//.nextUntil() : 선택된 요소 바로 다음에 위치한 형제 요소 중에서 지정한 선택자에 해당되는 요소 바로 이전까지의 요소를 모두 선택한다.
//.prev() : 선택된 요소 바로 이전에 위치한 형제 요소를 선택한다.
//.prevAll() : 선택된 요소 바로 이전에 위치한 형제 요소를 모두 선택한다.
//.prevUntil() : 선택된 요소 바로 이전에 위치한 형제 요소 중에서 지정한 선택자에 해당되는 요소 바로 다음까지의 요소를 모두 선택한다.
//Jquery 에서 input 요소의 선택
// :button : type 속성이 'button'인 모든 요소를 선택한다.
// :checkbox : type 속성이 'checkbox'인 모든 요소를 선택한다.
// :file : type 속성이 'file'인 모든 요소를 선택한다.
// :image : type 속성이 'image'인 모든 요소를 선택한다.
// :password : type 속성이 'password'인 모든 요소를 선택한다.
// :radio : type 속성이 'radio'인 모든 요소를 선택한다.
// :reset : type 속성이 'reset'인 모든 요소를 선택한다.
// :submit : type 속성이 'submit'인 모든 요소를 선택한다.
// :text : type 속성이 'text'인 모든 요소를 선택한다.
// :checked : type 속성이 'checkbox' 또는 'radio'인 요소 중에서 체크된 모든 요소들를 선택한다.
// :selected : option 요소 중에서 선택된 모든 요소들를 선택한다.
// :focus : 현재 포커스를 가지고 있는 요소를 선택한다.
// :disabled : 비활성화 되어있는 모든 요소를 선택한다.
// :enabled : 활성화 되어있는 모든 요소를 선택한다.
javascript는 value 속성을 사용해서 ~~~~~.value 형태로 값을 얻어오고 ~~~~~.value = '값' 형태로 값을 저장한다.
jQuery에서는 value 대신 val() 메소드를 사용해서 ~~~~~.val() 형태로 값을 얻어오고 ~~~~~.val('값') 형태로 값을 저장한다.
아래와 같이 사용하면 input 태그의 type 속성의 값이 text인 요소가 여러개 있더라도 첫 번째 요소의 값만 얻어올 수 있다.
var docs = $('input:text').val();
javascript는 innerHTML을 사용해서 태그 내부에 텍스트를 넣어주지만 jQuery는 text() 메소드로 넣어준다.
text() 메소드는 html 태그를 지원하지 않고 html() 메소드는 html 태그를 지원한다.
$('#a').text('<h1>doc<h1>'); // html 태그를 지원하지 않기 때문에 <h1>doc<h1> 가 그대로 들어감
//javascript는 onclick(클릭이벤트), onchange(변화이벤트)와 같이 이벤트가 'on'으로 시작하지만 jQuery는 'on'을 붙이지 않는다.
/* //js 에서 select 태그를 컨트롤
var selEle = document.getElementsByTagName('select')[0];
selEle.onchange = function() {
//selectedIndex : 콤보 박스에서 선택된 option 항목의 index를 얻어온다.
//options : 콤보 상자의 <option> 태그에 입력된 항목을 배열 형태로 기억하는 객체
var doc = document.getElementsByTagName('input')[1];
doc.value = selEle.options[selEle.selectedIndex].value;
}
*/
//Jquery에서 select태그를 컨트롤
$('select:eq(0)').change(() => {
selValue = $('select:eq(0) > option:selected').val(); //선택된 option의 value값을 가져옴
$('input:text:eq(1)').val(selValue);
});
input 태그 중에서 type이 text인 요소를 선택해서 배경색 지정하기
/* //js로 표현
var obj = document.querySelectorAll('input');
for (var i = 0; i < obj.length; i++) {
//getAttribute() : 인수로 지정된 속성의 값을 얻어온다.
if (obj[i].getAttribute('type') == 'text') {
obj[i].style.backgroundColor = 'yellowgreen';
}
}
*/
// Jquery 로 표현
//$('input[type=text]')..css('backgroundColor', 'skyblue');
$('input:text').css('backgroundColor', 'tomato');
//콤보 박스는 한 번에 한 개만 선택되기 때문에 $('select[name=email]:eq(0) > option:selected')와
//$(this)는 같은 의미로 사용되지만 arrow 함수를 사용할 때는 $(this)가 동작되지 않는다.
//each() : 선택된 요소들의 인덱스를 0 부터 1씩 증가시키며 차례대로 함수의 인수로 전달한다.
//$('input:checkbox[name=hobbies]:checked').each(function(index) {
~
});
-마침글-
단순문법공부는 boring하다..
인용
'21년이전 > 국비-JQuery+JAVA-SCRIPT' 카테고리의 다른 글
| Jquery-메뉴에 특수효과 주기 (0) | 2021.03.29 |
|---|---|
| Jquery-속성선택자 (0) | 2021.03.25 |
| JQuery-선택자 (0) | 2021.03.25 |
| JQuery-기본설정 및 이미지처리 (0) | 2021.03.24 |