jquery의 선택기 eq는 무엇입니까?
- PHPz원래의
- 2023-05-14 10:13:071001검색
jQuery는 HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 효과 및 AJAX 상호 작용을 단순화하도록 설계된 JavaScript 라이브러리입니다. jQuery 선택기는 jQuery 라이브러리의 가장 기본적이고 핵심적인 부분으로, jQuery 라이브러리에서 DOM 요소를 찾는 데 사용되는 기능입니다.
jQuery 선택기에서 eq()는 인덱스 기반 순회 및 필터링 선택기입니다. 하나 이상의 요소에서 특정 인덱스 위치에 있는 요소를 선택하여 요소 컬렉션을 필터링하는 데 사용됩니다.
아래에서는 jQuery 선택자 eq()의 사용법과 동작 기법을 자세히 소개하겠습니다.
1. jQuery 선택기 eq()의 구문
jQuery에서 eq() 선택기의 구문은 다음과 같습니다.
$(selector).eq(index)
여기서 $(selector)는 jQuery입니다. 필터링하고 선택해야 하는 요소를 지정하는 데 사용되는 선택기 표현식입니다. Index는 0부터 시작하는 정수값으로, 선택할 요소의 인덱스 위치를 지정하는 데 사용됩니다.
인덱스가 0보다 작거나 요소 수에서 1을 뺀 값보다 큰 경우 eq()는 오류를 보고하는 대신 빈 jQuery 객체를 반환한다는 점에 유의해야 합니다.
2. jQuery 선택기 eq()의 예
다음은 jQuery 선택기 eq()의 구체적인 사용법과 작동 기술을 더 잘 이해하기 위한 몇 가지 실제 적용 예를 소개합니다.
예제 1: 선택기 필터링
아래 예에서는 세 가지 선택기 필터링 방법을 사용하여 목록에서 li 요소를 선택한 다음 eq(1) 선택기를 사용하여 두 번째 요소를 선택하여 배경 색상 변경을 구현합니다. .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery demo - eq()选择器</title>
<style type="text/css">
.active {
background-color: #EE9A00;
}
</style>
</head>
<body>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Pineapple</li>
<li>Orange</li>
<li>Grape</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
// 根据元素名筛选
$('li').eq(1).addClass('active');
// 根据类名筛选
$('.active').eq(1).addClass('active');
// 根据ID名筛选
$('#word3').eq(0).addClass('active');
</script>
</body>
</html>예제 2: 선택기 순회 및 작업
다음 예에서는 선택기 eq()를 사용하여 양식에 입력한 후 입력 상자 요소의 순회 및 작업을 구현합니다. 입력 상자에 따라 다른 입력 상자의 값도 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery demo - eq()选择器</title>
</head>
<body>
<form>
<input type="text" id="input1" value="default value"/>
<input type="text" id="input2" value="default value"/>
<input type="text" id="input3" value="default value"/>
<input type="text" id="input4" value="default value"/>
</form>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$("input").on("input", function() {
var index = $("input").index(this);
$("input").eq(index).val($(this).val());
});
</script>
</body>
</html>3. 요약
위의 예를 통해 jQuery에서 eq() 선택기의 중요한 역할을 볼 수 있습니다. 이를 사용하면 필요한 요소를 빠르고 정확하게 찾고 필터링하고 조작할 수 있어 보다 효율적이고 편리한 프로그래밍 및 개발이 가능해집니다. 따라서 jQuery 선택기를 학습하고 마스터할 때 eq() 선택기의 사용 및 조작 기술을 익히는 데 중점을 두어야 하며 이는 프로그래밍 효율성과 작업 품질을 향상시키는 데 큰 의미가 있습니다.
위 내용은 jquery의 선택기 eq는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!