[jQueryフォームセレクタ]

26438 ワード
テキストリンク

フォームセレクタ

  • プロパティセレクタ(
    • を含む)
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src = "../js/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
$(function(){

	
	$('.box > button').on('click', function(){
		
		$(':input').css('background', 'pink'); //:input 모든 input, 모든  button, select, textarea 요소들 
		
		// input  요소 테두리 , 배경색  
		$('input').css('border', '2px solid lime').css('background', 'red');
		
		// input type이 button 인 요소 배경색 노란
		$('input:button').css('background', 'yellow');
		/* $('input[type=button]').css('background', 'yellow'); */
		
		// Button 요소와 input type이 button 인 요소 배경색 하늘색
		/* $('button, input[type=button]') */
		$(':button').css('background', 'lightblue');
		
		// Type이 submit 요소의 배경색 녹색
		/* $('input[type=submit]', 'button[type=submit]'); */
		$(':submit').css('background', 'green');
		
		// Type이 reset인 요소의 배경색 노랑 
		/* $('input[type=resey]', 'button[type=reset]'); */
		$(':reset').css('background', 'yellow');
		
		// Type이 text, password 인 요소의 테두리 파랑
		$(':text', ':password').css('border', '2px solid blue');
		
		// Type이 file, image인요소의 테두리 빨강 
		$(':file', ':image').css('border', '2px solid red');
		
		
		
	})
	
})

</script>

</head>
<body>

<div class="box">
	
	<br>
	<button type="button">확인</button>
	<div id="result1">
	
	<form onsubmit="return false;"> 
		Text : <input type="text"/><br> 
		Password : <input type="password" /><br><br> 
		
		Radio : <input type="radio" name="radioGroup" id="radioA" value="A"/> A 
		<input type="radio" name="radioGroup" id="radioB" value="B"/> B<br><br> 
		
		Checkbox : <input type="checkbox" name="checkboxes" id="checkbox1" value="1"/> 1 
		<input type="checkbox" name="checkboxes" id="checkbox2" value="2"/> 2<br><br> 
		
		Textarea : <br> <textarea rows="15" cols="50" id="myTextarea" id="myTextarea"></textarea><br><br> 
		Image : <input type="image" src="../images/image.1.jpg"><br><br> 
		File : <input type="file"><br><br> 
		 
		Buttons : <button type="button" id="normalButton">Normal</button> 
		<button type="submit" id="submitButton">Submit</button> 
		<button type="reset" id="resetButton">Reset</button> <br><br>
		
		<input type="button" value="일반버튼"> 
		<input type="submit" value="전송버튼"> 
		<input type="reset" value="초기화버튼"> <br><br>
	</form>

	</div>
</div>
</body>
</html>
    明日学習キャンプ11日目TIL
    Algorithm 11 : insertionSort