Apakah kaedah untuk melintasi nod dalam jquery?

Kaedah lintasan nod JQ: 1. kanak-kanak(); 3. prev(); (); 8. last(); 9. filter();

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

Kaedah lintasan nod JQuery

1 kaedah kanak-kanak(): $('p').children()---Traverse untuk mencari semua elemen anak p elemen Nod

<p>Hello</p>
<div>
    <span>Hello Again</span>
    <p class="box">您好!</p>
</div>
<p>And Again</p>

<script type="text/javascript">
    $(&#39;div&#39;).children();      //<span>Hello Again</span><p class="box">您好!</p>
    $(&#39;div&#39;).children(&#39;.box&#39;)    //<p class="box">您好!</p>
</script>

2. next() kaedah: $('p').next() --- Cari elemen adik beradik bersebelahan selepas elemen p tetapi bukan semua elemen adik beradik

　[Kaedah berkaitan]

　(1)nextAll() kaedah: $('p').nextAll() ---- Cari semua elemen adik beradik selepas p

　(2)nextUntil() kaedah: $ ('p') .nextUntil('p')----Cari semua elemen adik beradik selepas p hingga elemen p

<p>Hello</p>
<p class="box">Hello Again</p>
<div>
    <span>And Again</span>
</div>

<script type="text/javascript">
    $(&#39;p&#39;).next();      //<p>Hello Again</p><div><span>And Again</span></div>
    $(&#39;p&#39;).next(&#39;.box&#39;);   //<p class="box">Hello Again</p>
</script>

3 kaedah: $('p').prev() ---- Cari elemen adik beradik bersebelahan sebelum p

[Kaedah berkaitan termasuk]

(1) kaedah prevAll(): $('p').prevAll() ---- Cari p Semua elemen adik beradik sebelumnya

(2) kaedah prevUntil(): $('p').prevUntil('p') --- Cari semua elemen sebelum p hingga elemen p

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>

<script type="text/javascript">
   $(&#39;p&#39;).prev();   //<div><span>Hello Again</span></div>
</script>

4. kaedah: $('p').siblings()---- Cari semua elemen adik-beradik sebelum dan selepas p

5. ---- Cari sub-elemen dalam elemen p dan ia ialah elemen span

6. kaedah eq(): $('p').eq(1) --- Cari p kedua elemen (subskrip indeks bermula dari 0)

7 first() kaedah: $('li').first() --- Dapatkan elemen li pertama

8. kaedah: $('li').last() --- Dapatkan elemen li terakhir

9 kaedah: $('p').filter('. box') ---. Dapatkan elemen p dengan kotak nama kelas

10. kaedah is(): $('.box').is('p') ---- Tentukan sama ada .box ialah elemen p

11. kaedah map(): $('p').map(callback) --- Jalankan fungsi panggil balik untuk setiap p

Contoh: Traverse elemen input untuk mendapatkan nilainya Nilainya ialah dipisahkan dengan "," dan ditambah pada penghujung elemen p

<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://ejohn.org/"/>
</form>

<script type="text/javascript">
    $("p").append( $("input").map(function(){
          return $(this).val();
        }).get().join(", ") );   //<p>John, password, http://ejohn.org/</p> 
</script>

12. kaedah hasClass(): $('p').hasClass('box') ---- Cari kelas nama yang mengandungi p

13 kotak, kaedah has(): $('p').has('span') ---- Cari elemen p

14, yang mengandungi elemen span not() kaedah: $('p').not('span') ---- Cari p elemen yang tidak mengandungi elemen span

15. slice() kaedah: $('p') .slice(0,2) ---- Cari elemen p pertama hingga elemen p ke-3

16. kaedah offsetParent(): $('p').offsetParent() --- Cari Yang pertama elemen nenek moyang diposisikan bagi elemen p

17. kaedah induk(): $('p').parent() ---- Mengembalikan set elemen yang mengandungi nod induk unik bagi elemen p

18. Kaedah ibu bapa(): $('p').parent() ---- Mengembalikan semua nod nenek moyang yang mengandungi elemen p (tidak termasuk nod akar)

19 ('p').parentUntil('#box') ---- Cari unsur nenek moyang unsur p sehingga #box

20 kaedah: $('p' ).contents(. ) --- Mengembalikan semua nod anak (termasuk nod teks) dalam elemen p

kaedah end(): $('p').find('span').end( ) ---. - Tukar badan pernyataan kembali ke keadaan sebelumnya, iaitu: selepas mencari elemen span, fokus kembali ke elemen p

<div>
    <span>Hello</span>,
    how are you?
</div>
 
<script type="text/javascript">
    $(&#39;div&#39;).find(&#39;span&#39;).addClass(&#39;test&#39;).end().attr(&#39;title&#39;,&#39;title1&#39;);
    //span添加class=test;div添加title=title1
</script>

Tutorial video berkaitan yang disyorkan: Tutorial jQuery (video )

Atas ialah kandungan terperinci Apakah kaedah untuk melintasi nod dalam jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!