티스토리 뷰

WEB/jQuery

[jQuery] 다양한 Selector 이용

춘햄 2021. 6. 7. 12:09

Selector를 활용하는 방법이야, 구현하려는 기능에 따라 셀 수도 없을만큼 많겠지만, 하나 하나를 따로 포스팅하면 글의 갯수가 좀 감당이 안될 거 같아서... 이번 포스팅에 input, select 등의 선택자를 제어하는 방법을 어느 정도 정리하려고 한다.

 

바로 들어가 보자.

1. input 제어

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title></title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
			// 특정 요소의 갯수: size()
			// 요소들의 태그명(tagName), 속성명, 속성값 추출
			alert($(':input').size());
        
        	// 요소들의 태그명(tagName), 속성명, 속성값  추출...
        	var result = "";
        	$(':input').each(function(index) {
        		result+="태그명 : " + this.tagName + "type 속성 값 : " + $(this).attr('type') + "\n";
        	});
			alert(result);
        });
    </script>

</head>

<body>

    <input type="button" value="Input Button" /><br />
    <input type="text" /><br />
    <input type="password" /><br />
    <input type="checkbox" /><br />
    <input type="file" /><br />
    
    <input type="hidden" /><br />
    <input type="image" /><br />
    <input type="radio" /><br />
    <input type="reset" /><br />
    <input type="submit" /><br />
    
    <select><option>드롭다운리스트</option></select><br />
    <textarea>멀티라인텍스트박스</textarea><br />
    <button>버튼</button><br />

</body>

</html>

2. text box 제어

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트박스(textbox)의 값 복사</title>

<style type="text/css">
.silver {
	background-color: Silver;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// 1. 입력 부분의 스타일 변경
		$(':text').addClass('silver');
		
		// 2. 버튼을 클릭 했을 때 위의 값을 아래쪽에 복사...
		$('#btnCopy').click(function(){
			
			$('#txtID').val($('#txtUserID').val());
			
		});
		
	});
</script>

</head>

<body>

	아이디 : <input type="text" id="txtUserID" /> <!-- 입력값 추출 val() -->
	<hr />
	<input type="button" id="btnCopy" value="복사" />
	<hr />
	아이디 : <input type="text" id="txtID" /> <!-- 입력값 설정 val(값) -->

</body>

</html>

3. 비밀번호 일치 여부 확인

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>암호확인 기능 구현하기</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		//  1. id = "lblError" 의 텍스트를 clear
		$('#txtPassword').keyup(function() {
			$('#lblError').text('');
		});
		
		// 2. 확인 기능
		$('#txtPasswordConfirm').keyup(function() {
			if($('#txtPassword').val() !== $('#txtPasswordConfirm').val()) {
				$('#lblError').text('');
				$('#lblError').html("<b> 암호가 틀립니다. </b>");
			} 
			else {
				$('#lblError').text('');
				$('#lblError').html("<b>  암호가 맞습니다. </b>");
			}
		});
	});
</script>

</head>

<body>
	<table style="border: 1px solid skyblue;">
		<tr>
			<td>암호 :</td>
			<td><input type="password" id="txtPassword" size="20" /></td>
		</tr>
		<tr>
			<td>암호확인 :</td>
			<td><input type="password" id="txtPasswordConfirm" size="20" /></td>
		</tr>
	</table>

	<div id="lblError">암호를 입력하시오.</div>

</body>

</html>

4. 드롭다운리스트 선택한 값 가져오기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>드롭다운리스트 선택한 값 가져오기</title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
			$('#lstFavorites').change(function(){
				var selectedText = $(':selected').text();
	        	
				$('#txtFavorite').val(selectedText);
			});
			
        });
    </script>

</head>

<body>

    <select id="lstFavorites">
        <option>C#</option>
        <option selected>ASP.NET</option>
        <option>Silverlight</option>
    </select>
    <hr />
    <input type="text" id="txtFavorite" />

</body>

</html>

 

혹은 다음과 같이 구현할 수도 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>드롭다운리스트 선택한 값 가져오기</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$('#lstFavorites').change(function(){
			var selectedText = $('#lstFavorites option:selected').text();
	    	
			$('#txtFavorite').val(selectedText);
		});
	});
</script>

</head>

<body>

	<select id="lstFavorites">
		<option>C#</option>
		<option>ASP.NET</option>
		<option>Silverlight</option>
	</select>
	<hr />
	<input type="text" id="txtFavorite" />

</body>

</html>
반응형

'WEB > jQuery' 카테고리의 다른 글

[jQuery] Traversing  (0) 2021.06.07
[jQuery] bind & unbind  (0) 2021.06.07
[jQuery] 요소의 반복 each()  (0) 2021.06.07
[jQuery] form 태그 내 입력 값, 선택 값 제어  (0) 2021.06.07
[jQuery] text() & html()  (0) 2021.06.07
공유하기 링크
Comments
Related Articles more