:submit 선택자는 폼 요소 중 type이 submit 인 것을 찾습니다.
원문 링크 
http://api.jquery.com/submit-selector/
- jQuery(':submit')
예 제
submit 버튼을 찾아서 색을 입힙니다. td 요소를 생성하여 input 의 타입을 표시해 줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
textarea { height:45px; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<table>
<form>
<table id="exampleTable" border="1" cellpadding="10" align="center">
<tr>
<th>
Element Type
</th>
<th>
Element
</th>
</tr
<tr>
<td>
<input type="button" value="Input Button"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>
<input type="hidden" />
</td>
</tr>
<tr>
<td>
<input type="image" />
</td>
</tr>
<tr>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="reset" />
</td>
</tr>
<tr>
<td>
<input type="submit" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<select><option>Option</option></select>
</td>
</tr>
<tr>
<td>
<textarea></textarea>
</td>
</tr>
<tr>
<td>
<button>Button</button>
</td>
</tr>
<tr>
<td>
<button type="submit">Button type="submit"</button>
</td>
</tr>
</table>
</form>
<div id="result"></div>
<script>
var submitEl = $("td :submit")
.parent('td')
.css({background:"yellow", border:"3px red solid"})
.end();
$('#result').text('jQuery matched ' + submitEl.length + ' elements.');
// so it won't submit
$("form").submit(function () { return false; });
// Extra JS to make the HTML easier to edit (None of this is relevant to the ':submit' selector
$('#exampleTable').find('td').each(function(i, el) {
var inputEl = $(el).children(),
inputType = inputEl.attr('type') ? ' type="' + inputEl.attr('type') + '"' : '';
$(el).before('<td>' + inputEl[0].nodeName + inputType + '</td>');
})
</script>
</body>
</html>
미리보기
재미있는 예제입니다. submit 버튼을 찾는 방법을 보면 td :submit 으로 되어 있습니다. td 안에 submit 버튼이 있으면 배경색을 노란색으로 빨간색 테두리를 입혀줍니다.
그 아래 부분이 더 재미있습니다. 이 코드가 하는 일은 td를 하나 추가하는 것입니다. 그 td 안에 텍스트를 채워넣고 있는데요. input 의 타입을 알아내서 td에 써넣어 주고 있네요. 위 html 부분을 자 보시면 tr 안에 딱 하나의 td밖에 없습니다. 그런데 이 코드 때문에 td가 2개가 되어 있습니다.
일단 exampleTable을 찾아서 td 요소 수만큼 Loop 를 돌리는 each()함수를 실행 시키고 있습니다. 그 안에서는 el 이란 변수가 있는데요. 이 el이 td 가 되겠습니다. td의 children() 즉, 자식 요소를 찾아서 3항식을 이용해 문자열을 만듭니다. 만약 그 요소에 type이라는 속성이 있으면 문자열을 만들어 내고 있죠. 그리고 el 즉 현재의 td 앞쪽에 (before 함수를 사용했습니다.) 새로운 td를 추가해놓고 있습니다.우와~ 이렇게 간단히 작성이 된다니 너무 신기합니다. 하하하; 빨리 더 많은 내용을 접했으면 좋겠습니다.
오랜 만에 아주 재밌는 예제를 만나서 기분 좋네요. 너무길어서 줄이려다가 자세히 봤더니 괜찮은 예제입니다. 혹시 안보셨다면 다시 위쪽에서 확인하고 가셔요~.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - attr(), 속성을 제어하기 (2) | 2011.02.25 |
|---|---|
| jQuery API 정복 - addClass(), 클래스 추가하기 (5) | 2011.02.25 |
| jQuery API 정복 - 눈에 보이는 요소 찾기 : visible (5) | 2011.02.24 |
| jQuery API 정복 - text 박스 찾기 : text (3) | 2011.02.24 |
| jQuery API 정복 - select 박스에서 선택된 것 찾기 : selected (4) | 2011.02.22 |
| jQuery API 정복 - reset 버튼 찾기 : reset (2) | 2011.02.21 |
| jQuery API 정복 - radio 버튼 찾기 : radio (2) | 2011.02.21 |
| jQuery API 정복 - type=password 인 것 찾기 : password (2) | 2011.02.18 |