jq中文文档 jquery中文api 收藏 0

如何使用JQ命令加速开发者工作流

jq 命令提供了一种一致的方式来操作 JSON 数据，而无需离开命令行。通过在 jq playground 中进行练习来了解它的工作原理。

译自 How to Use the JQ Command to Speed Developer Workflows，作者 Roi Talpaz。

处理 JSON 对象对于开发者和平台工程师来说都是一项复杂且日常的任务。开发者经常需要自动化包含 JSON 数据的工作流程，例如处理 API 响应、生成配置文件或分析日志。同时，平台工程师使用 JSON 在其平台和门户中创建自动化工作流程、自助服务操作等等。

虽然 JSON 的简洁性 最初吸引了工程师，但 处理 JSON 数据 引入了一些复杂性。处理 JSON 文件，特别是处理大型数据集的困难在于难以找到和操作所需的信息。为了解决这个问题，工程师复制粘贴 JSON 文件的部分内容来计算总数或为简单的任务编写复杂的脚本，但这是一个耗时的过程，容易出错，进而影响开发者的工作流程。

jq，一个命令行 JSON 处理工具，应运而生。它使开发者能够轻松地操作数据，无论是从服务器的响应中提取信息，还是获取部署的可用副本数量。jq 将这些任务嵌入到 shell 脚本或管道中，而这些脚本或管道本身并不直接兼容 JSON。因此，jq 提供了一种一致的方式来处理 JSON，而无需离开命令行。并且自从 jq 发布以来，已经推出了交互式 jq playground，允许你实时地试验 JQ 命令和过滤器，提供即时反馈来帮助你学习、测试和调试复杂的 JSON 变换。

有多种方法可以使用 JQ 来加快开发者工作流程。在本文中，我将特别讨论在 内部开发者门户 中构建开发者工作流程。

如果你经常使用返回大型 JSON 有效负载的 API，jq 可以帮助你过滤并仅提取相关信息，从而更容易处理和分析数据。这在内部开发者门户中构建工作流程时尤其有用，因为你可以使用 jq 比使用简单的 JSON 文件更快地找到精确的字段和数据点。

例如，假设你已将 GitHub 集成到内部开发者门户中，以使待办事项列表更易于操作。你希望将评论最多的 GitHub issue 放在待办事项列表的顶部，并使用每个 GitHub issue 的标题来组织它们。

你可以使用 GitHub API 来实现这一点。使用此 jq 命令传入 API 请求：

作为回应，API 输出应为：

在许多情况下，你需要重新格式化 JSON 数据结构以匹配另一个工具或服务所需的形式。jq 通过允许你快速创建新的 JSON 对象、操作数组和转换数据格式来加快此过程。

继续上面的例子，你可以清理来自 GitHub 的 issue 对象，只包含你认为重要的字段到你的 Slack 消息自动化中。

以下是输入：

转换此 JSON 有效负载的 jq 命令应如下所示：

最后，输出只包含你想要在 Slack 消息享的字段：

现在你的门户将通过发送 Slack 消息来帮助你优先处理待办事项，这些消息会提醒冲刺计划者注意需要优先处理的带有评论的 GitHub issue。

jq 可用于 shell 脚本中读取、修改和写入 JSON 配置文件。在需要动态调整 JSON 配置的 CI/CD 管道中，它尤其有用。

这是一个示例 jq 命令：

你还可以修改你的配置，例如：

如果你需要快速检查 JSON 文件是否格式正确，或者你知道需要使其更易读并且不想手动操作，则可以使用 jq 通过单个命令来验证和格式化 JSON。这在调试格式错误的 JSON 或只是查看数据时尤其有用。

jq playground 是在线环境，你可以在其中测试和试验 jq 命令和过滤器。playground 允许你试验 jq 实时显示命令，帮助您快速了解不同的过滤器、管道和运算符的行为。这种动手实践、反复尝试的方法比仅仅阅读文档更有效地帮助您学习jq的语法和功能。

通过提供可视化环境，游乐场允许您构建和测试jq查询，将其分解成更小、更易于管理的部分，然后再将它们组合成更大的脚本。您还可以使用注释和空格来分解复杂的查询，从而更容易理解jq代码的不同部分是如何协同工作的。

游乐场环境也有助于回忆和保留，因为您可以立即看到jq查询的实际结果，从而更容易识别和修复错误。由于您可以迭代地测试小的更改，这种逐步反馈有助于您调试复杂的转换，而无需保存文件、运行命令和等待输出的额外开销。

游乐场环境使探索深度嵌套或不规则的JSON数据更容易。您可以即时尝试不同的路径和转换，立即查看输出并根据需要调整方法。这使得理解和导航复杂的JSON变得更容易，而无需在命令行上反复编写和重新运行脚本。

这是一个使用JQ游乐场的示例

如果您想试验JQ命令和过滤器，请使用此JQ游乐场。如果您想讨论其他加快开发人员工作流程的方法，请加入Port社区。

基于 Python 开发的在线文档系统

MarkDown 编辑，快速书写；类 Gitbook，简洁阅读；后台管理。

州的先生（zmister.com）自用并完全开源、基于 Python 编写的文档写作系统。

MrDoc 拥有以下特点：

• 站点与用户系统简洁 基于Django自带的用户模型，实现简单高效的用户管理，支持用户注册、用户登录、管理员等控制等功能； 支持全站关闭注册； 支持注册邀请码配置； 支持广告位自定义配置； 支持统计代码自定义配置；
• 文档系统清晰 基于文集的文档撰写和阅读； 基于Editormd的Markdown编辑器，支持Markdown语法的文档写作，支持图片粘贴上传，支持从本地MD文件中插入内容； 提供文档模板功能，支持文档模板的创建、修改； 仿GitBook文档阅读页面，支持文档阅读页面的字体缩放，字体类型修改，页面社交分享，良好的移动端阅读体验； 支持三级目录层级显示； 支持文集后台导出为markdown文本格式.md文件、前台导出为EPUB电子书； 基于文集进行权限控制，提供公开、私密、指定用户可见、访问码可见4种权限模式；
• 二次开发方便 使用Django传统的MTV开发模式，路由、视图函数、模型易于理解； 使用非前端工程化构建前端页面，主要使用Layui进行页面布局和展示，方便改动；

在开发过程中，参考和借鉴了GitBook、ShowDoc、Wordbook等应用和网站的功能与样式。

• 编程语言：Python 3
• 后端Web框架：Django 2
• 前端UI库：Layui 2.5.6
• JS库：Jquery3.3
• MarkDown编辑器：Editormd
• 页面社交分享：Share.js
• Markdown科学公式：Katex.js

项目地址：https://gitee.com/zmister/MrDoc

jQuery基础回顾——jQuery中的DOM操作

DOM是Document Object Model的缩写，意思是文档对象模型，根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件，简单来说，DOM解决了Netscape的javaScript和Microsoft的Jscript之间的冲突，给予了Web设计师和开发者一套标准的方法，让他们能够轻松获取和操作网页中的数据、脚本和表现层对象。

一般来说，DOM操作分为3个方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。

• DOM Core

DOM Core并不专属于javaScript，任何一种支持DOM的程序设计语言都可以使用它，它的用途并非仅限于处理页面，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。

javaScript中的document.getElementById()、getElementByTagName()、getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。

• HTML-DOM

在使用javaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性，HTML-DOM的出现甚至比DOM Core还要早，它提供了一些更简明的记号来描述各种HTML元素的属性。

例如：

注：HEML-DOM只能用来处理Web文档。

• CSS-DOM

CSS-DOM是针对CSS的操作，在javaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性，通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。

例如：设置某元素style兑现字体颜色的方法：

jQuery作为javaScript库，继承并发扬了javaScript对DOM对象的操作的特性，使开发人员能方便地操作DOM对象。

样例DOM

1、查找节点

使用jQuery在文档树上查找节点非常容易，可以通过在上一节介绍的来完成。

• 查找元素节点

获取元素节点并打印出它的文本内容，jQuery代码如下：

• 查找节点属性

利用jQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值，attr()方法的参数可以是一个，也可以是两个，当参数是一个时，则是要查询的属性的名字，当参数是两个时，则表示给属性赋值，例如：

2、插入节点

在jQuery中提供了多种插入节点的方法：

3、删除节点

如果文档中某一个元素多余，那么应将其删除，jQuery提供了三种删除节点的方法，即remove()、detach()和empty()。

• remove()

从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选的元素。

当某个节点用remove()方法删除后，该节点所包含的所有后代节点同时被删除，这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

另外，remove()方法也可以通过传递参数来选择性地删除元素如下：

• detach()

detach()和remove()一样，也是从DOM中去掉所有匹配的元素，但需要注意的是，这个方法不会把匹配的元素从jQuery对象中移除，因而可以再将来再使用这些匹配的元素，与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

• empty()

严格来讲，empty()方法并不是删除节点，而是清空节点，它能清除元素中的所有后代节点。

4、属性操作

在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。

• 获取和设置元素属性

如果要获取<p>元素的属性title，那么只需要给attr()方法传递一个参数，即属性名称。

如果需要设置<p>元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数，即属性名和对应的值。

如果需要一次性为同一个元素设置多个属性，可以使用如下代码：

注意：jQuery中的很多方法都是同一个函数实现获取和设置的，例如上面的attr(),类似的还有html()、text()、height()、width()、val()和css()等方法。

• 删除元素属性

在某些情况下，需要删除文档中某个元素的特定属性，可以使用removeAttr()方法来完成该任务。

如果需要删除<p>元素的title 属性，可以使用下面的代码实现：

prop()方法与attr()方法类似，但有区别，大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled = \”disabled\”，checked=\”checked\”，比如用attr(\”checked\”)获取checkbox的checked属性时选中的时候可以取到值,值为\”checked\”，但没选中获取值就是undefined。

jQuery提供新的方法prop()来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回\”checked\”和\”\”,现在使用prop方法获取属性则统一返回true和false。

那么，什么时候使用attr()，什么时候使用prop()？

a) 添加属性名称该属性就会生效应该使用prop();

b) 具有true,false两个属性使用prop();

c) 其他则使用attr();

attr与pop方法对比

5、样式操作

• 获取和设置样式

由于 class 也是元素的属性，因此获取和设置class都可以使用attr()方法来完成，但是attr()方法实现的原理是替换，即以新属性值替换原属性值，如果此处需要的是“追加“效果，那么我们可以使用addClass()方法。

• 追加样式

jQuery提供了专门的addClass()方法来追加样式。

attr()与addClass()的区别

• 移除样式

要删除class的某个值，那么可以使用与addClass()方法相反的removeClass()方法来完成，它的作用是从匹配的元素中删除全部或者指定的class。

可以使用如下jQuery代码来删除<p>元素中值为“high”的class：

如果要把<p>元素的两个class都删除，就要使用两次removeClass方法，代码如下：

jQuery提供了更简单的方法，可以以空格的方式删除多个class名，jQuery代码如下：

另外，还可以利用removeClass()方法的一个特性来完成同样的效果，当它不带参数时，就会将class的值全部删除。

• 判断是否含有样式

hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false。

注意：这个方法是为了增强代码可读性而产生的，在jQuery内部实际上时调用了is()方法来完成这个功能的，该方法等价于$(\”p\”).is(\”.another\”);

6、设置和获取 HTML、文本和值

• html()

此方法类似于javaScript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。

• text()

此方法类似javaScript中的innerText属性，可以用来读取或者设置某个元素的文本内容。

• val()

此方法类似于javaScript中的value属性，可以用来设置和获取元素的值，无论元素是文本框、下拉框还是单选框，它都可以返回元素的值，如果元素为多选，则返回一个包含所有选择的值的数组。

若方法有入参，则表示设置对应的值。

7、遍历节点

• children()

该方法用于取得匹配元素的子元素集合。

注意：children()方法只考虑子元素而不是其他后代元素。

• next()

该方法用于取得匹配元素后面紧邻的同辈元素。

• prev()

该方法用于取得匹配元素前面紧邻的同辈元素。

• siblings()

该方法用于取得匹配元素前后所有的同辈元素。

8、CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。

可以直接利用css()方法获取元素的样式属性。

无论color属性是外部CSS导入，还是直接拼接在HTML元素里（内联），css()方法都可以获取到属性style里的其他属性的值。

也可以直接利用css()方法设置某个元素的的那个样式。

与attr()方法一样，css()方法也可以同时设置多个样式属性。

注意：

1) 如果值是数字，将会自动转化为像素值。PX

2) 在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，例如：

$(“p”).css({fontSize: “30px”, backgroundColor: “#888888”})

如果带上了引号，既可以写成“font-size”，也可以写成“fontSize”。

建议加上引号，养成良好的习惯。

如果需要某个元素的height属性，则可以通过如下代码实现：

在jQuery中还有另外一种方法也可以获取元素的高度，即height()，它的作用是获得匹配元素当前计算的高度值（px），如

height()方法也能用来设置元素的高度，如果传递的值是一个数字，则默认单位为px，如果要用其他单位（例如em），则必须传递一个字符串如：

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

关注并战法后私信“jQuery基础材料”获取线下资料，包括完整基础资料、chm文档、示例代码及其他参考资料。

上一章：

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