Rumah >hujung hadapan web >tutorial js >Koleksi Javascript vs JQuery HTML

Koleksi Javascript vs JQuery HTML

Jennifer Anistonasal: 2025-03-03 00:29:10914semak imbas

3 Objek HtmlCollection dikembalikan dari Document.GetElementsByTagName , document.getElementsByName dan Document.getElementsByClassName Methods

(tidak disokong dalam semua pelayar) JavaScript vs jQuery HTML Collections . Secara luar biasa, mereka sama dengan tatasusunan kerana mereka mempunyai harta panjang dan unsur -unsur boleh diakses oleh [indeks]. Walau bagaimanapun, mereka bukan susunan; Kaedah seperti push (), slice () dan sort () tidak disokong. Pertimbangkan dokumen HTML berikut:

Mari ambil setiap nod perenggan menggunakan getElementsByTagName dan pemilih jQuery:

Kedua -duanya mengembalikan nod yang sama sehingga panjang pengumpulan ialah 3: Koleksi Javascript vs JQuery HTML Kami sekarang akan menambah elemen perenggan lain ke dokumen dan melihat koleksi lagi:

Hasilnya: Objek HtmlCollection adalah live

<body>
	<p>Paragraph 1</p>
	<p>Paragraph 2</p>
	<p>Paragraph 3</p>
</body>

. Mereka dikemas kini secara automatik apabila dokumen asas berubah. JQuery dan kebanyakan perpustakaan JavaScript lain menggunakan kaedah seperti document.getElementsByTagName () tetapi menyalin nod yang dihasilkan ke array sebenar. Oleh itu, ia adalah pertanyaan mengenai keadaan dokumen pada masa itu: ia tidak pernah dikemas kini. Terdapat kelebihan dan kekurangan dengan kedua -dua kaedah. Sebagai contoh, kod berikut menyebabkan gelung tak terhingga sejak panjang htmlcollection meningkat sebagai elemen

ditambah:

var pCollection = document.getElementsByTagName("p");
var pQuery = $("p");

console.log("pCollection.length: ", pCollection.length);
console.log("pQuery.length: ", pQuery.length);

Yang mengatakan, mungkin terdapat situasi apabila htmlcollection hidup yang lebih cepat, asli lebih berguna daripada koleksi statik nod jQuery atau berulang kali membuat pemilihan yang sama. Nasib baik, kita boleh lulus apa -apa koleksi kepada jQuery apabila kita mahu memanipulasinya, mis.

pCollection.length: 3
pQuery.length: 3

JQuery dan perpustakaan lain boleh memotong usaha pembangunan tetapi sentiasa memeriksa sama ada mungkin untuk menulis kod yang lebih cekap dalam JavaScript lama biasa tanpa menanggung permintaan fail tambahan dan overhed pemprosesan.

// add new paragraph
var newp = document.createElement("p");
newp.appendChild(document.createTextNode("Paragraph 4"));
document.body.appendChild(newp);
// 
// display length
console.log("pCollection.length: ", pCollection.length);
console.log("pQuery.length: ", pQuery.length);

Soalan Lazim mengenai JavaScript vs JQuery Html Collections

pCollection.length: 4
pQuery.length: 3

Apakah perbezaan utama antara JavaScript dan JQuery ketika berurusan dengan koleksi HTML? JavaScript adalah bahasa pengaturcaraan yang secara langsung berinteraksi dengan koleksi HTML, yang membolehkan lebih banyak kawalan dan fleksibiliti. Walau bagaimanapun, ia boleh menjadi lebih kompleks dan memerlukan pemahaman yang lebih mendalam tentang bahasa. Sebaliknya, JQuery adalah perpustakaan JavaScript yang memudahkan banyak tugas, termasuk mengendalikan koleksi HTML. Ia menyediakan kaedah yang mudah digunakan untuk memanipulasi elemen HTML, tetapi ia mungkin tidak menawarkan tahap kawalan yang sama seperti JavaScript tulen.

Bagaimana saya boleh menukar koleksi HTML ke array dalam JavaScript? Berikut adalah contoh menggunakan array.from ():

let collection = document.getElementsByClassName ('contoh');

biarkan array = array.from (koleksi); Koleksi HTML dalam jQuery?

Dalam jQuery, anda boleh menggunakan kaedah .eech () untuk melangkah ke atas koleksi HTML. Berikut adalah contoh:
$ ('. Contoh'). Setiap (fungsi (indeks, elemen) { console.log (indeks, elemen);
}); Kaedah jQuery pada koleksi HTML yang dikembalikan oleh kaedah JavaScript. Ini kerana kaedah JavaScript mengembalikan koleksi HTML, sementara kaedah jQuery mengembalikan objek jQuery. Walau bagaimanapun, anda boleh menukar koleksi html ke objek jQuery menggunakan fungsi jQuery $ (), seperti so:
let collection = document.getElementsByClassname ('Contoh');

Dalam kedua -dua JavaScript dan jQuery, anda boleh mengakses elemen individu dalam koleksi HTML menggunakan notasi kurungan, sama seperti bagaimana anda akan mengakses elemen dalam array. Sebagai contoh, untuk mengakses elemen pertama dalam koleksi, anda akan menggunakan koleksi [0]. Di JavaScript, anda boleh mengubahsuai sifat -sifat unsur -unsur, sementara dalam jQuery, anda boleh menggunakan kaedah seperti .css (), .attr (), dan .html () untuk mengubahsuai unsur -unsur. koleksi. Dalam JavaScript, anda boleh menukar koleksi ke array dan kemudian menggunakan kaedah .filter (). Walau bagaimanapun, anda boleh menukar koleksi ke array menggunakan Array.From () atau pengendali penyebaran, dan kemudian gunakan kaedah array di atasnya. Walau bagaimanapun, anda boleh menambah elemen ke dokumen, dan mereka secara automatik akan dimasukkan ke dalam koleksi jika mereka sepadan dengan pemilih.

Bolehkah saya menggunakan kaedah .map () pada koleksi HTML? Walau bagaimanapun, anda boleh menukar koleksi ke array menggunakan array.from () atau pengendali penyebaran, dan kemudian gunakan kaedah .map () di atasnya.

Atas ialah kandungan terperinci Koleksi Javascript vs JQuery HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery css html Static Array Object if sort for while Filter using Length operator Property Collection copy map console function this Access Other

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：10 aplikasi Android percuma untuk pemaju webArtikel seterusnya：10 aplikasi Android percuma untuk pemaju web

Artikel berkaitan

Lihat lagi