jQuery

[jQuery] 3장 jQuery 선택자

반응형

 

선택자 (엘리먼트 관련)

 

 

셀렉터 설 명
* 모든 요소
E1 태그 명이 E1인 모든 요소
E1.class E1요소 중 class 속성 값이 class와 같은 요소
E1#id E1요소 중 ID 속성 값이 id와 같은 요소
E1, E2 모든 E1요소와 모든 E2요소
E1 E2 E1의 자식 요소 중 모든 E2요소 (후손)
E1 > E2 E1의 바로 아래 자식 요소 중 모든 E2요소(자식)
E1 + E2 E1의 바로 다음에 오는 형제 요소 중 E2요소
E1 ~E2 E1의 다음에 나오는 형제 요소 중 모든 E2요소

 

 

 

선택자 (속성 관련)

 

 

셀렉터 설 명
E1[attr] attr속성을 갖는 모든 E1요소
E1[attr=val] attr 속성 값이 val과 일치하는 모든 E1요소
E1[attr^=val] attr 속성 값이 val으로 시작하는 모든 E1요소
E1[attr!=val] attr 속성 값이 val 값과 같지 않은 모든 E1요소
E1[attr$=val] attr 속성 값이 val으로 끝나는 모든 E1요소
E1[attr*=val] attr 속성 값이 val을 포함하는 모든 E1요소
E1[attr~=val] attr 속성 값이 val을 포함하는 모든 E1요소이지만, 공백으로 분리된 값이 일치해야 한다
E1[attr|=val] attr 속성 값이 val과 같거나 ‘val-’로 시작하는 모든 E1요소

 

 

 

  • alt속성을 갖는 img요소
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    
</script>
<style>
img {
  width: 50px;
  height: 50px;
}
</style>
<script>
$(function(){
    //alt속성을 갖는 img요소
    $('img[alt]').css('border','double 4px');
});
</script>
</head>
<body>
    <a href="http://www. ddit .or.kr" title="namedDD">(재)대덕 인재 개발원</a> <br>
	<a href="mailto: admin@ddit.or.kr">관리자에게 메일보내기</a> <br>

	<img src="../images/bara1.jpg" class="imgBR" id="baskin">
	<img src="../images/bara2.jpg" class="imgBR" id="vaskin">
	<img src="../images/bara4.jfif" class="imgBR" id="baskin-robbins">
	<img src="../images/bara6.webp" class="imgBR" id="baskin_Robbins">
	<img src="../images/ala.jpg" title="img named 5">
	<img src="../images/som2.jpg" id="img6" title="coffeePot" alt="actress">
	<img src="../images/wok3.jpg" alt="actor">
		
	<form>
		<input title="named textField">
		<button>Submit</button>
	</form>
	<button>Submit</button>
	<input type="submit">
	<input type="button" value="Button">
</body>
</html>

 

결과 화면1

 

 

 

  • type=button인 input요소와 href가 'mailto'로 시작하는 a요소
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    
</script>
<style>
img {
  width: 50px;
  height: 50px;
}
</style>
<script>
$(function(){
    // type=button인 input요소와 href가 'mailto'로 시작하는 a요소
    // ★여러 항목 선택시 하나의 따옴표안에서 쉼표를 이용해 구분
    $('input[type=button], a[href^=mailto]').css("background-color",'yellow');
});
</script>
</head>
<body>
    <a href="http://www. ddit .or.kr" title="namedDD">(재)대덕 인재 개발원</a> <br>
	<a href="mailto: admin@ddit.or.kr">관리자에게 메일보내기</a> <br>

	<img src="../images/bara1.jpg" class="imgBR" id="baskin">
	<img src="../images/bara2.jpg" class="imgBR" id="vaskin">
	<img src="../images/bara4.jfif" class="imgBR" id="baskin-robbins">
	<img src="../images/bara6.webp" class="imgBR" id="baskin_Robbins">
	<img src="../images/ala.jpg" title="img named 5">
	<img src="../images/som2.jpg" id="img6" title="coffeePot" alt="actress">
	<img src="../images/wok3.jpg" alt="actor">
		
	<form>
		<input title="named textField">
		<button>Submit</button>
	</form>
	<button>Submit</button>
	<input type="submit">
	<input type="button" value="Button">
</body>
</html>

 

결과 화면2

 

 

 

  • class가 'imgBR'이 아닌 img요소
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    
</script>
<style>
img {
  width: 50px;
  height: 50px;
}
</style>
<script>
$(function(){
    // class가 'imgBR'이 아닌 img요소
    $('img[class != imgBR]').css("box-shadow","4px 4px 1px gray"); //x축 y축 blur color
});
</script>
</head>
<body>
    <a href="http://www. ddit .or.kr" title="namedDD">(재)대덕 인재 개발원</a> <br>
	<a href="mailto: admin@ddit.or.kr">관리자에게 메일보내기</a> <br>

	<img src="../images/bara1.jpg" class="imgBR" id="baskin">
	<img src="../images/bara2.jpg" class="imgBR" id="vaskin">
	<img src="../images/bara4.jfif" class="imgBR" id="baskin-robbins">
	<img src="../images/bara6.webp" class="imgBR" id="baskin_Robbins">
	<img src="../images/ala.jpg" title="img named 5">
	<img src="../images/som2.jpg" id="img6" title="coffeePot" alt="actress">
	<img src="../images/wok3.jpg" alt="actor">
		
	<form>
		<input title="named textField">
		<button>Submit</button>
	</form>
	<button>Submit</button>
	<input type="submit">
	<input type="button" value="Button">
</body>
</html>

 

결과 화면3

 

 

 

  • src가 'webp'로 끝나는 img요소
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    
</script>
<style>
img {
  width: 50px;
  height: 50px;
}
</style>
<script>
$(function(){
    // src가 'webp'로 끝나는 img요소
    $('img[src$=webp]').css("border","dotted 4px");

});
</script>
</head>
<body>
    <a href="http://www. ddit .or.kr" title="namedDD">(재)대덕 인재 개발원</a> <br>
	<a href="mailto: admin@ddit.or.kr">관리자에게 메일보내기</a> <br>

	<img src="../images/bara1.jpg" class="imgBR" id="baskin">
	<img src="../images/bara2.jpg" class="imgBR" id="vaskin">
	<img src="../images/bara4.jfif" class="imgBR" id="baskin-robbins">
	<img src="../images/bara6.webp" class="imgBR" id="baskin_Robbins">
	<img src="../images/ala.jpg" title="img named 5">
	<img src="../images/som2.jpg" id="img6" title="coffeePot" alt="actress">
	<img src="../images/wok3.jpg" alt="actor">
		
	<form>
		<input title="named textField">
		<button>Submit</button>
	</form>
	<button>Submit</button>
	<input type="submit">
	<input type="button" value="Button">
</body>
</html>

 

결과 화면4

 

 

 

  • title이 'named'단어를 포함하는 모든 요소
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    
</script>
<style>
img {
  width: 50px;
  height: 50px;
}
</style>
<script>
$(function(){
    // title이 'named'단어를 포함하는 모든 요소
    $('[title*=named]').css("border","3px outset hotpink");
});
</script>
</head>
<body>
    <a href="http://www. ddit .or.kr" title="namedDD">(재)대덕 인재 개발원</a> <br>
	<a href="mailto: admin@ddit.or.kr">관리자에게 메일보내기</a> <br>

	<img src="../images/bara1.jpg" class="imgBR" id="baskin">
	<img src="../images/bara2.jpg" class="imgBR" id="vaskin">
	<img src="../images/bara4.jfif" class="imgBR" id="baskin-robbins">
	<img src="../images/bara6.webp" class="imgBR" id="baskin_Robbins">
	<img src="../images/ala.jpg" title="img named 5">
	<img src="../images/som2.jpg" id="img6" title="coffeePot" alt="actress">
	<img src="../images/wok3.jpg" alt="actor">
		
	<form>
		<input title="named textField">
		<button>Submit</button>
	</form>
	<button>Submit</button>
	<input type="submit">
	<input type="button" value="Button">
</body>
</html>

 

결과 화면5

 

 

 

  • href가 'ddit'를 포함하는 a요소 (*=는 모든 값 대상, ~=는 공백으로 분리된 값)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    
</script>
<style>
img {
  width: 50px;
  height: 50px;
}
</style>
<script>
$(function(){
    // href가 'ddit'를 포함하는 a요소 (*=는 모든 값 대상, ~=는 공백으로 분리된 값)
    $('a[href~=ddit]').css("text-decoration","line-through");
});
</script>
</head>
<body>
    <a href="http://www. ddit .or.kr" title="namedDD">(재)대덕 인재 개발원</a> <br>
	<a href="mailto: admin@ddit.or.kr">관리자에게 메일보내기</a> <br>

	<img src="../images/bara1.jpg" class="imgBR" id="baskin">
	<img src="../images/bara2.jpg" class="imgBR" id="vaskin">
	<img src="../images/bara4.jfif" class="imgBR" id="baskin-robbins">
	<img src="../images/bara6.webp" class="imgBR" id="baskin_Robbins">
	<img src="../images/ala.jpg" title="img named 5">
	<img src="../images/som2.jpg" id="img6" title="coffeePot" alt="actress">
	<img src="../images/wok3.jpg" alt="actor">
		
	<form>
		<input title="named textField">
		<button>Submit</button>
	</form>
	<button>Submit</button>
	<input type="submit">
	<input type="button" value="Button">
</body>
</html>

 

결과 화면6

 

 

 

  • id가 'baskin'이거나 'baskin-'으로 시작하는 img요소
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    
</script>
<style>
img {
  width: 50px;
  height: 50px;
}
</style>
<script>
$(function(){
    // id가 'baskin'이거나 'baskin-'으로 시작하는 img요소
    $('img[id|=baskin]').css("border-radius","25px");
});
</script>
</head>
<body>
    <a href="http://www. ddit .or.kr" title="namedDD">(재)대덕 인재 개발원</a> <br>
	<a href="mailto: admin@ddit.or.kr">관리자에게 메일보내기</a> <br>

	<img src="../images/bara1.jpg" class="imgBR" id="baskin">
	<img src="../images/bara2.jpg" class="imgBR" id="vaskin">
	<img src="../images/bara4.jfif" class="imgBR" id="baskin-robbins">
	<img src="../images/bara6.webp" class="imgBR" id="baskin_Robbins">
	<img src="../images/ala.jpg" title="img named 5">
	<img src="../images/som2.jpg" id="img6" title="coffeePot" alt="actress">
	<img src="../images/wok3.jpg" alt="actor">
		
	<form>
		<input title="named textField">
		<button>Submit</button>
	</form>
	<button>Submit</button>
	<input type="submit">
	<input type="button" value="Button">
</body>
</html>

 

결과 화면7

 

 

 

입력양식(from) 선택자

 

셀렉터 설 명
:input 모든 input (모든 button, select, textarea 요소들)
:text text타입의 input 요소
:password password 타입의 input 요소 
:radio radio 타입의 input 요소 
:checkbox checkbox 타입의 input 요소 
:submit submit 타입의 input과 button 요소 
:reset reset 타입의 input과 button 요소 
:image image타입의 input 요소 
:button 모든 button요소들과  type이 button인 input 요소 
:file file타입의 input 요소 

 

 

 

  • 모든 입력양식 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
	// 모든 입력양식 요소 (<input> 외 <select>, <textarea>...)
	// radio, checkbox는 브라우저 기본 스타일을 제거해야 사용자 스타일 적용 가능
	$(':input').css('border','solid navy');
});
</script>
</head>
<body>
	<form action="nofile.jsp" method="get">
	    Text : <input type="text" name="id"/> <br>
	    Password : <input type="password" name="pw"/> <br>
	    Radio : 
	    <input type="radio" name="rdo" id="radioA" value="A" checked>A
	    <input type="radio" name="rdo" id="radioB" value="B">B <br>
	    Checkbox : 
	    <input type="checkbox" name="chkbox" id="checkbox1" value="1"> 1
	    <input type="checkbox" name="chkbox" id="checkbox2" value="2"  checked/> 2 <br>
	    TextArea <br>
	    <textarea rows="10" cols="30" id="myTextArea"></textarea> <br>
	    Image : 
	    <input type="image" src="../res/images/ala.jpg" width="50" height="50"> <br>
	    File :
	    <input type="file"> <br>
	    Buttons : 
	    <button>전송</button>
	    <button type="button" id="normalBtn">Normal</button>
	    <button type="submit" id="submitBtn">Submit</button>
	    <button type="reset" id="resetBtn">Reset</button> <br>

	    <input type="button" value="일반버튼">
	    <input type="submit" value="전송버튼">
	    <input type="reset" value="초기화버튼">
    </form>
</body>
</html>

 

결과 화면8

 

 

=> 전체 체크 css 추가

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
input[type='radio'], input[type='checkbox'] {
  appearance: none;
  width: 1.5em;
  height: 1.5em;
}
input[type='radio'] {
  border-radius: 100%;
}
input[type='radio']:checked::after {
  content: "●";
  font-size: 1.5em;
  font-weight: bold; 
  position: relative;
  top: -5px;
}
input[type='checkbox']:checked::after {
  content: "∨";
  font-size: 2em;
  font-weight: bold; 
  position: relative;
  top: -5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
	// 모든 입력양식 요소 (<input> 외 <select>, <textarea>...)
	// radio, checkbox는 브라우저 기본 스타일을 제거해야 사용자 스타일 적용 가능
	$(':input').css('border','solid navy');
});
</script>
</head>
<body>
	<form action="nofile.jsp" method="get">
	    Text : <input type="text" name="id"/> <br>
	    Password : <input type="password" name="pw"/> <br>
	    Radio : 
	    <input type="radio" name="rdo" id="radioA" value="A" checked>A
	    <input type="radio" name="rdo" id="radioB" value="B">B <br>
	    Checkbox : 
	    <input type="checkbox" name="chkbox" id="checkbox1" value="1"> 1
	    <input type="checkbox" name="chkbox" id="checkbox2" value="2"  checked/> 2 <br>
	    TextArea <br>
	    <textarea rows="10" cols="30" id="myTextArea"></textarea> <br>
	    Image : 
	    <input type="image" src="../res/images/ala.jpg" width="50" height="50"> <br>
	    File :
	    <input type="file"> <br>
	    Buttons : 
	    <button>전송</button>
	    <button type="button" id="normalBtn">Normal</button>
	    <button type="submit" id="submitBtn">Submit</button>
	    <button type="reset" id="resetBtn">Reset</button> <br>

	    <input type="button" value="일반버튼">
	    <input type="submit" value="전송버튼">
	    <input type="reset" value="초기화버튼">
    </form>
</body>
</html>

 

결과 화면9

 

 

 

  • input type=button인 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
	// input type=button인 요소
	$('input:button').css('backgroundColor','yellow');
});
</script>
</head>
<body>
	<form action="nofile.jsp" method="get">
	    Text : <input type="text" name="id"/> <br>
	    Password : <input type="password" name="pw"/> <br>
	    Radio : 
	    <input type="radio" name="rdo" id="radioA" value="A" checked>A
	    <input type="radio" name="rdo" id="radioB" value="B">B <br>
	    Checkbox : 
	    <input type="checkbox" name="chkbox" id="checkbox1" value="1"> 1
	    <input type="checkbox" name="chkbox" id="checkbox2" value="2"  checked/> 2 <br>
	    TextArea <br>
	    <textarea rows="10" cols="30" id="myTextArea"></textarea> <br>
	    Image : 
	    <input type="image" src="../res/images/ala.jpg" width="50" height="50"> <br>
	    File :
	    <input type="file"> <br>
	    Buttons : 
	    <button>전송</button>
	    <button type="button" id="normalBtn">Normal</button>
	    <button type="submit" id="submitBtn">Submit</button>
	    <button type="reset" id="resetBtn">Reset</button> <br>

	    <input type="button" value="일반버튼">
	    <input type="submit" value="전송버튼">
	    <input type="reset" value="초기화버튼">
    </form>
</body>
</html>

 

결과 화면10

 

 

 

  • type속성이 text, password인 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
	// type속성이 text, password인 요소
	$(':text, :password').css('background-color','salmon');
});
</script>
</head>
<body>
	<form action="nofile.jsp" method="get">
	    Text : <input type="text" name="id"/> <br>
	    Password : <input type="password" name="pw"/> <br>
	    Radio : 
	    <input type="radio" name="rdo" id="radioA" value="A" checked>A
	    <input type="radio" name="rdo" id="radioB" value="B">B <br>
	    Checkbox : 
	    <input type="checkbox" name="chkbox" id="checkbox1" value="1"> 1
	    <input type="checkbox" name="chkbox" id="checkbox2" value="2"  checked/> 2 <br>
	    TextArea <br>
	    <textarea rows="10" cols="30" id="myTextArea"></textarea> <br>
	    Image : 
	    <input type="image" src="../res/images/ala.jpg" width="50" height="50"> <br>
	    File :
	    <input type="file"> <br>
	    Buttons : 
	    <button>전송</button>
	    <button type="button" id="normalBtn">Normal</button>
	    <button type="submit" id="submitBtn">Submit</button>
	    <button type="reset" id="resetBtn">Reset</button> <br>

	    <input type="button" value="일반버튼">
	    <input type="submit" value="전송버튼">
	    <input type="reset" value="초기화버튼">
    </form>
</body>
</html>

 

결과 화면11

 

 

 

  • type속성이 submit인 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
	// type속성이 submit인 요소
	$(':submit').css('backgroundColor','yellowgreen');
});
</script>
</head>
<body>
	<form action="nofile.jsp" method="get">
	    Text : <input type="text" name="id"/> <br>
	    Password : <input type="password" name="pw"/> <br>
	    Radio : 
	    <input type="radio" name="rdo" id="radioA" value="A" checked>A
	    <input type="radio" name="rdo" id="radioB" value="B">B <br>
	    Checkbox : 
	    <input type="checkbox" name="chkbox" id="checkbox1" value="1"> 1
	    <input type="checkbox" name="chkbox" id="checkbox2" value="2"  checked/> 2 <br>
	    TextArea <br>
	    <textarea rows="10" cols="30" id="myTextArea"></textarea> <br>
	    Image : 
	    <input type="image" src="../res/images/ala.jpg" width="50" height="50"> <br>
	    File :
	    <input type="file"> <br>
	    Buttons : 
	    <button>전송</button>
	    <button type="button" id="normalBtn">Normal</button>
	    <button type="submit" id="submitBtn">Submit</button>
	    <button type="reset" id="resetBtn">Reset</button> <br>

	    <input type="button" value="일반버튼">
	    <input type="submit" value="전송버튼">
	    <input type="reset" value="초기화버튼">
    </form>
</body>
</html>

 

결과 화면12

 

 

 

  • type속성이 reset인 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
	// type속성이 reset인 요소
	$(':reset').css('background-color','orange');
});
</script>
</head>
<body>
	<form action="nofile.jsp" method="get">
	    Text : <input type="text" name="id"/> <br>
	    Password : <input type="password" name="pw"/> <br>
	    Radio : 
	    <input type="radio" name="rdo" id="radioA" value="A" checked>A
	    <input type="radio" name="rdo" id="radioB" value="B">B <br>
	    Checkbox : 
	    <input type="checkbox" name="chkbox" id="checkbox1" value="1"> 1
	    <input type="checkbox" name="chkbox" id="checkbox2" value="2"  checked/> 2 <br>
	    TextArea <br>
	    <textarea rows="10" cols="30" id="myTextArea"></textarea> <br>
	    Image : 
	    <input type="image" src="../res/images/ala.jpg" width="50" height="50"> <br>
	    File :
	    <input type="file"> <br>
	    Buttons : 
	    <button>전송</button>
	    <button type="button" id="normalBtn">Normal</button>
	    <button type="submit" id="submitBtn">Submit</button>
	    <button type="reset" id="resetBtn">Reset</button> <br>

	    <input type="button" value="일반버튼">
	    <input type="submit" value="전송버튼">
	    <input type="reset" value="초기화버튼">
    </form>
</body>
</html>

 

결과 화면13

 

 

 

  • type속성이 file, image인 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
	// type속성이 file, image인 요소
	$(':file, :image').css('border','outset lightgray');
});
</script>
</head>
<body>
	<form action="nofile.jsp" method="get">
	    Text : <input type="text" name="id"/> <br>
	    Password : <input type="password" name="pw"/> <br>
	    Radio : 
	    <input type="radio" name="rdo" id="radioA" value="A" checked>A
	    <input type="radio" name="rdo" id="radioB" value="B">B <br>
	    Checkbox : 
	    <input type="checkbox" name="chkbox" id="checkbox1" value="1"> 1
	    <input type="checkbox" name="chkbox" id="checkbox2" value="2"  checked/> 2 <br>
	    TextArea <br>
	    <textarea rows="10" cols="30" id="myTextArea"></textarea> <br>
	    Image : 
	    <input type="image" src="../res/images/ala.jpg" width="50" height="50"> <br>
	    File :
	    <input type="file"> <br>
	    Buttons : 
	    <button>전송</button>
	    <button type="button" id="normalBtn">Normal</button>
	    <button type="submit" id="submitBtn">Submit</button>
	    <button type="reset" id="resetBtn">Reset</button> <br>

	    <input type="button" value="일반버튼">
	    <input type="submit" value="전송버튼">
	    <input type="reset" value="초기화버튼">
    </form>
</body>
</html>

 

결과 화면14

 

 

 

  • Button요소와 input type이 button인 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
	// Button요소와 input type이 button인 요소
	$(':button').css('border','dashed red');
});
</script>
</head>
<body>
	<form action="nofile.jsp" method="get">
	    Text : <input type="text" name="id"/> <br>
	    Password : <input type="password" name="pw"/> <br>
	    Radio : 
	    <input type="radio" name="rdo" id="radioA" value="A" checked>A
	    <input type="radio" name="rdo" id="radioB" value="B">B <br>
	    Checkbox : 
	    <input type="checkbox" name="chkbox" id="checkbox1" value="1"> 1
	    <input type="checkbox" name="chkbox" id="checkbox2" value="2"  checked/> 2 <br>
	    TextArea <br>
	    <textarea rows="10" cols="30" id="myTextArea"></textarea> <br>
	    Image : 
	    <input type="image" src="../res/images/ala.jpg" width="50" height="50"> <br>
	    File :
	    <input type="file"> <br>
	    Buttons : 
	    <button>전송</button>
	    <button type="button" id="normalBtn">Normal</button>
	    <button type="submit" id="submitBtn">Submit</button>
	    <button type="reset" id="resetBtn">Reset</button> <br>

	    <input type="button" value="일반버튼">
	    <input type="submit" value="전송버튼">
	    <input type="reset" value="초기화버튼">
    </form>
</body>
</html>

 

결과 화면15

 

 

반응형

'jQuery' 카테고리의 다른 글

[jQuery] 6장 기타 필터  (0) 2024.02.21
[jQuery] 5장 내용 필터  (0) 2024.02.21
[jQuery] 4장 필터 및 기본 필터  (0) 2024.02.21
[jQuery] 2장 jQuery 기초  (0) 2024.02.20
[jQuery] 1장 jQuery와 사용법  (0) 2024.02.19

티스토리툴바