Bagaimana untuk menukar jquery dan dom

jQuery dan DOM ialah dua teknologi yang sangat penting dan digunakan secara meluas dalam pembangunan bahagian hadapan. Apabila melaksanakan kesan interaktif yang kompleks atau elemen halaman pengendalian, kita selalunya perlu mempunyai pemahaman yang jelas dan penguasaan penukaran antara keduanya. Artikel ini akan memperkenalkan kaedah penukaran antara jQuery dan DOM, dan memberikan kes praktikal khusus.

1. Perbezaan konsep antara jQuery dan DOM

Sebelum bercakap tentang penukaran jQuery dan DOM, mari kita semak semula konsep mereka.

1. jQuery: jQuery ialah perpustakaan JavaScript yang ringan, pantas dan ringkas. Ia membolehkan pembangun melengkapkan lebih banyak operasi dengan kurang kod, dan menyediakan banyak fungsi alat terkapsul yang serasi dengan pelbagai pelayar.
2. DOM: Model Objek Dokumen ialah API bebas pelayar dan platform yang mewakili HTML, XML atau dokumen lain sebagai struktur pepohon dan menyediakan cara untuk mengakses cara struktur untuk mengemas kini dan mengendalikan kandungan dokumen serta kandungannya. gaya.

Ringkasnya, jQuery ialah perpustakaan JavaScript dan DOM ialah API. jQuery terutamanya merangkum beberapa operasi DOM dan menyediakan sintaks dan fungsi yang lebih mudah. Kedua-duanya tidak berkaitan antara satu sama lain, tetapi boleh digunakan secara bergantian.

2. Tukar objek DOM kepada objek jQuery

Apabila kita perlu menggunakan jQuery untuk mengendalikan objek DOM, kita perlu menukar objek DOM kepada objek jQuery terlebih dahulu.

Kaedah utama penukaran ialah menggunakan fungsi $() jQuery, yang menerima pelbagai jenis parameter, termasuk ungkapan pemilih, elemen DOM, rentetan HTML, fungsi, dsb.

Antaranya, cara untuk menukar objek DOM kepada objek jQuery adalah dengan menghantar objek DOM sebagai parameter kepada fungsi $(). Sebagai contoh, cara untuk menukar elemen div dengan id "ujian" kepada objek jQuery adalah seperti berikut:

var testDiv = document.getElementById('test');
var $testDiv = $(testDiv);

Dalam kod di atas, mula-mula gunakan kaedah document.getElementById() untuk mendapatkan elemen div dengan id "test", Kemudian hantar objek DOM sebagai parameter kepada fungsi $() untuk menjana objek jQuery $testDiv.

Anda juga boleh menggunakan fungsi $() yang disertakan dengan jQuery untuk memilih terus elemen DOM, contohnya:

var $testDiv = $('#test');

Dalam kod di atas, parameter fungsi $() ialah ungkapan pemilih" #test", iaitu, pilih elemen DOM dengan id "ujian" dan tukarkannya menjadi objek jQuery. Kedua-dua kaedah boleh menukar objek DOM menjadi objek jQuery dan melaksanakan operasi yang sepadan.

3. Tukar objek jQuery kepada objek DOM

Begitu juga, apabila kita perlu menggunakan operasi DOM asli untuk mengendalikan objek jQuery, kita perlu menukar objek jQuery menjadi objek DOM.

Dalam jQuery, kita boleh menggunakan kaedah get(), kaedah toArray(), pemusnahan tatasusunan, dll. untuk menukar objek jQuery kepada objek DOM.

1. Gunakan kaedah get() untuk menukar objek jQuery kepada objek DOM Kaedah

get() ialah kaedah yang sangat biasa dalam jQuery untuk menukar objek jQuery. . Ia boleh membantu kami mendapatkan elemen DOM bagi elemen padanan. Apabila tiada parameter dihantar masuk, kaedah get() akan mengembalikan semua elemen padanan dalam bentuk tatasusunan dan memberikan indeks yang sepadan apabila indeks diluluskan, kaedah get() akan mengembalikan elemen DOM yang sepadan dengan indeks .

Sebagai contoh, cara untuk menukar elemen <div id="test"> kepada objek DOM adalah seperti berikut:

var testDiv = $('#test').get(0);

Dalam kod di atas, gunakan fungsi $() untuk mendapatkan elemen div dengan id "ujian", Dan panggil kaedah get() untuk menukar objek jQuery menjadi objek DOM.

2. Gunakan kaedah toArray() untuk menukar objek jQuery kepada objek DOM

toArray() kaedah juga boleh menukar objek jQuery kepada objek DOM dan mengembalikannya dalam bentuk tatasusunan . Contohnya:

var testDivArray = $('#test').toArray();
var testDiv = testDivArray[0];

Dalam kod di atas, gunakan kaedah toArray() untuk menukar elemen div dengan id "ujian" kepada tatasusunan objek DOM dan keluarkan elemen pertama sebagai objek DOM.

3. Gunakan tatasusunan yang memusnahkan untuk menukar objek jQuery kepada objek DOM

ES6 menyediakan sintaks untuk memusnahkan tatasusunan (memusnahkan tatasusunan), yang boleh menyahbina tatasusunan menjadi pembolehubah tunggal atau Pelbagai pembolehubah. Anda juga boleh menggunakan sintaks tatasusunan yang memusnahkan untuk menukar objek jQuery kepada objek DOM, contohnya:

var [testDiv] = $('#test');

Dalam kod di atas, gunakan sintaks tatasusunan yang memusnahkan untuk menukar elemen div dengan id "ujian" kepada objek DOM.

4. Kes Praktikal

Akhir sekali, kami memberikan kes praktikal yang mudah, menggunakan jQuery dan DOM untuk menukar satu sama lain dan melaksanakan operasi yang sepadan.

Dalam fail HTML, kami mula-mula mentakrifkan elemen butang dan elemen div:

<button id="clickme">Click me</button>
<div id="content">The content to be changed</div>

Kemudian dalam fail JavaScript, kami menggunakan jQuery untuk menukar elemen butang menjadi objek jQuery dan mencipta butang Ikat acara klik. Apabila butang diklik, kami menggunakan DOM untuk menukar elemen div kepada objek DOM dan menggunakan atribut innerHTML untuk mengubah suai kandungan elemen div.

$(document).ready(function() {
  var $clickMe = $('#clickme');
  var contentDiv = document.getElementById('content');

  $clickMe.on('click', function() {
    contentDiv.innerHTML = 'The content has been changed';
  });
});

Dalam kod di atas, mula-mula gunakan fungsi $() untuk menukar elemen butang dengan id "clickme" kepada objek jQuery, kemudian gunakan kaedah on() untuk mengikat acara klik dan gunakan menukar elemen div dengan id "kandungan" kepada objek DOM, dan akhirnya menggunakan atribut document.getElementById() untuk mengubah suai kandungan elemen div. innerHTML

Ringkasan

Artikel ini menerangkan terutamanya kaedah penukaran antara jQuery dan DOM, dan memberikan kes praktikal khusus. Dalam pembangunan bahagian hadapan, jQuery dan DOM ialah dua teknologi yang sangat biasa digunakan yang berkait rapat antara satu sama lain Menguasai kaedah penukaran mereka boleh membawa lebih banyak kemudahan dan fleksibiliti kepada pembangunan kami.

Atas ialah kandungan terperinci Bagaimana untuk menukar jquery dan dom. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!