2013년 8월 10일 토요일

[WEB표준, WEB2.3, 3.0, 웹접근성, HTML5 교육]jquery selector 속성선택자 입력양식 필터 선택자 input type

jquery selector 속성선택자 입력양식 필터 선택자 input type

 1. 속성 선택자

기본 선택자 뒤에 붙어 사용
요소(속성)
요소 속성값이  특정 속성을 가지고 있는 객체 선택.
요소(속성=값)
요소 속성값이  특정 속성 값을 가지고 있는 객체 선택
요소(속성~=값)
요소 속성값이 특정 속성 값을 포함하고 있는 객체 선택.
요소(속성^=값)
요소 속성값이  특정 속성 값으로 속성값이 시작하는 객체 선택.
요소(속성^=값)
요소 속성값이  특정 속성 값으로 속성값으로 끝나는 객체 선택.
요소(속성*=값)
요소 속성값이  특정 속성 값으로 속성값을  포함하는 객체 선택.

2. 입력양식 필터 선택자
input 태그의 type 속성에 따라 문서 객체 선택
필터 선택자는 기본선택자 뒤에 input:button 형태

요소:button => input 태그 중 type이 button인 문서 객체와 버튼 태그 선택
요소:checkbox => input 태그 중 type이 checkbox인 문서 객체 선택
요소:file =>  input 태그 중 type이 file인 문서 객체 선택
요소:password=> input 태그 중 type이 password인 문서 객체 선택
요소:image=> input 태그 중 type이 image인 문서 객체 선택
요소:radio=> input 태그 중 type이 radio인 문서 객체 선택
요소:text=> input 태그 중 type이 text인 문서 객체 선택
요소:submit=> input 태그 중 type이 submit인 문서 객체 선택
 
<html>
<head>
<meta charset="utf-8"/>
<script src="/ajaxjquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[type=text]").val("OnJ Programming");
//3초후에 실행
setTimeout(function () {
var value = $("select > option:selected").val();
alert(value);
//창 띄운 후 button 및  text 값을 바꿈
$("input:button").val("Click Me");
$("input:text").val("Click Me");
}, 3000);
});
</script>
<body>
    <!-- 페이지가 시작되면서 OnJ Programming으로 채워진다. -->
<input type="text" name="your name"/>
<select>
<option> oracle </option>
<option selected> java </option>
</select>
<input type="button" value="Click"/>
</body></html>
 
 
 
 
 
 



댓글 없음:

댓글 쓰기