jQuery 与 JavaScript 加载模式对比
多个 window.onload 只会执行一次, 后面的会覆盖前面的
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-入口函数</title>
<script src="jquery-1.12.4.js"></script>
<script>
window.onload = function () {
alert("hello BNTang");
}
window.onload = function () {
alert("hello JonathanLee");
}
</script>
</head>
<body>
</body>
</html>
多个 $(document).ready() 会执行多次, 后面的不会覆盖前面的
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-入口函数</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
alert("hello BNTang");
});
$(document).ready(function () {
alert("hello JonathanLee");
});
</script>
</head>
<body>
</body>
</html>
不会覆盖的本质(了解, 后面 jQuery 原理会详细讲解), jQuery 框架本质是一个闭包, 每次执行我们都会给 ready 函数传递一个新的函数, 不同函数内部的数据不会相互干扰，相当于如下这样写
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-入口函数</title>
<script src="jquery-1.12.4.js"></script>
<script>
let test1 = function () {
alert("hello BNTang");
}
let test2 = function () {
alert("hello JonathanLee");
}
$(document).ready(test1);
$(document).ready(test2);
</script>
</head>
<body>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-入口函数</title>
<script src="jquery-1.12.4.js"></script>
<script>
let test1 = function () {
let abc = "123";
// 因为在同一个函数中, 所以 456 会覆盖 123
// let abc = "456";
alert(abc);
}
test1();
let test2 = function () {
// 因为在不同函数中, 所以不会影响
let abc = "456";
alert(abc);
}
test2();
</script>
</head>
<body>
</body>
</html>
|
window.onload |
$(document).ready() |
|
|
执行时机 |
必须等待网页全部加载完毕(包括 图片等),然后再执行包裹的代码 |
只需要等待网页中的DOM结构加载完毕, 就能执行包裹的代码 |
|
执行次数 |
只能执行一次, 如果第二次, 那么第一次的执行会被覆盖 |
可以执行多次, 第N次都不会被下一次覆盖 |
|
简写方案 |
无 |
$(function () { }); |
为什么我们能访问 $ 符号
因为 $ 符号 是 jQuery框架对外暴露的一个全局变量
JavaScript 中定义一个全局变量
所有全局变量其实是 window 对象中的属性
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-入口函数</title>
<script src="jquery-1.12.4.js"></script>
<script>
function test() {
let customValue = 998;
alert(customValue);
// 1. 没有如下代码 customValue 就不是一个全局变量, 函数执行完毕之后
// customValue会被自动释放, test 函数以外的地方访问不到 customValue
// 2. 加上如下代码之后 customValue 就会变成一个全局变量, 函数执行完毕也不
// 会被释放,test 函数以外的地方也可以访问 customValue
window.customValue = customValue;
}
test();
alert(customValue);
</script>
</head>
<body>
</body>
</html>
所以 jQuery 框架源码实现
window.jQuery = window.$ = jQuery;
所以想要使用 jQuery 框架只有两种方式, 一种是通过 $, 一种是通过 jQuery
jQuery 入口函数的其它编写方式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-入口函数</title>
<script src="jquery-1.12.4.js"></script>
<script>
// 方式一
$(document).ready(function () {
alert("hello BNTang");
});
// 方式二
$(function () {
alert("hello BNTang");
});
// 方式三
jQuery(document).ready(function () {
alert("hello BNTang");
});
// 方式四
jQuery(function () {
alert("hello BNTang");
});
</script>
</head>
<body>
</body>
</html>
解决 $ 符号冲突问题
为什么是 window.jQuery = window.$ = jQuery 而不是 window.jQuery = jQuery
jQuery框架之所以提供了 jQuery 访问还提供 $ 访问, 就是为了提升开发者的编码效率
$ 符号冲突
很多 js 的框架都提供了类似 jQuery 这样的便捷访问方式, 所以很有可能某一天我们在使用多个框架的时, 多个框架作者提供的便捷访问方式冲突(A框架通过 $ 访问, B框架也通过 $ 访问)
释放 $ 的使用权
当便捷访问符号发生冲突时, 我们可以释放 $ 的使用权, 释放之后只能使用 jQuery
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-入口函数</title>
<script src="jquery-1.12.4.js"></script>
<script>
// 在使用jQuery之前指定自定义符号
jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';
</script>
</head>
<body>
</body>
</html>
自定义便捷访问符号
当便捷访问符号发生冲突时, 我们可以自定义便捷访问符号
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-入口函数</title>
<script src="jquery-1.12.4.js"></script>
<script>
// 在使用jQuery之前指定自定义符号
let bntang = jQuery.noConflict();
// 和使用$一样通过自定义符号调用jQuery
bntang(function () {
alert("hello BNTang");
});
</script>
</head>
<body>
</body>
</html>
