Penukaran dom kepada objek jquery-Soal Jawab bahagian hadapan-php.cn

Penukaran dom kepada objek jquery

WBOY

Lepaskan： 2023-05-25 11:02:08

asal

1003 orang telah melayarinya

Nod DOM ialah elemen yang sangat penting apabila menggunakan JavaScript untuk pembangunan halaman. DOM (Model Objek Dokumen) merujuk kepada menghuraikan dokumen HTML atau XML ke dalam struktur pokok, membolehkan kami menggunakan JavaScript untuk mengakses dan memanipulasi sebarang elemen dalam dokumen. Walau bagaimanapun, kadangkala kami mendapati bahawa mengendalikan nod DOM secara terperinci adalah sangat rumit dan sukar untuk difahami. Inilah sebabnya mengapa ramai pembangun lebih suka menggunakan jQuery. jQuery ialah perpustakaan JavaScript yang digunakan secara meluas, dengan menggunakan jQuery kita boleh mengakses dan memanipulasi nod DOM dengan mudah.

Dalam artikel ini, saya akan memperkenalkan cara menggunakan jQuery untuk menukar DOM kepada objek jQuery, dan cara menggunakan objek jQuery untuk melaksanakan pelbagai operasi dan transformasi.

Penukaran DOM kepada objek jQuery

Untuk menukar nod DOM kepada objek jQuery, kita perlu menggunakan fungsi pemilih jQuery. Untuk menggunakan fungsi pemilih, kita perlu menghantar nama teg atau nama kelas atau ID nod sebagai parameter kepada fungsi. Sebagai contoh, jika kita mempunyai kod HTML berikut:

<div class="example" id="myDiv">Hello World!</div>

Salin selepas log masuk

kita boleh menukarnya kepada objek jQuery menggunakan kod berikut:

var myDiv = $('#myDiv');

Salin selepas log masuk

Di sini, kami menggunakan jQuery untuk menukar nod kepada jQuery objek, menggunakan $() dan kemudian masukkan '#myDiv', iaitu pemilih yang mencari dokumen HTML untuk elemen div dengan id 'myDiv'. Kami kemudiannya boleh mengakses elemen menggunakan pembolehubah myDiv, yang kini menjadi objek jQuery.

Selain itu, kita juga boleh menukar nod DOM kepada objek jQuery dengan:

var myDiv = $('#myDiv')[0];

Salin selepas log masuk

Di sini, kita mula-mula menukar elemen kepada jQuery menggunakan objek $('#myDiv') dan kemudian gunakan [ 0] untuk menukarnya kembali kepada nod DOM asal. Dengan cara ini kita boleh mengakses sifat JavaScript asal dan kaedah DOM bagi elemen tersebut.

Penukaran antara objek jQuery

Objek jQuery boleh mencari atau menyimpan satu atau lebih elemen dan menggunakan pelbagai kaedah dan sifat untuk memanipulasi elemen ini. Jika kita perlu mengakses satu elemen (seperti dalam contoh di atas), kita boleh menggunakan [0] untuk mengaksesnya.

Walau bagaimanapun, jika kita ingin mengakses berbilang elemen, kita perlu menggunakan pemilih yang mengembalikan berbilang elemen. Dengan cara ini, kita boleh menukar berbilang elemen kepada objek jQuery menggunakan kod berikut:

var divs = $('.example');

Salin selepas log masuk

Di sini kita menggunakan pemilih kelas '.example' yang akan mencari dokumen HTML untuk semua elemen yang mengandungi kelas itu dan mengembalikannya sebagai objek jQuery.

Selain menggunakan pemilih untuk mengembalikan objek jQuery untuk berbilang elemen, kami juga boleh menukar berbilang elemen kepada objek jQuery menggunakan kaedah berikut:

var listItems = $('li');
var listItem = $(listItems[0]);

Salin selepas log masuk

Di sini, kami mula-mula menukar semua elemen li ialah ditukar kepada objek jQuery, kemudian listItem[0] digunakan untuk menukar elemen li pertama kembali kepada nod DOM asal.

Peluasan dan pengecutan objek jQuery

Kami juga boleh mengembangkan atau mengecutkan objek jQuery dengan menambah atau mengalih keluar elemen DOM. Kita boleh menambah elemen DOM pada halaman menggunakan:

var newDiv = $('<div>');
newDiv.addClass('newDiv').text('Hello World!');
$('body').append(newDiv);

Salin selepas log masuk

Di sini kita mula-mula menukar elemen div baharu kepada objek jQuery menggunakan $('

') dan kemudian gunakan addClass('newDiv' ) add a atribut kelas kepadanya dan tambahkan beberapa teks menggunakan teks('Hello World!'). Kami kemudian menggunakan append(newDiv) untuk menambah elemen div baharu pada elemen badan halaman.

Kami juga boleh mengalih keluar elemen DOM daripada halaman menggunakan:

var firstListItem = $('li:first-child');
firstListItem.remove();

Salin selepas log masuk

Di sini kita mula-mula mencari elemen li pertama mengikut pemilih dan kemudian menggunakan kaedah remove() untuk mengeluarkannya daripada halaman Padam elemen .

Ringkasan

Menggunakan jQuery, kami boleh mengakses nod DOM dengan sangat mudah. Kita boleh menggunakan fungsi pemilih untuk menukar nod DOM kepada objek jQuery dan memanipulasinya menggunakan pelbagai kaedah dan sifat.

Kami juga boleh menukar berbilang elemen DOM kepada objek jQuery dan memanipulasinya menggunakan pelbagai kaedah dan sifat. Kita boleh menambah atau mengalih keluar elemen untuk mengembangkan atau mengecilkan objek jQuery.

Menggunakan jQuery, kami boleh menulis kod JavaScript yang boleh diselenggara dan difahami dengan lebih mudah.

Atas ialah kandungan terperinci Penukaran dom kepada objek jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!