1. 什么是jQuery？
- jQuery的官方网址：http://jquery.com/
- jQuery是一个JavaScript 第三方库，既然是一个库，那么便是将我们在前端开发过程中常用的一些功能进行封装，提供给我们一组API，供我们调用，提高程序开发效率。
- 从命名组成上看，jQuery = j（JavaScript） + Query，顾名思义，其主要作用是做查询，即在HTML文档中做查询（更深入说是在DOM树中查询节点，然后进行操作）。
- 从jQuery官方logo上，有这么一句话“write less，do more”，意思是其能够让我们代码写的更少、但是功能做的更多。
- jQuery除了主要提供的查询功能外，也提供了对HTML DOM事件处理、HTML文档遍历和操作、动画以及最重要的AJAX技术。
2. jQuery 主要学什么？
3. jQuery 的版本？
- jQuery 目前主要有三个大的版本，最新的版本是3.4.0
| 版本 |
兼容性 |
最终版本 |
官方维护力度 |
| 1.x |
兼容IE678 |
1.12.4 【2016年5月20日】 |
官方只做BUG维护，功能不再新增。 |
| 2.x |
不兼容IE678 |
2.2.4 【2016年5月20日】 |
官方只做BUG维护，功能不再新增。 |
| 3.x |
不兼容IE678 |
最新版本3.4.0【2019年4月10日】 |
官方主要更新维护的版本。 |
| 版本类型 |
特点 |
| 开发版本 |
代码未压缩，体积较大 【200-300KB】 |
| 生产版本 |
代码经过压缩，体积较小【30-40KB】，生产环境下使用，有利于提高网站访问速度 |
4. 如何使用jQuery？
<body>
<script src="js/jquery-3.4.0.js"></script>
</body>
<body>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert("Hello World, jQuery!");
});
</script>
</body>
5. jQuery 为我们提供了什么对象？
- 我们只知道，在原生JS中，为我们提供了document对象（DOM对象）来进行对DOM树的操作，进而实现了动态修改HTML页面。
- 在jQuery中，通过在DOM对象上进行封装，提供给我们一个名为jQuery的对象，即我们通过jQuery对象进行DOM操作。
- jQuery对象只能使用jQuery对象自己的方法，不能使用DOM对象的方法。
- jQuery对象还有另外一个更容易书写的名字，即$。
<script src="js/jquery-3.4.0.js"></script>
<script>
console.log($);
console.log(jQuery);
console.log($===jQuery);
</script>
- 上述代码运行结果如下，为true。
综上，我们得出使用jQuery有两种方式：一种是通过$,一种是通过jQuery。
6. jQuery 入口函数
jQuery的入口函数主要有如下三种写法：
<script type="text/javascript">
$(document).ready(function () {
alert("welcome to the javascript world!");
})
</script>
<script type="text/javascript">
$(function () {
alert("welcome to the javascript world!");
})
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
alert("welcome to the javascript world!");
})
</script>
<script type="text/javascript">
jQuery(function () {
alert("welcome to the javascript world!");
})
</script>
7. 原生JS入口函数
<script type="text/javascript">
window.onload = function () {
alert("Hello，JavaScript！");
}
</script>
8. jQuery入口函数 vs. 原生JS入口函数
|
是否发生覆盖 |
执行时机不同 |
| 原生JS入口函数 |
出现多次，后面会覆盖前面 |
等待页面所有的文件资源（页面文档、外部js文件、外部css文件、图片等）加载完成之后才执行 |
| jQuery入口函数 |
`出现多次，不会发生覆盖 |
在页面文档加载完成之后（DOM树加载完成，而不必等外部资源加载完成），便可执行 |
<script type="text/javascript">
window.onload = function () {
alert("Hello");
}
window.onload = function () {
alert("Word");
}
</script>
<script type="text/javascript">
$(document).ready(function () {
alert("Hello");
});
$(document).ready(function () {
alert("World");
});
</script>
