简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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>
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)  492130 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！