lintasan jQuery

Apakah itu traversal?

jQuery traversal, yang 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.

img_travtree.png

Analisis ilustrasi:

  • <div> elemen ialah unsur induk <ul> ia nenek moyang. Unsur

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

  • <span> ialah unsur anak daripada <li>

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

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

  • <b> ialah anak kepada <li>



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


jQuery menyediakan pelbagai kaedah untuk merentasi DOM.

Kaedah traversal jenis terbesar ialah traversal pokok (tree-traversal).

Bab seterusnya akan menerangkan cara untuk bergerak ke atas, ke bawah dan ke tahap yang sama dalam pepohon DOM.


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").parent().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="ancestors"> <div style="width:300px;">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span</span> </li> </ul> </div> <div style="width:300px;">div (祖父元素) <p>p (父元素) <span>span</span> </p> </div> </div> </body> </html>
  • Cadangan kursus
  • Muat turun perisian kursus