본문 바로가기
학원/복기

[jQuery] 선택자(Selector)

조가루 2023. 6. 12. 21:57

선택자(Selector)


태그 선택자

  • 태그 선택자는 태그명으로 태그를 검색하여 제공하는 선택자이다.
  • 검색된 태그의 Node(Element) 객체로 jQuery 객체를 생성한 후 메소드를 호출할 수 있다.
  • 다수의 태그가 검색된 경우 묵시적 반복에 의해 다수의 jQuery 객체가 생성되어 메소드를 호출한다.

 

예시)

 

[html 태그]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>선택자(Selector)</h1>
	<hr>
	<h2 class="item">jQuery Selector-1</h2>
	<h2 id="tag">jQuery Selector-2</h2>
	<h2 class="item">jQuery Selector-3</h2>
	<p>jQuery Selector-4</p>
</body>
</html>

 

[script 태그]

 

$("h2").css("background", "yellow");

 

 


클래스 선택자

  • 클래스 선택자는 태그의 class 속성 값으로 태그를 검색하여 제공하는 선택자이다.
  • 클래스 선택자는 태그 선택자와 구분하기 위해 [.]으로 시작된다.

 

$(".item").css("background", "orange");

 

 


아이디 선택자

  • 아이디 선택자는 태그의 id 속성 값으로 태그를 검색하여 제공하는 선택자이다.
  • 아이디 선택자는 태그 선택자와 구분하기 위해 [#] 으로 시작된다. 

 

$("#tag").css("color", "green");

 

 

 

선택자로 검색된 태그의 jQuery 객체로 메소드를 순차적으로 호출할 수 있는데 이를 메소드 체인(Method Chain)이라고 부른다.

 

$("p").css("font-size", "30px").css("color", "red");

 

메소드를 통해 값을 여러 개 전달하고 싶을때 위의 방법은 비효율적이다. 따라서 값을 여러 개 전달하고 싶을 땐 jQuery 객체로 메소드를 호출할 때 매개변수에 값 대신 Object 객체를 전달하는 것을 더 권장한다.
→ Object 객체의 요소를 이용하여 메소드에 필요한 다수의 값을 전달할 수 있다. 

 

$("p").css({"font-size": "30px","color":"red"});

 

 

 

[html 태그]

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>선택자(Selector)</h1>
	<hr>
	<div id="subject">
		<p>Java 과정</p>
		<div>
			<p>Java 기본문법</p>
			<p>Java OOP</p>
			<p>Java API</p>
		</div>
		
		<p>JSP 과정</p>
		<div>
			<p>스크립트 요소(Script Element)</p>
			<p>지시어(Directive)</p>
			<p>표준 액션 태그(Standard Action Tag)</p>
		</div>
	</div>
</body>
</html>

 

자식 선택자

자식 선택자는 검색된 부모태그에서 첫번째 깊이의 자식태그를 검색하여 제공한다.

 

$("#subject > p").css({"font-size":"25px", "font-weight":"bold"});

 

$(selector).children([selector])

: 선택자로 검색된 부모태그에서 첫번째 깊이의 자식태그를 검색하여 jQuery 객체로 반환하는 메소드 
→ children() 메소드의 매개변수에 선택자를 전달하지 않은 경우 모든 첫번째 깊이의 자식태그를 jQuery 객체로 반환한다. 

 

$("#subject").children("p").css({"font-size":"25px", "font-weight":"bold"});

 

 

후손 선택자

후손 선택자는 검색된 부모태그에서 모든 깊이의 후손태그를 검색하여 제공하는 선택자이다.

 

$("#subject p").css("color", "green");

 

$(selector).find(selector) 

: 선택자로 검색된 부모태그에서 모든 깊이의 후손태그를 검색하여 jQuery 객체로 반환하는 메소드 

 

$("#subject").find("p").css("color", "green");

 

 

자식 선택자 대신 children 메소드를, 후손 선택자 대신 find 메소드를 사용하는 것이 더 효율적이다.

 

 

[html 태그]

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>선택자(Selector)</h1>
	<hr>
	<h2>jQuery 연습-1</h2>
	<h2 class="normal">jQuery 연습-2</h2>
	<h2 class="normal">jQuery 연습-3</h2>
	<h2>jQuery 연습-4</h2>
	<h2>jQuery 연습-5</h2>
	<h3 class="normal">jQuery 연습-6</h3>
	<h3>jQuery 연습-7</h3>
	<hr>
	<ul>
		<li>선택자(Selector)-1</li>
		<li>선택자(Selector)-2</li>
		<li>선택자(Selector)-3</li>
		<li>선택자(Selector)-4</li>
		<li>선택자(Selector)-5</li>
	</ul>
</body>
</html>

 

필터 선택자

필터 선택자는 선택자로 검색된 다수의 태그 중 클래스 선택자로 특정 태그만을 검색하여 제공하는 선택자이다.

 

$("h2").css("background", "yellow");

//필터 선택자
$("h2.normal").css("background", "green");

 

$(selector).filter(selector)

: 선택자로 검색된 다수의 태그 중에서 filter() 메소드의 매개변수로 전달받은 선택자의 태그를 검색하여 jQuery 객체로 반환하는 메소드

 

$("h2").filter(".normal").css("background", "green");

 

filter() 메소드의 매개변수는 모든 선택자를 전달하여 태그 검색이 가능하다는 장점이 있다.

$(".normal").filter("h2").css("background", "green");

 

 

 

$(selector).not(selector)

: 선택자로 검색된 다수의 태그 중에서 not() 메소드의 매개변수로 전달받은 선택자의 태그로 검색되지 않은 나머지 태그를 jQuery 객체로 반환하는 메소드  

$("h3").filter(".normal").css("background", "silver");

//$(selector).not(selector)
$("h3").not(".normal").css("background", "gold");

 

 

가상 선택자

가상 선택자는 태그의 상태에 의해 태그를 검색하여 제공하는 선택자이다.

 

:nth-child(X) : X 번째 위치한 후손태그를 제공하기 위한 가상 선택자 

$("ul li:nth-child(3)").css("color", "red");

 

CSS의 가상 선택자를 filter() 메소드의 매개변수에 전달하여 호출이 가능하다.

$("ul li").filter(":nth-child(3)").css("color", "red");
$("ul").find("li").filter(":nth-child(3)").css("color", "red");

 

 

:eq(index) : 다수의 검색 태그 중 첨자(Index) 위치에 태그를 제공하기 위한 가상 선택자  

 

$("ul li:eq(2)").css("color", "red");
$("ul li").filter(":eq(2)").css("color", "red");

 

$(selector).eq(index) : 선택자로 검색된 다수의 태그 중 매개변수로 전달받은 첨자 위치의 태그를 검색하여 jQuery 객체로 반환하는 메소드

$("ul li").eq(2).css("color", "red");
$("ul").find("li").eq(2).css("color", "red");

 

 

$(selector).first() : 선택자로 검색된 다수의 태그 중 첫번째 태그를 검색하여 jQuery 객체로 반환하는 메소드 

 

$("ul li").first().css("color", "green");

 

 

eq() 메소드의 매개변수에 -1를 전달하면 마지막 태그를 검색하여 jQuery 객체로 반환한다.

$("ul li").eq(-1).css("color", "blue");

 

$(selector).last() : 선택자로 검색된 다수의 태그 중 마지막 태그를 검색하여 jQuery 객체로 반환하는 메소드

$("ul li").last().css("color", "blue");

 

 

$(selector).next() : 선택자로 검색된 태그에서 다음 위치의 태그를 검색하여 jQuery 객체로 반환하는 메소드

$("ul li").eq(0).next().css("color", "aqua");

 

 

$(selector).prev() : 선택자로 검색된 태그에서 이전 위치의 태그를 검색하여 jQuery 객체로 반환하는 메소드

$("ul li").eq(-1).prev().css("color", "lime");

 

 

속성 선택자

속성 선택자는 태그의 속성 또는 속성값을 비교하여 태그를 검색하여 제공하는 선택자이다.

 

 

[html 태그] 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>선택자(Selector)</h1>
	<hr>
	<table>
		<tr>
			<td>아이디</td>
			<td><input type="text" name="id"></td>
		</tr>
		<tr>
			<td>비밀번호</td>
			<td><input type="password" name="passwd"></td>
		</tr>
		<tr>
			<td>이름</td>
			<td><input type="text" name="name"></td>
		</tr>
		<tr>
			<td>이메일</td>
			<td><input type="text" name="email"></td>
		</tr>
	</table>
</body>
</html>

 

[script 태그]

 

$("input[type]").css("border", "2px solid green");
$("input[type='password']").css("color", "red");
$("input[name='email']").css("color", "blue");

 

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

'학원 > 복기' 카테고리의 다른 글

[jQuery] 태그의 추가와 삭제 / 이동  (0) 2023.06.12
[jQuery] 메소드 (each, css, text, html)  (0) 2023.06.12
[jQuery] jQuery란? / jQuery 라이브러리 이용법  (0) 2023.06.12
[JavaScript] 쿠키(Cookie)  (0) 2023.06.11
[JavaScript] form 태그 관련 이벤트 (사용자 입력값 검증)  (0) 2023.06.11

'학원/복기' Related Articles

티스토리툴바