input 태그의 타입 별  선택 방법


$("input:타입").~~~과 같이 쓴다.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Insert title here</title>
</head>
<body>
	<h1>입력 양식 필터 선택자</h1>
	<p>input 태그의 type속성에 따라 문서 객체 선택 가능</p>
	<label>텍스트 상자 : </label><input type="text"><br>
	<label>버튼 : </label><input type="button"><br>
	<label>체크박스 : </label><input type="checkbox"><br>
	<label>파일 : </label><input type="file"><br>
	<label>이미지 : </label><input type="image" src="../image/flower1.PNG"><br>
	<label>패스워드 : </label><input type="password"><br>
	<label>라디오버튼 : </label><input type="radio"><br>
	<label>리셋버튼 : </label><input type="reset"><br>
	<label>submit 버튼 : </label><input type="submit"><br>
	<script type="text/javascript">
		$(function name() {
			$("input:text").css("background", "red");
			
			$("input:button").attr("value", "왕버튼").css({"width":"200px", "height":"100px"});
			
			$("input:checkbox").attr("checked", true).css({"width":"50px", "height":"50px"});
			
			$("input:file").css("background", "yellowgreen");
			
			$("input:image").mouseenter(function() {
				$(this).attr("src", "../image/river1.PNG");
				// $(this)는 자신을 의미
			})
			
			$("input:image").mouseout(function() {
				$(this).attr("src", "../image/flower1.PNG");
			})
			
			
			$("input:radio").attr("checked", true);
			
			$("input:reset").css({"background":"blue", "color":"white"});
			
			$("input:submit").css({"background":"purple", "color":"white"});
		});
	</script>

	
</body>
</html>




input 태그에 쓰인 value의 값을 반환받는 방법은


JQuery로 원하는 태그를 불러오고 .val() 키워드를 사용


체크박스의 체크 여부 확인의 경우는 .prop("checked"); 이다.



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Insert title here</title>
</head>
<body>
	<h1>입력 양식 필터 선택자</h1>
	<h3>checkbox의 상태에 대한 선택자</h3>
	
	<input type="checkbox" name="hobby" value="game" id="game">
	<label for="game">게임</label>
	<input type="checkbox" name="hobby" value="movie" id="movie">
	<label for="movie">영화</label>
	<input type="checkbox" name="hobby" value="music" id="music">
	<label for="music">음악</label>
	
	<script type="text/javascript">
		// form 태그에서 submit으로 전송하면 ?hobby=game&hobby=movie 형태로 넘어간다.
		// 이 값은 배열 형태로 저장되게 된다.
		$("input:checkbox").change(checkedChange);
		
		function checkedChange() {
			// console.log($(this).prop("checked"));
			
			if($(this).prop("checked")){
				$(this).css({"width":"50px", "height":"50px"});
			}else{
				$(this).css({"width":"15px", "height":"15px"});
			}
		}
	</script>
	
	<hr>
	
	<h3>select > option 태그의 상태에 대한 선택자</h3>
	<select name="national" id="national">
		<option value="한국" selected>한국</option>
		<option value="미국">미국</option>
		<option value="일본">일본</option>
		<option value="중국">중국</option>
	</select>
	
	<label>선택한 나라 : </label><input type="text" id="result">
	
	<script type="text/javascript">
		$(selectChange);
		
		$("#national").change(selectChange);
	
		function selectChange() {
			var value = $("option:selected").val();
			
			$("#result").val(value);
		}
	</script>
	
	<hr>
	
	<h3>input 상태에 대한 선택자</h3>
	<label>활성화 텍스트상자 : </label><input type="text"><br>
	<label>비 활성화 텍스트 상자 : </label><input type="text" disabled><br>
	<label>활성화 버튼 : </label><input type="button" value="활성화"><br>
	<label>비 활성화 버튼 : </label><input type="button" value="비활성화" disabled><br>
	
	<script type="text/javascript">
		$(function() {
			$("input:enabled").css("background", "yellowgreen");
			$("input:disabled").css("background", "red");
		})	
	</script>
	
	<hr>
	
	<h3>필터 선택자</h3>
	
	<table border="1">
		<tr>
			<th>이름</th>
			<th>혈액형</th>
			<th>지역</th>
		</tr>
		<tr>
			<td>김김김</td>
			<td>C형</td>
			<td>달</td>
		</tr>
		<tr>
			<td>님님님</td>
			<td>D형</td>
			<td>태양</td>
		</tr>
		<tr>
			<td>딤딤딤</td>
			<td>E형</td>
			<td>은하계</td>
		</tr>
		<tr>
			<td>림림림</td>
			<td>C형</td>
			<td>지구</td>
		</tr>
		<tr>
			<td>밈밈밈</td>
			<td>D형</td>
			<td>소행성</td>
		</tr>
		<tr>
			<td>빔빔빔</td>
			<td>C형</td>
			<td>집</td>
		</tr>
		<tr>
			<td colspan="2">총원</td>
			<td>6</td>
		</tr>
	</table>
	
	<script type="text/javascript">
		$(function() {
			// odd : 홀수, 0번째 인덱스 부터 계산
			$("tr:odd").css("background", "orange");
			// even : 짝수, 0번째 인덱스 포함
			$("tr:even").css("background", "lightgray");
			// first : 첫번째
			$("tr:first").css("background", "black").css("color", "white");
			// last : 마지막
			$("tr:last").css("background", "orangered").css("color", "white");
		});
	</script>
</body>
</html>






저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 05.jQuery' 카테고리의 다른 글

[JQ]05-06.순회(탐색) 메소드(상위(Ancestors), 하위(descendants), sideway)  (0) 2018.11.20
[JQ]05-05.함수 형태의 필터 선택자(eq(), nth-child(), gt(), lt(), contains(), has(), not()), 필터링 메소드(.filter)  (0) 2018.11.20
[JQ]05-03.선택자(전체 선택자, 태그 선택자, 아이디 선택자, 클래스 선택자, 자식 선택자, 후손 선택자, 속성 선택자,  (0) 2018.11.20
[JQ]05-02.jQuery을 Eclipse에 적용, jQuery 개요, 사용 방법  (0) 2018.11.19
[JQ]05-01.톰캣 서버의 프로젝트 기본 정보 및 경로 바꾸는법  (0) 2018.11.19

+ Recent posts

티스토리툴바