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: <br> Memperkenalkan jQuery. Terdapat dua versi jquery-x.y.z.min.js ialah versi yang diperkemas dan dimampatkan, dan yang tanpa min ialah versi pembangunan <br> <br>Perhatikan bahawa "/" dalam laluan perlu dilepaskan, iaitu, gunakan "//".<span style="color: #0000ff"></span> </p> <p>Simbol $() menukar objek DOM kepada objek jQuery.<strong> <br>Program Hello World adalah seperti berikut:</strong> <br></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="21108" class="copybut" id="copybut21108" onclick="doCopy('code21108')">Salin kod<u></u></a> Kod adalah seperti berikut:</span></div><html><div class="codebody" id="code21108"> <kepala><br> <title>Hello jQuery</title><br> <script type="text/javascript" src="libs//jquery-1.11.2.js"> <br> $(dokumen). sedia(fungsi () {<br> makluman("Hello World");<br> });<br> </skrip><br> </head><br> <badan><br> </badan><p> </html><br></p> </div> Perbandingan $(document).ready dan window.onload<p> </p>Pertama lihat pada window.onload:<p> <br></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="12822" class="copybut" id="copybut12822" onclick="doCopy('code12822')">Salin kod<u></u></a> Kod adalah seperti berikut:</span></div>window.onload = sayHello;<div class="codebody" id="code12822"> window.onload = sayWorld;<br> <br> fungsi sayHello() {<br> makluman("Hello");<br> }<br> fungsi sayWorld() {<br> amaran ("Dunia");<br> }<br> </div> Kaedah terakhir akan menimpa kaedah sebelumnya, iaitu, hanya satu gelembung akan dipaparkan pada akhirnya, satu daripada Dunia.<p> </p>Jika $(document).ready digunakan, kaedah akan digabungkan, iaitu, amaran Hello akan dipaparkan dahulu, dan kemudian amaran Dunia akan dipaparkan.<p> <br></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="90796" class="copybut" id="copybut90796" onclick="doCopy('code90796')">Salin kod<u></u></a> Kod adalah seperti berikut:</span></div>$(document).ready(sayHello);<div class="codebody" id="code90796"> $(dokumen).sedia(sayWorld);<br> <br> fungsi sayHello() {<br> makluman("Hello");<br> }<br> fungsi sayWorld() {<br> amaran ("Dunia");<br> }<br> </div> Dengan cara ini anda boleh mengaitkan berbilang kaedah.<p> 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. .<br> </p>Contoh: Lampirkan acara onclick pada setiap objek hiperpautan<p> </p>Mula-mula, tambahkan berbilang objek hiperpautan pada badan: <p> <br></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="30317" class="copybut" id="copybut30317" onclick="doCopy('code30317')">Salin kod<u></u></a> Kod adalah seperti berikut:</span></div><body><div class="codebody" id="code30317"> <a href="#">test1</a><br><br> <a href="#">test2</a><br><br> <a href="#">test3</a><br><br> <a href="#">test4</a><br> </body><br> </div> <br> Untuk menambah acara onclick pada setiap objek, terdapat banyak kaedah: <br> <br>Pertama sekali, anda boleh menulis atribut onclick dalam setiap tag <span style="color: #0000ff"> Kedua, anda boleh menggunakan window.onload untuk menambah kaedah untuk mendapatkan semua teg dan menambah acara secara seragam, seperti berikut: <br> <br></span><div class="codetitle"><span><a style="CURSOR: pointer" data="11754" class="copybut" id="copybut11754" onclick="doCopy('code11754')">Salin kod<u></u></a> Kod adalah seperti berikut:</span></div>window.onload = function () {<div class="codebody" id="code11754"> var myLinks = document.getElementsByTagName("a");<br> untuk(var i = 0; i < myLinks.length; i){<br /> myPautan[i].onclick = function(){<br /> alert("Hello pautan: " i);<br /> }<br /> }<br /> }<br /></p> <p>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.<br /> Ini kerana <strong>js tidak mempunyai skop peringkat blok </strong>, 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.<br /> <br /> Gunakan jQuery untuk melaksanakan fungsi ini di bawah:<br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="94000" class="copybut" id="copybut94000" onclick="doCopy('code94000')"><U>Salin kod</U></a></span> Kod adalah seperti berikut:</div><div class="codebody" id="code94000">$(document).ready(function () {<br /> $("a").klik(fungsi () {<br /> alert("Hello pautan daripada jQuery!");<br /> });<br /> });</div></p> <p>Simbol $() dalam jQuery akan mendapat semua elemen yang sesuai dalam halaman.<br /> Jadi kod di atas membayangkan proses traversal dan menambah fungsi pemprosesan acara pada setiap elemen <br />Kaedah klik ialah kaedah yang disediakan oleh objek jQuery.<span style="color: #ff0000"> onclick ialah sifat objek DOM.<br /> <br /></span><strong>Banyak atribut dalam DOM menjadi kaedah dalam jQuery.<span style="color: #ff0000"></span></strong> </p><p>Penukaran bersama dan perbezaan antara objek DOM dan objek jQuery<strong></strong> </p>Lihat contoh, tambah teg p dahulu: <p> <br /><div class="codetitle"><span><a style="CURSOR: pointer" data="20704" class="copybut" id="copybut20704" onclick="doCopy('code20704')">Salin kod<U></U></a> Kod adalah seperti berikut:</span></div><p id="clickMe">Klik Saya!< /p> <div class="codebody" id="code20704"></div> Mula-mula dapatkan objek DOM, dan kemudian tukarkannya menjadi objek jQuery: <p> <br></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="40594" class="copybut" id="copybut40594" onclick="doCopy('code40594')">Salin kod<u></u></a> Kod adalah seperti berikut:</span></div>//Bahagian 1: DOM --> //objek DOM:<div class="codebody" id="code40594"> var pElement = document.getElementsByTagName("p")[0];<br> alert("DOM pElement: " pElement.innerHTML);<br> //Tukar objek DOM kepada objek jQuery:<br> var pElementjQuery = $(pElement);<br> alert("jQuery pElementjQuery: " pElementjQuery.html());<br><br> </div>Anda juga boleh mendapatkan objek jQuery terlebih dahulu dan kemudian menukarnya menjadi objek DOM: <p><br></p> <div class="codetitle"> <span>Salin kod<a style="CURSOR: pointer" data="7482" class="copybut" id="copybut7482" onclick="doCopy('code7482')"><u></u> Kod adalah seperti berikut:</a></span>//Bahagian 2: jQuery --> DOM</div> // tatasusunan objek jQuery:<div class="codebody" id="code7482"> var clickMejQuery = $("#clickMe");<br> //Tukar objek jQuery kepada objek DOM (2 cara):<br> //cara 1:<br> var domClickMe1 = clickMejQuery[0];<br> alert("dom1: " domClickMe1.innerHTML);<br> <br>//cara 2: var domClickMe2 = clickMejQuery.get(0);<p> alert("dom2: " domClickMe2.innerHTML);<br><br> </p> </div>Nota sekali lagi: $() dalam jQuery memperoleh tatasusunan semua elemen yang memenuhi syarat.<p><span style="color: #0000ff"> </span></p>Ringkasan kecil:<p><strong> </strong>$("string") akan mengembalikan tatasusunan semua elemen yang memenuhi syarat, di mana: </p> <p><br>Rentetan bermula dengan #, menunjukkan id;<span style="color: #0000ff"> Rentetan bermula dengan ., menunjukkan nama kelas CSS <strong> Jika dua situasi di atas tidak berlaku, tukar rentetan untuk mewakili nama teg <br><br></strong> </span></p>$(objek DOM) boleh mendapatkan objek jQuery.<p><span style="color: #0000ff"> </span>Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang. </p> </div>