jQuery入口函数以及其与原生JS入口函数的区别

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) {
// 利用原生 JS 查找 DOM 元素
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_1HelloWorld_2

评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×