Analisis pemuatan DOM dan contoh pelaksanaan acara dalam JQuery_jquery

Contoh dalam artikel ini menerangkan prinsip pemuatan DOM dan pelaksanaan acara dalam JQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Interaksi antara JavaScript dan HTML dikendalikan melalui peristiwa yang dibangkitkan apabila pengguna dan penyemak imbas mengendalikan halaman. Apabila perubahan atau operasi tertentu berlaku dalam dokumen atau beberapa elemennya, penyemak imbas secara automatik menjana peristiwa. Sebagai contoh, apabila penyemak imbas memuatkan dokumen, peristiwa dijana: apabila pengguna mengklik butang, peristiwa juga dijana. Walaupun interaksi ini boleh dicapai menggunakan acara JavaScript tradisional, jQuery menambah dan memanjangkan mekanisme pengendalian acara asas. jQuery bukan sahaja menyediakan sintaks pengendalian acara yang lebih elegan, tetapi juga sangat meningkatkan keupayaan pengendalian acara.

Ambil penyemak imbas yang memuatkan dokumen sebagai contoh Selepas halaman dimuatkan, penyemak imbas akan menambah acara pada elemen DOM melalui JavaScript. Dalam kod JavaScript biasa, kaedah window.onload biasanya digunakan, manakala dalam jQuery, kaedah $(document).ready() digunakan. Kaedah $(document).ready() ialah fungsi yang paling penting dalam modul acara, yang boleh meningkatkan kelajuan tindak balas aplikasi web dengan ketara. jQuery menggunakan kaedah $(document).ready() untuk menggantikan kaedah JavaScript window.onload tradisional. Dengan menggunakan kaedah ini, anda boleh memanipulasi DOM dan memanggil fungsi yang terikat padanya apabila ia dimuatkan. Semasa penggunaan, anda perlu memberi perhatian kepada perbezaan halus antara kaedah $(document).ready() dan kaedah window.onload.

Masa pelaksanaan

Kaedah $(document).ready() dan kaedah window.onload mempunyai fungsi yang sama, tetapi terdapat perbezaan dalam pemasaan pelaksanaan. Kaedah window.onload dilaksanakan selepas semua elemen dalam halaman web (termasuk semua fail yang berkaitan dengan elemen) dimuatkan sepenuhnya ke dalam penyemak imbas, iaitu, JavaScript hanya boleh mengakses mana-mana elemen dalam halaman web pada masa ini. Pengendali acara yang didaftarkan melalui kaedah $(document).ready() dalam jQuery boleh dipanggil apabila DOM sudah siap sepenuhnya. Pada ketika ini, semua elemen halaman web boleh diakses oleh jQuery, tetapi ini tidak bermakna bahawa fail yang dikaitkan dengan elemen ini telah dimuat turun.

Sebagai contoh, terdapat tapak web galeri foto besar yang menambahkan gelagat tertentu pada semua gambar dalam halaman web, seperti menyembunyikan atau menunjukkan gambar selepas mengklik padanya. Jika kaedah window.onload digunakan, pengguna mesti menunggu setiap imej dimuatkan sebelum meneruskan. Jika anda menggunakan kaedah $(document).ready() dalam jQuery untuk menyediakannya, anda boleh beroperasi selagi DOM sedia, tanpa menunggu semua imej dimuat turun. Jelas sekali, menghuraikan halaman web ke dalam pepohon DOM adalah lebih pantas daripada memuatkan semua fail yang berkaitan dalam halaman tersebut.

Selain itu, perlu diambil perhatian bahawa memandangkan acara yang didaftarkan dalam kaedah $(document).ready() akan dilaksanakan selagi DOM sedia, fail elemen yang berkaitan mungkin tidak dimuat turun pada masa ini . Contohnya, HTML yang berkaitan dengan imej telah dimuat turun dan dihuraikan ke dalam pepohon DOM, tetapi besar kemungkinan imej itu belum dimuatkan lagi, jadi atribut seperti ketinggian dan lebar imej mungkin tidak sah pada masa ini. masa. Untuk menyelesaikan masalah ini, anda boleh menggunakan kaedah pemuatan halaman lain dalam jQuery - kaedah load(). Kaedah load() mengikat fungsi pengendali ke acara onload elemen. Jika fungsi pengendali terikat pada objek tetingkap, ia akan dicetuskan selepas semua kandungan (termasuk tetingkap, bingkai, objek, imej, dll.) dimuatkan Jika fungsi pengendali terikat pada elemen, ia akan dicetuskan selepas kandungan elemen dimuatkan. Kod jQuery adalah seperti berikut:

$(window).load(function(){  
    // 编写代码  
})

adalah bersamaan dengan kod berikut dalam JavaScript:

window.onload = function(){   
    // 编写代码   
})

Sekarang mari kita terangkan secara terperinci perbezaan antara kaedah windows.onload dan kaedah $(document).ready():

Andaikan terdapat dua fungsi dalam halaman web, kod JavaScript adalah seperti berikut:

function one(){  
  alert("one");  
}  
function two(){  
  alert ("two");  
}

Apabila halaman web dimuatkan, panggil satu fungsi dan dua fungsi masing-masing melalui kod JavaScript berikut:

window.onload = one;  
window.onload = two;

Namun, selepas menjalankan kod, didapati hanya kotak dialog "dua" rentetan muncul. Sebab mengapa kotak dialog "satu" rentetan tidak boleh muncul ialah peristiwa onload JavaScript hanya boleh menyimpan rujukan kepada satu fungsi pada satu masa Ia akan secara automatik menimpa fungsi sebelumnya dengan fungsi kemudian, jadi tingkah laku baharu tidak boleh ditambah Tingkah laku yang sedia ada.

Untuk mencapai kesan pencetusan berurutan kedua-dua fungsi, kami hanya boleh mencipta kaedah JavaScript baharu untuk mencapainya Kod Javascript adalah seperti berikut:

window.onload = function(){  
    one();  
    two();  
}

Walaupun menulis kod dengan cara ini boleh menyelesaikan beberapa masalah, ia masih tidak dapat memenuhi keperluan tertentu Contohnya, jika terdapat berbilang fail JavaScript, setiap fail perlu menggunakan kaedah window.onload di atas. Menulis kod boleh menjadi sakit di pantat. Kaedah $(document).ready() bagi jQuery boleh mengendalikan situasi ini dengan baik Setiap kali kaedah $(document).ready() dipanggil, gelagat baharu akan ditambahkan pada gelagat sedia ada ini pada pendaftaran dilaksanakan mengikut urutan. Sebagai contoh, kod jQuery berikut:

function one(){  
    alert("one");  
}  
function two(){  
    alert("two");  
}  
$(document).ready(function(){  
    one();  
})  
$(document).ready(function(){  
    two();  
});

运行代码后，会先弹出字符串“one”对话框，然后弹出字符串“two”对话框。

下面看看ready()与onload()的耗时：

jQuery的ready()耗时 : 498 ms

简写方式

上面我们ready函数写成这样：

$(document).ready(function(){  
    // 编写代码  
})

也可以简写成这样：

$(function(){  
  // 编写代码  
})

另外，$(document)也可以简写为$()。当$()不带参数时，默认参数就是“document”，因此可以简写为：

$().ready(function(){  
    // 编写代码  
})

3种方式都是一样的功能，读者可以根据自己的喜好，选择其中的一种。

希望本文所述对大家的jQuery程序设计有所帮助。