1.select
1-1. 선택 값 조회하기
- 만약 option 요소에 value 속성이 없을 경우 태그 안의 내용을 가져오기
때문에 값이 필요없는 항목이더라도 반드시 공백을 지정해야 한다.
<select id="user">
<option value="">--선택하세요--</option>
<option value="1">항목1</option>
</select>-
드롭다운 역시 val()함수를 사용하여 선택한 option요소의 값을 가져온다.
let value = $("#user").val();
-
선택위치 조회하기
-> 드롭다운에 포함된 option태그 중에서 선택된 항목 (:selected)의 위치를
검사한다.$("#user > option.selected").index();
2. Radio의 선택항목
2-1. 선택 값 조회하기
-
여러개의 항목중에서 선택된 항목을 의미하는 셀렉터인 ':checked'를
사용하여 선택된 요소에 접근한다. -
라디오 버튼은 여러개의 항목 중에서 단 하나만 선택할 수 있으므로,
":checked"를 사용하여 접근하는 요소 역시 단일 요소가 된다.$("셀렉터:checked").val();
<script>
$("#myform").submit(function(e){
e.preventDefault();
let subject = $("input[name='subject']:checked").val();
if( !subject ){
alert("선택된 항목이 없습니다.");
return false;
}
alert("선택한 항목은" + subject + "입니다.");
});
</script>3. checkbox
-
체크박스는 여러개의 항목 중에서 복수 선택이 가능한 요소이다.
<input type="checkbox" name="hello" class="mycheck" value="1" / >
<input type="checkbox" name="hello" class="mycheck" value="2" / >
<input type="checkbox" name="hello" class="mycheck" value="3" / >$("셀렉터:checked");
-
복수 선택이 가능하기 때문에 접근한 요소는 유사 배열형태가 된다.
<body>
<form id="myform">
<label><input type='checkbox' class='hobby' value="soccor">축구</label>
<label><input type='checkbox' class='hobby' value="basketball">농구</label>
<label><input type='checkbox' class='hobby' value="baseball">야구</label>
<button type='submit'>입력값 확인</button>
<hr />
<div id="result"></div>
</form>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$("#myform").submit(function(e){
e.preventDefault();
// 선택된 항목을 가져온다.
let check_list = $(".hobby:checked");
// 배열의 길이가 0이라면 선택된 항목이 없다는 의미이므로 중단
if( check_list.length == 0 ){
alert("선택된 항목이 없습니다.");
return false;
}
// 배열의 길이만큼 반복
for( let i = 0; i<check_list.length; i++ ){
let value = $(check_list[i]).val();
// 화면 출력
$("#result").append("<div>" + value + "</div>");
}
});
</script>
</body>4. 반복처리
-
HTML 요소에 대한 반복처리를 수행하는 경우, 배열의 각 요소에 대한 index
값을 사용하여 원소에 접근해야 한다. -
$.each() 함수는 HTML 요소의 수 만큼 콜백함수를 호출하면서 배열의 인덱스와
원소를 파라미터로 전달한다.for ( let i = 0; i < elm.lenght; i ++ ) {
let value = $(elm[i]).val();
}$.each(elm, function(index, item){
// index : 배열의 위치
// item : 배열의 각 원소
});
5. 포커스 관련 이벤트 처리
5-1. 요소에 포커스가 들어 갔음을 감지하는 이벤트
-
focus()는 함수로서 사용할 경우 강제로 포커스를 지정하는 기능을 갖지만,
이벤트로서 사용할 경우 포커스가 들어갔음을 감지하는 기능을 한다.$("셀렉터").focus(function(){
});
5-2. 포커스가 빠져 나왔음을 감지하는 이벤트
-
blur() 함수는 포커스가 빠져나왔음을 감지한다.
$("셀렉터").blur(function(){ });<body> <form id="myform"> <h3>주민번호를 입력하세요</h3> <input type='text' name='jumin1' id='jumin1' /> - <input type='password' name='jumin2' id='jumin2' /> </form> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $("#jumin1, #jumin2").focus(function(){ $(this).css('background-color', 'tomato'); }); $("#jumin1, #jumin2").blur(function(){ $(this).css('background-color', 'white'); }); // 키 이벤트 $("#jumin1").keyup(function(){ let value = $(this).val(); if( value.length >= 6 ){ $("#jumin2").focus(); } }); </script> </body>
6. change() 이벤트
-
요소의 입력, 선택 상태가 변경되었음을 감지하는 이벤트
$("셀렉터").change(function(){
});
-
텍스트를 입력하는 요소일 경우
-> 내용이 변경되고 포커스가 빠져나올 때 이벤트 발생 -
체크박스 or 라디오 버튼
-> 선택상태가 변경된 즉시 발생 -
드롭다운
-> 선택 상태가 변경된 즉시 발생<body> <select name="site" id="site"> <option value="">--- 선택하세요 ---</option> <option value="http://www.naver.com">네이버</option> <option value="http://www.daum.net">다음</option> <option value="http://www.google.com">구글</option> </select> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $("#site").change(function(){ let url = $(this).val(); if( url != ""){ window.open(url); } }); </script> </body>
7. HTML 속성의 종류
-
attribute
-> 값을 갖는 속성
-> 설정값 조회 : attr(key)
-> 값 설정 지정 : attr(key,value) -
property
-> 값을 갖지 않는 속성
-> 설정값 조회 : prop(key)
-> 값 설정 기능 : prop(key, boolean)
-> disabled, checed, selected#(셀렉터).prop("disabled", true);
8. 정규표현식
8-1. 정규표현식이란
- 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 '형식언어'이다.
- 정규표현식은 많은 텍스트 편집기와 프로그래밍 언어에서 '문자열의 검색과
치환'을 위해 지원하고 있다.
8-2. 자바스크립트에서 정규표현식의 사용
let regex = /정규표현식/;
if( regex.test("검사할 문자열") ) {...}- javascript는 정규표현식을 슬래시(/)로 감싸서 표현
- 정규표현식은 하나의 객체 형태가 되고, 내장하고 있는 test() 메서드를 통해
문자열이 그 식에 부합할 경우 true, 그렇지 않을 경우 false를 리턴
