Apakah persamaan pemilih dalam jquery-Soal Jawab bahagian hadapan-php.cn

Apakah persamaan pemilih dalam jquery

PHPz

Lepaskan： 2023-05-14 10:13:07

asal

1023 orang telah melayarinya

jQuery ialah perpustakaan JavaScript yang direka untuk memudahkan traversal dan manipulasi dokumen HTML, pengendalian acara, kesan animasi dan interaksi AJAX. Pemilih jQuery ialah bahagian paling asas dan teras pustaka jQuery Ia adalah fungsi yang digunakan oleh perpustakaan jQuery untuk mencari elemen DOM.

Dalam pemilih jQuery, eq() ialah pemilih traversal dan penapisan berasaskan indeks Ia digunakan untuk memilih elemen pada kedudukan indeks tertentu dalam satu atau lebih elemen untuk mencapai koleksi elemen.

Di bawah, kami akan memperkenalkan secara terperinci penggunaan dan teknik pengendalian jQuery selector eq().

1. Sintaks pemilih jQuery eq()

Dalam jQuery, sintaks pemilih eq() adalah seperti berikut:

$(selector).eq ( indeks)

Di mana, $(selector) ialah ungkapan pemilih jQuery, digunakan untuk menentukan elemen yang perlu ditapis dan dipilih. Indeks ialah nilai integer bermula dari 0, digunakan untuk menentukan kedudukan indeks elemen yang akan dipilih.

Perlu diambil perhatian bahawa apabila indeks kurang daripada 0 atau lebih besar daripada bilangan elemen tolak satu, eq() akan mengembalikan objek jQuery kosong dan bukannya melaporkan ralat.

2. Contoh pemilih jQuery eq()

Berikut akan memperkenalkan beberapa contoh aplikasi praktikal bagi pemilih jQuery eq() untuk lebih memahami penggunaan dan operasi khususnya.

Contoh 1: Penapisan pemilih

Dalam contoh di bawah, kami menggunakan tiga kaedah penapisan pemilih berbeza untuk memilih elemen li dalam senarai, dan kemudian gunakan eq(1) untuk memilih Pemilih memilih elemen kedua untuk menukar warna latar belakang.

<!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>

Salin selepas log masuk

Contoh 2: Traversal dan operasi pemilih

Dalam contoh berikut, kami menggunakan pemilih eq() untuk melaksanakan traversal berbilang elemen kotak input dalam bentuk Dan operasi, apabila kami memasukkan operasi dalam mana-mana kotak input, nilai kotak input lain juga akan berubah dengan sewajarnya.

<!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>

Salin selepas log masuk

3. Ringkasan

Melalui contoh di atas, kita dapat melihat peranan penting pemilih eq() dalam jQuery. Menggunakannya, kami boleh mencari, menapis dan mengendalikan elemen yang kami perlukan dengan cepat dan tepat, dengan itu mencapai pengaturcaraan dan pembangunan yang lebih cekap dan mudah. Oleh itu, apabila mempelajari dan menguasai pemilih jQuery, kita mesti menumpukan pada penguasaan kemahiran penggunaan dan operasi pemilih eq(), yang sangat penting untuk meningkatkan kecekapan pengaturcaraan dan kualiti kerja kita.

Atas ialah kandungan terperinci Apakah persamaan pemilih dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!