tyle 修飾

width 寬度

height 高度

title 想說明的

text-align 水平對齊方式

center 居中 left 居左 right 居右

line-height 垂直對齊方式/行高 當行高等于高度時候垂直居中

background 背景

image 引入背景圖片(url)

background-position： 背景定位(x軸，y軸；)

background-repeat 背景平鋪

:no-repeat;不平鋪 repeat-x;水平平鋪 repeat-y;垂直平鋪

background：url() repeat left center #00;

順序：背景圖片 重復 定位 顏色

top/right/bottom/left/center 方向英文：上、右、下、左，中

color 顏色

font 文字

font-family 字體

font-size 字號

font-weight：normal 正常 :bold 加粗

font-style: normal;取消傾斜 :italic;斜體

font:italic bold 24px/24px ‘楷體’;

順序：是否斜體 是否粗體 字體大小/行高 字體

文本修飾屬性：

text-decoration：

overline 頂劃線

underline 下劃線

line-through 中劃線/刪除線

none 無/取消下劃線

display 轉化顯示模式 元素轉化

block 塊

inline 行內

inline-block 行內塊

省略號

white-space:nowrap 強制不換行

overflow:hidden 溢出隱藏

text-overflow：ellipsis 省略號

font-family：‘微軟雅黑’ 讓省略號在下面

必須給寬度

偽類

a:link 設置未訪問時候的顏色 點擊后變成a的正常顏色

a:visited 設置訪問過后顏色

a:hover 當鼠標放上去會變顏色

a:active 鼠標點擊變顏色

順序 lvha 驢哈

auto 自動居中

margin 外邊距

margin-top 上外邊距

margin-right 右外邊距

margin-bottom 下外邊距

margin-left 左外邊距

padding 內邊距

padding-top 上內邊距

padding-right 右內邊距

padding-bottom 下外邊距

padding-left 左外邊距

float 浮動 ：left|right|none 左|右|不浮動

cursor:pointer 小手的代碼。。

clear：left|right|both 清除浮動

overflow：hidden 溢出隱藏

index 首頁

base 里面寫清除默認樣式的

text-indent：em 首行縮進 （LOGO名字）

以后logo 必須用H1引背景圖片 里面寫上字

position：relative|absolute|fixed 定位

relative 相對定位

absolute 絕對定位

fixed 固定定位

Left/top/right/bottom 定位的偏移量

z-index 改變標簽z軸堆疊順序

opacity 透明代碼 1不透明（0.9 0.8.。。。。） 0透明

filter：alpha（opacity：0-100）

input{outline:none} 取消焦點

post 相對安全 gat 不安全 input 表單 單標簽 type="text" 賬號/文本 type="password" 密碼 type="submit" 提交 type="button" 只是一個點擊按鈕 type="radio" 單選框 label雙標簽 選項內容 type="checkbox" 復選框 label雙標簽 選項內容 value="提示 如 請輸入密碼" placeholder="也是提示" select option 選項欄 textarea 下拉框 resize：none 禁止任意拖放 name="user" 賬號 name="password" 密碼

table{ border-collapse:collapse;} 讓border合并

tr加

colspan=“3” 橫向合并

rowspan=“3” 縱向合并

align 左右對齊方式 middle（左）left center right

valign 上下對齊方式 top center bottom

cellspacing=“0” 清除外面的邊距

cellpadding=“0” 清楚里面的邊距

表頭

表身

表低

frameborder="0" 取消邊框 screlling="no" 取消滾動條 iframe src

letter-spacing：具體數值 字母間距

word-spacing：數值 單詞間距

overflow：auto 溢出滾動

visibility：hidden 隱藏

charset 字符集

utf-8 國際編碼

gb2312/gbk 中國編碼

author 作者

copyright 版權

keywords 關鍵詞

description 介紹

js

@media screen and (max-width:900px){}; 屏幕自適應

媒體 屏幕 最大

push :添加一個數組元素

document ：文檔

pop ：刪除最后一個數組元素

console ：控制臺

shift ：刪除第一個數組元素

string ：字符串

Concat 組合數組

undefined ：未定義

typeof ：關鍵字

join：數組轉化為指定分隔符

slice：返回指定數組

length：數組長度

Array：數組

number：數字

boolean：布爾

alert：提示框

parseInt：轉化為整型數值

continue：繼續

is NaN：非數字

sort：升序

break：截斷 跳出

reverse：倒序

object：對象類型

parseFloat：轉化為浮點值

index：索引

floor：向下取整

variable：變量

ceil：向上取整

round:四舍五入

abs：返回絕對值

eval：解析字符串并運算

max：比較最大值

return：返回

min：比較最小值

addEventListener：事件名 函數

to.fixed：保留小數點

attachEvant：（on）事件名

random：隨機數

eletment：元素

eventName：事件名

function：函數

removeEventListener：事件解除

detachEvent：刪除已注冊事件

open（）：彈出一個新窗口

function：函數（方法）

showModalDialog：彈出一個模式窗口

close（）：關閉當前窗口

Date：日期對象

getFullYear（）：年份

getMonth（）：月份（0–11）

getDate（）：幾號

getDay（）：星期幾（周一至周六）

getHours（）：小時（0–23）

getMinites（）：分鐘

getSeconds（）：秒數（0–59）

getMilliseconds（）：毫秒數

getTime（）：從1970至今的毫秒數

Date.now（）：從1970至今的毫秒值

tolocaleDatestring（）：輸出本地化的日期

setTimeout：延遲時間

tolocaleTimestring（）：輸出本地化得時間

clearTimeout：定時器對象

tolocalestring：輸出本地化的日期和時間

setInterval：間隔時間

clearInterval：停止

window.status：瀏覽器狀態欄信息

window.screen：屏幕信息

screen.width：屏幕寬度

screen.height：屏幕高度

screen.availwidth：去掉任務欄寬度

screen.avaiheight：去掉任務欄高度

history：瀏覽歷史記錄

location：地址欄對象

navigator：用于獲取用戶瀏覽器信息

appCodeName：瀏覽器代碼名的字符串表示

appName：返回瀏覽器的名稱

appVersion：返回瀏覽器的平臺和版本信息

platform：返回運行瀏覽器的操作系統平臺

userAgent：返回由客戶機發送服務器的

user-agent：頭部的值

Exception：異常 意外情況（try—catch）

獲取元素對象方式:

getElementByld：

getElementsByName：

gatElementsByTagName：

getElementByClassName：

onlick 當點擊的時候

onmouseover 鼠標移入

onmouseout 鼠標移出

onblur：失去焦點事件

onkeydown：鍵盤按下事件（前）

onkeypress：鍵盤按下事件（后）

onload：當頁面加載完成之后觸發

onchange;內容改變事件

onkeydown;鍵盤按下事件（前）

onkeyup;鍵盤松開事件

onkeypress;鍵盤按下事件（后）

onmouseout：鼠標移出事件

onmouseover：鼠標移入事件

onselect：內容被選中事件

ondblclick：鼠標雙擊事件

onfocus：獲得焦點事件

onkeyup：鍵盤松開事件

復選框操作 checked=" "

checked 默認選中

false 不選中

true 選中

typeof 查看數據類型

object 對象

number 數字

string 字符串

function 函數

boolean 布爾值 true false

undefined 未定義

parseInt 整數

parseFloat 浮點數/小數

Number 數字

hide 隱藏

show 顯示

skin 皮膚

code 代碼

even 事件

array 數組

integer 整數

veruant 變量

common 公用

switch

case 情況

break 中斷整個循環

continue 跳出本次循環

default 不履行/所有情況都不滿足的時候走這個

null 沒有/空對象

computed 計算后/生效的

eval（JS可以讀懂的代碼：如‘1+1’->字符串） 這個代碼會把（）里面的字符串換成計算機讀懂的代碼來計算 + - * % 都行 （計算用的）

return 返回

write 輸入

find 查找

interval 間隔

setInterval（函數名，1000/） 間隔定時器

clearInterval 清除間隔定時器

Timeout 超時

setTimeout 延遲定時器

clearTimeout 清除延遲定時器

obj.disabled 讓按鈕/變成不可使用

true 不可用

false 可用

date 時間

get 獲取

set 設置

Fullyear 滿年

month 月 （從0月開始）

day 日 獲取需要 date

week 星期 獲取需要day （從0到6）

hours 小時

minutes 分鐘

seconds 秒

single 一個/一倍

dubble 兩個/兩倍

triple 三個/三倍

arguments 函數傳參-實參的集合

arguments.length 函數傳參-實參的長度

arr.push（） 向數組最后添加一項

arr.unshift() 向數組前面添加一項

arr.pop（）刪除數組最后一位.

arr.shift（） 刪除數組第一位

arr.splice(開始的位置，刪除的個數，添加的東西1。。。)

arr.join(’’) 變字符串 是中間的隔開東西 如- ，空格 等等。。。

arr.concat(arr1,arr2,arr…要拼接的數組…); 數組拼接/合并數組

arr.reverse() 反轉/顛倒數組

arr.sort() 數組排序 按照字符串比大小的方法來排序

arr.sort(function(a1,a2){ return a1-a2 //從小到大 return a2-a1 //從大到小 }) a1 a2隨便起 代表的是數組中隨機的某兩項

str.charAt() 字符串里面的下標

str.indexOf(‘’) 下字符串對應的下標數（相同的就取第一個）

str.lastIndexOf（‘’）下字符串對應的下標數（相同的就取最后一個）

str.substring (開始位置，結束位置)/（開始位置-不寫結束位置默認就從開始位置到最后） 截取子串

str.toUpperCase() 大寫字母

str.toLowerCase() 小寫字母

str.split(切割的方式 ‘-’ ‘’ '空格’等) 切割變成數組

str.charCodeAt(‘a’) 輸入字符查找對應的編碼

String.fromCharCode(編碼) 輸入編碼查找對應的字符

json.name=value; 添加

delete json.name 刪除

token 括號

try catch(e) 異常

math.random() 求隨機數

parseInt（math.random()（m-n）+n） 求n-m之間隨機的整數， 前包括后不包括

math.abs() 求絕對值

math.max(，，，) 求最大值

math.min(，，，) 求最小值

math.pow(n,m) 求n的m次方

math.sqrt(a) 開方

math.PI π

math.ceil(12.3) 向上取整 13

math.floor(12.3) 向下取整 12

math.round(a) 四舍五入

!important Css樣式值后面加這個 權重最大

navigator.userAgent UA 例子判斷瀏覽器的類型

navigator.language 語言

navigator.platform 操作系統

Sibling 兄弟

next 下一個

previous 上一個

獲取元素/節點：

(父級) obj.children 找：兒子/子級 子節點

(子級) obj.parentNode 找：父親/父級 父節點

(同級) obj.nextElementSibling || obj.nextSibling 下一個同級/節點 (同級) obj.previousElementSibling || obj.prenviousSibling 上一個同級/節點

(父級) obj.firstElementChild ||obj.firstChild 首節點

(父級) obj.lastElementChild || obj.lastChild 尾節點

創建元素：

document.createElement_x(‘標簽名’) 創建元素

添加插入

(父級) obj.appendChild(誰) 往元素里面最后添加一個

帶剪切效果

(父級) obj.insertBefore(把誰，加在誰的前面) 往元素里面添加一個

帶剪切效果

刪除元素：

(父級) obj.removeChild(子級) 刪除子級

window.open() 打開

window.close() 關閉

a標簽：target=""

不填 默認新頁面打開

_blank 新頁面打開

_self 本頁面打開

window.location 地址欄信息

window.location.href 鏈接信息

window.location.search 數據信息

window.location.hash 錨點信息

*了解就行 面試背住

window.location.procotol 協議信息

window.location.hostname 域名信息

window.location.port 端口號信息

window.location.pathname 路徑信息

back 返回

forward 向前

history 歷史

window.history.back 返回歷史記錄 退

window.history.forward 返回歷史記錄 前

alert（） 彈

confirm 詢問提示框

prompt 問答提示框

console.log（） 在F12中顯示;

document.write（*） 在頁面中輸入

scroll 滾動 有兼容問題

client 客戶端/可視區

offsetHeight/Width 物體盒子模型的寬高

offsetTop/Bottom/方向 物體距上/下/左/右的距離

offsetparent 定位父級

window.onScroll 當滾動的時候 滾動事件

window.onresize 當縮放的時候 縮放事件

onfocus 當獲取焦點的時候

onblur 當失去焦點的時候

obj.getAttribute(‘屬性名’) 獲取屬性名對應的屬性值

obj.setAttribute(‘屬性名’,‘屬性值’) 設置屬性

obj.removeAttribute(‘屬性名’) 刪除屬性

event 事件

onmousemove 鼠標移動事件

onload 當圖片加載完成時

onerror 當圖片加載失敗時

cancelBubble 取消冒泡

onkeydown 當按鍵按下的時候

onkeyup 當按鍵抬起的時候

oEvent.keycode 鍵盤編碼

oncontextmenu 當按右鍵的時候

return false 阻止瀏覽器右鍵菜單

cache 緩存

onmousedown 鼠標按下時

onmouseup 鼠標抬起時

onmousemove 鼠標移動事件

obj.setCapture() 開始捕獲

obj.releaseCapture() 取消捕獲

obj.cloneNode() 克隆復制一個節點

document/obj.addEventListener（‘不加on的事件名’,函數名,false） 添加事件綁定 兼容高級

document/obj.attachEvent（‘加on的事件名’,函數名） 添加事件綁定 兼容IE系列

document/obj.removeEventListener（‘不加on的事件名’,函數名,false） 解除事件綁定

document/obj.detachEvent（‘加on的事件名’,函數名） 解除事件綁定

onmouseenter 鼠標移入

onmouseleave 鼠標移出

onmousewheel 鼠標滾輪事件

DOMMouseScroll 鼠標滾動事件

oEvent.wheelDelta 非火狐 測試鼠標滾輪向上向下彈得數字

oEvent.detail 火狐 測試鼠標滾輪向上向下彈得數字

return false 阻止瀏覽器默認事件 但是在事件綁定中失效

oEvent.preventDefoult 在事件綁定中用 阻止瀏覽器默認事件（如果單獨用只兼容高級瀏覽器）

oninput 當輸入的時候 iE9- 沒有此方法

onpropertychange 當屬性改變的時候 IE系列

oEvent.srcElement 事件源 非火狐

oEvent.target 事件源 高級瀏覽器

duration 期間

start 開始

count 次數

complete 完成

var bFlag=false/ture 開關 自定義

easing 速度類型：

linear 勻速

ease-in 加速

ease-out 減速

window.onload 頁面加載完畢后執行（代碼、資源）

DOMReady 頁面加載完畢后執行（代碼）

DOMContentLoaded DOM加載事件

obj.onreadystatechange 監控事件（模擬DOM加載事件）

readyState 加載狀態

document/obj.readyState 加載狀態

ondbclick 鼠標雙擊

queryselector 新的獲取元素方法

window.location.reload 重新加載

cookie

expires 期限

session 一個會話（瀏覽器打開和關閉）

path 路徑

define 定義

require 引用其他模塊

exports 導出模塊

module 批量導出模塊，

data-main 主要數據/初始化接口

success 成功

error 失敗

Request 請求

ActiveX 瀏覽器插件

XMLHttpRequest（） ajax 創建/ 不兼容ie6-

ActiveXObject（‘Microsoft.XMLHTTP’） 創建/(插件) ie系列

oAjax.open()打開

oAjax.setRequestHeader(‘content-type’, ‘application/x-www-form-urlencoded’);

oAjax.send() 發送

onreadystatechange 接收/當通信狀態變化

oAjax.abort() 使中止

oAjax.readyState 是否完成/加載狀態

oAjax.status 是否成功

response 回答/響應

oAjax.responseText 返回結果

JSON.parse() 可以把字符串json變成json 不過json要正規些 雙引號

JSON.stringify() json打印出來的方法

encode 編碼

decode 解碼

Component 組件/元件

encodeURIComponent(‘中文’) 中文轉化成編碼

decodeURIComponent(‘編碼’) 編碼轉化成中文

str.replace 替換

new RegExp() 正則表達式

str.search() 跟indexOf一樣 在正則用

str.match 匹配

正則.test（你要校驗的str） true 正確滿足 false 不滿足 用這個的時候一定配合行首和行尾

轉譯

\d 數字 [0-9]

\w 數字、英文、下劃線 [0-9a-z]

\s 空白字符 所有的空白字符

. 代表任意字符

\D 非數字 [^0-9]

\W 非數字、英文、下劃線 [^0-9a-z]

\S 非空白字符

\u4e00-\u9fa5 中文

量詞

{n} n個

{n,m} n-m個

{n,} 最少n個，最多隨便

{0，m} 最少隨便 最多m個

{1，} 就是 若干個

{0，} 任意個 可以沒有

？ {0,1} 最少沒有 最多1個

\ 轉譯特殊字符

| 或的意思

i 忽略大小寫

g 全局匹配

m 多行模式

^ 行首 如果在方括號里面是除了

$ 行尾

*jq

hide 隱藏

show 顯示

toggle 點擊

hover 移入

fadeIn 淡入

fadeOut 淡出

animate 運動函數（move）

slideDown 滑動從上往下出來

slideUp 滑動從下往上隱藏

eq(下標) 標簽獲取的下標

li>a li下面的第一級a

偽類選擇器:

li:last li最后一個

li:first li第一個

li:eq(2) 第三個li

obj：even 偶數

obj：odd 奇數

obj：has(“p/標簽名”) 里面包含‘p’這個標簽的就會選取

obj：contains(“p/內容”) 內容有得‘p’ 就都會選取

event/自己起行參名字.pageX X軸坐標

event/自己起行參名字.pageY Y軸坐標

offset().top 物體絕對的位置 ->getPos()函數

offset().left 物體絕對的位置

position().top 物體距定位父級距離 ->offsetTop

position().left 物體距定位父級距離

document.scrollTop 和原生一樣

document.scrollLeft 和原生一樣

.width/.height 物體本身的寬高

innerHeight/Width 物體內部的寬高 包括padding 不包括邊框

outerHeight/Width 物體盒子模型寬高

父級.append(子級) 在父級內的后部追加

父級.prepend(子級) 在父級內的前面追加

子級.appendTo(父級) 在父級后部追加

子級.prependTo(父級) 在父級前部追加

obj1.after(obj2) 把2放在1的后面

obj1.before(obj2) 把2放在1的前面

bind() 事件綁定

unbind() 事件解綁

live() 事件委托

die() 解除事件委托

**以上四種不推薦 因為原理還是昂 所以推薦on

obj.on（） 可以事件綁定/委托

each 循環

$.trim() 去除首尾空格

extend() 延伸

height() 就是寬度

innerHeight 包括padding、不包括邊框

outerHeight 盒子模型的

offset().left -> getPos()

position().left -> offsetLeft()

scrollTop() -> scrollTop

eve.pageX/Y 坐標

maxlength 表單元素最大長度 屬性

$.fn.函數名=function(){} 建立jq封裝函數

$.fn.extend({函數名1:function(){},函數名2:function(){},…})

漢字：[0x4e00,0x9fa5]（或十進制[19968,40869]）

數字：[0x30,0x39]（或十進制[48, 57]）

小寫字母：[0x61,0x7a]（或十進制[97, 122]）

大寫字母：[0x41,0x5a]（或十進制[65, 90]）

parent() 父級

offsetParent() 定位父級

parents() 所有父級 括號里面可以篩選 比如放class名字或…

str/arr.slice（開始位置，結束位置） 切 從開始到結束 如果只有開始 就從開始到最后。 前包后不包

prototype 原型

form表單中 submit 提交 reset 重置

xxx instanceOf xxx 檢測一個對象屬于某個類

xxx.constructor==xxx 看構造函數 雙等是判斷 直接父級屬不屬于xxx 一個等號是賦值讓直接父級等于xxx

fn.call(this的指向，參數一，參數二，…) 改變this的指向 fn中的this=

fn.apply(this的指向，[參數一，參數二，…]) 改變this的指向 fn中的this=

init 開始

localStorage 本地存儲

一般的規范

localStorage.name=value 存

localStorage.name 取

delete localStorage.name 刪除一條

localStorage.clear() 刪除全部

規范的存取

localStorage.setItem(name,value)

localStorage.getItem(name)

localStorage.removeItem(name)

sessionStorage 臨時存儲 和localStorage一樣用法

include() 包含

template.defaults.openTag=’’; 自定義模板開始樣子

template.defaults.closeTag=’’; 自定義模板結束樣子

template.config(‘openTag’,’’)

template.config(‘closeTag’,’’)

template.config(‘escape’,true/false) true不默認轉譯 false默認轉譯

m model 模型

v view 視圖

c controller 控制器

scope 范圍 作用域

then 然后

model模型

bind綁定

ng-app=""; 引用其他模塊

ng-model="" 數據從哪來

ng-bind="" 或 model 或 {{xxx}} 數據到哪去

ng-init 初始化

ng-repeat 循環

angular.module(‘名字’,[依賴模塊).controller(‘名字’,function(依賴項){})

$scope

$http

$interval

$timeout

` 反單引號 包住字符串 拼接是這樣 ${}

|currency:"" 貨幣

date:"" 時間戳轉化處理

route 路由/狀態

filter 過濾器

directive 指令

restrict 類型 E:‘element’ C:‘class’ M:‘comment’ A:‘attribute’

service 依賴

oDate.toString() 獲取正常時間

creator.ionic.io 做手機端的框架網站不錯

ng-show true false 顯示 隱藏

ng-hide true false 隱藏 顯示

ng-clack

comment 注釋

bundle 打包

transclude 嵌入

params 參數

provider 提供者

.config() 配置

s c o p e . scope. scope.watch(數據，fn)

template 模板

templateUrl:‘模板地址’ 模板

$ bower install * 下載東西用的

ReactDOM.render(什么東西，渲染到哪)

type=‘text/babel’

state 狀態

extends 延伸 繼承

constructor 創建

super 超類/父類

component 組件

React.Component

this.props.屬性

組件中 ref和正常的ID類似

vue

el：‘id’

data:{}

$index

capitalize 首字母大寫

uppercase 變大寫字母

lowercase 變小寫字母

ev.stoppropagation() 阻止冒泡

ev.preventDefault() 阻止默認事件 angular

angular.bind(this的指向，要改變指向的函數名，參數)

bootstrap 開啟應用模式

copy(復制誰,復制到哪里) 復制/克隆

equals(a,b) 比較

forEach 循環

fromJson 字符串json轉化成json

extend（obj，obj1，obj2。。。） 擴展

標簽里面屬性 transition=“名字” 過渡 動畫

.名字-

transition 過渡

transition：時間 讓誰變/all ease;

enter 進來

leave 出去

route 路由/狀態

watch 監控

props 存東西 可在替換模板身上用

Router-view 狀態視圖

v-link="{path:名字

animation:8s test/名字 linear infinite/數值/次數;

background-size 背景尺寸

contain 以最合適的狀態展示 可能會留白

cover 盡可能填滿

nth-child(下標 注意：從1開始) 注意:項目不用這個。禁用

nth-of-type(下標 注意：從1開始) 注意:項目不用這個。禁用

background-origin： 背景從哪里開始

content-box

border-box

padding-box

inux系統之jq工具的基本使用

• 一、jq工具介紹
• 1. jq工具簡介
• 2. jq工具的特點
• 二、jq工具的安裝
• 1. yum安裝jq
• 2. 二進制安裝jq
• 三、jq命令的使用幫助
• 1. 查詢jq命令幫助信息
• 2. jq命令的選項解釋
• 四、jq命令的基本使用
• 1. 顯示json文件的所有的key
• 2. 顯示key對應的值
• 3. 查詢json文件
• 4. 計算值的長度
• 5. 輸出美觀的格式
• 6. 過濾json文件中的鍵值

一、jq工具介紹

1. jq工具簡介

jq是一款輕量級的命令行json處理工具，可以幫助用戶輕松處理json格式的數據。它可以從標準輸入讀取json數據，也可以從文件中讀取。同時，它支持各種查詢和過濾操作，例如選擇、過濾、轉換、排序和格式化等。

2. jq工具的特點

jq是一種針對JSON格式數據處理的命令行工具，具有以下特點：

• 快速和高效：jq使用C語言編寫，處理JSON數據非常快速和高效。
• 靈活和強大：jq具有豐富的功能和靈活的語法，能夠處理復雜的JSON數據結構和進行高級的JSON數據操作。
• 命令行工具：jq是一個命令行工具，可從終端中直接調用，方便快捷。
• 跨平臺：jq可在多種操作系統（包括Unix/Linux、Windows和macOS）上使用。
• 開源：jq是一個開源工具，用戶可自由修改和分發。
• 支持管道：jq支持從一個命令輸出管道到另一個命令作為輸入，使得數據處理更加靈活和高效。

二、jq工具的安裝

1. yum安裝jq

• 需要提前安裝epel源

yum install -y epel-release

• 搜索jq命令的軟件包

[root@jeven ~]# yum search jq
Loaded plugins: fastestmirror, langpacks
Loading mirror speeds from cached hostfile
 * epel: mirrors.tuna.tsinghua.edu.cn
====================================================== N/S matched: jq ======================================================
drupal7-jquery_update.noarch : Upgrades the version of jQuery in Drupal core to a newer version of jQuery
jq-devel.x86_64 : Development files for jq
js-jquery-mousewheel.noarch : A jQuery plugin that adds cross-browser mouse wheel support
js-jquery-ui.noarch : jQuery user interface
js-jquery-ui-touch-punch.noarch : Touch Event Support for jQuery UI
python-XStatic-JQuery-Migrate.noarch : JQuery-Migrate (XStatic packaging standard)
python-XStatic-JQuery-TableSorter.noarch : JQuery-TableSorter (XStatic packaging standard)
python-XStatic-JQuery-quicksearch.noarch : JQuery-quicksearch (XStatic packaging standard)
python-XStatic-jQuery.noarch : jQuery 1.10.2 (XStatic packaging standard)
python-XStatic-jquery-ui.noarch : jquery-ui (XStatic packaging standard)
python-tw2-jqplugins-flot.noarch : jQuery flot (plotting) for ToscaWidgets2
python-tw2-jqplugins-gritter.noarch : jQuery gritter (growl-like pop-ups) for ToscaWidgets2
python-tw2-jqplugins-jqplot.noarch : Toscawidgets2 wrapper for the jqPlot jQuery plugin
python-tw2-jqplugins-ui.noarch : jQuery UI for ToscaWidgets2
python-tw2-jquery.noarch : jQuery for ToscaWidgets2
jq.x86_64 : Command-line JSON processor
js-jquery.noarch : JavaScript DOM manipulation, event handling, and AJAX library
js-jquery1.noarch : JavaScript DOM manipulation, event handling, and AJAX library
nodejs-extend.noarch : Port of jQuery.extend for node.js and the browser
python-pyquery.noarch : A jQuery-like library for python
python2-XStatic-DataTables.noarch : DataTables jquery javascript framework (XStatic packaging standard)
xstatic-datatables-common.noarch : DataTables jquery javascript framework (XStatic packaging standard)

  Name and summary matches only, use "search all" for everything.

• 安裝jq工具

yum -y install jq.x86_64

• 查看jq版本

[root@docker yum.repos.d]# jq -V
jq-1.6

2. 二進制安裝jq

• 下載jq工具的軟件包

wget https://github.com/stedolan/jq/releases/download/jq-1.6/jq-linux64  -O   /usr/local/bin/jq

• 設置權限

chmod +x /usr/local/bin/jq

三、jq命令的使用幫助

1. 查詢jq命令幫助信息

使用jq --help查詢幫助信息

[root@jeven ~]# jq --help
jq - commandline JSON processor [version 1.6]

Usage:	jq [options] <jq filter> [file...]
	jq [options] --args <jq filter> [strings...]
	jq [options] --jsonargs <jq filter> [JSON_TEXTS...]

jq is a tool for processing JSON inputs, applying the given filter to
its JSON text inputs and producing the filter's results as JSON on
standard output.

The simplest filter is ., which copies jq's input to its output
unmodified (except for formatting, but note that IEEE754 is used
for number representation internally, with all that that implies).

For more advanced filters see the jq(1) manpage ("man jq")
and/or https://stedolan.github.io/jq

Example:

	$ echo '{"foo": 0}' | jq .
	{
		"foo": 0
	}

Some of the options include:
  -c               compact instead of pretty-printed output;
  -n               use `null` as the single input value;
  -e               set the exit status code based on the output;
  -s               read (slurp) all inputs into an array; apply filter to it;
  -r               output raw strings, not JSON texts;
  -R               read raw strings, not JSON texts;
  -C               colorize JSON;
  -M               monochrome (don't colorize JSON);
  -S               sort keys of objects on output;
  --tab            use tabs for indentation;
  --arg a v        set variable $a to value <v>;
  --argjson a v    set variable $a to JSON value <v>;
  --slurpfile a f  set variable $a to an array of JSON texts read from <f>;
  --rawfile a f    set variable $a to a string consisting of the contents of <f>;
  --args           remaining arguments are string arguments, not files;
  --jsonargs       remaining arguments are JSON arguments, not files;
  --               terminates argument processing;

Named arguments are also available as $ARGS.named[], while
positional arguments are available as $ARGS.positional[].

See the manpage for more options.

2. jq命令的選項解釋

jq命令的選項解釋

-c               緊湊而不是漂亮的輸出;
-n               使用`null`作為單個輸入值;
-e               根據輸出設置退出狀態代碼;
-s               將所有輸入讀取（吸取）到數組中；應用過濾器;
-r               輸出原始字符串，而不是JSON文本;
-R               讀取原始字符串，而不是JSON文本;
-C               為JSON著色;
-M               單色（不要為JSON著色）;
-S               在輸出上排序對象的鍵;
--tab            使用制表符進行縮進;
--arg a v        將變量$a設置為value<v>;
--argjson a v    將變量$a設置為JSON value<v>;
--slurpfile a f  將變量$a設置為從<f>讀取的JSON文本數組;
--rawfile a f    將變量$a設置為包含<f>內容的字符串;
--args           其余參數是字符串參數，而不是文件;
--jsonargs       其余的參數是JSON參數，而不是文件;
--               終止參數處理;

四、jq命令的基本使用

1. 顯示json文件的所有的key

• 查看當前測試name.json文件內容

[root@jeven ~]# cat name.json 
{
   "name": "John",
   "age": 30,
   "city": "New York",
   "hobbies": ["reading", "running", "traveling"],
   "education": {
      "degree": "Master's",
      "major": "Computer Science",
      "school": "University of California"
   }
}

顯示json文件的所有的key

[root@jeven ~]# jq keys name.json 
[
  "age",
  "city",
  "education",
  "hobbies",
  "name"
]

2. 顯示key對應的值

• 顯示某個key對應的值

[root@jeven ~]# jq .hobbies  name.json 
[
  "reading",
  "running",
  "traveling"
]

• 顯示所有key對應的值

[root@jeven ~]# jq .[] name.json 
"John"
"30"
"New York"
[
  "reading",
  "running",
  "traveling"
]
{
  "degree": "Master's",
  "major": "Computer Science",
  "school": "University of California"
}

3. 查詢json文件

查詢json文件內容

[root@jeven ~]# cat name.json  |jq 
{
  "name": "John",
  "age": 30,
  "city": "New York",
  "hobbies": [
    "reading",
    "running",
    "traveling"
  ],
  "education": {
    "degree": "Master's",
    "major": "Computer Science",
    "school": "University of California"
  }
}

4. 計算值的長度

計算name.json文件中值的長度

[root@jeven ~]# jq '.[] | length' name.json 
4
2
8
3
3

5. 輸出美觀的格式

[root@jeven ~]# echo '{ "jven": { "aa": { "bb": 123 } } }' | jq '.'
{
  "jven": {
    "aa": {
      "bb": 123
    }
  }
}

6. 過濾json文件中的鍵值

在json文件中所有值中進行過濾內容。

jQuery.noConflict;
//開始使用jQuery
jQuery("div p").hide;
//使用其他庫的 $
$("content").style.display= 'none';