jquery是什么库(jquery是json库吗) 收藏 0

深圳嘉华学校：什么是JQuery？

什么是JQuery？这里将由北大青鸟深圳嘉华来介绍下关于JQuery部分知识，希望能让大家对JQuery有初步的映象。

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器，能很便利的处理HTML、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery 库可以通过一行简单的标记被添加到网页中。

您需要具备的基础知识

在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：

HTML

CSS

JavaScript

什么是 jQuery ？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的\”写的少，做的多\”的JavaScript库。

jQuery库包含以下功能：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

提示： 除此之外，Jquery还提供了大量的插件。

为什么使用 jQuery ？

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

很多大公司都在使用 jQuery， 例如:

Google

Microsoft

IBM

Netflix

jQuery是否适用于所有浏览器?

jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题，目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!

用心办好学，深圳嘉华邀您加入互联网队伍！

微信号：jhzyjy（长按复制）

我们专注IT教育，欢迎你前来咨询！

手把手带你快速入门jQuery（建议收藏！！！）

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+等

搭配视频效果更佳哦~~~

https://www.ixigua.com/6846624275877593611

jQuery 是一款跨主流浏览器的JavaScript 库，封装了JavaScript 相关方法调用，简化JavaScript 对HTML DOM 操作

官网地址： https://jquery.com/

官网首页jQuery 介绍：

原文翻译：

jQuery 是一个快速，小巧，功能丰富的JavaScript 库。 它通过易于使用的API 在大量浏览器中运行，使得HTML 文档遍历和操作，事件处理，动画和Ajax 变得更加简单。 通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写JavaScript 的方式。

非常重要的理由就是：它能够兼容市面上主流的浏览器， IE 和FireFox， Google 浏览器处理 AJAX，创建异步对象是不同的，而jQuery 能够使用一种方式在不同的浏览器创建AJAX 异步对象。

其他优点：

（1） 写少代码,做多事情【write less do more】

（2） 免费，开源且轻量级的js 库，容量很小

（3） 兼容市面上主流浏览器，例如 IE，Firefox，Chrome

（4） 能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果， 也能提供异步AJAX 功能

（5） 文档手册很全，很详细

（6） 成熟的插件可供选择，多种js 组件，例如日历组件（点击按钮显示下来日期）

（7） 出错后，有一定的提示信息

（8） 不用再在html 里面通过<script>标签插入一大堆 js 来调用命令了

例如：使用JavaScript 定位DOM 对象常用的三种方式：

（1） 通过ID 属性：document.getElementById()

（2） 通过 class 属性：getElementsByClassName()

（3） 通过标签名：document.getElementsByTagName()

上面代码可以看出JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出错。jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。

通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。

官网下载地址：https://jquery.com/download/

jQuery 的不同版本中，2.xx 不再支持 IE6/7/8 浏览器。现阶段IE6/7/8 已经是淘汰的，非主流。可以不用考虑兼容问题。

对于每一个同一版本号的 jQuery，其库又分为两个。一个是未压缩版，可查看源码，开发时使用；一个是压缩版，将注释、空格均做了删除，将变量字符数减少，产品上线时使用。

编写jQuery 的工具很多，能编写HTML 的工具都支持jQuery. 例如记事本 ，EditPlus, webStorm, Visual Studio Code , HBuilder , HBuilderX , IDEA.

单独学习jQuery 库使用，可以轻量的开发工具，例如EditPlus ,HBuilder,HbuilderX

编写项目可以使用集成开发工具，例如在IDEA， Eclipse ,MyEclipse ,WebStorm 等

第一个例子完成：浏览器完全装载html 页面 DOM 后,显示一个提示信息框

实现步骤：

1. 使用HBuilder 或HbuilderX, idea 都可以，以HbuilderX 为工具，创建一个项目（名称：jquery-course），给项目选择一个文件存放目录。

2. 在项目中再创建一个目录

右键项目名称—新建—目录，常用名称为 js

3. 拷贝下载的jQuery.js 文件到目录

4. 使用 jQuery，首先要将 jQuery 库引入。使用如下语句：

<script type=\”text/javascript\” src=\”js/jquery-3.4.1.js\”></script>

5. $(document)，将 DOM 对象 document 转换为jQuery 对象。

$(document).ready()函数是当 DOM 对象加载完毕后，马上执行的函数。

$(document).ready()与$()、jQuery()、window.jQuery()是等价的，所以

$(document).ready()可以写成 $(function() { alert(“Hello jQuery”) } );

6. 完整代码

DOM 对象是用JavaScript 语法创建的对象，也看做是 js 对象。

使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为jQuery 对象才可以使用jQuery 中的提供的方法，操作DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。

例：新建html 页面文件 domTojQuery.html

1. 页面加入按钮 button

2. 转换 DOM 对象

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应 的 DOM

对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]

例：新建html 文件 jQueryToDom.html

1. 页面添加 text ，button

2. jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM对象

选择器: 就是定位条件；通知jquery 函数定位满足条件的DOM 对象

根据ID，class 属性，标签类型名定位HTML 元素，转为jQuery 对象.

1. id 选择器

语法：$(“#id”)

2. class 选择器

语法：$(“.class 名称”)

3. 标签选择器

语法：$(“标签名”)

例：新建selector.html

1. 在页面 head 部分加入 css

2. 加入 jQuery 引用

3.body 部分定义div

4.创建 js 函数

4. 所有选择器

语法：$(“*”) 选取页面中所有DOM 对象。

5. 组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id， class，标签名等。

语法：$(“#id, .class, 标签名”)

例：

1. 上面的 selector.html 页面中加入按钮

2. 增加 js 函数

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的

<input type=\”text\”>

<input type=\”password\”>

<input type=\”radio\”>

<input type=\”checkbox\”>

<input type=\”button\”>

<input type=\”file\”>

<input type=\”submit\”>

<input type=\”reset\”>

$(\”:tr\”): 不能用，tr 不是input 标签语法： $(\”:type 属性值\”)

例如：

$(\”:text\”)选取所有的单行文本框

$(\”:password\”)选取所有的密码框

$(\”:radio\”)选取所有的单选框

$(\”:checkbox\”)选取所有的多选框

例：

新建form.html 页面定义元素：

定义 js 函数：

jQuery 对象中存储的DOM对象顺序与页面标签声明位置关系

<div>1</div> dom1

<div>2</div> dom2

<div>3</div> dom3

$(\”div\”) == [dom1,dom2,dom3]

过滤器就是过滤条件，对已经定位到数组中DOM 对象进行过滤筛选，过滤条件不能独立出现在jquery 函数，如果使用只能出现在选择器后方。

1. 选择第一个first, 保留数组中第一个DOM 对象

语法：$(“选择器:first”)

2. 选择最后个last, 保留数组中最后DOM 对象

语法：$(\”选择器:last\”)

3. 选择数组中指定对象

语法：$(“选择器:eq(数组索引)”)

4. 选择数组中小于指定索引的所有DOM 对象

语法：$(“选择器:lt(数组索引)”)

5. 选择数组中大于指定索引的所有DOM 对象

语法：$(“选择器:gt(数组索引)”)

1.定义样式

2. 页面加入div

3. 定义js 函数

1. 选择可用的文本框

$(“:text:enabled”)

2. 选择不可用的文本框

$(“:text:disabled”）

3. 复选框选中的元素

$(“:checkbox:checked”)

4. 选择指定下拉列表的被选中元素

选择器>option:selected

例：

创建filterForm.html 页面：

js 函数

为啥过时的 jQuery 仍然是市场占有率最高的 JS 库？

作者：ConardLi来源：code秘密花园

jQuery 于 2006 年推出，当时 Ajax 一词正炒的火热。Ajax(Asynchronous JavaScript and XML)与早期 Web 2.0 时代的其他 JavaScript 技术一样，早已不再是开发者的常用语。

但 jQuery 经受住了时间的考验，事实上直到最近它还在保持逐年增长。对此， jQuery 的开发者 Michał Gołębiowski-Owczarek 分享了他的看法。

名字太长了，后面简称他 MGO 吧。

MGO 是上个月 OpenJS 博客上两篇文章的作者，里面都提到了 jQuery 正在进行的 现代化工作。

第一篇文章宣布了 jQuery UI 的新版本 —— 一个构建在 jQuery Core 库之上的用户界面库。这将是 该项目的最终版本，这意味着 jQuery UI 后面不再会有大的迭代了，仅仅会保持维护状态。

第二篇文章宣布弃用了 jQuery Mobile，这是 jQuery 的另一个子项目，为移动浏览器提供 基于 HTML5 的用户界面系统。

不过，这两个项目的结束都不会影响 jQuery 现在的主项目：jQuery Core，这意味着它短时间内不会消失在大众视野。

虽然 jQuery 现在正在被大量使用，但现在的开发者甚至可能没有意识到他们在使用 jQuery。那是因为它被嵌入在了许多大型开源项目里面 —— 其中最著名的就是 WordPress。

很多 WordPress 的主题和插件都依赖于 jQuery。jQuery 库也是当今一些最流行的 JavaScript 框架和工具包的基础层，例如 AngularJS 和 Bootstrap(4.0 及以下版本)。

其实大多数网站都不需要复杂的开发框架，它们大多是具有一些动态行为的静态网站(这种网站通常都会用 WordPress 编写)，jQuery 在这个场景下仍然很流行，因为它既简单又有效。

而且，在未来的很长一段时间，jQuery 还继续会是 WordPress 的一部分，因为它很难在不破坏向后兼容性的情况下将它删除。

随着时间的推移， WordPress 肯定会逐步更新它的技术，但是这应该是一个渐进式的过程。

但是， WordPress 的社区里已经出现了一些反对的声音， 在 WordPress 主题中使用 jQuery 的性能影响 就是一个比较热门的话题。

GMO还表示：jQuery死了吗? 这样的文章已经流传了好几年了，至少目前在 WordPress 生态系统中它仍然很活跃。如果谁鼓励开发者们把它替换掉，风险自负。

当 jQuery 的创造者 John Resig 于2006 年 1 月在 BarCampNYC 发布它的以一个版本时，他写道：

这段代码彻底改变了让 Javascript 与 HTML 交互的方式。

他主要指的是 jQuery 使开发者可以更轻松地操作 DOM。要知道，这是在谷歌浏览器逆袭之前，现在微软臭名昭著的 Internet Explorer 占据了 85-90% 的浏览器市场，其中 IE6 占主导地位。即使在当时，IE6 也以历史上最糟糕的浏览器而闻名。

Resig 还在2006 年 6 月的一篇帖子中指出了 JavaScript 开发者在浏览器上遇到的一些问题：

JavaScript 中存在许多问题(其中大部分源于浏览器不兼容)，任何稍微复杂一点的应用程序都需要处理诸如规范化事件处理、DOM 节点选择、动画渲染这些问题。

这也正是 Resig 着手解决的问题。当时“四大”领先的 JavaScript 库是 Dojo、MochiKit、Prototype/Scriptaculous 和 Yahoo UI 。

所以基本上，jQuery 的发明主要是为了帮助开发者处理当时浏览器的不足。

在现在各种好用的浏览器都在更加符合 Web 标准的时候，jQuery 现在在 Web 中扮演的角色是啥呢?

此外，JavaScript 标准本身在过去十年中也得到了显着改进，尤其是在 2015 年 ECMAScript 6 发布之后。

现在， React 已成为当今最受关注的 JavaScript 库。很多现代框架，尤其是 Next.js，都是建立在 React 之上的。

一些其他流行的框架，例如 Angular 都有自己的库生态系统。现在的 JavaScript 框架还允许你将 UI 分解为各种组件，从而更轻松地扩展应用程序。

GMO 谈到 Next.js 和 Angular 的时候提到：

这些框架提供了抽象，可以更轻松地在数据和视图之间进行同步。因此他们的用户不再需要如此频繁地直接修改或者访问 DOM，并且通常也不鼓励这样做。在这样的环境下，使用 jQuery 没有多大意义。但这只是整个网络生态系统的一小部分。

然而 GMO 也承认 jQuery 可能存在大规模应用程序的性能问题：

这些年来，我们大大提高了 jQuery 的性能，但也存在一些难以应对的问题。其中之一是为了不与浏览器冲突，jQuery 不会修改原生原型 — 就像其他一些库所做的那样(通常后来导致冲突 API 的标准化问题)— 而是用 jQuery 包装器对象包装 DOM 节点。每个操作都会创建一个新的这种包装器对象，在大多数情况下，这并不重要，但对于具有大量 DOM 操作的非常复杂的应用程序，这可能会成为一个问题。

很明显，jQuery 不再是开发者将 JavaScript 功能添加到他们的网站或应用程序的最佳方式，尤其是在需要扩展的情况下。

GitHub 对 jQuery 的贡献远低于其高峰年(2006 年至 2013 年左右)的事实，这也意味着要使 jQuery 与我们现在的 Web 更加兼容，我们还需要做更多的事情。

不过没关系。jQuery 的持续时间比大多数开发者预期的要长得多，因为它是在 Web 2.0 时代开始时问世的。毕竟，它现在仍然可以完成它所要做的工作，而且它仍然是一个非常简单方便的 JavaScript 库。

无论如何，在未来几年内，jQuery 还会嵌入到数以千万计的 WordPress 网站中，它甚至可能比 React 更持久。

对此你怎么看呢?

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com