Analisis penukaran dan perbezaan antara objek DOM jQuery dan jQuery objects_jquery

Artikel ini menganalisis penukaran dan perbezaan antara objek DOM dan objek jQuery dengan contoh. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

program jQuery Hello World:

Memperkenalkan jQuery. Terdapat dua versi jquery-x.y.z.min.js ialah versi yang diperkemas dan dimampatkan, dan yang tanpa min ialah versi pembangunan

Perhatikan bahawa "/" dalam laluan perlu dilepaskan, iaitu, gunakan "//".

Simbol $() menukar objek DOM kepada objek jQuery. Program Hello World adalah seperti berikut:

Salin kod Kod adalah seperti berikut: Hello jQuery $(dokumen). sedia(fungsi () { makluman("Hello World"); });

Perbandingan $(document).ready dan window.onload

Pertama lihat pada window.onload:

Salin kod Kod adalah seperti berikut: window.onload = sayHello; window.onload = sayWorld;

fungsi sayHello() { makluman("Hello"); } fungsi sayWorld() { amaran ("Dunia"); } Kaedah terakhir akan menimpa kaedah sebelumnya, iaitu, hanya satu gelembung akan dipaparkan pada akhirnya, satu daripada Dunia.

Jika $(document).ready digunakan, kaedah akan digabungkan, iaitu, amaran Hello akan dipaparkan dahulu, dan kemudian amaran Dunia akan dipaparkan.

Salin kod Kod adalah seperti berikut: $(document).ready(sayHello); $(dokumen).sedia(sayWorld);

fungsi sayHello() { makluman("Hello"); } fungsi sayWorld() { amaran ("Dunia"); } Dengan cara ini anda boleh mengaitkan berbilang kaedah. Satu lagi perbezaan kecil ialah pelaksanaan kaedah sedia akan lebih awal sedikit. width.onload akan menunggu DOM siap dan semua pengikatan selesai, manakala bersedia hanya boleh menyediakan DOM, dan kerja lain mungkin belum selesai. .

Contoh: Lampirkan acara onclick pada setiap objek hiperpautan

Mula-mula, tambahkan berbilang objek hiperpautan pada badan:

Salin kod Kod adalah seperti berikut: test1

test2

test3

test4 Untuk menambah acara onclick pada setiap objek, terdapat banyak kaedah:

Pertama sekali, anda boleh menulis atribut onclick dalam setiap tag Kedua, anda boleh menggunakan window.onload untuk menambah kaedah untuk mendapatkan semua teg dan menambah acara secara seragam, seperti berikut:

Salin kod Kod adalah seperti berikut: window.onload = function () { var myLinks = document.getElementsByTagName("a"); untuk(var i = 0; i myPautan[i].onclick = function(){ alert("Hello pautan: " i); } } }

Perhatikan bahawa saya telah membuat kesilapan di sini pada asalnya saya menyangka bahawa bilangan makluman akan meningkat, tetapi keputusan sebenar ialah setiap makluman ialah 4. Ini kerana js tidak mempunyai skop peringkat blok , dan pembolehubah i merujuk kepada satu dalam untuk, yang menjadi 4 selepas gelung Dalam erti kata lain, nilai i hanya diambil apabila peristiwa onclick berlaku, sudah tentu ia adalah 4.

Gunakan jQuery untuk melaksanakan fungsi ini di bawah: Salin kod Kod adalah seperti berikut: $(document).ready(function () { $("a").klik(fungsi () { alert("Hello pautan daripada jQuery!"); }); });

Simbol $() dalam jQuery akan mendapat semua elemen yang sesuai dalam halaman. Jadi kod di atas membayangkan proses traversal dan menambah fungsi pemprosesan acara pada setiap elemen Kaedah klik ialah kaedah yang disediakan oleh objek jQuery. onclick ialah sifat objek DOM.

Banyak atribut dalam DOM menjadi kaedah dalam jQuery.

Penukaran bersama dan perbezaan antara objek DOM dan objek jQuery

Lihat contoh, tambah teg p dahulu: Salin kod Kod adalah seperti berikut: Klik Saya! Mula-mula dapatkan objek DOM, dan kemudian tukarkannya menjadi objek jQuery:

Salin kod Kod adalah seperti berikut: //Bahagian 1: DOM --> //objek DOM: var pElement = document.getElementsByTagName("p")[0]; alert("DOM pElement: " pElement.innerHTML); //Tukar objek DOM kepada objek jQuery: var pElementjQuery = $(pElement); alert("jQuery pElementjQuery: " pElementjQuery.html());

Anda juga boleh mendapatkan objek jQuery terlebih dahulu dan kemudian menukarnya menjadi objek DOM:

Salin kod Kod adalah seperti berikut: //Bahagian 2: jQuery --> DOM // tatasusunan objek jQuery: var clickMejQuery = $("#clickMe"); //Tukar objek jQuery kepada objek DOM (2 cara): //cara 1: var domClickMe1 = clickMejQuery[0]; alert("dom1: " domClickMe1.innerHTML);

//cara 2: var domClickMe2 = clickMejQuery.get(0); alert("dom2: " domClickMe2.innerHTML);

Nota sekali lagi: $() dalam jQuery memperoleh tatasusunan semua elemen yang memenuhi syarat.

Ringkasan kecil: $("string") akan mengembalikan tatasusunan semua elemen yang memenuhi syarat, di mana:

Rentetan bermula dengan #, menunjukkan id; Rentetan bermula dengan ., menunjukkan nama kelas CSS Jika dua situasi di atas tidak berlaku, tukar rentetan untuk mewakili nama teg

$(objek DOM) boleh mendapatkan objek jQuery. Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.