<#def title = "Z.Query 查询对象"/> <#def keyword = "Z.Query FQuery jQuery HTML5 selector"/> <#def desc = "Z.Query是设计成类似jQuery的DOM操作类。Z.Query采用HTML5原生的document.querySelectorAll实现了大部分jQuery的API，如selector，DOM操作，事件方法，动画等。并增加了自身的一些特性和命名，如offsetLeftBody()、focusEnd()等。"/> <#def prevUrl = "util.htm"/> <#def nextUrl = "../form/input.htm"/> ${zhiqim_com_head()} ${zhiqim_com_head_main()} ${zhiqim_com_head_end()} ${zhiqim_com_mobileUI_scrollJs()} ${zhiqim_com_body()} ${zhiqim_com_topnav("ui")}
${zhiqim_com_container_ui("ZmUI", "js", "query")}
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局JS定义", "查询对象")}
<#-- 标题 -->

查询对象（Z.Query）：

Z.Query是设计成类似jQuery的DOM操作类。Z.Query采用HTML5原生的document.querySelectorAll实现了大部分jQuery的API，如selector，DOM操作，事件方法，动画等。 并增加了自身的一些特性和命名，如offsetLeftBody()、focusEnd()等。

<#-- Z.Query属性 -->
Z.Query属性
属性 说明
selector 选择器对象，支持是document、function、element、element列表、CSS3选择器、HTML文本等
length 包含顶级元素长度
<#-- Z.Query选择器 -->
Z.Query选择器
选择器 举例 说明
空参数选择器
空参数 Z(""), Z(null), Z(undefined) 未选择任何元素
元素参数选择器
document Z(document) 选择document
element Z(element) 选择元素对象
函数参数选择器
function Z(function(){}) 初始化调用函数，相关于Z.onload(function(){})
数组参数选择器
Z.Query Z(Z.Query) 选择另一个查询对象
Array Z(Array) 选择元素数组
HTMLCollection Z(HTMLCollection) 选择元素集合
NodeList Z(NodeList) 选择元素列表
字符串选择器
body Z("body") 选择document.body
<tag> Z("<div>"),Z("<INPUT>") 选择HTML标签列表
HTML Z("<div>abc</div>") 选择一段HTML文本，并封装成元素列表
字符串的CSS选择器
.class Z(".abc") 选择 class="abc" 的所有元素
#id Z("#zhiqim") 选择 id="zhiqim" 的所有元素。
* Z("*") 选择所有元素
tag Z("p") 选择所有 <p> 元素
tag,tag Z("div,p") 选择所有 <div> 元素和所有 <p> 元素
tag tag Z("div p") 选择 <div> 元素的子孙 <p> 元素
tag>tag Z("div>p") 选择 <div> 元素的子 <p> 元素
tag+tag Z("div+p") 选择 <div> 元素同级之后的所有 <p> 元素。
[attribute] Z("[target]") 选择带有 target 属性所有元素
[attribute=value] Z("[target=_blank]") 选择 target="_blank" 的所有元素。
[attribute~=value] Z("[title~=flower]") 选择 title 属性包含单词 "flower" 的所有元素。
[attribute|=value] Z("[lang|=en]") 选择 lang 属性值以 "en" 开头的所有元素。
:link Z("a:link") 选择所有未被访问的链接。
:visited Z("a:visited") 选择所有已被访问的链接。
:active Z("a:active") 选择活动链接。
:hover Z("a:hover") 选择鼠标指针位于其上的链接。
:focus Z("input:focus") 选择获得焦点的 input 元素。
:first-letter Z("p:first-letter") 选择每个 <p> 元素的首字母。
:first-line Z("p:first-line") 选择每个 <p> 元素的首行。
:first-child Z("p:first-child") 选择属于父元素的第一个子元素的每个 <p> 元素。
:before Z("p:before") 在每个 <p> 元素的内容之前插入内容。
:after Z("p:after") 在每个 <p> 元素的内容之后插入内容。
:lang(language) Z("p:lang(it)") 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。
element1~element2 Z("p~ul") 选择前面有 <p> 元素的每个 <ul> 元素。
[attribute^=value] Z("a[src^="https"]") 选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value] Z("a[src$=".pdf"]") 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute*=value] Z("a[src*="abc"]") 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
:first-oz-type Z("p:first-oz-type") 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-oz-type Z("p:last-oz-type") 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-oz-type Z("p:only-oz-type") 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child Z("p:only-child") 选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n) Z("p:nth-child(2)") 选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n) Z("p:nth-last-child(2)") 同上，从最后一个子元素开始计数。
:nth-oz-type(n) Z("p:nth-oz-type(2)") 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-oz-type(n) Z("p:nth-last-oz-type(2)") 同上，但是从最后一个子元素开始计数。
:last-child Z("p:last-child") 选择属于其父元素最后一个子元素每个 <p> 元素。
:root Z(":root") 选择文档的根元素。
:empty Z("p:empty") 选择没有子元素的每个 <p> 元素（包括文本节点）。
:target Z("#zhiqim:target") 选择当前活动的 #zhiqim 元素。
:enabled Z("input:enabled") 选择每个启用的 <input> 元素。
:disabled Z("input:disabled") 选择每个禁用的 <input> 元素
:checked Z("input:checked") 选择每个被选中的 <input> 元素。
:not(selector) Z(":not(p)") 选择非 <p> 元素的每个元素。
::selection Z("::selection") 选择被用户选取的元素部分。
<#-- Z.Query函数（内部操作） -->
Z.Query函数（内部操作）
函数 说明 举例
size() 返回长度，同length，无参数 
Z(".abc").size()
each(callback)
each(callback, param)		 循环处理，支持多参数，其中第一个参数回调函数，后面的参数为回调函数的参数

回调函数中和一个参数为elem，第二参数为i，第三参数开始和each的第二参数开始匹配 
Z(".abc").each(function(elem){
    console.info(elem);
});

Z(".abc").each(function(elem, i){
    console.info(i);
});

Z(".abc").each(function(elem, i, param){
    console.info(param);
}, param);
<#-- Z.Query函数（元素相关操作） -->
Z.Query函数（元素相关操作）
函数 说明 参数 参数说明
find(selector) 在当前Z.Query中查找子元素 selector 指定的选择器
parent() 返回当前Z.Query第一个元素的父元素的Z.Query
siblings(selector) 在当前Z.Query中兄弟节点中查找 selector 指定的选择器
next(selector) 在当前Z.Query后面节点中查找 selector 指定的选择器
nextAll(selector) 在当前Z.Query后面所有节点中查找 selector 指定的选择器
prev(selector) 在当前Z.Query前面节点中查找 selector 指定的选择器
prevAll(selector) 在当前Z.Query前面所有节点中查找 selector 指定的选择器
children(selector) 在当前Z.Query子元素中查找 selector 指定的选择器
nth(elem, selector) 获取元素在查找器的索引号，索引号从1开始 elem 指定的元素
selector 指定的选择器
<#-- Z.Query函数（文档相关操作） -->
Z.Query函数（元素相关操作）
函数 说明 参数 参数说明
appendTo($selector) 将元素增加到选择器元素中 $selector 指定的选择器
appendToPos($selector)) 将元素增加到选择器元素中，并检查position:static标志转为position:relative $selector 指定的选择器
append($selector) 向选择器元素内部追加内容 $selector 指定的选择器
remove() 移除本身元素
<#-- Z.Query函数（属性相关操作） -->
Z.Query函数（属性相关操作）
函数 说明 参数 参数说明
val(values) 设置或获取值 values 指定的值，支持undefinde，String，Function类型： 1、未传值表示获取值
2、字符串表示获取属性为value的值
3、函数表示回调函数得到值，再设置到value属性中
attr(param, param2) 设置或获取属性值 param 参数1，支持两种：
1、字符串表示属性名称,设置或获取单个属性
2、对象属性方式，如{href:"/zhiqim.htm",target:"_blank"}表示设置多个属性
param2 参数2，设置单个属性时有效
如：attr("href", "/zhiqim.htm")
removeAttr(name) 移除属性 name 指定属性名称
className(className) 设置或获取类样式表 className 指定类样式名称列表
addClass(className) 增加类样式 className 指定类样式名称
removeClass(className) 删除类样式 className 指定类样式名称
hasClass(className) 判断是否有类样式 className 指定类样式名称
toggleClass(className) 切换类样式，如果没有则加入，有则删除 className 指定类样式名称
<#-- Z.Query函数（样式相关操作） -->
Z.Query函数（样式相关操作 style & css & cssNum &opacity & display）
函数 说明 参数 参数说明
style(style) 设置或获取元素的样式 style 指定样式，未传值表示获取
css(param, param2) 设置或获取CSS样式 param 参数1，支持两种：
1、字符串表示样式名称,设置或获取单个样式
2、对象属性方式，如{width:100,height:100}表示设置多个CSS样式
对象方式参数["top", "bottom", "left", "right", "width", "height", "min-width", "max-width", "min-height", "max-height", "line-height"]支持数值型的值
param2 参数2，设置单个CSS样式时有效
如：css("width", 100)
cssNum(name) 获取CSS样式的数值
如：width:100px得到100		 name 指定样式名称
opacity(param) 设置或获取透明度 param 指定参数，未传值表示获取
display(param) 设置或获取display属性 param 指定参数，未传值表示获取
inline() 文本行，相对于display:inline
block() 块，相对于display:block
inBlock() 行内块，相对于display:inline-block
<#-- Z.Query函数（显示/隐藏） -->
Z.Query函数（显示/隐藏 保留占位）
函数 说明
isHidden() 是否隐藏
hidden() 隐藏
visible() 显示
<#-- Z.Query函数（显示/隐藏） -->
Z.Query函数（显示/隐藏）
函数 说明
isHide() 是否隐藏
hide() 隐藏
show() 显示，先查是否有隐藏时的缓存，如果没有查elem缺省值
toggle() 切换元素的可见状态
<#-- Z.Query函数（内容相关操作） -->
Z.Query函数（内容相关操作 text & html）
函数 说明 参数 参数说明
text(text) 设置或获取元素文本内容 text 指定的文本，如果未传值表示获取
html(html) 设置或获取元素innerHTML html 指定的HTML,如果未传值表示获取
htmlx() 获取HTML的扩展方式，对readonly、tbody等作处理
htmlt() 获取HTML的扩展方式，把<>转化为&lt;&gt;
htmls() 获取自己本身的HTML
<#-- Z.Query函数（焦点选择） -->
Z.Query函数（焦点动作 focus & focusEnd & select & section）
函数 说明
focus() 设置元素获取焦点
focusEnd() 设置元素获取焦点，并移动光标到最后
select() 设置元素获取焦点，并选中文本
selection() 选中的文本内容
isSelection() 是否选中内容
<#-- Z.Query函数（偏移相关） -->
Z.Query函数（偏移宽度 & 可操作宽高）
函数 说明
offsetParent() 偏移父元素
offsetWidth() 元素偏移宽度 = style.width = border+padding+content，和style.width不同点:
1.style.width可设置百分比并返回百分比,而offsetWidth返回百分比计算的数值
2.style.width未设置返回空字符串,而offsetWidth一直返回计算的数值
3.style.width带px后缀
offsetHeight() 元素偏移高度 = style.height = border+padding+content
offsetLeft() 元素相对父元素左偏移 = style.left，火狐需除去左边框
offsetTop() 元素相对父元素上偏移 = style.top
offsetLeftBody() 元素相对body左偏移（绝对左偏移）
offsetTopBody() 元素相对body上偏移（绝对上偏移）
clientWidth() 元素可操作宽度 = padding+content
clientHeight() 元素可操作高度 = padding+height
clientLeft() 元素左边框 = style.borderLeftWidth
clientTop() 元素上边框 = style.borderTopWidth
clientX() 元素X坐标（绝对坐标）
clientY() 元素Y坐标（绝对坐标）
<#-- Z.Query函数（事件相关操作） -->
Z.Query函数（事件相关操作）
函数 说明 参数 参数说明
事件增加删除
on($event, $function, $this) 增加事件 $event 事件
$function 回调函数
$this 回调函数this指针
un($event, $function, $this) 删除事件 $event 事件
$function 回调函数
$this 回调函数this指针
按键事件（三项）
keydown($function, $this) 按键按下事件 $function 回调函数
$this 回调函数this指针
unkeydown($function, $this) 删除按键按下事件 $function 回调函数
$this 回调函数this指针
keypress($function, $this) 按键按下字符事件 $function 回调函数
$this 回调函数this指针
unkeypress($function, $this) 删除按键按下字符事件 $function 回调函数
$this 回调函数this指针
keyup($function, $this) 按键松开事件 $function 回调函数
$this 回调函数this指针
unkeyup($function, $this) 删除按键松开事件 $function 回调函数
$this 回调函数this指针
点击事件（二项）
click($function, $this) 鼠标点击事件 $function 回调函数
$this 回调函数this指针
unclick($function, $this) 删除鼠标点击事件 $function 回调函数
$this 回调函数this指针
dblclick($function, $this) 鼠标双击事件 $function 回调函数
$this 回调函数this指针
undblclick($function, $this) 删除鼠标双击事件 $function 回调函数
$this 回调函数this指针
变更事件（二项）
change($function, $this) 变更事件 $function 回调函数
$this 回调函数this指针
unchange($function, $this) 删除变更事件 $function 回调函数
$this 回调函数this指针
blur($function, $this) 跳出事件 $function 回调函数
$this 回调函数this指针
unblur($function, $this) 删除跳出事件 $function 回调函数
$this 回调函数this指针
鼠标事件（八项）
mouseenter($function, $this) 鼠标进入事件 $function 回调函数
$this 回调函数this指针
unmouseenter($function, $this) 删除鼠标进入事件 $function 回调函数
$this 回调函数this指针
mouseleave($function, $this) 鼠标离开事件 $function 回调函数
$this 回调函数this指针
unmouseleave($function, $this) 删除鼠标离开事件 $function 回调函数
$this 回调函数this指针
mouseover($function, $this) 鼠标移入事件 $function 回调函数
$this 回调函数this指针
unmouseover($function, $this) 删除鼠标移入事件 $function 回调函数
$this 回调函数this指针
mouseout($function, $this) 鼠标移出事件 $function 回调函数
$this 回调函数this指针
unmouseout($function, $this) 删除鼠标移出事件 $function 回调函数
$this 回调函数this指针
mouseup($function, $this) 鼠标按下释放事件 $function 回调函数
$this 回调函数this指针
unmouseup($function, $this) 删除鼠标按下释放事件 $function 回调函数
$this 回调函数this指针
mousedown($function, $this) 鼠标按下事件 $function 回调函数
$this 回调函数this指针
unmousedown($function, $this) 删除鼠标按下事件 $function 回调函数
$this 回调函数this指针
mousemove($function, $this) 鼠标移动事件 $function 回调函数
$this 回调函数this指针
unmousemove($function, $this) 删除鼠标移动事件 $function 回调函数
$this 回调函数this指针
mousewheel($function, $this) 鼠标滚轮事件 $function 回调函数
$this 回调函数this指针
unmousewheel($function, $this) 删除鼠标滚轮事件 $function 回调函数
$this 回调函数this指针
hover($function1, $function2, $this) 鼠标进入和离开事件 $function1 鼠标进入回调函数
$function2 鼠标离开回调函数
$this 回调函数this指针
unhover($function1, $function2, $this) 删除鼠标进入和离开事件 $function1 鼠标进入回调函数
$function2 鼠标离开回调函数
$this 回调函数this指针
窗体事件（四项）
resize($function, $this) 缩放事件 $function 回调函数
$this 回调函数this指针
resize($function, $this) 删除缩放事件 $function 回调函数
$this 回调函数this指针
scroll($function, $this) 滚动事件 $function 回调函数
$this 回调函数this指针
unscroll($function, $this) 删除滚动事件 $function 回调函数
$this 回调函数this指针
load($function, $this) 加载事件，删除请使用un("unload", $function, $this)函数 $function 回调函数
$this 回调函数this指针
unload($function, $this) 卸载事件，删除请使用un("unload", $function, $this)函数 $function 回调函数
$this 回调函数this指针
<#-- Z.Query函数（动画相关操作） -->
Z.Query函数（动画相关操作 fade & slide & drag）
函数 说明 参数 参数说明
fadeTo(duration, opacity, complete) 淡入到指定的透明度 duration 持续时间
opacity 指定的透明度0－1之间
complete 完成后的回调函数
fadeIn(duration, complete) 淡入 duration 持续时间
complete 完成后的回调函数
fadeOut(duration, complete) 淡出 duration 持续时间
complete 完成后的回调函数
slideDown(duration, complete) 向下滑动 duration 持续时间
complete 完成后的回调函数
slideUp(duration, complete) 向上滑动 duration 持续时间
complete 完成后的回调函数
slideToggle(duration, complete) 上下滑动切换 duration 持续时间
complete 完成后的回调函数
drag(param, callback, $this) 拖拽或滑动 param 指定参数
callback 回调函数
$this 回调函数this指针
dragInParent(drag, parent, callback, $this) 拖拽或滑动 drag 无参数
parent 无参数
callback 回调函数
$this 回调函数this指针
${zhiqim_turorial_ZmUI_demo_start()}
ZhiqimUI.mobile
文案 文案 文案 文案
这里是内容
${zhiqim_turorial_ZmUI_demo_end()}
${zhiqim_com_chapter()}
${zhiqim_com_footer()}