Tukar jquery kepada objek dom

jQuery ialah perpustakaan JavaScript yang sangat baik untuk menulis tapak web interaktif dengan cepat. Walau bagaimanapun, dalam beberapa kes anda mungkin perlu menukar objek jQuery kepada objek DOM supaya anda boleh mengubah dan memanipulasinya menggunakan JavaScript tulen.

Dalam artikel ini, kita akan membincangkan cara menukar objek jQuery kepada objek DOM.

1. Apakah objek jQuery?

Sebelum kita bermula, mari kita semak objek jQuery dengan cepat. Objek jQuery ialah objek yang dicipta oleh perpustakaan jQuery yang membolehkan anda memilih dan memanipulasi elemen dengan mudah dalam dokumen HTML menggunakan pemilih CSS.

Apabila satu atau lebih elemen dipilih menggunakan pemilih CSS, jQuery mengembalikan objek jQuery. Anda boleh menggunakan objek ini untuk memanggil pelbagai kaedah seperti .addClass(), .on(), dsb. Kaedah ini membolehkan anda membuat perubahan pada elemen, menambah pendengar acara dan melaksanakan operasi DOM yang lain.

2. Perbezaan antara objek jQuery dan objek DOM

Sekarang, mari kita lihat perbezaan antara objek jQuery dan objek DOM. Objek DOM ialah model objek dokumen yang disediakan secara asli oleh penyemak imbas, yang mewakili elemen dalam dokumen HTML, dokumen XML atau dokumen XHTML. DOM menyediakan antara muka pengaturcaraan yang membenarkan JavaScript dan bahasa pengaturcaraan lain untuk mengakses dan mengubah suai kandungan dan struktur dokumen.

Dalam JavaScript, anda boleh memilih elemen DOM menggunakan kaedah seperti document.getElementById() atau document.querySelector(). Kaedah ini mengembalikan objek DOM yang boleh anda manipulasi menggunakan kaedah dan sifat JavaScript asli.

Perbezaan utama antara objek jQuery dan objek DOM ialah objek jQuery ialah satu set objek DOM yang bersarang dalam tatasusunan. Objek DOM ini boleh dimanipulasi menggunakan kaedah dan sifat objek jQuery. Sebaliknya, objek DOM tidak boleh menggunakan kaedah dan sifat objek jQuery.

3. Tukar objek jQuery kepada objek DOM

Sekarang anda memahami perbezaan antara objek jQuery dan objek DOM, mari kita bincangkan cara menukar objek jQuery kepada objek DOM.

Objek jQuery boleh dibuat dengan hanya membungkusnya dalam pembina jQuery, seperti yang ditunjukkan di bawah:

var $element = $(‘#myElement’);

Untuk menukar objek jQuery kepada objek DOM, anda boleh menggunakan salah satu kaedah berikut .

1. Menggunakan [index]

Anda boleh menggunakan sifat [index] objek jQuery untuk mengakses satu elemen DOM. Untuk objek jQuery dengan hanya satu elemen, anda boleh menggunakan [0] atau [1] (dan seterusnya) untuk mengakses elemen pertama atau kedua. Untuk objek jQuery dengan berbilang elemen, anda boleh menggunakan [index] (di mana index ialah nombor berasaskan sifar) untuk mengakses elemen tertentu.

// 获取第一个元素
var element = $element[0]; 

// 获取第二个元素
var element = $element[1]; 

// 获取特定元素
var element = $element[2];

Menggunakan kaedah ini, anda boleh mengakses elemen DOM asas dan memanipulasinya menggunakan JavaScript asli.

2. Gunakan .get(index)

jQuery juga menyediakan kaedah yang dipanggil get yang membolehkan anda mengakses elemen DOM individu dalam objek jQuery. Apabila anda memanggil kaedah .get(index), ia mengembalikan elemen DOM pada kedudukan yang ditentukan. Seperti menggunakan atribut [index], anda boleh menentukan nombor berasaskan sifar untuk mengakses elemen tertentu.

// 获取第一个元素
var element = $element.get(0);

// 获取第二个元素
var element = $element.get(1);

// 获取特定元素
var element = $element.get(2);

Pendekatan ini sangat serupa dengan menggunakan atribut [index], tetapi ia mempunyai kelebihan apabila anda meminta lebih daripada bilangan elemen dalam objek jQuery, ia akan mengembalikan undefined (bukannya null ).

3.Gunakan .toArray()

Akhir sekali, anda boleh menggunakan kaedah .toArray() untuk menukar objek jQuery kepada tatasusunan DOM. Apabila anda memanggil .toArray() ia akan mengembalikan tatasusunan semua elemen DOM dalam objek jQuery semasa.

var elementsArray = $element.toArray();

Menggunakan kaedah ini, anda kini boleh memanggil kaedah dan sifat JavaScript asli pada tatasusunan DOM.

4. Ringkasan

Dalam artikel ini, kami membincangkan perbezaan antara objek jQuery dan objek DOM, dan memperkenalkan tiga kaedah untuk menukar objek jQuery kepada objek DOM. Kaedah ini termasuk menggunakan atribut [index], kaedah .get(index) dan kaedah .toArray().

Tidak kira kaedah yang anda pilih, menukar objek jQuery kepada objek DOM agak mudah dan sangat berguna. Ini membolehkan anda memanipulasi elemen DOM dengan mudah dalam JavaScript tulen menggunakan kaedah dan sifat JavaScript asli.

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