objek jQuery dan objek DOM

Preface

Untuk menulis sebarang program JavaScript, kita mesti mendapatkan objek terlebih dahulu Pemilih jQuery boleh mengubah sepenuhnya cara kita biasanya mendapatkan objek dengan hampir semua semantik , seperti "atribut tajuk sendiri dan nilai mengandungi elemen <a> ujian".

Objek dom dan set pembungkus jQuery

Sama ada kita menulis program atau membaca dokumentasi API, kita mesti sentiasa memberi perhatian untuk membezakan antara objek Dom dan set pembungkus jQuery.

1. Objek Dom

Dalam pembangunan JavaScript tradisional, kami mula-mula memperoleh objek Dom, seperti:

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

Kami sering menggunakan dokumen The . kaedah getElementById mendapat satu objek Dom berdasarkan id, atau kaedah document.getElementsByTagName mendapat koleksi objek Dom berdasarkan nama teg HTML.

Selain itu, dalam fungsi acara, anda boleh menggunakan ini dalam fungsi kaedah untuk merujuk objek pencetus peristiwa (tetapi terdapat masalah dengan IE6 dalam fungsi acara multicast), atau gunakan sasaran acara objek (Firefox) atau srcElement (IE6 ) untuk mendapatkan objek Dom yang mencetuskan peristiwa.

Perhatikan bahawa apa yang kami dapat di sini ialah semua objek Dom juga mempunyai jenis yang berbeza seperti input, div, span, dsb. Objek Dom mempunyai sifat dan kaedah yang terhad.

2. Set pembungkusan jQuery

Set pembungkusan jQuery boleh dikatakan sebagai pengembangan objek Dom. Dalam dunia jQuery, semua objek, sama ada satu atau kumpulan, dirangkumkan ke dalam set pembungkus jQuery Contohnya, mendapatkan set pembungkus jQuery yang mengandungi elemen:

var jQueryObject = $("#testDiv");

set pembungkus jQuery dianggap sebagai objek. dipanggil bersama. Set pembalut jQuery mempunyai set sifat dan kaedah yang kaya.

3. Penukaran objek Dom dan objek jQuery

(1) Set pembungkusan Dom ke jQuery

Jika anda ingin menggunakan fungsi yang disediakan oleh jQuery, anda mesti membina set pembalut jQuery dahulu. Kita boleh menggunakan pemilih jQuery yang akan diperkenalkan dalam artikel ini untuk membina set pembalut jQuery secara langsung, seperti:

$("#testDiv");

Set pembalut yang dibina oleh pernyataan di atas hanya mengandungi satu elemen yang idnya ialah testDiv.

Atau kami telah memperoleh elemen Dom, seperti:

var div = document.getElementById("testDiv");

Dalam kod di atas, div ialah elemen Dom Kita boleh menukar elemen Dom kepada set pembungkus jQuery:

var domToJQueryObject = $(div);

(2) set pembalut jQuery kepada objek DOM

Set pembalut jQuery ialah koleksi, jadi kita boleh mengakses salah satu elemennya melalui pengindeks:

var domObject = $("#testDiv")[0];

Ambil perhatian bahawa apa yang dikembalikan melalui pengindeks bukan lagi set berpakej jQuery, tetapi objek Dom!

Sesetengah kaedah traversal set berpakej jQuery, seperti setiap(), boleh melepasi fungsi traversal fungsi traversal Ini juga merupakan elemen Dom, contohnya:

$("#testDiv").each(function() {
  alert(this)
});

Bagaimana jika kita mahu menggunakan kaedah jQuery untuk mengendalikan objek Dom Hanya gunakan kaedah penukaran yang diperkenalkan di atas:

$("#testDiv").each(function() {
  $(this).html("修改内容")
});

Ringkasan : Mula-mula biarkan Semua orang jelas tentang konsep objek Dom dan set pembungkusan jQuery, yang akan mempercepatkan pembelajaran kita. Selagi anda boleh membezakan antara keduanya, anda boleh menjadi jelas apabila menulis program.