선택자 Element
| 선택자 |
설 명 |
| * |
모든요소 |
| 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요소 |
형제 속성 예제
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://localhost/Jqpro/js/jquery-3.7.1.js"></script>
<script>
$(function(){
//h3 다음의 모든 형제의 배경색을 변경, 길이지정, 가운데정렬
/* $('h3 ~p').css("background", "yellow")
.css("width", "10%")
.css("text-align", "center");*/
$('h3 ~ p').css({"background": "yellow", "width": "10%","text-align": "center"})
//h3 다음의 첫번째 형제의 글자를 굵게, 크게 : font-weight
$('h3 + p').css({"font-weight" : "bold", "font-size" : "1.5rem"});
})
</script>
</head>
<body>
<div class="box">
<h3></h3>
<input type="button" value="확인" onclick="btn1()"> <br> <br>
<div id="result1">
<h2>
<p>형제 선택자 에 대하여</p>
<h3>꼬마버스 타요 가족을 소개 합니다</h3>
<p>타요</p>
<p>로기</p>
<p>라니</p>
<p>가니</p>
</h2>
</div>
</div>
</body>
</html>
선택자 속성
| 선택자 |
설 명 |
| 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과 같거나 ‘val-’로 시작하는 모든 E1요소 |
| E1[attr ~= val] |
attr 속성값이 공백으로 구분된 값(단어)을 가질 경우 구분된
값 중에 val값과 같은 값을 갖는 모든 E1요소 |
// 모두 동일
$('input#btn1')
$('input[id=btn1]')
$('#btn')
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://localhost/Jqpro/js/jquery-3.7.1.js"></script>
<script>
$(function(){
// button을 선택 - 이벤트 핸들러
$('input[type=button]').on('click',function(){
//title을 갖고 있는 요소 선택
$('p[title]').css("font-size","2rem");
//title=무궁화
$('p[title=무궁화]').css("background","pink");
//class=jin
$('p[class=jin]').css("background","green");
//class=p로 시작
$('p[class^=pp]').css("color","red");
//title가 화로 끝나는 요소 선택
$('p[title$=화]').css("background","pink");
// title에 꽃이라는 글자가 포함된 요소
$('p[title*=꽃]').css("background","teal");
// title에 꽃이라는 단어가 포함된 요소
$('p[title~=꽃]').css("background","blue");
})
})
</script>
</head>
<body>
<div class="box">
<h3></h3>
<input type="button" value="확인"> <br> <br>
<div id="result1"></div>
<p title="무궁화">무궁화 꽃이 피었습니다</p>
<p class="jin">진달래 꽃이 피었습니다</p>
<p title="수선화" class="pp1">수선화 꽃이 피었습니다</p>
<p title="라일락">라일락 꽃이 피었습니다</p>
<p class="pp2">개나리 꽃이 피었습니다</p>
<p class="pp3" title="백장미 꽃">백장미 꽃이 피었습니다</p> <!-- 글자 (*) -->
<p class="pp3" title="장미꽃">들장미 꽃이 피었습니다</p> <!-- 단어 포함 (~) -->
<p class="pp4">봉선화 꽃이 피었습니다</p>
</div>
</body>
</html>
입력양식(form) 선택자
| 선택자 |
설 명 |
| :input |
모든 input, 모든 button, select, textarea 요소들
radio, checkbox는 css적용되지 않음
|
| :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 요소 |
$('input[type=button]') // input:button 선택
$('input:button') // input:button 선택
$(':button') // 모든 <button> + input:button 선택
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://localhost/Jqpro/js/jquery-3.7.1.js"></script>
<script>
$(function(){
$('input[value=확인]').on('click',function(){
// form안의 모든 요소를 선택 - radio, checkbox는 css적용되지 않음
//input 요소 테두리 lime , 배경색 핑크
$('#result1 :input').css('border', '5px solid lime');
$('#result1 :input').css('background', 'pink');
//input type이 button 인 요소 배경색 녹색
$('#result1 input:button').css('background', 'green');
//Button 요소와 input type이 button 인 요소 배경색 하늘색
$('#result1 :button').css('background', 'skyblue');
//Type이 submit 요소의 배경색 녹색
$(':submit').css('background', 'green');
//Type이 reset인 요소의 배경색 노랑
$(':reset').css('background', 'yellow');
//Type이 text, password 인 요소의 테두리 파랑
// $('input[type=text]','input[type=password]').css('border', 'solid blue');
// $('input:text','input:password').css('border', 'solid blue');
$(':text',':password').css('border', 'solid blue');
//Type이 file, image인요소의 테두리 빨강
$(':file',':image').css('border','solid red');
})
})
</script>
</head>
<body>
<div class="box">
<h3></h3>
<input type="button" value="확인"> <br> <br>
<div id="result1">
<form onsubmit="return false;" action="입력양식.jsp" method="post">
<!-- onsubmit false를 return한다 - 제출해도 실행안됨 -->
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>
