jQuery 선택자 (selector)
- jQuery 코드는 선택자와 메소드의 조합으로 구성되는 경우가 많음
- 중간에 자바스크립트 코드 같이 작성
- HTML 태그를 쉽게 선택하기 위해 선택자 사용
선택자 구조
- $(‘선택자’).메소드(매개변수, 함수 등)
- 큰 따옴표 /작은 따옴표 다 사용 가능
선택자 종류
- 직접 선택자
- 전체 : $(“*”)
- 태그 : $(‘태그명’)
- 아이디 : $(‘#id명’)
- 클래스 : $(‘.클래스명’)
- 그룹 선택자
- 인접 관계 선택자
- 상위 요소 (조상/부모) 선택자
- 하위 요소 (자식/자손) 선택자
- 형제 선택자
- 필터 선택자
- 태그의 상태나 순서 등으로 선택
- ${‘태그명:순서필터’)
- ${‘태그명:상태필터’)
| 요소 : 필터 | 설명 |
| 요소: odd | 홀수 번째에 위치한 요소 선택 |
| 요소: even | 짝수 번째에 위치한 요소 선택 |
| 요소: first | 첫 번째에 위치한 요소 선택 |
| 요소: last | 마지막번째에 위치한 요소 선택 |
| 요소: checked | 체크된 요소 선택 (radio, checkbox의 checked) |
| 요소: selected | 선택된 요소 선택 (select의 option selected) |
| 요소: disabled | 비활성 입력 양식 요소 선택 |
| 요소: enabled | 활성화된 입력 양식 요소 선택 |
| 요소: focus | 커서가 놓여진 입력 양식 요소 선택 |
| 요소:필터 | 설명 |
| 요소:eq(n) | n번째 (equal) |
| 요소:not(선택자) | 선택자와 일치하지 않은 요소 선택 |
| 요소:lt(n) | n번째 미만 (less than) |
| 요소:gt(n) | n번째 초과 (greater than) |
| 요소:has(선택자) | 선택자를 갖고 있는 요소 선택 |
| 요소:nth-child(숫자n) | n의 배수 : nth-child(숫자n) |
| 요소:nth-child(숫자n+1) | n의 배수+1 : nth-child(숫자n+1) |
- 속성 선택자
- HTML 태그(요소)의 지정된 속성 값에 따라 선택자로 정의
| 문법 | 기능 |
| 태그명[속성] | [] 안의 속성을 포함하는 모든 태그 선택 |
| 태그명[속성='값"] | 속성 값이 주어진 값과 동일한 모든 태그 선택 |
| 태그명[속성^='값"] | 속성 값이 주어진 값으로 시작하는 모든 태그 선택 |
| 태그명[속성$='값"] | 속성 값이 주어진 값으로 끝나는 모든 태그 선택 |
| 태그명[속성*='값"] | 속성 값이 주어진 값을 포함하는 모든 태그 선택 |
- 컨텐츠 탐색 선택자
- $(‘선택자:contains(‘내용’)); : ‘내용’을 포함하는 요소 선택
- $(‘선택자:has(‘span’)); : <span>태그를 포함하는 요소 선택
예제 : 직접 선택자
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 직접 선택자</title>
<script src= "jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//1. 전체 선택자 : 문서 전체의 글자색 변경
$("*").css("color", "red");
//2. 태그 선택자 : h3 태그에 밑줄 그리기
$('h3').css('textDecoration','underline');
//3. 태그 선택자 : h3, h4 태그에 배경색 pink 지정하기
$('h3, h4').css('backgroundColor','pink');
//4. ID 선택자 : id가 idSelector인 태그의 글자 색상을 blue/#0000ff/#00f
//id가 jQuery인 태그의 글자 색상을 green으로 설정
$("#idSelector").css('color','blue');
$("#jQuery").css('color','green');
//5. 클래스 선택자 : class가 selector인 태그의 글자를 이탤릭체로,
//class가 web인 태그의 글자를 굵게
$(".selector").css('font-style', 'italic');
$(".web").css('font-weight', 'bold');
});
</script>
</head>
<body>
<h3>jQuery 직접 선택자 (selector)</h3>
<div class="selector">
<ol>
<li>전체 선택자</li>
<li>태그 선택자</li>
<li id="idSelector">ID 선택자 </li>
<li>클래스 선택자</li>
</ol>
</div>
<h4>웹 프로그래밍</h4>
<div class="web">
<ol type="A">
<li>JSP</li>
<li>Javascript</li>
<li id="jQuery">jQuery</li>
<li>Ajax</li>
</ol>
</div>
</body>
</html>
예제 : 태그 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery </title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('h1').css('color', 'red');
$('h1').css('background', 'black');
// 메소드 체인 방식
$('h1').css('width', '50%').css('height', '40px');
});
</script>
</head>
<body>
<h1>Header1</h1>
<h1>Header2</h1>
<h1>Header3</h1>
</body>
</html>
예제 : 아이디 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery </title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#h1').css('color', 'green');
$('#h2').css('background', 'gray');
// 메소드 체인 방식
$('h1').css('width', '50%').css('height', '40px');
});
</script>
</head>
<body>
<h1 id="h1">Header1</h1>
<h1 id="h2">Header2</h1>
<h1>Header3</h1>
</body>
</html>
예제 : 클래스 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src= "jquery-3.6.0.min.js"></script>
<title>jQuery 클래스 선택자</title>
<script type="text/javascript">
$(document).ready(function(){
$('.group1').css({
float: 'left',
background:'blue',
color:'white',
width: '90%',
height: '30px'
});
$('.group2').css({
float: 'right',
background:'yellow',
color:'black',
width: '90%'
});
});
</script>
</head>
<body>
<div id="box1">
<div class="group1">A</div>
<div class="group2">A</div>
<div class="group1">B</div>
<div class="group2">B</div>
<div class="group1">C</div>
<div class="group2">C</div>
</div>
</body>
</html>
예제 : 하위 요소 (자식/자손) 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery </title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){ //$(document).ready(함수)의 단축 형태
//1. <ol> 태그의 모든 자손 <li> 태그 글자색 red
$('ol li').css('color', 'red');
//2. <ol> 태그의 자식 <li> 태그 글자색 blue
$('ol>li').css('color', 'blue');
//3. 아이디가 children인 요소의 자식 <li> 태그 밑줄
$('#children>li').css('textDecoration', 'underline');
//4. 클래스가 method 요소의 모든 자손 요소의 글자색을 black
//find() 메소드 사용
$('.method').find('li').css('color', 'black');
//5. 클래스가 method 요소의 자식 요소에 속성 2개 설정
//children() 메소드 사용
$('.method').children('li').css({'color':'green', 'font-style':'italic'});
});
});
</script>
</head>
<body>
<h3>자식/자손 선택자</h3>
<ol>
<li>자손 요소의 선택 방법</li>
<ul>
<li>$(“선택자 선택자”)</li>
<li>$(“ol li”)</li>
<li>ol 의 자손인 모든 li 태그 선택 : 글자색(red)</li>
</ul>
<li>자식 요소의 선택 방법</li>
<ul id="children">
<li>$(“선택자>선택자”)</li>
<li>$(“ol>li”)</li>
<li>ol의 자식인 li 태그 선택 : 글자색(blue)</li>
<li>$(“ul>li”)</li>
<li>ul의 자식인 li 태그 선택 : 글자(underline)</li>
</ul>
<li>메소드를 사용하는 방법</li>
<ol class="method">
<li>자손 요소 선택 : find()</li>
<ul>
<li>$(“선택자”).find(“선택자”)</li>
<li>$(“.method).find(“li”)</li>
<li>클래스 method 모든 자손 li 태그 선택 : 글자색(black)</li>
</ul>
<li>자식 요소 선택 : children()</li>
<ul>
<li>$(“선택자”).children(“선택자”)</li>
<li>$(“.method).children(“li”)</li>
<li>클래스 method 자식 선택 : 글자색(green)</li>
</ul>
</ol>
</ol>
</body>
</html>
예제 : 상위 요소 (조상/부모) 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery </title>
<style type="text/css">
div {
border:1px solid #000000;
padding:10px;
display:inline-block;
}
</style>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('p').parents().css('backgroundColor', 'yellow'); // 모든 조상
$('p').parents('#area').css('backgroundColor', 'white'); // 조상 area
$('p').parents('#c1, #c2').css('backgroundColor', 'brown'); // 조상 c1, c2
$('p').parent().css('backgroundColor', 'green'); // p의 부모
$('#c1').next().css('backgroundColor', 'pink'); // 바로 다음 요소 : next()
$('#c2').nextAll().css('backgroundColor', 'orange'); // 다음 모든 요소 : nextAll
$('#c4').prevAll().css('color', 'blue'); // 이전 모든 요소 : nextAll
// c1 다음 c4 이전 : c2, c3
$('#c1').nextUntil('#c4').css('borderRadius', '20px'); // 조상 c1, c2
$('#c3').prevUntil('#c1').css('border', 'solid 5px red'); // 조상 c1, c2
});
</script>
</head>
<body>
<h3>조상/부모/형제 요소 선택자</h3>
<div id="area">
area 영역
<div id="c1">
c1영역
<div id="s1">
s1 영역
<p>p</p>
</div>
</div>
<div id="c2">
c2영역
<div id="s2">
s2 영역
<p>p</p>
</div>
</div>
<div id="c3">
c3영역
<div id="s3">
s3 영역
<p>p</p>
</div>
</div>
<div id="c4">
c4영역
<div id="s4">
s4 영역
<p>p</p>
</div>
</div>
</div>
</body>
</html>
예제 : 필터 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery </title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// table1에서 찾기
// 1. 홀수 행 선택 (행 인덱스 : 0부터 시작)
$('#table1 tr:odd').css('background-color', 'gray');
// 2. 짝수 행 선택 (행 인덱스 : 0부터 시작)
$('#table1 tr:even').css('background-color', 'green');
// 3. 첫 번째 행 (0행)
$('#table1 tr:first').css({
'background-color':'orange',
'fontSize':'15pt',
});
// 4. 특정 행 선택 : tr의 5행 (여섯번째 행)
$('#table1 tr:eq(5)').css('color', 'red');
// 5. tr의 5행보다 큰 행 전부 선택
$('#table1 tr:gt(5)').css('color', 'blue');
// table2에서 찾기
// 6. tr의 0행 제외하고 모두 선택
$('#table2 tr:not(tr:eq(0))').css('background', 'gold');
// nth : 서수 (~번째)
// 7. nth-child(숫자n+1)
$('#table2 tr:nth-child(3n+1)').css('background', 'orange');
// 8. 짝수 열 선택 : nth-child(숫자n) : 2n
$('#table2 td:nth-child(2n)').css('background', 'red');
});
</script>
</head>
<body>
<h1>table1</h1>
<table id="table1" width="300">
<tr><th>이름</th><th>나이</th><th>주소</th></tr>
<tr><td>박지성</td><td>20</td><td>서울</td></tr>
<tr><td>이동국</td><td>10</td><td>인천</td></tr>
<tr><td>이정후</td><td>23</td><td>부산</td></tr>
<tr><td>추신수</td><td>30</td><td>대구</td></tr>
<tr><td>이장군</td><td>35</td><td>서울</td></tr>
<tr><td>김연아</td><td>27</td><td>수원</td> </tr>
<tr><td>손연재</td><td>20</td><td>원주</td></tr>
<tr><td>손홍민</td><td>21</td><td>순천</td></tr>
<tr><td>허훈</td><td>40</td><td>대구</td></tr>
</table>
<br><br>
<h1>table2</h1>
<table id="table2" width="300">
<tr><th>이름</th><th>나이</th><th>주소</th></tr>
<tr><td>박지성</td><td>20</td><td>서울</td></tr>
<tr><td>이동국</td><td>10</td><td>인천</td></tr>
<tr><td>이대호</td><td>23</td><td>부산</td></tr>
<tr><td>추신수</td><td>30</td><td>대구</td></tr>
<tr><td>기성용</td><td>35</td><td>서울</td></tr>
<tr><td>김연아</td><td>27</td><td>수원</td> </tr>
<tr><td>손연재</td><td>20</td><td>원주</td></tr>
<tr><td>손홍민</td><td>21</td><td>순천</td></tr>
<tr><td>박인비</td><td>40</td><td>대구</td></tr>
</table>
</body>
</html>
예제 : 속성 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery </title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 1. 속성 type 선택
$('input[type]').css('background', 'pink');
// 2. 속성 type 중 text인 것만 선택
$('input[type=text]').css({'color':'blue', 'width':'200px'});
// 3. 속성 type 중 submit, reset 버튼 선택
// $('input[type==submit]', 'input[type==submit]') ~~
// 축약형 사용
$(':submit, :reset').css('background', 'gold');
// 4. type 중 password 선택
// 축약형 사용
$(':password').css({'background':'green', 'color':'red'}).css('width', '200px');
// 5. option 태그 선택
$('option[value=프로그래머]').css('color', 'red');
// 6. option 태그의 value 속성이 '웹'으로 시작하는 요소 선택
$('option[value^=웹]').css('color', 'blue');
// 7. select 태그의 하위(자손) option 태그 value 속성이 '사'로 끝나는 요소 선택
$('option[value$=사]').css('color', 'green');
});
</script>
</head>
<body>
<h1>속성 선택자</h1>
<form id="form1" method="post" action="ok.jsp">
<table>
<tr><td>이름</td><td><input type="text" id="name" value="홍길동"></td></tr>
<tr><td> ID</td><td><input type="text" id="id"></td></tr>
<tr><td>비밀번호</td><td><input type="password" id="passwd"></td></tr>
<tr><td>취미 :</td>
<td><input type="checkbox" id="sports" value="운동">운동
<input type="checkbox" id="fishing" value="낚시">낚시
<input type="checkbox" id="swimming" value="수영">수영</td></tr>
<tr><td>직업</td>
<td><select id="job">
<option value="학생">학생</option>
<option value="프로그래머">프로그래머</option>
<option value="웹디자이너">웹디자이너</option>
<option value="회계사">회계사</option>
<option value="의사">의사</option>
</select></td></tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="완료">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
</body>
</html>'Frontend > JQuery' 카테고리의 다른 글
| each() 메소드 사용 방법 (0) | 2021.12.15 |
|---|---|
| jQuery 이벤트 (0) | 2021.12.14 |
| hover() 메소드 (0) | 2021.12.14 |
| jQuery 변수 (0) | 2021.12.14 |
| jQuery 기본 개념 및 작업 환경 구축 (0) | 2021.12.13 |