Pengenalan kepada pemilih jQuery dan analisis klasifikasi-tutorial js-php.cn

Pengenalan kepada pemilih jQuery dan analisis klasifikasi

PHPz

Lepaskan： 2024-02-28 12:06:04

asal

640 orang telah melayarinya

Pengenalan kepada pemilih jQuery dan analisis klasifikasi

Pengenalan dan analisis klasifikasi pemilih jQuery

jQuery ialah perpustakaan JavaScript yang sangat popular yang digunakan secara meluas dalam pembangunan web. Antaranya, pemilih adalah bahagian yang sangat penting dalam jQuery, yang membolehkan pembangun memilih elemen daripada dokumen HTML dan mengendalikannya melalui sintaks yang ringkas. Artikel ini akan memperkenalkan secara ringkas konsep asas pemilih jQuery, menganalisis klasifikasi mereka secara terperinci dan menyediakan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik.

1. Pengenalan kepada pemilih jQuery

Apabila menggunakan jQuery, pemilih digunakan untuk menentukan elemen HTML yang perlu dikendalikan, dan sintaksnya adalah serupa dengan pemilih CSS. Melalui pemilih, anda boleh memilih satu elemen, sekumpulan elemen atau semua elemen dalam keseluruhan halaman untuk mengendalikannya dengan mudah, mengubah suai gaya atau mengikat acara.

2. Analisis klasifikasi pemilih jQuery

1. Pemilih asas digunakan untuk memilih satu elemen atau sekumpulan elemen dalam dokumen HTML. Pemilih asas yang biasa digunakan termasuk:

: Pilih elemen mengikut nama tegnya, sintaksnya ialah $("elemen"). Contohnya, untuk memilih semua elemen : $("p"). $("element")。例如，选择所有的元素：$("p")。
ID选择器：通过元素的id属性选择元素，语法为$("#id")。例如，选择id为"demo"的元素：$("#demo")。
类选择器：通过元素的class属性选择元素，语法为$(".class")。例如，选择class为"info"的元素：$(".info")。
属性选择器：通过元素的属性选择元素，语法为$("[attribute='value']")。例如，选择属性data-id值为"123"的元素：$("[data-id='123']")。

2. 层级选择器

层级选择器用于选择元素的层级关系，常用的层级选择器包括：

后代选择器：选择指定元素的后代元素，语法为$("parent descendant")。例如，选择内部所有的元素：$("div p")。
子元素选择器：选择指定元素的子元素，语法为$("parent > child")。例如，选择<div>下直接的所有<code>元素：$("div > span")。
相邻兄弟选择器：选择指定元素的相邻兄弟元素，语法为$("prev + next")。例如，选择元素后紧接着的一个元素：$("p + span")Pemilih ID

: Pilih elemen melalui atribut idnya, sintaksnya ialah $("#id"). Contohnya, untuk memilih elemen dengan id "demo": $("#demo"). 
Pemilih kelas: Pilih elemen melalui atribut kelasnya, sintaksnya ialah $(".class"). Contohnya, pilih elemen dengan kelas "info": $(".info"). 

Pemilih atribut: Pilih elemen melalui atributnya, sintaksnya ialah $("[attribute='value']"). Contohnya, untuk memilih elemen yang atributnya data-id mempunyai nilai "123": $("[data-id='123']" ) . 

2. Pemilih hierarkiPemilih hierarki digunakan untuk memilih hubungan hierarki elemen yang biasa digunakan termasuk: 

Pemilih turunan
: Pilih elemen turunan yang ditentukan. >$( "keturunan induk"). Contohnya, untuk memilih semua elemen <p></p> di dalam : $("div p"). 
Pemilih elemen kanak-kanak
: Pilih elemen anak bagi elemen yang ditentukan, sintaksnya ialah $("ibu bapa > anak"). Contohnya, untuk memilih semua elemen <span></span> terus di bawah : $("div > span"). 
Pemilih adik beradik bersebelahan
: Pilih elemen adik beradik bersebelahan unsur yang ditentukan, sintaksnya ialah $("prev + next"). Contohnya, untuk memilih elemen <span></span> serta-merta mengikuti elemen <p></p>: $("p + span"). 3. Pemilih penapis <p></p>Pemilih penapis digunakan untuk memilih elemen yang memenuhi syarat yang ditetapkan termasuk: <p></p>
:first: Pilih elemen pertama yang sepadan dengan pemilih. 
🎜🎜:last🎜: Memilih elemen terakhir yang sepadan dengan pemilih. 🎜🎜🎜:even🎜: Memilih elemen yang sepadan dengan kedudukan genap pemilih. 🎜🎜🎜:odd🎜: Memilih elemen yang sepadan dengan kedudukan ganjil pemilih. 🎜🎜🎜:eq(index)🎜: Memilih elemen yang sepadan dengan kedudukan indeks yang dinyatakan dalam pemilih. 🎜🎜🎜3. Contoh Kod🎜🎜Yang berikut menggunakan contoh kod khusus untuk menunjukkan penggunaan pelbagai jenis pemilih jQuery: 🎜<!DOCTYPE html>
<html>
<head>
  <title>jQuery选择器示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div>
    <p>Hello, jQuery!</p>
  </div>
  <div id="example">
    <p class="info">This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </div>

  <script>
    // 基础选择器示例
    $("p").css("color", "blue"); // 改变所有<p>元素的颜色为蓝色
    $("#example .info").html("Updated content"); // 修改id为example内class为info的元素的内容

    // 层级选择器示例
    $("div > p").css("font-weight", "bold"); // 选取div下的直接子元素p并设置字体加粗

    // 过滤选择器示例
    $("p:first").css("background-color", "yellow"); // 选取第一个<p>元素并设置背景色为黄色
  </script>
</body>
</html>
Salin selepas log masuk
🎜Melalui contoh kod di atas, pembaca boleh mempunyai pemahaman intuitif tentang pelbagai jenis pemilih jQuery, dan Gunakannya secara fleksibel dalam pembangunan sebenar untuk mengendalikan elemen HTML. 🎜🎜Kesimpulan🎜🎜Sebagai bahagian penting dalam perpustakaan jQuery, pemilih jQuery membawa kemudahan dan kecekapan kepada pembangunan web. Melalui pengenalan dan contoh artikel ini, saya berharap pembaca dapat memahami dan menguasai pelbagai jenis pemilih jQuery yang lebih mendalam, supaya dapat membangunkan aplikasi web yang cemerlang dengan lebih cekap. 🎜