[jQuery] 선택자

728x90

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>

728x90

저작자표시 비영리 변경금지

'Web > JQuery' 카테고리의 다른 글

[jQuery] 요소 조작 메서드 (0)	2020.06.07
[jQuery] 요소 탐색 메서드 (0)	2020.06.03
[jQuery] 객체 합치기 ($.extend) (0)	2020.06.02
[jQuery] 배열처리 (0)	2020.06.02
[jQuery] 다운로드및 사용 (0)	2020.05.30

'Web > JQuery' 카테고리의 다른 글

티스토리툴바