acara memuatkan jQuery
Memuatkan acara
javascript memuatkan acara:
<body onload = "function ( )">
window.onload = function(){}
pelaksanaan acara pemuatan jquery
① $(dokumen).sedia(pemprosesan fungsi);
② $().ready( function pemprosesan);
③ $(pemprosesan fungsi); Ia hanyalah enkapsulasi jenis pemuatan pertama
<!DOCTYPE html> <html> <head> <title>php.cn</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> //① $(document).ready(加载事件处理函数); ////$(document) 创建一个jquery对象,内部有dom组成部分:document //$(document)[0]-------获得-------->document对象 $(document).ready(function(){ console.log(123); }); //② $().ready(加载事件处理函数) //$() 创建一个jquery对象,内部没有dom组成部分 $().ready(function(){ console.log(456); }); //③ $(function加载事件处理函数); $(function(){ console.log(789); }); </script> <style type="text/css"> </style> </head> <body> </body> </html>
Perbezaan antara acara pemuatan jquery dan acara pemuatan tradisional
Bilangan tetapan
Dalam permintaan yang sama, jquery Berbilang tetapan boleh ditetapkan, tetapi hanya satu boleh ditetapkan dengan cara tradisional
Cara tradisional untuk memuatkan acara adalah dengan menetapkan nilai kepada atribut acara onload Jika ditetapkan beberapa kali, yang terakhir akan menulis ganti yang dahulu.
Kaedah jquery untuk memuatkan acara adalah untuk menyimpan setiap acara pemuatan dalam tatasusunan dan menjadi elemen tatasusunan Apabila melaksanakan, hanya melintasi tatasusunan dan laksanakan setiap elemen, supaya ia boleh menetapkan berbilang acara pemuatan.
Masa pelaksanaan adalah berbeza
Acara pemuatan tradisional adalah untuk melaksanakan acara pemuatan selepas semua kandungan (teks, gambar, gaya) dipaparkan dalam penyemak imbas.
Peristiwa pemuatan mod Jquery dilaksanakan selagi semua kandungan (teks, gambar, gaya) dilukis dalam struktur pepohon DOM yang sepadan dalam memori Ada kemungkinan kandungan yang sepadan belum dipaparkan dalam pelayar.
<!DOCTYPE html> <html> <head> <title>php.cn</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> window.onload = function(){ console.log('abc'); } $(function(){ console.log('def'); }); </script> <style type="text/css"> </style> </head> <body> <h2>加载事件区别</h2> </body> </html>