1.原生 JS 入口函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| <html> <head> <meta charset="UTF-8"> <script> window.onload = function (ev) { var div1 = document.getElementsByTagName("div")[0]; var div2 = document.getElementsByClassName("box1")[0]; var div3 = document.getElementById("box2"); console.log(div1); console.log(div2); console.log(div3); div1.style.backgroundColor = 'red'; div2.style.backgroundColor = 'blue'; div3.style.backgroundColor = 'yellow'; }; </script> </head> <body> <div></div> <div class="box1"></div> <div id="box2"></div> </body> </html>
|
2.jQuery入口函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <html> <head> <meta charset="UTF-8"> <script> $(document).ready(function () { var $div1 = $("div"); var $div2 = $(".box1"); var $div3 = $("#box2");
console.log($div1); console.log($div2); console.log($div3);
$div1.css({ background: "red" });
$div2.css({ background: "blue" });
$div3.css({ background: "yellow" }) }); </script> </head> <body> <div></div> <div class="box1"></div> <div id="box2"></div> </body> </html>
|
3.加载模式的区别
存疑
原生 JS 会等到 DOM 元素加载完毕,并且图片也加载完毕才会执行
jQuery 会等到 DOM 元素加载完成,但是不会等到图片加载完毕就执行
1 2 3 4 5 6 7
| window.onload = function (ev) { alert("HelloWorld_1"); };
window.onload = function (ev) { alert("HelloWorld_2"); };
|
两个onload()
入口函数,后面的将会覆盖前面的,因此页面只弹出一个,为HelloWorld_2
1 2 3 4 5 6 7
| $(document).ready(function (ev) { alert("HelloWorld_1"); });
$(document).ready(function (ev) { alert("HelloWorld_2"); });
|
两个jQuery
入口函数,页面两个都会弹出,即弹出HelloWorld_1
和HelloWorld_2