节点树
- 一、ready() ：页面DOM结构节点加载完成后触发（数据可能没有完全加载）
- 二、load & onload ：页面所有元素（包括图片数据等）加载完成后触发
- 三、window.onload = function(){...}与 $(function(){...})的对比
- 四、测试用例
一、ready() ：页面DOM结构节点加载完成后触发（数据可能没有完全加载）
// ready的完整写法 $(document).ready(function(){...}); // 简写方法1 $().ready(function(){...}); // 简写方法2 $(function(){...});
二、load & onload ：页面所有元素（包括图片数据等）加载完成后触发
window.onload = function(){...}; <body οnlοad="func1();func1();">...</body>
上面两种一样的，第一个是js写法，一个是嵌入html的写法。只能一次性定义。
$(window).load(function(){...});
jquery提供的load()，比onload方法灵活，可以多次定义并有先后次序。
三、window.onload = function(){…}与 $(function(){…})的对比
| window.onload = function(){…} | $(function(){…}) |
| 一个页面只能写一些onload = function(){…} | 一个页面可以同时写多个$(document).ready(function(){…}) |
| DOM节点和数据加载完之后执行代码块 | 加载完DOM节点即执行 |
四、测试用例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/jquery-1.12.4.min.js"></script> <script> alert("hello01"); window.onload = function(){ let oDiv = document.getElementById("div01"); alert("原生弹出的" + oDiv); } // jQuery的ready完整写法 $(document).ready(function(){ let $div = $("#div01"); alert("jQuery 弹出" + $div); }) $(function(){ let $div01 = $("#div01"); alert("简写jQuery" + $div01); }) alert("hello02"); </script> </head> <body> <div id="div01">这是一个div元素</div> </body> </html>
测试结果：
1、helllo 01 2、hello 02 3、jQuery 弹出[object Object] 4、简写jQuery[object Object] 5、原生弹出的[object HTMLDivElement]
