폼 요소 선택하기
셀렉터 | 설명 |
:button | button 및 type 특성값이 button인 요소들을 리턴 |
:checkbox | type 특성이 checkbox인 input 요소들을 리턴 |
:checked | 체크박스 및 라디오 버튼들중 체크된 요소들 리턴 |
:disabled | 비활성화된 모든 요소 리턴 |
:enabled | 활성화된 모든 요소 리턴 |
:focus | 현재 포커스를 가진 요소 리턴 |
:file | 모든 파일 입력 요소들을 리턴한다. |
:image | 모든 이미지 요소들을 리턴한다. |
:input | 모든 button, input select textarea 요소들을 리턴한다. |
:password | 모든 비밀번호 입력 요소들을 가져온다. |
:radio | 모든 라디오 입력 요소들을 가져온다. |
:reset | 모든 리셋 버튼 요소들을 가져온다. |
:selected | 선택된 모든 요소들을 가져온다. |
:submit | button 및 type 특성 값이 submit인 요소들을 가져온다. |
:text | type 특성 값이 text 이거나 특성값이 존재하지 않는 모든 input 요소들을 가져 온다. |
폼요소와 이벤트
메서드 | 설명 |
.val() | input,select textarea 요소에 주로 사용된다. 객체 집합내 첫 번째 요소의 값을 가져오거나 모든 요소들의 값을 수정할 때 사용된다. |
.filter() | 두 번째 셀렉터를 이용하여 제이쿼리 객체집합을 필터링 한다. |
:is() | 폼 요소가 선택 혹은 체크되어 있는지 확인 할 때 주로 사용한다. |
$.isNumeric() | 값이 숫자 값으로 표현될 수 있는지를 불리언 값으로 리턴한다. |
.on() | 모든 이벤트를 처리할 때 사용한다. |
blur | 요소가 포커스를 잃을 때 발생한다. |
change | 입력 요소의 값이 변경 되었을 때 발생한다. |
focus | 요소가 포커스를 얻을 때 발생한다. |
select | select 요소의 옵션 아이템이 변경되었을 때 발생한다. |
submit | 폼데이터를 전송할 때 발생한다. |
예)
.html
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description..." />
<input type="submit" id="addButton" value="add" />
</form>
</div>
.js
$(function() {
var $newItemButton = $('#newItemButton');
var $newItemForm = $('#newItemForm');
var $textInput = $('input:text');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click', function(){
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit', function(e){
e.preventDefault();
var newText = $textInput.val();
$('li:last').after('<li>' + newText + '</li>');
$newItemForm.hide();
$newItemButton.show();
$textInput.val('');
});
});
'매일코딩 > 자바스크립트 개념' 카테고리의 다른 글
| [생활코딩 함수] 값으로서의 함수 2 (0) | 2017.05.31 |
|---|---|
| [생활코딩 함수] 유효범위 1 (0) | 2017.05.30 |
| [자바스크립트 기초]제이쿼리 3 (4) | 2017.03.04 |
| [자바스크립트 기초]제이쿼리 2 (2) | 2017.03.03 |
| [자바스크립트 기초]제이쿼리 1 (4) | 2017.03.02 |
댓글