이름 :
지역 :
성별 : 남자
여자
| 이름 | 성별 | 지역 | 메세지 |
|---|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> jquery 입력 연습 </title>
<style>
th {
width: 100px;
}
textarea {
width: 220px;
height: 50px;
}
</style>
<script src = "../lib/jquery-3.1.1.min.js"></script>
<script>
$(function(){
$('#check').click(function(){
var name = $('#name').val();
var reg = $('#reg').find('option:selected').text();
var gender = $('input[name="gender"]:checked').val();
var msg = $('#msg').val();
var tbl = $('#tbl');
var tr = $('<tr/>');
var td1 = $('<td/>');
var td2 = $('<td/>');
var td3 = $('<td/>');
var td4 = $('<td/>');
td1.text(name);
td2.text(reg);
td3.text(gender);
td4.text(msg);
if ((name == '')||(reg == '')||(gender == '')||(msg == '')){
alert('모든 항목을 채워주세요');
} else{
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tbl.append(tr);
// 입력값 초기화
$('#name').val('');
$('#reg option:first').prop('selected', true);
$('input[name="gender"]:eq(0)').prop('checked', true);
$('#msg').val('');
}
});
});
</script>
</head>
<body>
<div>
<div>
이름 : <input id="name" type="text" size="20" placeholder="이름을 입력해주세요"/>
</div>
<div>
지역 :
<select id="reg">
<option value="seoul">서울</option>
<option value="busan">부산</option>
<option value="suwon">수원</option>
<option value="incheon">인천</option>
</select>
</div>
<div>
성별 : <input type='radio' name='gender' value='남자' checked/>남자
<input type='radio' name='gender' value='여자'/>여자
</div>
<textarea id="msg" placeholder="메세지를 입력하세요"></textarea>
<div>
<input type='button' id='check' value='확인'/>
</div>
<table id = "tbl" border="'1">
<tr>
<th>이름</th>
<th>성별</th>
<th>지역</th>
<th>메세지</th>
</tr>
</table>
</div>
</body>
</html>
- text() : 괄호 안 문구 대체 > String
- html() : 괄호 안에 문구를 태그하면 태그화, 문자면 문자 출력
- remove() : 해당 태그 + 내부를 제거, 더 큰 느낌
- empty() : 해당 태그의 내부만 제거
- attr(속성명, 변경값) : 속성 변경
- Method Chaining : 이벤트 여러 개 연결, 가독성 good
$(function(){
$('#divText').text(' <img src = "images/grim.jpg"> ');
$('#divHtml').html('<img src = "images/grim.jpg">');
$('#divEmpty').empty();
$('#divEmpty').remove();
// src 속성 변경 > 사진 바꾸기
$('#divHtml').attr( 'src', "images/cat.jpg");
$('#changeGrim')
.attr( 'src', "images/cat.jpg")
.click( function(){
alert('그림이 선택되었습니다.');
})
.css('border', '2px dashed blue');
});
- toggleClass("클래스명") : 클래스가 있으면 제거, 없으면 생성
// 버튼을 클릭하면 <button class="border">이 되는 것
$('button').click(function(){
$(this).toggleClass("border");
})
'JS' 카테고리의 다른 글
| [jQuery] 이벤트 위임(Event Delegation) (0) | 2023.05.12 |
|---|---|
| [jQuery] 선택자, 메소드 정리 (1) | 2023.05.11 |
| [JS] append(), appendChild() (0) | 2023.05.08 |
댓글