[jQuery] 선택자
jQuery로 문서 내부의 요소를 다루려면 선택자를 통해 원하는 요소를 가져와야 합니다. 이를 위해서 jQuery에서는 CSS선택자를 사용하고 있습니다. 따라서 CSS선택자를 알면 jQuery에서 그대로 응용이 가능합니다.
[Web/HTML5 & CSS3] - [HTML5&CSS3] CSS선택자 -1
[Web/HTML5 & CSS3] - [HTML5&CSS3] CSS선택자 -2
[Web/HTML5 & CSS3] - [HTML5&CSS3] CSS선택자 -3
[HTML5&CSS3] CSS선택자 -3
1. 일반 구조 선택자 CSS3부터 지원하는 선택자로서 다음의 선택자 사용이 가능합니다. first-child 동위 관계에서 첫번째 요소 last-child 동위 관계에서 마지막 요소 nth-child(수열) 동위 관계에서 수열�
lab.cliel.com
1. 기본 선택자
* 문자를 통해 문서의 모든 요소를 선택합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('*').css('color', 'red');
});
</script>
</head>
<body>
<span>cliel.com</span>
</body>
</html>또는 요소의 태그명을 통해 요소를 선택할 수 있습니다.
$(function () {
$('span').css('color', 'red');
});만약 선택하고자 하는 요소가 2개 이상이라면 , (쉼표)를 통해 구분합니다.
$(function () {
$('span, div').css('color', 'red');
});요소의 id로도 요소를 선택할 수 있습니다. 이때는 id옆에 #문자를 붙여줘야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('#myspan').css('color', 'red');
});
</script>
</head>
<body>
<span id="myspan">cliel.com</span>
</body>
</html>클래스명으로 요소를 선택합니다. 이때는 클래스명옆에 .문자를 붙여줘야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('.style_span').css('color', 'red');
});
</script>
</head>
<body>
<span class="style_span">cliel.com</span>
</body>
</html>필요하다면 요소의 태그명과 결합할 수 있습니다. 이때는 선택자가 특정 요소로 한정됩니다. 예를 들어 'span.style_span'으로 표현하는 경우 span 중 class명이 style_span인 요소를 선택하게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('span.style_span').css('color', 'red');
});
</script>
</head>
<body>
<span class="style_span">cliel.com</span>
</body>
</html>2. 자손과 후손선택자
자손은 바로 아래 요소만, 후손은 아래에 있는 모든 요소를 의미합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
});
</script>
</head>
<body>
<div>
<span>span tag</span>
<p>p tag</p>
</div>
</body>
</html>따라서 위 예제의 경우 body의 자손은 div가 되고 후손은 div와 span, p가 됩니다. 또한 span과 p는 div의 자손에 해당합니다.
자손은 > 문자를 사용해 선택할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('body > div').css('color', 'red');
});
</script>
</head>
<body>
<div>
<span>span tag</span>
<p>p tag</p>
</div>
</body>
</html>
반면 후손은 공백을 기준으로 선택합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('body span').css('color', 'red');
});
</script>
</head>
<body>
<div>
<span>span tag</span>
<p>p tag</p>
</div>
</body>
</html>
선택자 방식은 다른 선택자 방식과 혼용이 가능하므로 유연하게 요소를 선택할 수 있다는 점이 중요합니다. 아래 예제는 body의 후손 중 class가 style_span인 요소를 선택하도록 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('body .style_span').css('color', 'red');
});
</script>
</head>
<body>
<div>
<span class="style_span">span tag</span>
<p>p tag</p>
</div>
</body>
</html>3. 속성 선택자
속성 선택자는 '[속성=값]'의 형태로 사용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('[type="text"]').css('color', 'red');
});
</script>
</head>
<body>
<div>
<input type="button" />
<input type="text" />
</div>
</body>
</html>예제는 =문자를 통해 type속성이 text인 요소를 가져오도록 하는 것이며 이 외에 다음과 같은 비교 문자를 사용할 수 있습니다.
| [속성~=값] | 속성이 값으로 시작하는 요소 |
| [속성$=값] | 속성이 값으로 끝나는 요소 |
| [속성*=값] | 속성이 값을 포함하는 요소 |
4. 필터 선택자
'요소:필터'의 형식으로 사용되는 선택자를 필터 선택 자라고 합니다. 필터 선택자는 요소나 위치, 함수 등으로 구분할 수 있습니다.
(1) 입력 필터
'입력 요소:type'의 형태로 사용됩니다. 예를 들어 'input:text'라고 하면 input 태그에서 type이 text형식인 요소를 가져오게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('input:text').css('color', 'red');
});
</script>
</head>
<body>
<div>
<input type="button" />
<input type="text" />
</div>
</body>
</html>이 외에 '입력 요소:형태'의 방식으로 사용하는 경우도 있습니다. 아래 예제는 input요소에서 현재 활성화된 요소를 가져오도록 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('input:enabled').css('color', 'red');
});
</script>
</head>
<body>
<div>
<input type="button" disabled="disabled" />
<input type="text" />
</div>
</body>
</html>따라서 비활성화 상태인 button은 가져오지 않습니다. 이외에도 다음의 형태를 사용할 수 있습니다.
| checked | 체크상태인 요소를 가져옵니다. |
| disabled | 비활성화 상태인 요소를 가져옵니다. |
| enabled | 활성화 상태인 요소를 가져옵니다. |
| focus | 포커스가 위치한 요소를 가져옵니다. |
| input | 모든 입력요소를 가져옵니다. |
| selected | option에서 선택된 요소를 가져옵니다. |
(2) 위치 필터
주로 table 등의 반복적인 요소에 많이 사용되며 다음과 같은 필터를 사용할 수 있습니다.
| even | 홀수 번째 요소를 가져옵니다. |
| odd | 짝수 번째 요소를 가져옵니다. |
| first | 첫번째 요소를 가져옵니다. |
| last | 마지막 요소를 가져옵니다. |
아래 예제는 table에서 짝수번째의 tr요소만을 가져와 배경 색상을 바꾸도록 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('tr:even').css('color', 'blue');
});
</script>
</head>
<body>
<div>
<table>
<tr>
<td>홍길동</td><td>010-xxxx-xxxx</td><td>서울</td>
</tr>
<tr>
<td>홍길순</td><td>010-xxxx-xxxx</td><td>대구</td>
</tr>
<tr>
<td>홍길남</td><td>010-xxxx-xxxx</td><td>부산</td>
</tr>
<tr>
<td>홍길영</td><td>010-xxxx-xxxx</td><td>울산</td>
</tr>
<tr>
<td>홍길봉</td><td>010-xxxx-xxxx</td><td>인천</td>
</tr>
<tr>
<td>홍길숙</td><td>010-xxxx-xxxx</td><td>대전</td>
</tr>
<tr>
<td>홍길석</td><td>010-xxxx-xxxx</td><td>광주</td>
</tr>
<tr>
<td>홍길래</td><td>010-xxxx-xxxx</td><td>강원</td>
</tr>
</table>
</div>
</body>
</html>
(3) 함수 필터
jQuery에서 함수 형태로 제공되는 것이며 다음과 같은 함수가 있습니다.
| contains(문자열) | 문자열을 포함하는 요소를 가져옵니다. |
| eq(n) | n번째 위치하는 요소를 가져옵니다. |
| gt(n) | n번째를 초과하는 요소를 가져옵니다. |
| lt(n) | n번째 미만의 요소를 가져옵니다. |
| has(요소) | 지정한 요소를 가지는 요소를 가져옵니다. |
| not(선택자) | 선태자와 일치하지 않는 요소를 가져옵니다. |
| nth-child(n) | n번째 위치하는 요소를 가져옵니다. |
먼저 contains은 지정한 문자열을 포함하는 요소를 가져오므로 아래 예제는 span태그에서 '안녕'이라는 문자열이 있는 요소를 가져옵니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('span:contains("안녕")').css('color', 'red');
});
</script>
</head>
<body>
<span>안녕하세요.</span><br />
<span>반갑습니다.</span>
</body>
</html>eq와 gt, lt는 지정한 순서에 맞는 요소를 가져옵니다. 순서는 0부터 시작하므로 아래 예제는 두 번째 span을 가져오게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('span:eq(1)').css('color', 'red');
});
</script>
</head>
<body>
<span>안녕하세요.</span><br />
<span>반갑습니다.</span>
</body>
</html>has는 지정한 요소를 자식/후손으로 포함하고 있는 요소만을 가져옵니다. 따라서 아래 예제는 span요소를 포함하는 div요소를 가져올 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('div:has(span)').css('color', 'red');
});
</script>
</head>
<body>
<div>
<span>안녕하세요.</span>
</div>
<div>
<p>반갑습니다.</p>
</div>
</body>
</html>not은 선택자에 해당되지 않는 요소를 가져옵니다. 따라서 아래 예제는 myclass라는 클래스가 없는 요소를 가져올 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('span:not(".myclass")').css('color', 'red');
});
</script>
</head>
<body>
<span class="myclass">안녕하세요.</span><br />
<span>반값습니다.</span>
</body>
</html>nth-child의 경우에는 특정 순서에 따른 요소를 가져오지만 가변 값을 +로 지정해서 해당하는 요소를 반복적으로 가져올 수 있다는 특징이 있습니다. 예를 들어 2n+1로 지정하면 1, 3(1+2), 5(3+2), 7(5+2) 순서의 요소를 가져올 수 있게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function () {
$('tr:nth-child(2n+1)').css('color', 'blue');
});
</script>
</head>
<body>
<div>
<table>
<tr>
<td>홍길동</td><td>010-xxxx-xxxx</td><td>서울</td>
</tr>
<tr>
<td>홍길순</td><td>010-xxxx-xxxx</td><td>대구</td>
</tr>
<tr>
<td>홍길남</td><td>010-xxxx-xxxx</td><td>부산</td>
</tr>
<tr>
<td>홍길영</td><td>010-xxxx-xxxx</td><td>울산</td>
</tr>
<tr>
<td>홍길봉</td><td>010-xxxx-xxxx</td><td>인천</td>
</tr>
<tr>
<td>홍길숙</td><td>010-xxxx-xxxx</td><td>대전</td>
</tr>
<tr>
<td>홍길석</td><td>010-xxxx-xxxx</td><td>광주</td>
</tr>
<tr>
<td>홍길래</td><td>010-xxxx-xxxx</td><td>강원</td>
</tr>
</table>
</div>
</body>
</html>