📝 jQuery
🖥️ 1. 입력 요소 값 가져오기
1-1. val() 함수의 사용
📌 입력값 설정하기
파라미터를 통해 입력값을 설정한다.
$("셀렉터").val("내용");
📌 입력값 조회
파라미터 없이 함수를 호출하면 현재 설정되어 있는 입력값 (value 속성의 값)을 리턴 받는다.
let value = $("셀렉터").val();
- 조회한 입력값의 존재 여부를 if문으로 검사하면 입력여부를 알 수 있다.
if( !value ){ ... }
- focus() 함수의 사용
입력 요소에 포커스를 강제로 설정한다.
$("셀렉터").focus();
입력값 검사 패턴
let value = $("셀렉터").val(); if( !value ){ alert("메시지"); $(셀렉터).focus(); return false; }
1-2. 드롭다운의 입력값
- 만약
<option> 요소에 value 속성이 없을 경우 태그 안의 내용을 가져오기 때문에 값이 필요없는 항목이더라도 반드시 공백을 지정해야 한다.
드롭다운 역시
val() 함수를 사용하여 선택한<option> 요소의 값을 가져온다.let value = $("#foo").val();선택 위치 조회
$("#foo > option:selected").index();
1-3. radio의 선택항목
- 여러 개의 항목 중에서 선택된 항목을 의미하는
가상 셀렉터 ':checked' 사용하여 선택된 요소에 접근
- 라디오 버튼은 여러 개의 항목 중에서 단 하나만 선택할 수 있으므로 ':checked' 가상클래스를 사용하여 접근하는 요소 역시 단일 요소가 된다.
1-4. checkbox 선택항목
- 체크박스는 여러 개의 항목들 중에서 복수 선택이 가능한 요소
사용자가 선택한 항목에 대한 접근 가상 셀렉터 ':checked'를 사용
let el = $("셀렉터:checked");체크박스는 복수 선택이 가능하기 때문에 접근 요소는 배열 상태
가져온 요소가 유사배열 형태이기 때문에 반복문으로 처리
for( let i = 0; i < el.length; i++ ){ let value = $(el[i].val()); }
📝 예제
EX)
<head>
...
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
p{ color: orange; margin: 8px; }
</style>
</head>
<body>
<input type="text" value="some text" />
<p></p>
<script>
$("input").keyup(function(){
let value = $(this).val();
$("p").text(value);
});
</script>
</body>EX) dropdown
<head>
...
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<form id="myform">
<div>
<label>
과목 :
<select name="subject" id="subject">
<option value="">---선택해주세요---</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</select>
</label>
<button type="submit">입력값 확인</button>
<hr/>
<!-- 결과확인 div -->
<div id="result"></div>
</div>
</form>
<script>
$("#myform").submit(function(e){
e.preventDefault();
let subject = $("#subject").val();
if( !subject ){
alert("과목을 선택하세요");
$("#subject").focus();
return false;
}
let subject_index = $("#subject > option:selected").index();
$("#result").append("<div>과목 : " + subject + "</div>");
$("#result").append("<div>선택한 과목의 인덱스 : "
+ subject_index + "</div>");
});
</script>
</body>EX) radio
<head>
...
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<form id="myform">
<label>
<input type="radio" name="subject" value="html"/> HTML
</label>
<label>
<input type="radio" name="subject" value="css"/> CSS
</label>
<label>
<input type="radio" name="subject" value="javascript"/> javascript
</label>
<button type="submit">입력값 확인</button>
</form>
<script>
$("#myform").submit(function(e){
e.preventDefault();
let subject = $("input[name='subject']:checked").val();
if( !subject ){
alert("선택된 항목이 없습니다.");
return false;
}
alert("선택한 항목은 " + subject + "입니다.");
});
</script>
</body>EX) check
<head>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<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>
$('#myform').submit(function(e){
e.preventDefault();
// 선택된 항목을 가지고 온다.
let check_list = $(".hobby:checked");
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>