masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

jQuery Traversal-Ancestors

jQuery Traversal

Apakah itu traversal?

jQuery traversal, bermaksud "pindah", digunakan untuk "mencari" (atau memilih) elemen HTML berdasarkan hubungannya dengan elemen lain. Mulakan dengan pilihan dan bergerak mengikut pilihan ini sehingga anda mencapai elemen yang anda inginkan.

Gambar di bawah menunjukkan salasilah keluarga. Dengan traversal jQuery, anda boleh dengan mudah bergerak ke atas (nenek moyang), ke bawah (keturunan), dan mendatar (adik-beradik) dalam salasilah keluarga, bermula dari elemen yang dipilih (semasa). Pergerakan ini dipanggil melintasi DOM. Unsur


<div> ialah unsur induk <ul> Elemen

<ul> ialah elemen induk bagi elemen <li> kiri ialah <span> Unsur induk ;, unsur anak <ul> dan keturunan <div>. Unsur

<span> ialah unsur anak <li> dan keturunan <ul>

Dua unsur <li> adalah adik beradik (mempunyai unsur induk yang sama).

Elemen <li> di sebelah kanan ialah unsur induk <b>, unsur anak <ul> dan keturunan <div>. Unsur

<b> ialah anak kepada <li> dan merupakan keturunan daripada kedua-dua <ul>

Peringatan hangat: Nenek moyang ialah bapa, datuk, datuk, dll. Keturunan ialah anak, cucu, cicit, dll. Adik beradik berkongsi ibu bapa yang sama.

jQuery Traversal - Nenek moyang

Nenek moyang ialah bapa, datuk atau moyang, dsb.

Dengan jQuery, anda boleh melintasi pokok DOM untuk mencari nenek moyang sesuatu elemen.

Melintasi pepohon DOM

Kaedah jQuery ini berguna untuk melintasi pepohon DOM:

parent()parents()parentsUntil()

jQuery parent() method

parent() method mengembalikan elemen induk langsung bagi elemen yang dipilih.

Kaedah ini hanya akan merentasi pokok DOM satu tahap ke atas.

kaedah jQuery parents()

kaedah ibu bapa() mengembalikan nilai elemen terpilih Semua elemen nenek moyang, sehingga ke elemen akar dokumen (<html>).

Contoh berikut mengembalikan semua nenek moyang semua <span> elemen

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parents().css({"color":"yellow","border":"1px solid pink"});
});
</script>
</head>
<body class="ancestors">body (曾曾祖父元素)
  <div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)  
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>
</html>

kaedah jQuery parentsUntil()

parentsUntil () kaedah mengembalikan semua unsur nenek moyang antara dua unsur yang diberikan.


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors"> body (曾曾祖父元素) <div style="width:500px;">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span</span> </li> </ul> </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492970 permainan