内容提纲
- 1. 什么是jQuery?
- 2. jQuery 主要学什么?
- 3. jQuery 的版本?
- 4. 如何使用jQuery?
- 5. jQuery 为我们提供了什么对象?
- 6. jQuery 入口函数
- 7. 原生JS入口函数
- 8. jQuery入口函数 *`vs.`* 原生JS入口函数
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 主要学什么?
- 主要学习如何使用jQuery进行DOM操作(可类比原生JS的DOM操作),进一步就是学习jQuery封装好的操作DOM的API。
- jQuery 官方API文档:http://api.jquery.com/
- jQuery 中文API文档:https://www.jquery123.com/
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日】 | 官方主要更新维护的版本。 |
- 开发版本 vs. 生产版本
版本类型 | 特点 |
开发版本 | 代码未压缩,体积较大 【200-300KB】 |
生产版本 | 代码经过压缩,体积较小【30-40KB】,生产环境下使用,有利于提高网站访问速度 |
4. 如何使用jQuery?
- 第一步:下载jQuery, 下载地址:https://jquery.com/download/
- 第二步:导入jQuery
<body>
<script src="js/jquery-3.4.0.js"></script>
</body>
- 第三步:编写jQuery代码
<body>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// j将jQuery代码写在这里
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>
<script type="text/javascript">
window.onload = function () {
alert("Hello,JavaScript!");
}
</script>
vs.
是否发生覆盖 | 执行时机不同 | |
原生JS入口函数 | 出现多次,后面会覆盖前面 | 等待页面所有的文件资源(页面文档、外部js文件、外部css文件、图片等)加载完成之后才执行 |
jQuery入口函数 | `出现多次,不会发生覆盖 | 在页面文档加载完成之后(DOM树加载完成,而不必等外部资源加载完成),便可执行 |
// 原生JS入口函数会发生覆盖
<script type="text/javascript">
window.onload = function () {
alert("Hello"); // 被覆盖
}
window.onload = function () {
alert("Word"); // 会显示
}
</script>
//jQuery入口函数不会发生覆盖
<script type="text/javascript">
$(document).ready(function () {
alert("Hello"); //不会被覆盖
});
$(document).ready(function () {
alert("World"); // 会显示
});
</script>