jQuery简介

小四
前端
2023-01-23
7热度
0评论

1. JavaScript库的概念

JavaScript开发的过程中，处理浏览器的兼容很复杂而且很耗时，于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）

常见的JavaScript 库 - jQuery、Prototype、MooTools。其中jQuery是最常用的一个

jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

2. jQuery的优点好处

jQuery设计的宗旨是Write Less，Do More，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的操作，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。

极大地简化了 JavaScript 编程。

3. jQuery的版本

jQuery版本有很多，分为1.x 2.x 3.x

1.x版本：能够兼容IE678浏览器

2.x版本：不兼容IE678浏览器

1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。

3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

国内多数网站还在使用1.x的版本

4. 体验jQuery

案例：显示与设置内容

<input type="button" value="显示" id="btn1"> <input type="button" value="结束" id="btn2"> <div>请欣赏动画</div> <div>千呼万唤始出来</div> <img src="img/1.jpg" style="display:none"> <img src="img/2.jpg" style="display:none"> <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function () { $(#btn1).click(function () { $(img).show(2000); }); $(#btn2).click(function () { $(div).text(下集再见); $(img).hide(2000); }); }); </script>

优点总结：

-查找元素的方法多种多样，非常灵活 -拥有隐式迭代(自动循环遍历)特性，因此不再需要手写for循环了。 -完全没有兼容性问题。 -实现动画非常简单，而且功能更加的强大。 -代码简单、粗暴。

5. jQuery中顶级对象

jQuery中的顶级对象是$或jQuery

用于：获取jQuery对象入口函数（页面加载事件）高级功能

注意：jQuery中的$和JQuery关键字本身为同一对象；

$ 可以认为就是一个特殊构造函数；可以使用$(选择器) 方式调用$，得到一个对象，在对象上可以调用$的实例方法

也可以使用$.方法名调用静态方法。比如遍历数组对象的 $.each() 相当于for循环

6. jQuery中页面加载事件

使用jQuery的三个步骤：

引入jQuery文件入口函数（定义页面加载事件）功能实现

关于jQuery的入口函数：

// 第一种写法 $(document).ready(function() { }); // 第二种写法 $().ready(function() { }); // 第三种写法 $(function() { });

jQuery入口函数与window.onload的对比

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。 jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。