jQuery 쿼리 선택기
jQuery에서는 querySelector() 또는 querySelectorAll() 메서드를 통해 선택기를 선택하지 않습니다. 이러한 방법은 JavaScript에서 정의되며 jQuery는 여전히 HTML 속성 id 및 class를 기반으로 선택자를 개별적으로 나타내는 기본 경로에 있습니다.
여기, 다음 내용에서는 jQuery의 경우 querySelector() 메서드가 어떻게 작동하는지 살펴보겠습니다. jQuery는 이 방법에 응답하지 않지만 jQuery 방식으로 프로세스를 볼 수 있습니다.
id 및 class 선택기 사용
id를 선택자로 간주할 때 id 이름을 선택자로 언급하기 전에 # 기호를 넣어야 합니다. 이것이 id라고 말하는 식별 캐리어입니다.
또한 클래스의 경우 .을 사용해야 합니다. class 이름을 선택기로 추가하기 전에. 다른 id, classes 또는 elements를 사용하여 다른 선택기 관리에서 기능을 명시적으로 정의할 수도 있습니다.
시연을 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>id selector</title>
</head>
<body>
<div id="pink" style="height: 100px; width: 100px">
<div class="purple" style="height: 50px; width: 50px"></div>
<div id="buff" style="height:60px"></div>
<button onclick="btn()">Click</button>
<script>
function btn(){
$("#pink").css("background-color", "pink");
$(".purple").css("background-color", "purple");
}
</script>
</div>
</body>
</html>
출력:
이와 관련하여 우리는 두 개의 div 요소를 선택했으며 둘 다 ID 추적자를 가지고 있습니다. 상위 div에는 연관된 id가 있는 반면 클래스는 두 번째 div를 명시적으로 정의합니다.
class와 id를 함께 언급할 수 있습니다. 어떻게 할 수 있는지 봅시다.
코드 조각 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>id selector</title>
</head>
<body>
<div id="pink" style="height: 100px; width: 100px">
<div class="blue" style="height: 50px; width: 50px"></div>
<div class="purple" style="height: 50px; width: 50px"></div>
</div>
<div id="buff" style="height:40px"></div>
<button onclick="btn()">Click</button>
<script>
function btn(){
$("#pink").css("background-color", "pink");
$("#pink .purple").css("background-color", "purple");
$('#pink .blue').css("background-color", "powderblue");
}
</script>
</div>
</body>
</html>
출력 2:
:eq() 및 기타 필터 기반 선택기 사용
jQuery에는 querySelectorAll() 메서드가 없지만 특정 선택 항목을 명시적으로 정의할 수 있습니다. elements, class 및 id는 둘 이상의 항목이 있는 경우 인덱싱됩니다.
하나의 항목만 [0]번째 인덱싱된 요소로 계산됩니다.
따라서 여기에서는 jQuery의 :eq() 확장과 :odd() 필터의 사용 사례를 보여주어 페이지 흐름에서 만들고자 하는 정확한 변경 사항을 출력합니다.
선택자를 선택하기 위해 여러 가지 다른 규칙을 사용할 수 있으며 이 기사의 개념과 거의 유사한 기사를 방문할 수 있습니다.
코드 펜스로 들어가 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>id selector</title>
</head>
<body>
<table border=2>
<tr><td>D0</td><td>D1</td></tr>
<tr><td>D2</td><td>D3</td></tr>
</table>
<div id="buff" style="height:10px"></div>
<button onclick="btn()">Click</button>
<script>
function btn(){
$("td:eq(2)").css("background-color", "powderblue");
$("td:odd").css("background-color", 'violet');
}
</script>
</div>
</body>
</html>
출력:
테이블 데이터의 2nd 요소는 다르게 구성됩니다. 이 경우 :eq()를 사용하여 인덱스 위치를 가져왔습니다.
또한 인덱싱은 0부터 시작됩니다. 테이블 데이터의 odd() 인덱스에서 selector 메서드와 인덱스 간의 차이점을 이해하기 위해 다른 음영을 적용했습니다.
