Bagaimana untuk memanipulasi nod saudara jQuery dengan anggun-tutorial js-php.cn

Bagaimana untuk memanipulasi nod saudara jQuery dengan anggun

PHPz

Lepaskan： 2024-02-27 11:36:04

asal

360 orang telah melayarinya

Bagaimana untuk memanipulasi nod saudara jQuery dengan anggun

Cara mengendalikan nod adik beradik jQuery dengan anggun

Dalam pembangunan bahagian hadapan, selalunya perlu untuk mengendalikan elemen DOM secara dinamik, dan mengendalikan nod adik beradik bagi elemen adalah keperluan biasa. Menggunakan perpustakaan jQuery boleh memudahkan proses ini, menjadikan elemen DOM pengendalian lebih cekap dan mudah. Artikel ini akan memperkenalkan cara mengendalikan nod saudara jQuery dengan anggun dan memberikan contoh kod khusus untuk membantu pembaca memahami dan menggunakan teknologi ini dengan lebih baik.

Cari nod adik beradik:

Jika anda ingin mengendalikan nod adik beradik bagi elemen, anda perlu mencari unsur adik beradik unsur ini terlebih dahulu. jQuery menyediakan satu siri kaedah untuk mencari elemen adik-beradik, yang paling biasa digunakan ialah kaedah siblings(). Kaedah ini boleh memilih semua nod adik-beradik, atau lulus dalam pemilih untuk menapis nod adik-beradik yang perlu dikendalikan Contoh khusus adalah seperti berikut: siblings()方法。该方法可以选择所有兄弟节点，也可以通过传入选择器来筛选需要操作的兄弟节点，具体示例如下：

// 选择所有兄弟节点
var siblings = $("selector").siblings();

// 选择特定类名为"example"的兄弟节点
var siblingsWithClass = $("selector").siblings(".example");

Salin selepas log masuk

操作兄弟节点：

一旦找到了需要操作的兄弟节点，接下来就可以对这些节点进行相应的操作，例如修改样式、内容或者添加事件处理程序。jQuery提供了丰富的方法来操作DOM元素，常用的操作方法包括css()、html()和on()

// 修改所有兄弟节点的背景色为红色
$("selector").siblings().css("background-color", "red");

// 将所有兄弟节点的文本内容替换为"新内容"
$("selector").siblings().html("新内容");

// 为所有兄弟节点绑定点击事件
$("selector").siblings().on("click", function() {
  alert("点击了兄弟元素");
});

Salin selepas log masuk

css()

html()

on()

// 链式操作：选择所有兄弟节点 -> 修改背景色为蓝色 -> 隐藏元素
$("selector").siblings().css("background-color", "blue").hide();

Salin selepas log masuk

<!DOCTYPE html>
<html>
<head>
  <title>操作兄弟节点示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="changeSibling">点击修改兄弟节点</button>
  <div class="sibling">兄弟节点1</div>
  <div class="sibling">兄弟节点2</div>

  <script>
    $(document).ready(function() {
      $("#changeSibling").on("click", function() {
        $(this).siblings(".sibling").html("新内容").css("background-color", "green");
      });
    });
  </script>
</body>
</html>

Salin selepas log masuk

Contoh praktikal:

Atas ialah kandungan terperinci Bagaimana untuk memanipulasi nod saudara jQuery dengan anggun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!