【前端系列教程之jQuery】01_jQuery概述

野性酷女 2024-04-28 13:12 7阅读 0赞

## jQuery概述 ##

### 什么是框架? ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_14_color_FFFFFF_t_70_g_se_x_16][]

软件框架（software framework），通常指的是为了实现某个业界标准或完成特定基本任务的软件组件规范，也指为了实现某个软件组件规范时，提供规范所要求之基础功能的软件产品。

框架的功能类似于基础设施，与具体的软件应用无关，但是提供并实现最为基础的软件架构和体系。软件开发者通常依据特定的框架实现更为复杂的商业运用和业务逻辑。这样的软件应用可以在支持同一种框架的软件系统中运行。

简而言之，框架就是制定一套规范或者规则（思想），大家（程序员）在该规范或者规则（思想）下工作。或者说使用别人搭好的舞台来做编剧和表演。

### 主流的前端框架（UI/JS）框架 ###

如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富。

要做WEB前端，就需要知道前端到底是什么，需要学习那些知识；前端至少要懂的三个部分：HTML，CSS，JavaScript（简称JS），那首先先明确这三个概念：

HTML负责结构，网页想要表达的内容由html书写。

CSS负责样式，网页的美与丑由它来控制

JS负责交互，用户和网页产生的互动由它来控制。

web前端发展至今，演变出了无数的库和框架；说到库第一时间想到的都是是jquery。大部分人在刚接触库的时候也是从jQuery开始的；今天我们就来说说前端发展到现在都有哪些好用的库框架。

2016年开始应该是互联网飞速发展的几年，同时也是Web前端开发非常火爆的一年，Web 前端技术发展速度让人感觉几乎不是继承式的迭代，而是一次次的变革和创造。这一年中有很多热门的前端开发框架，下面为大家总结2016年至今最受欢迎的几款前端框架。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16][]

#### JS框架库 ####

**1、Node.Js**

**描述：**

Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。

Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

简单的说 node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome javascript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

**用途：**

RESTful API（目前比较流行的接口开发风格）

这是NodeJS最理想的应用场景，可以处理数万条连接，本身没有太多的逻辑，只需要请求API，组织数据进行返回即可。它本质上只是从某个数据库中查找一些值并将它们组成一个响应。由于响应是少量文本，入站请求也是少量的文本，因此流量不高，一台机器甚至也可以处理最繁忙的公司的API需求。

统一Web应用的UI层

目前MVC的架构，在某种意义上来说，Web开发有两个UI层，一个是在浏览器里面我们最终看到的，另一个在server端，负责生成和拼接页面。

不讨论这种架构是好是坏，但是有另外一种实践，面向服务的架构，更好的做前后端的依赖分离。如果所有的关键业务逻辑都封装成REST调用，就意味着在上层只需要考虑如何用这些REST接口构建具体的应用。那些后端程序员们根本不操心具体数据是如何从一个页面传递到另一个页面的，他们也不用管用户数据更新是通过Ajax异步获取的还是通过刷新页面。

大量Ajax请求的应用

例如个性化应用，每个用户看到的页面都不一样，缓存失效，需要在页面加载的时候发起Ajax请求，NodeJS能响应大量的并发请求。　　总而言之，NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景。

**2、Angular.Js**

描述：

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

用途：

通过描述我们应该就能很好的明白AngularJS的真实用途了，MVVM，模块化，自动化双向数据绑定等等。除了简单的dom操作外，更能体现Js编程的强大。当然应用应该视场合而定。

它的出现比较早，也是曾经比较流行的前端js框架，但是今年来随着reactJS与VueJS的出现，它的热度在慢慢降低。

**3、JQuery Mobile**

描述：

jQuery Mobile是jQuery 在手机上和平板设备上的版本。

jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。

用途：

jQuery Mobile 是创建移动 web 应用程序的框架。

jQuery Mobile 适用于所有流行的智能手机和平板电脑。

jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

**4、Zepto.js**

描述:

随着移动端的愈加火爆，目前很多HTML5的框架都在支持移动方向，比如：Vue.js，zepto.js，React Native等等。

Zepto是一个轻量级的针对现代高级浏览器的JavaScript 库， 它与jquery 有着类似的api。 如果你会用 jquery，那么你也会用 zepto。

Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以你能把你主要的精力放到应用开发上。

应用：

移动端应用

思考：jQuery和Zepto.js的区别在哪里？

jQuery更多是在PC端被应用，因此，考虑了很多低级浏览器的的兼容性问题；而Zepto.js则是直接抛弃了低级浏览器的适配问题，显得很轻盈；

Zepto.js在移动端被运用的更加广泛；更注重在移动端的使用

jQuery的底层是通过DOM来实现效果的，zepto.js 是用css3来实现的；

**5、Requirejs**

描述：

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统`<script>`标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层`<script>`标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录。

用途：

模块化动态加载。

**6、Vue.js(目前市场上的主流)**

描述：

Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架，Vue.js 更容易上手。

用途：

目前市场上比较流行的前后端分离的开发模式，大多前端都是vueJS做的，具体的优点请大家看官方文档。

**7、React.js（gihub排名仅次于vue.js）**

描述：

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

#### UI框架 ####

UI即User Interface(用户界面)的简称。泛指用户的操作界面，UI设计主要指界面的样式，美观程度。而使用上，对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。好的UI不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。

ui框架也就是ui模板。这和编程里的封装有些类似，就是说一些ui设计的常用效果已经被别人封装成了ui框架，你想实现哪个效果只要直接调用就行，不需要太纠结于底层实现。

简单来说：前端框架和UI框架的区别,一个注重逻辑，一个注重颜值。

**1、Bootstrap**

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

**2、Layui**

layui是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

事实上，layui更多是面向于后端开发者，所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式，却又并非受限于 CommonJS 的那些条条框框，它拥有自己的模式，更加轻量和简单。

layui 定义为“经典模块化”，并非是刻意强调“模块”理念本身，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效！它的所谓经典，是在于对返璞归真的执念，它以当前浏览器普通认可的方式去组织模块！

layui 认为这种轻量的组织方式，仍然可以填补 WebPack 以外的许多场景。所以它坚持采用经典模块化，也正是能让人避开工具的复杂配置，重新回归到原生态的 HTML/CSS/JavaScript本身！

**3、ElementUI**

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI 。适合于Vue的UI框架；

**4、Mint UI**

Mint-UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。

真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。

考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。

依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 100+ K。

**5、QUICK UI**

QUICK UI是一套完整的企业级web前端开发解决方案，由基础框架、UI组件库、皮肤包、示例工程和文档等组成。使用QUICKUI开发者可以极大地减少工作量，提高开发效率，快速构建功能强大、美观、兼容的web应用系统。

**6、Amaze UI**

描述:

Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。

Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。

#### 框架和类库的区别 ####

框架，是一套完整的解决方案，对项目侵入性大，项目如果需要更换框架，则需要重新架构整个项目。

库，提供某些小的功能，对项目侵入性小，如果某个库无法满足需求，可以很容易切换到其他库实现需求。

比如，从jQuery切换到 Zepto ，或者从EJS切换到art-template

### 什么是jQuery ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_14_color_FFFFFF_t_70_g_se_x_16 1][]

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

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

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

随着JavaScript、CSS、Ajax等技术的进步，越来越多的开发者将丰富多彩的程序及其功能进行封装，供其他人可以调用这些封装好的程序组件（框架）

jQuery说白了就是一些人写好的一些具有某些功能的组件,比如图片的切换,div的隐藏和显示等,之前使用js需要些很多js代码,但是jQuery封装了之后,就可以直接调用已经写好的组件来实现这些功能,而不需要再写很多的js代码。

### jQuery的特点 ###

1：轻量级的JS函数库

jQuery的核心js文件几十KB，不会影响页面加载速度。

2：强大的DOM选择器

3：链式表达式

jQuery的链式操作可以把多个操作写在一行代码里，更为简洁。

4：简洁的样式操作，动画支持

5：Ajax操作支持

jQuery简化了Ajax操作，后台只需返回一个json格式的字符串就能完成与前台的通信。

6：跨浏览器兼容

jQuery兼容了所有主流浏览器。

7：插件扩展开发

jQuery有着丰富的第三方插件，如：树形菜单，日期控件，图片切换插件，弹出窗口等等基本前台页面上的组件。

而且用jQuery插件做出来的效果很酷炫，并且可以根据自己的想法去改写和封装插件，简单实用。

8：可扩展性强

jQuery提供了扩展接口：jQuery.extend(object),可以在jQuery的命名空间上增加新函数。jQuery的所有插件都是基于这个扩展接口开发的。

### jQuery的优缺点 ###

（1）优点：

1：脚本与页面的分离

2：代码简洁

3：性能支持好

4：是各大厂商使用的类库的标准

5：丰富的插件开发

6：节约学习成本

（2）缺点：

1：不能向后兼容，不能兼容早期版本，早期版本插件不能用。

2：在同个页面使用多个插件，会出现冲突现象。

3：jQuery版本稳定性较差，版本更新较快。

### 为什么要使用jQuery ###

**学习JS的遇到的痛点**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                margin: 0;
            }
    
            #box {
                position: relative;
                background-color: red;
                width: 100px;
                height: 100px;
                color: white;
            }
        </style>
    </head>
    
    <body>
    
        <input type="button" value="开始" id="btn">
        <div id="box"></div>
        <script>
            window.onload = function () {
                // 给btn添加点击事件; 当我点击按钮的时候,让box移动
                var btn = document.getElementById("btn");
                var box = document.getElementById("box");
    
                var step = 5; // 每次移动6
                var target = 500; // 目标
                btn.onclick = function () {
                    setInterval(function () {
                        if (box.offsetLeft >= target) {
                            box.style.left = target + "px";
                            return;
                        }
                        // box.offsetLeft 获取box在页面中的x轴位置
                        box.style.left = box.offsetLeft + step + "px";
                        // 给box设置文本内容
                        setInnerText(box, "目前div距离左边的位置:" + box.style.left);
                    }, 20)
                }
    
                function setInnerText(element, content) {
                    // 判断当前浏览器是否支持 innerText
                    if (typeof element.innerText === 'string') {
                        element.innerText = content;
                    } else {
                        element.textContent = content;
                    }
                }
            }
        </script>
    
    </body>
    
    </html>

*  window.onload事件只能出现一次；如果出现多次，后面的事件会覆盖掉前面的事件；
 *  代码容错性差
 *  浏览器兼容性差
 *  简单功能实现很繁琐，比如：渐变的动画效果

jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率。

Js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里面来就可以了。

comm.js是我们自己封装的库，而jQuery是别人帮我们封装好的库。

虽然目前 MVVM 框架很流行，但 jQuery 依然占据一定地位。某些特定场景的项目 jQuery 依然是最好的选择，jQuery帮助我们解决了太多的兼容性问题，而且对于有一定JS基础的人来说学习 jQuery 的成本很低，没必要去掌握全部API，只要会查文档就可以。虽然新项目中不一定会使用 jQuery ，但是学习 jQuery ，尤其是去阅读 jQuery 源码，理解其设计思想、设计模式，你将会颇有收获。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_14_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/e30b5682fd0c44449161885b62aada94.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/290efe2a8e0f47078eb89705cb991602.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_14_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/c0c79227f2ad4622bfdfe4db12653a36.png