1. 什么是jQuery?
- jQuery的官方网址:http://jquery.com/
- jQuery是一个JavaScript 第三方库,既然是一个库,那么便是将我们在前端开发过程中常用的一些功能进行封装,提供给我们一组API,供我们调用,提高程序开发效率。
- 从命名组成上看,jQuery = j(JavaScript) + Query,顾名思义,其主要作用是做查询,即在HTML文档中做查询(更深入说是在DOM树中查询节点,然后进行操作)。
- 从jQuery官方logo上,有这么一句话“write less,do more”,意思是其能够让我们代码写的更少、但是功能做的更多。
![jQuery LOGO](https://img-blog.csdnimg.cn/20190415043730959.png)
- 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。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190415062307577.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J5MTAyNg==,size_16,color_FFFFFF,t_70)
综上,我们得出使用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>