KuoqiJS 演示站点

远程引用

CDN / 远程部署地址

部署 assets/ 目录到服务器后使用以下路径引入：

JS <script src="https://js.kuoqps.com/kq.1.14/kq.js"></script>

完整引入示例：


<script src="https://js.kuoqps.com/kq.1.14/kq.js"></script>

演示模块

◆

DOM 选择器 & 操作

选择器、遍历、内容操作、CSS、类操作、属性操作

⚙

事件系统

on/off/trigger、事件委托、快捷事件、自定义事件

⇄

AJAX & 数据请求

ajax/get/post/JSONP、表单提交、文件上传

★

动画系统

animate、缓动、队列、3D 动画、旋转、控制

■

Card / 弹窗

卡片弹窗、Alert、Confirm、Msg/Toast、Process

✎

表单 & 验证

Formitem 验证、Choose 选择器、Loadpage 滚动加载

◎

Canvas 绘图

基本图形、路径、贝塞尔、渐变、齿轮、图像处理

☰

图表

折线图、饼图/环形图、数据更新、动画

⚙

工具函数

类型判断、字符串、日期、验证、Cookie/Storage、平台检测

📅

日期 & 时间

日期格式化、日期差、相对时间、日期加减

⇪

文件上传

Uploader 切片上传、Proxy 上传、FileReader

♾

自定义事件 & evt

eventCustom、拖拽、缩放、手势事件

📖

KuoqiJS 技能书

完整 API 参考 · 参数说明 · 代码示例 · 可下载

KuoqiJS v1.14 API 参考

$Q() 核心选择器

$Q(selector, context) CSS 选择器查询

$Q(domElement) 包装原生 DOM

$Q(htmlString) 创建 DOM 元素

$Q(function) DOMContentLoaded 简写

扩展伪类：:first / :last / :eq(n) / :gt(n) / :lt(n) / :even / :odd / :contains(text) / :has(sel) / :header / :input / :visible / :hidden 等

DOM 遍历

.find(sel) 查找后代

.children(sel) 直接子元素

.parent() 父元素

.parents(sel) 所有祖先

.siblings(sel) 兄弟元素

.next() / .prev() 下一个/上一个

.closest(sel) 最近匹配祖先

.filter(sel) / .not(sel) 过滤/排除

.eq(n) / .first() / .last() 按索引取

.each(fn) / .map(fn) 遍历

内容 & 属性操作

.html() / .text() / .val() 读写内容

.append() / .prepend() 追加/前置

.before() / .after() 前后插入

.remove() / .empty() 移除/清空

.clone() / .wrap() / .unwrap() 克隆/包裹

.attr() / .prop() / .data() 属性操作

.css() / .addClass() / .removeClass() / .toggleClass() 样式操作

.width() / .height() / .offset() / .position() 尺寸与位置

事件系统

.on(types, [sel], [data], fn) 绑定事件

.off(types, [sel], fn) 移除事件

.trigger(type, data) 触发事件

.one(type, fn) 单次绑定

.hover(fnIn, fnOut) 悬停

.eventCustom(type, fn) / .evt(type, fn) 自定义/拖拽

快捷事件：click / dblclick / mousedown / mouseup / mousemove / mouseenter / mouseleave / keydown / keyup / focus / blur / change / submit / scroll / resize / contextmenu / input 等

AJAX

$Q.ajax(options) 核心 AJAX

$Q.get(url, data, success, dataType) GET 快捷

$Q.post(url, data, success, dataType) POST 快捷

$Q.getJSON(url, data, success) JSON 快捷

$Q.ajaxSubmit(form, options) 表单提交

$Q.ajaxConts(url, target) 加载内容

UI 组件

$Q.ui.card(options) 弹窗卡片

$Q.ui.alert(text, cb) 警告框

$Q.ui.confirm(text, cb) 确认框

$Q.ui.msg(text, type, time) 消息提示

$Q.ui.toast(text, time) 轻提示

$Q.ui.process.show/hide/title 加载中

new $Q.Formitem(el, opts) 表单验证

new $Q.Choose(el, opts) 选择器

new $Q.Loadpage(el, opts) 滚动加载

Canvas 绘图

$Q.canvas(element) 初始化

.line() / .circle() / .rect() / .polygon() 基本图形

.gear(x, y, r, teeth, color, fill) 齿轮

.text(text, x, y, color, size, align) 文字

.gradient(x1,y1,x2,y2,colors) 渐变

.bezier() / .quadratic() 贝塞尔曲线

.image(img, x, y, w, h) 图像

new $Q.h5() H5 动画引擎

.animate(fn).run()/.stop()/.pause()/.resume() 动画控制

图表

new $Q.broken(el, opts) 折线图

new $Q.chartPie(el, opts) 饼图

.render() / .update(data) / .destroy() 渲染/更新/销毁

动画

.animate(props, duration, easing, cb) CSS 动画

.animateRotate(angle, duration, cb) 旋转动画

.animate3D(options) 3D 动画

.animateStop() / .animatePause() / .animateResume() / .animateFinish() 动画控制

工具函数

$Q.type() / .isArray() / .isFunction() / .isPlainObject() 类型判断

$Q.strTohump() / .strTolower() / .base64Encode() / .md5() 字符串

$Q.random() / .createID() / .guid() 数字/ID

$Q.validata.phone/email/idCard/url/number 验证

$Q.date(format, timestamp) 日期格式化

$Q.date.diff() / .add() / .startOf() / .endOf() / .formatRelative() 日期计算

$Q.cookie() / .localStorage / .sessionStorage 存储

$Q.isMobile() / .isWX() / .browser() / .os() 平台检测

$Q.clipBoard(text) 剪贴板

$Q.opts() / .extend() / .merge() / .each() / .map() / .grep() / .unique() / .inArray() 对象操作

$Q.file(options) / .file.readAsDataURL() / .file.readAsText() 文件处理

new $Q.Uploader(opts) 切片上传

$Q.flow(tasks, cb) / new $Q.Loop(fn) 流程控制

KuoqiUI v1.06 样式速查

卡片体系

card-cpanel 控制面板 (.card-head + .card-body + .card-foot)

cpanel-noheadcolor 无头部背景色

cpanel-simple 简约模式

card-border 加边框

card-radius-4 4px 圆角

card-full 填满父容器

card-toggle 折叠卡片

card-image + image-16x9 图片容器（需加 wdp-100）

card-progress 进度条 (data-progress / data-total)

card-line 分割线

布局 & 间距

row / row-flex flex 行

col-3 / col-4 / col-6 / col-12 栅格列

col-sm-12 手机端全宽

col-auto / col-other 自适应/填充

mgremt-8 / mgremb-10 / pdrem-10 margin/padding

wdp-100 / wdp-60 / wdrem-5 宽度

hgp-100 / hgrem-10 高度

标签 & 按钮

label-text / label-index / label-tips / label-white / label-weight / label-larger / label-small 文字标签

btn-index / btn-index-hollow 主题色按钮

btn-small / btn-submit 尺寸

fill-white / fill-index / fill-tips 背景色

text-c / text-l / text-ch 对齐

代码约定

th/td 不直接加 label 类用 span 内嵌

card-head 内不用 label-index 用 label-white

card-head 内不用 label-larger 默认字号已最佳

card-image 必须加 wdp-100 否则宽度为 0

进度条用 card-progress 不用自定义样式

空数据提示 span.label.label-tips 居中

AJAX complete 不可靠在 success+error 中收尾

优先用框架类不写内联 style