Loading event
Javascript loading event:
##<body onload = "Function ()”>
window.onload = function(){}
## jquery loading event implementation
① $(document).ready(function processing);
② $().ready( function processing);
③ $(function processing); It’s just an encapsulation of the first type of loading
<!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> The difference between jquery loading events and traditional loading events
In the same request, jquery Multiple settings can be set, but only one can be set in the traditional way.
The traditional way of loading events is to assign a value to the onload event attribute. If assigned multiple times, the latter will overwrite the former.
The jquery method of loading events is to store each loading event in an array and become an element of the array. When executing, just traverse the array and execute each element, so it can set multiple loading events. .
The execution timing is differentThe traditional loading event is to execute the loading event after all the content (text, pictures, styles) is displayed in the browser.
jquery loading event is executed as soon as all the content (text, pictures, styles) is drawn in the corresponding DOM tree structure in the memory. It is possible that the corresponding content has not yet been displayed in the browser.
<!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>