jquery의 선택기 eq는 무엇입니까?-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

jquery의 선택기 eq는 무엇입니까?

PHPz

May 14, 2023 am 10:13 AM

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.