jquery方法查询api(jquery查询数据库) 收藏 0

jQuery基础回顾——jQuery与Ajax应用

Ajax全称为“Asynchronous JavaScript XML”(异步javaScript和XML)，它并不是指一种单一的技术，而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。

• 不需要插件的支持

Ajax不需要任何浏览器插件，就可以被绝大多数主流浏览器所支持，用户只需要允许javaScript在浏览器上执行即可。

• 优秀的用户体验

这是Ajax技术的最大优点，能在不刷新整个页面的前提下更新数据，这使得Web应用程序能更为迅速地回应用户的操作。

• 提高Web程序的性能

与传统模式相比，Ajax模式在性能上的最大区别就在于传输数据的方式，在传统模式中，数据提交时通过表单(Form)来实现的，而数据获取是靠全页面刷新来重新获取整页的内容，Ajax模式只是通过XMLHttpRequest对象向服务器提交希望提交的数据，即按需发送。

• 减轻服务器和宽带的负担

Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化，它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和宽带的负担。

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。XMLHttpRequest对象最早是在Microsoft Internet Explorer 5.0 ActiveX组件中被引入的，之后各大浏览器厂商都以javaScript内置对象的方式来实现XMLHttpRequest对象，虽然大家对它的实现方式有所区别，但是绝大多数浏览器都提供了类似的属性和方法，而且在实际脚本编写方法上的区别也不大，实现的到的效果也基本相同。

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。

1、load()方法

• 远程载入HTML文件

load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入到DOM中，它的结构为：

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。

等DOM元素加载完毕后，通过单击id为“send”的按钮来调用load()方法，然后将test.html的内容加载到id为“resText”的元素里。

显然，load()方法完成了原本很繁琐的工作，开发人员只需要使用jQuery选择器为HTML片段指定目标位置，然后将要要加载的文件的URL作为参数传递给load()方法即可，当单击按钮后，test.html页面的HTML内容就会被加载并插入对应元素中。

• 筛选载入的HTML文件

上个例子是将test.html页面中的内容都加载到id为“resText”的元素里，如果只需要加载test.html页面内的某些元素，那么可以使用load()方法的URL参数来达到目的，通过为URL参数指定选择符，就可以很方便地从加载过来的HTML文档里筛选出所需要的内容。

load()方法的URL参数的语法结构为“url selector”,注意，URL和选择器之间有一个空格，例如只需要加载test.html页面中class为“para”的内容，可以使用如下代码来完成：

• 传递方式

load()方法的传递方式根据参数data来自动指定，如果没有参数传递，则采用GET方式，反之，则会自动转换为POST方式。

• 回调参数

对于必须在加载完成后才能继续的操作，load()方法提供了回调函数（callback），该函数有3个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象，jQuery代码如下：

2、$.get()方法和$.post()方法

load()方法通常用来从Web服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值，在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()或者$.post()方法（或$.ajax()方法）。

• $.get()

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

示例代码如下：

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

• $.post()

它与$.get()方法的结构和使用方式都相同，不过它们之间仍然有以下区别。

1. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器，当然，在Ajax请求中，这种区别对用户是不可见的。
2. GET方式对传输的数据有大小限制（通常不能大于2KB），而是用POST方式传递的数据量要比GET方式大得多（理论上不会受限制）。
3. GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等，在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说就可以避免这些问题。
4. GET方式和POST方式传递的数据在服务器端的获取也不相同，在jsp中，GET方式的数据可以用Request.QueryString获取，而POST方式可以用Request.Form获取。

上面使用load()、$.get()和$.post()方法完成了一些常规的Ajax程序，如果还需要编写一些复杂的Ajax程序，那么就要用到jQuery中的$.ajax()方法，$.ajax()方法不仅能实现与load()、$.get()和$.post()方法同样的功能，而且还可以设beforeSend(提交前回调函数)、error(请求失败后处理)、success(请求成功后处理)以及complete(请求完成后处理)回调函数，通过这些回调函数，可以给用户更多的Ajax提示信息，另外，还有一些参数，可以设置Ajax请求的超时时间状态等。

3、$.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现，它的结构为：

url:一个用来包含发送请求的URL字符串。

settings:AJAX 请求设置。所有选项都是可选的。

settings选项1

settings选项2

若感觉对您有用，可以关注并转发，您的关注是对我莫大的支持！

上一节：

jQuery 已“死”？为清除技术债，我们删掉了前端所有 jQuery 依赖

近期，英国公共部门站 GOV.UK 前端开发主管 Matt Hobbs 宣布该公司删除了 jQuery 作为所有前端应用程序的依赖项，这意味着“在所有 13 个 FE 应用程序中，JS 大小减少了 32 KB（31% ～49% 之间）”。

Matt 也在推特上分享了几组数据，说明了在删除 jQuery 后一些关键指标得到了优化。

• 移除页面标签限制并查看所有页面 RUM 数据， 75% 用户的页面都有类似的下降：

• 在 75% 的页面中仅检查 Android 用户，可以看到 JS 长任务改进了 7%：

• 50% 用户的移动设备上的 JS Long Tasks 有 10% 的改进：

• 而对于 95% 用户，阻塞时间则减少了 10% ：

“这些用户会遇到严重不利的网络和设备条件，每一次性能提升对他们来说尤其重要。”Matt 说道。

根据 Matt 说法，删除 jQuery 的本意是清理技术债。“它最初是为了支持浏览器而存在的，但随着时间的推移，情况发生了变化，所以 bits 可以被删除。我想在这之后会重新评估，看看还有什么是不再需要的。” Matt 表示。

jQuery 是一套跨浏览器的 JavaScript 库，可以简化 HTML 与 JavaScript 之间的操作。截至 2021 年，有将近 84% 的移动页面使用 jQuery。jQuery 是最受欢迎的 JavaScript 库之一，它的一些操作已经反映在标准 Web API 中。

JQuery 创建于 2006 年，主要是为了帮助开发者处理当时浏览器的不足。当时谷歌浏览器还未流行，人们饱受 Internet Explorer 之苦。而 JQuery 开发者可以使用 CSS 选择器和函数可以轻松地遍历和操作 DOM，

此外，JQuery 还提供了一些开箱即用的函数来做动画 DOM 元素，而无需弄乱 CSS。在没有 jQuery 之前发出 AJAX 请求很麻烦，但使用 JQuery 只需几行代码即可完成。JQuery 提供了一个可以在大多数浏览器上工作的 API，这在当时使用 JavaScript 是很难实现的。

但在过去的几年里，JavaScript 已经成熟了很多，它支持很多新的 API，其社区也构建了很多库来填补 jQuery 可能留下的任何空白。

现在，开发者几乎可以在原生 JavaScript 中做任何 jQuery 可以做的事情。例如，可以使用带有 querySelector 和 querySelectorAll 的 CSS 选择器语法来选择元素，使用 classList API 在元素上添加、删除和切换类，使用 addEventListener 将事件处理程序附加到 DOM 元素和窗口等等。

同时随着 Angular、Vue 和 React 等框架的出现和流行，一直未有特别创新的 jQuery 更显“老态”。“对我来说，他们 (jQuery ) 就像是那个随着时代变迁没有更新知识的老灰胡子。”有网友直言。

“现在，大多数事情都不再需要 jQuery 了。”有网友评论道，“我个人发现普通的 JS API 和 fetch 甚至比 jQuery 的东西更干净。人们仍然出于习惯使用 jQuery，是因为摆脱它需要做很多工作。”

近几年，业内对于“jQuery 是否已死”的讨论一直没停过。实际上，一些大型、资金充足的网站已经“用脚投票”，正在逐渐摆脱对 jQuery 的依赖。

2018 年，GitHub 宣布从 GitHub.com 的前端代码中完全移除了 jQuery。“早期，jQuery 对我们意义重大。”GitHub 前端工程团队在方式发布的文章里表示。“在 GitHub 的早期阶段，jQuery 让小型的开发团队能够快速进行原型设计并开发出新功能，而无需专门针对每个 Web 浏览器调整代码。”

但随着 GitHub 成长为一家拥有数百名工程师的公司，jQuery 带来的价值已经随着时间的推移而下降。比如技术债会随着依赖项的增多而增长，给企业带来很大的维护成本。因此，GitHub 最终决定删除 jQuery。不过，GitHub 没有选择另外的库或框架，而是使用标准的浏览器 API 来实现。

不只 GitHub，Bootstrap 最新版本也将删除 jQuery。

尽管被认为已经过时，但 jQuery 仍然是占主导地位的 JavaScript 库。今天的开发人员可能没有意识到在使用 jQuery，因为它被嵌入在了许多大型开源项目里面，其中最著名的就是 WordPress。

“大多数网站都不需要复杂的开发框架，它们大多是具有一些动态行为的静态网站，这种网站通常用 WordPress 编写。jQuery 在这个场景下仍然很流行，因为它既简单又有效，人们觉得没必要停止使用它。”jQuery 开发者 Micha Gobiowski-Owczarek 在接受外媒采访时说道。

Micha Gobiowski-Owczarek 也明确表示，为了不与浏览器冲突，jQuery 不会修改原生原型，而是用 jQuery 包装器对象包装 DOM 节点，每个操作都会创建一个新的包装器对象。大多数情况下，这并不重要，但对于具有大量 DOM 操作的、非常复杂的应用程序来说，可能会成为一个问题。

未来的很长一段时间里，jQuery 还继续会是 WordPress 的一部分，因为它很难在不破坏向后兼容性的情况下将它删除。但一些改变已经发生，如 WordPress 创建的 Gutenberg 编辑器不依赖于 jQuery。

随着时间的推移， WordPress 肯定会逐步更新技术，这是一个渐进的过程，jQuery 的最终去留也很难说。但不可否认的是，jQuery 为前端带来了重大的影响。

参考链接：

https://thenewstack.io/why-outdated-jquery-is-still-the-dominant-javascript-library/

Jquery插件（常用的插件库）

作者：一生的风景

转发链接：https://www.cnblogs.com/2979100039-qq-con/p/12775777.html

随着Jquery知识点的结束，我也开始接触到框架来了。

开始的时候，总是听到插件和框架等词，我疑惑框架和插件是啥有啥区别？？

插件可以说有无数种，在网页中任何一种功能都可以被叫做插件，单独提取出来，可以供别人使用，而框架是一个超大好的的插件，它将各种方法融合成一体，使用者可以使用它来构造不同的功能。插件则专注于一种，往往只有一种功能 。

打个比方比如前面学习的jquery，jquery就是一个框架，在jquery插件库里http://www.jq22.com/有数不胜数的插件，这些插件绝大部分基于jq框架来编写。

理解完插件和框架的区别，下面来写一写这几天初步学习的插件库

1.jquery 对于我而言肯定是一个熟悉的框架了

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

插件库：http://www.jq22.com/

这里简单的介绍一下jquery ：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

2.Select2 官网网址：https://select2.org/

3.Fullpage 官网网址：https://alvarotrigo.com/fullPage/#page1

4.lazyload 官网网址：https://appelsiini.net/projects/lazyload/

5.Swiper 官网网址：https://www.swiper.com.cn/

6.nice-validator 官网网址 ：https://validator.niceue.com/docs/getting-started.html

以上提及的都是插件库，每一个有着不同的功能，jquery在这里我就不在赘述了。我就从Select2开始写

select2是一款基于jquery的功能丰富的下拉列表插件。这就说明了使用select2必须要有jquery依赖，就是要先导入jquery库，然后在导入select2插件库，然后这是一款关于下拉列表的插件。

使用方法：首先去下载压缩包文件 下载地址：https://codeload.github.com/select2/select2/zip/develop下载完成解压后在文件中我们需要找到相关的js文件和css文件，我们所需要的的就是这两个文件：在dist文件夹下有css和js，js有.js文件和min.js文件，css也是一样的。如下图所示

min.js是压缩版，没有逗号空格等等，体积小传输效率快，但可读性较差可以自行想象一下js代码就一行的场景 .js是没压缩的俗称开发版，可读性较好，易于debug调试和更改；但是体积相比较而言大一些，效率低。我采用压缩版的我不改bugQAQ 这段话或许就解决了心中的疑问

我们将css和js文件复制到我们的项目中就可以开始使用这个插件了。

这个是一个案例效果图接下来就根据这个案例来编写。

首先一点也是重中之重，导入css和js文件，jquery插件库优先导入，js cs就是我们上面复制到项目的文件，如下

在body里面写上一个普通的下拉列表：

我把js注释一下看看效果如何：

这个与和我们的效果图有着很大的区别，如何使用这个插件呢，我们不妨看看文档（虽然全是英文）

在基本语法上有着这样的语句（我们把他定义到我们的案例中去）：.js-example-basic-multiple是一个选择器

在案例中我们如下编写 （效果如右）：

这就是select2的威力，我们就使用了一行js代码就将一个普通的下拉列表变成了这样的的一个视觉效果不错的下拉列表（宽度可以修改，select2内置了很多的属性可以查看文档）。

例如给下拉列表设置宽度只需要如下写（使用大括号编写属性，用逗号分隔每个属性）

在select2文档的第三项中的Options里面有一张配置表里面涵盖了select2所有的属性（英文差的我看的有点吃力）

案例中简单的写了两个属性

插件的出现就是为了简单化代码，让我们少些了很多代码。使用起来方便简洁，就是这样select2的简单案列完成了，select2专注于选框，很多属性，可以去文档一一查阅我这里的介绍就结束了。

翻译过来就是 全屏的意思，我想已经猜出来了，这是一款全屏的插件，整个页面简洁大方，整个屏幕就是一张页面，它的官网就是一个很好的实 例 https://alvarotrigo.com/fullPage/#page1。这样的页面展示很受人喜欢，我相信大部分人都曾见过。

使用方法 同样下载压缩提取js 、css文件 下载地址 https://codeload.github.com/alvarotrigo/fullPage.js/zip/master

这个官网有一点优势emmmmmm他有中文模式 左上角可以选择

将css js复制进自己的项目里面引入js css 同样注意的依赖jquery优先导入jquery库如下：

我们可以查看文档编写（文档中有这样的一句话也就是在html文件中必须有着个声明，所以复制代码是要仔细不要复制掉了）

将这段代码复制到body里开始编写页面 在div的class值，section 以及后面的slide是不能更改的，我们必须按照fillpage的规则来 但最外层div的id可以直接设置，用于js代码中的选择

在js中如下编写（首先我们就用上了sectionsColor属性 定义背景颜色，一一对应）

当想定义横向切换时，这时候slide就登场了 ，将下面代码嵌套到<div class = \”section\”></div>中

它将会产生一个横向轮播图 注意 slide section 不可以更改 如下图所写:

效果如下：

当然插件也并不是万能的，fullpage无法设置字体大小所以需要自己定义大小 下面是自定义样式

在fullpage文档上有着很多属性（往下翻的话有对这些属性一 一的解释）

在我的案列中写了几个案例js代码如下：

文档的属性还算写的清晰，所以可以一点点编写 这一节的效果图不好截我把代码结构写上

这样子fullpage的案列就完结了，跟官网页面相似可以试着运行一下子。

lazyload 译为延迟加载， 又叫懒加载 在这个流量的时代，懒加载的出现是非常nice的，它为用户节省流量的消耗，提高性能，当一个高清图片网站一张页面几十张甚至上百张图片时，没有懒加载，它将会将所有的图片都加载出来，这就导致流量的浪费，降低性能，影响了用户的体验，而懒加载的作用是当用户看到这张图片时，它才开始加载出来，这样子就节省了大量的流量，而且优化了性能，提高了用户体验。

使用方法和上面一样下载lazyload插件包：https://codeload.github.com/tuupola/lazyload/zip/2.x

使用方法很简单，因为它只有一个功能就是延迟加载，所以我就直接上代码了 (注意在下载文件中找到对应的css，js文件复制到自己的项目中) lazyload没有css文件

我使用了12张图片然后js就一句，就可以实现懒加载功能

要为每一张图片添加class = “lazyload” ，且不能使用src 必须使用data-src 下面就来写一写怎么看两者的区别

普通加载：

懒加载：

懒加载的用法简单，但它存在的意义不凡，有些框架也会内置懒加载功能 列如上面介绍的fullpage插件

所以，懒加载的使用结束，或许现在感觉不它的作用，但是以后的编程日子里我想我百分百会和它再次的碰面。

Swiper 译为猛击者，确实在视觉上它的确很吸引我，首先它是一款触摸滑动插件 它与fullpage相似又有着各自的特点。

用swiper来做轮播 ，导航我想是很好的选择 swiper不依赖jq所以当项目中不需要jq时可以不用到jquery库

同样先下载swiper的包：https://www.swiper.com.cn/download/swiper-5.3.7.zip 在文件中找到对应的js css文件，复制到自己的项目然后导入如下：

先上一张效果图：

如图所示一款很炫酷的轮播图可以说swiper的中文文档非常的nice，思路清晰。就是emmmm属性有点多一时半会看完我现在想着，根据以上的插件库案列

这个插件的使用就应该不用我来再做赘述了，我就直接粘贴代码代码如下：

不管是什么插件或者框架，它的使用方法都万变不离其宗。相似是 他们的共同点，更何况swiper的文档看着这么的舒服

nice-validator 插件是一款比关于验证表单的插件，当用户注册时，来判断注册手机号码是否合法，是否为空，密码与确认密码是否相等，邮箱是否合法等等等等。

同样先下载:https://codeload.github.com/niceue/nice-validator/zip/master 复制对应的css js文件 到项目并导入，如下：

以案列为准，由于没有css我直接手写了有个简单的css样式。

当然html的表单也是手写对于样式，id class的名称这些，这款插件与其他的不同，可以自己定义：

js写法：无论那样的写法他实现的功能是一样的

这些属性可以看看文档里面的介绍（我简单的截取两张，更多属性一步官网 https://validator.niceue.com/docs/getting-started.html）

自定义规则

内置规则

这款插件的属性还是蛮多的 在常用规则整理中有着常用的规则。

对了这里有一个绕的地方（我单独截出来反正我看着的时候看半天）

就这样，这款插件有没有过多的介绍了。有很多坑和细节还得自己去真正用的时候去看

以上的五款插件全部介绍完成，案列源码下载：https://files.cnblogs.com/files/2979100039-qq-con/jqy_example_10.zip

我想各位小伙伴们看完这篇文章，也或多或少的对插件或者框架的使用有些了解了，但要明白一件事纸上得来终觉浅的道理，

有心人想要去学习一样东西，他就不止是想还要做。所以勤加练习是学好编程的不灭准则。

学习中，有地方错误还请指正。

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

作者：一生的风景

转发链接：https://www.cnblogs.com/2979100039-qq-con/p/12775777.html

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