ziqim/zhiqim_ui/document/tutorial/uim/js/query.htm

<#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")}

<!--容器开始 -->
<div id="container" class="container">

${zhiqim_com_container_ui("ZmUI", "js", "query")}

<!--主体-->
<div id="mainbody" class="mainbody">

${zhiqim_com_breadcrumb("UI", "ZmUI", "全局JS定义", "查询对象")}

<!-- content开始 -->
<div id="mobileUI_content" class="content">

<!-- 左侧详情 -->
<div class="mobileUI-left">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
    <p class="z-text-blue">查询对象（Z.Query）：</p>
    <p class="z-color-333" style="text-indent:38px;">
        Z.Query是设计成类似jQuery的DOM操作类。Z.Query采用HTML5原生的document.querySelectorAll实现了大部分jQuery的API，如selector，DOM操作，事件方法，动画等。
        并增加了自身的一些特性和命名，如offsetLeftBody()、focusEnd()等。
    </p>
</div>

<#-- Z.Query属性 -->
<div class="tutorial title">Z.Query属性</div>

<table class="z-table z-bordered z-pd10 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="30%">属性</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td class="z-samp">selector</td>
    <td>选择器对象，支持是document、function、element、element列表、CSS3选择器、HTML文本等</td>
</tr>
<tr>
    <td class="z-samp">length</td>
    <td>包含顶级元素长度</td>
</tr>
</table>

<#-- Z.Query选择器 -->
<div class="tutorial title">Z.Query选择器</div>

<table class="z-table z-bordered z-pd10 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="30%">选择器</td>
    <td width="30%">举例</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td colspan="3" class="z-bg-cyan">空参数选择器</td>
</tr>
<tr>
    <td>空参数</td>
    <td class="z-samp">Z(""), Z(null), Z(undefined)</td>
    <td>未选择任何元素</td>
</tr>
<tr>
    <td colspan="3" class="z-bg-cyan">元素参数选择器</td>
</tr>
<tr>
    <td class="z-samp">document</td>
    <td class="z-samp">Z(document)</td>
    <td>选择document</td>
</tr>
<tr>
    <td class="z-samp">element</td>
    <td class="z-samp">Z(element)</td>
    <td>选择元素对象</td>
</tr>
<tr>
    <td colspan="3" class="z-bg-cyan">函数参数选择器</td>
</tr>
<tr>
    <td class="z-samp">function</td>
    <td class="z-samp">Z(function(){})</td>
    <td>初始化调用函数，相关于Z.onload(function(){})</td>
</tr>
<tr>
    <td colspan="3" class="z-bg-cyan">数组参数选择器</td>
</tr>
<tr>
    <td class="z-samp">Z.Query</td>
    <td class="z-samp">Z(Z.Query)</td>
    <td>选择另一个查询对象</td>
</tr>
<tr>
    <td class="z-samp">Array</td>
    <td class="z-samp">Z(Array)</td>
    <td>选择元素数组</td>
</tr>
<tr>
    <td class="z-samp">HTMLCollection</td>
    <td class="z-samp">Z(HTMLCollection)</td>
    <td>选择元素集合</td>
</tr>
<tr>
    <td class="z-samp">NodeList</td>
    <td class="z-samp">Z(NodeList)</td>
    <td>选择元素列表</td>
</tr>
<tr>
    <td colspan="3" class="z-bg-cyan">字符串选择器</td>
</tr>
<tr>
    <td class="z-samp">body</td>
    <td class="z-samp">Z("body")</td>
    <td>选择document.body</td>
</tr>
<tr>
    <td class="z-samp">&lt;tag&gt;</td>
    <td class="z-samp">Z("&lt;div&gt;"),Z("&lt;INPUT&gt;")</td>
    <td>选择HTML标签列表</td>
</tr>
<tr>
    <td class="z-samp">HTML</td>
    <td class="z-samp">Z("&lt;div&gt;abc&lt;/div&gt;")</td>
    <td>选择一段HTML文本，并封装成元素列表</td>
</tr>
<tr>
    <td colspan="3" class="z-bg-cyan">字符串的CSS选择器</td>
</tr>
<tr>
    <td class="z-samp">.class</td>
    <td class="z-samp">Z(".abc")</td>
    <td>选择 class="abc" 的所有元素</td>
</tr>
<tr>
    <td class="z-samp">#id</td>
    <td class="z-samp">Z("#zhiqim")</td>
    <td>选择 id=&quot;zhiqim&quot; 的所有元素。</td>
</tr>
<tr>
    <td class="z-samp">*</td>
    <td class="z-samp">Z("*")</td>
    <td>选择所有元素</td>
</tr>
<tr>
    <td class="z-samp">tag</td>
    <td class="z-samp">Z("p")</td>
    <td>选择所有 &lt;p&gt; 元素</td>
</tr>
<tr>
    <td class="z-samp">tag,tag</td>
    <td class="z-samp">Z("div,p")</td>
    <td>选择所有 &lt;div&gt; 元素和所有 &lt;p&gt; 元素</td>
</tr>
<tr>
    <td class="z-samp">tag tag</td>
    <td class="z-samp">Z("div p")</td>
    <td>选择 &lt;div&gt; 元素的子孙 &lt;p&gt; 元素</td>
</tr>
<tr>
    <td class="z-samp">tag&gt;tag</td>
    <td class="z-samp">Z("div&gt;p")</td>
    <td>选择 &lt;div&gt; 元素的子 &lt;p&gt; 元素</td>
</tr>
<tr>
    <td class="z-samp">tag+tag</td>
    <td class="z-samp">Z("div+p")</td>
    <td>选择 &lt;div&gt; 元素同级之后的所有 &lt;p&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">[attribute]</td>
    <td class="z-samp">Z("[target]")</td>
    <td>选择带有 target 属性所有元素</td>
</tr>
<tr>
    <td class="z-samp">[attribute=value]</td>
    <td class="z-samp">Z("[target=_blank]")</td>
    <td>选择 target=&quot;_blank&quot; 的所有元素。</td>
</tr>
<tr>
    <td class="z-samp">[attribute~=value]</td>
    <td class="z-samp">Z("[title~=flower]")</td>
    <td>选择 title 属性包含单词 &quot;flower&quot; 的所有元素。</td>
</tr>
<tr>
    <td class="z-samp">[attribute|=value]</td>
    <td class="z-samp">Z("[lang|=en]")</td>
    <td>选择 lang 属性值以 &quot;en&quot; 开头的所有元素。</td>
</tr>
<tr>
    <td class="z-samp">:link</td>
    <td class="z-samp">Z("a:link")</td>
    <td>选择所有未被访问的链接。</td>
</tr>
<tr>
    <td class="z-samp">:visited</td>
    <td class="z-samp">Z("a:visited")</td>
    <td>选择所有已被访问的链接。</td>
</tr>
<tr>
    <td class="z-samp">:active</td>
    <td class="z-samp">Z("a:active")</td>
    <td>选择活动链接。</td>
</tr>
<tr>
    <td class="z-samp">:hover</td>
    <td class="z-samp">Z("a:hover")</td>
    <td>选择鼠标指针位于其上的链接。</td>
</tr>
<tr>
    <td class="z-samp">:focus</td>
    <td class="z-samp">Z("input:focus")</td>
    <td>选择获得焦点的 input 元素。</td>
</tr>
<tr>
    <td class="z-samp">:first-letter</td>
    <td class="z-samp">Z("p:first-letter")</td>
    <td>选择每个 &lt;p&gt; 元素的首字母。</td>
</tr>
<tr>
    <td class="z-samp">:first-line</td>
    <td class="z-samp">Z("p:first-line")</td>
    <td>选择每个 &lt;p&gt; 元素的首行。</td>
</tr>
<tr>
    <td class="z-samp">:first-child</td>
    <td class="z-samp">Z("p:first-child")</td>
    <td>选择属于父元素的第一个子元素的每个 &lt;p&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">:before</td>
    <td class="z-samp">Z("p:before")</td>
    <td>在每个 &lt;p&gt; 元素的内容之前插入内容。</td>
</tr>
<tr>
    <td class="z-samp">:after</td>
    <td class="z-samp">Z("p:after")</td>
    <td>在每个 &lt;p&gt; 元素的内容之后插入内容。</td>
</tr>
<tr>
    <td class="z-samp">:lang(language)</td>
    <td class="z-samp">Z("p:lang(it)")</td>
    <td>选择带有以 &quot;it&quot; 开头的 lang 属性值的每个 &lt;p&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">element1~element2</td>
    <td class="z-samp">Z("p~ul")</td>
    <td>选择前面有 &lt;p&gt; 元素的每个 &lt;ul&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">[attribute^=value]</td>
    <td class="z-samp">Z("a[src^=&quot;https&quot;]")</td>
    <td>选择其 src 属性值以 &quot;https&quot; 开头的每个 &lt;a&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">[attribute$=value]</td>
    <td class="z-samp">Z("a[src$=&quot;.pdf&quot;]")</td>
    <td>选择其 src 属性以 &quot;.pdf&quot; 结尾的所有 &lt;a&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">[attribute*=value]</td>
    <td class="z-samp">Z("a[src*=&quot;abc&quot;]")</td>
    <td>选择其 src 属性中包含 &quot;abc&quot; 子串的每个 &lt;a&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">:first-oz-type</td>
    <td class="z-samp">Z("p:first-oz-type")</td>
    <td>选择属于其父元素的首个 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">:last-oz-type</td>
    <td class="z-samp">Z("p:last-oz-type")</td>
    <td>选择属于其父元素的最后 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">:only-oz-type</td>
    <td class="z-samp">Z("p:only-oz-type")</td>
    <td>选择属于其父元素唯一的 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">:only-child</td>
    <td class="z-samp">Z("p:only-child")</td>
    <td>选择属于其父元素的唯一子元素的每个 &lt;p&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">:nth-child(n)</td>
    <td class="z-samp">Z("p:nth-child(2)")</td>
    <td>选择属于其父元素的第二个子元素的每个 &lt;p&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">:nth-last-child(n)</td>
    <td class="z-samp">Z("p:nth-last-child(2)")</td>
    <td>同上，从最后一个子元素开始计数。</td>
</tr>
<tr>
    <td class="z-samp">:nth-oz-type(n)</td>
    <td class="z-samp">Z("p:nth-oz-type(2)")</td>
    <td>选择属于其父元素第二个 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">:nth-last-oz-type(n)</td>
    <td class="z-samp">Z("p:nth-last-oz-type(2)")</td>
    <td>同上，但是从最后一个子元素开始计数。</td>
</tr>
<tr>
    <td class="z-samp">:last-child</td>
    <td class="z-samp">Z("p:last-child")</td>
    <td>选择属于其父元素最后一个子元素每个 &lt;p&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">:root</td>
    <td class="z-samp">Z(":root")</td>
    <td>选择文档的根元素。</td>
</tr>
<tr>
    <td class="z-samp">:empty</td>
    <td class="z-samp">Z("p:empty")</td>
    <td>选择没有子元素的每个 &lt;p&gt; 元素（包括文本节点）。</td>
</tr>
<tr>
    <td class="z-samp">:target</td>
    <td>Z("#zhiqim:target")</td>
    <td>选择当前活动的 #zhiqim 元素。</td>
</tr>
<tr>
    <td class="z-samp">:enabled</td>
    <td class="z-samp">Z("input:enabled")</td>
    <td>选择每个启用的 &lt;input&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">:disabled</td>
    <td class="z-samp">Z("input:disabled")</td>
    <td>选择每个禁用的 &lt;input&gt; 元素</td>
</tr>

<tr>
    <td class="z-samp">:checked</td>
    <td class="z-samp">Z("input:checked")</td>
    <td>选择每个被选中的 &lt;input&gt; 元素。</td>
</tr>
<tr>
    <td class="z-samp">:not(selector)</td>
    <td class="z-samp">Z(":not(p)")</td>
    <td>选择非 &lt;p&gt; 元素的每个元素。</td>
</tr>
<tr>
    <td class="z-samp">::selection</td>
    <td class="z-samp">Z("::selection")</td>
    <td>选择被用户选取的元素部分。</td>
</tr>
</table>

<#-- Z.Query函数（内部操作） -->
<div class="tutorial title">Z.Query函数（内部操作）</div>

<table class="z-table z-bordered z-pd10 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="30%">函数</td>
    <td width="30%">说明</td>
    <td width="*">举例</td>
</tr>
<tr>
    <td class="z-samp">size()</td>
    <td>返回长度，同length，无参数</td>
    <td class="z-samp"><pre>Z(".abc").size()</pre></td>
</tr>
<tr>
    <td class="z-samp">each(callback)<br>each(callback, param)</td>
    <td>
        循环处理，支持多参数，其中第一个参数回调函数，后面的参数为回调函数的参数<br><br>
        回调函数中和一个参数为elem，第二参数为i，第三参数开始和each的第二参数开始匹配
    </td>
    <td>
    <pre>
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);
    </pre></td>
</tr>
</table>

<#-- Z.Query函数（元素相关操作） -->
<div class="tutorial title">Z.Query函数（元素相关操作）</div>

<table class="z-table z-bordered z-pd10 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="30%">函数</td>
    <td width="30%">说明</td>
    <td width="10%">参数</td>
    <td width="*">参数说明</td>
</tr>
<tr>
    <td class="z-samp">find(selector)</td>
    <td>在当前Z.Query中查找子元素</td>
    <td class="z-samp">selector</td>
    <td>指定的选择器</td>
</tr>
<tr>
    <td class="z-samp">parent()</td>
    <td colspan="3">返回当前Z.Query第一个元素的父元素的Z.Query</td>
</tr>
<tr>
    <td class="z-samp">siblings(selector)</td>
    <td>在当前Z.Query中兄弟节点中查找</td>
    <td class="z-samp">selector</td>
    <td>指定的选择器</td>
</tr>
<tr>
    <td class="z-samp">next(selector)</td>
    <td>在当前Z.Query后面节点中查找</td>
    <td class="z-samp">selector</td>
    <td>指定的选择器</td>
</tr>
<tr>
    <td class="z-samp">nextAll(selector)</td>
    <td>在当前Z.Query后面所有节点中查找</td>
    <td class="z-samp">selector</td>
    <td>指定的选择器</td>
</tr>
<tr>
    <td class="z-samp">prev(selector)</td>
    <td>在当前Z.Query前面节点中查找</td>
    <td class="z-samp">selector</td>
    <td>指定的选择器</td>
</tr>
<tr>
    <td class="z-samp">prevAll(selector)</td>
    <td>在当前Z.Query前面所有节点中查找</td>
    <td class="z-samp">selector</td>
    <td>指定的选择器</td>
</tr>
<tr>
    <td class="z-samp">children(selector)</td>
    <td>在当前Z.Query子元素中查找</td>
    <td class="z-samp">selector</td>
    <td>指定的选择器</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">nth(elem, selector)</td>
    <td rowspan="2">获取元素在查找器的索引号，索引号从1开始</td>
    <td class="z-samp">elem</td>
    <td>指定的元素</td>
</tr>
<tr>
    <td class="z-samp">selector</td>
    <td>指定的选择器</td>
</tr>
</table>

<#-- Z.Query函数（文档相关操作） -->
<div class="tutorial title">Z.Query函数（元素相关操作）</div>

<table class="z-table z-bordered z-pd10 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="30%">函数</td>
    <td width="30%">说明</td>
    <td width="10%">参数</td>
    <td width="*">参数说明</td>
</tr>
<tr>
    <td class="z-samp">appendTo($selector)</td>
    <td>将元素增加到选择器元素中</td>
    <td class="z-samp">$selector</td>
    <td>指定的选择器</td>
</tr>
<tr>
    <td class="z-samp">appendToPos($selector))</td>
    <td>将元素增加到选择器元素中，并检查position:static标志转为position:relative</td>
    <td class="z-samp">$selector</td>
    <td>指定的选择器</td>
</tr>
<tr>
    <td class="z-samp">append($selector)</td>
    <td>向选择器元素内部追加内容</td>
    <td class="z-samp">$selector</td>
    <td>指定的选择器</td>
</tr>
<tr>
    <td class="z-samp">remove()</td>
    <td colspan="3">移除本身元素</td>
</tr>
</table>

<#-- Z.Query函数（属性相关操作） -->
<div class="tutorial title">Z.Query函数（属性相关操作）</div>

<table class="z-table z-bordered z-pd10 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="30%">函数</td>
    <td width="30%">说明</td>
    <td width="10%">参数</td>
    <td width="*">参数说明</td>
</tr>
<tr>
    <td class="z-samp">val(values)</td>
    <td>设置或获取值</td>
    <td class="z-samp">values</td>
    <td>指定的值，支持undefinde，String，Function类型：
    1、未传值表示获取值<br>
    2、字符串表示获取属性为value的值<br>
    3、函数表示回调函数得到值，再设置到value属性中
    </td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">attr(param, param2)</td>
    <td rowspan="2">设置或获取属性值</td>
    <td class="z-samp">param</td>
    <td>参数1，支持两种：<br>
        1、字符串表示属性名称,设置或获取单个属性<br>
        2、对象属性方式，如{href:"/zhiqim.htm",target:"_blank"}表示设置多个属性<br>
    </td>
</tr>
<tr>
    <td class="z-samp">param2</td>
    <td>参数2，设置单个属性时有效<br>如：attr("href", "/zhiqim.htm")</td>
</tr>
<tr>
    <td class="z-samp">removeAttr(name)</td>
    <td>移除属性</td>
    <td class="z-samp">name</td>
    <td>指定属性名称</td>
</tr>
<tr>
    <td class="z-samp">className(className)</td>
    <td>设置或获取类样式表</td>
    <td class="z-samp">className</td>
    <td>指定类样式名称列表</td>
</tr>
<tr>
    <td class="z-samp">addClass(className)</td>
    <td>增加类样式</td>
    <td class="z-samp">className</td>
    <td>指定类样式名称</td>
</tr>
<tr>
    <td class="z-samp">removeClass(className)</td>
    <td>删除类样式</td>
    <td class="z-samp">className</td>
    <td>指定类样式名称</td>
</tr>
<tr>
    <td class="z-samp">hasClass(className)</td>
    <td>判断是否有类样式</td>
    <td class="z-samp">className</td>
    <td>指定类样式名称</td>
</tr>
<tr>
    <td class="z-samp">toggleClass(className)</td>
    <td>切换类样式，如果没有则加入，有则删除</td>
    <td class="z-samp">className</td>
    <td>指定类样式名称</td>
</tr>
</table>

<#-- Z.Query函数（样式相关操作） -->
<div class="tutorial title">Z.Query函数（样式相关操作 style & css & cssNum &opacity & display）</div>

<table class="z-table z-bordered z-pd10 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="30%">函数</td>
    <td width="30%">说明</td>
    <td width="10%">参数</td>
    <td width="*">参数说明</td>
</tr>
<tr>
    <td class="z-samp">style(style)</td>
    <td>设置或获取元素的样式</td>
    <td class="z-samp">style</td>
    <td>指定样式，未传值表示获取</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">css(param, param2)</td>
    <td rowspan="2">设置或获取CSS样式</td>
    <td class="z-samp">param</td>
    <td>参数1，支持两种：<br>
        1、字符串表示样式名称,设置或获取单个样式<br>
        2、对象属性方式，如{width:100,height:100}表示设置多个CSS样式<br>
        对象方式参数["top", "bottom", "left", "right", "width", "height", "min-width", "max-width", "min-height", "max-height", "line-height"]支持数值型的值
    </td>
</tr>
<tr>
    <td class="z-samp">param2</td>
    <td>参数2，设置单个CSS样式时有效<br>如：css("width", 100)</td>
</tr>
<tr>
    <td class="z-samp">cssNum(name)</td>
    <td>获取CSS样式的数值<br>如：width:100px得到100</td>
    <td class="z-samp">name</td>
    <td>指定样式名称</td>
</tr>
<tr>
    <td class="z-samp">opacity(param)</td>
    <td>设置或获取透明度</td>
    <td class="z-samp">param</td>
    <td>指定参数，未传值表示获取</td>
</tr>
<tr>
    <td class="z-samp">display(param)</td>
    <td>设置或获取display属性</td>
    <td class="z-samp">param</td>
    <td>指定参数，未传值表示获取</td>
</tr>
<tr>
    <td class="z-samp">inline()</td>
    <td colspan="3">文本行，相对于display:inline</td>
</tr>
<tr>
    <td class="z-samp">block()</td>
    <td colspan="3">块，相对于display:block</td>
</tr>
<tr>
    <td class="z-samp">inBlock()</td>
    <td colspan="3">行内块，相对于display:inline-block</td>
</tr>
</table>

<#-- Z.Query函数（显示/隐藏） -->
<div class="tutorial title">Z.Query函数（显示/隐藏 保留占位）</div>

<table class="z-table z-bordered z-pd10 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="30%">函数</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td class="z-samp">isHidden()</td>
    <td>是否隐藏</td>
</tr>
<tr>
    <td class="z-samp">hidden()</td>
    <td>隐藏</td>
</tr>
<tr>
    <td class="z-samp">visible()</td>
    <td>显示</td>
</tr>
</table>

<#-- Z.Query函数（显示/隐藏） -->
<div class="tutorial title">Z.Query函数（显示/隐藏）</div>

<table class="z-table z-bordered z-pd10 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="30%">函数</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td class="z-samp">isHide()</td>
    <td>是否隐藏</td>
</tr>
<tr>
    <td class="z-samp">hide()</td>
    <td>隐藏</td>
</tr>
<tr>
    <td class="z-samp">show()</td>
    <td>显示，先查是否有隐藏时的缓存，如果没有查elem缺省值</td>
</tr>
<tr>
    <td class="z-samp">toggle()</td>
    <td>切换元素的可见状态</td>
</tr>
</table>

<#-- Z.Query函数（内容相关操作） -->
<div class="tutorial title">Z.Query函数（内容相关操作 text & html）</div>

<table class="z-table z-bordered z-pd10 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="30%">函数</td>
    <td width="30%">说明</td>
    <td width="10%">参数</td>
    <td width="*">参数说明</td>
</tr>
<tr>
    <td class="z-samp">text(text)</td>
    <td>设置或获取元素文本内容</td>
    <td class="z-samp">text</td>
    <td>指定的文本，如果未传值表示获取</td>
</tr>
<tr>
    <td class="z-samp">html(html)</td>
    <td>设置或获取元素innerHTML</td>
    <td class="z-samp">html</td>
    <td>指定的HTML,如果未传值表示获取</td>
</tr>
<tr>
    <td class="z-samp">htmlx()</td>
    <td colspan="3">获取HTML的扩展方式，对readonly、tbody等作处理</td>
</tr>
<tr>
    <td class="z-samp">htmlt()</td>
    <td colspan="3">获取HTML的扩展方式，把&lt;&gt;转化为&#x26;lt;&#x26;gt;</td>
</tr>
<tr>
    <td class="z-samp">htmls()</td>
    <td colspan="3">获取自己本身的HTML</td>
</tr>
</table>

<#-- Z.Query函数（焦点选择） -->
<div class="tutorial title">Z.Query函数（焦点动作 focus & focusEnd & select & section）</div>

<table class="z-table z-bordered z-pd10 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="30%">函数</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td class="z-samp">focus()</td>
    <td>设置元素获取焦点</td>
</tr>
<tr>
    <td class="z-samp">focusEnd()</td>
    <td>设置元素获取焦点，并移动光标到最后</td>
</tr>
<tr>
    <td class="z-samp">select()</td>
    <td>设置元素获取焦点，并选中文本</td>
</tr>
<tr>
    <td class="z-samp">selection()</td>
    <td>选中的文本内容</td>
</tr>
<tr>
    <td class="z-samp">isSelection()</td>
    <td>是否选中内容</td>
</tr>
</table>

<#-- Z.Query函数（偏移相关） -->
<div class="tutorial title">Z.Query函数（偏移宽度 & 可操作宽高）</div>

<table class="z-table z-bordered z-pd10 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="30%">函数</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td class="z-samp">offsetParent()</td>
    <td>偏移父元素</td>
</tr>
<tr>
    <td class="z-samp">offsetWidth()</td>
    <td>元素偏移宽度 = style.width = border+padding+content，和style.width不同点:<br>
        1.style.width可设置百分比并返回百分比,而offsetWidth返回百分比计算的数值<br>
        2.style.width未设置返回空字符串,而offsetWidth一直返回计算的数值<br>
        3.style.width带px后缀</td>
</tr>
<tr>
    <td class="z-samp">offsetHeight()</td>
    <td>元素偏移高度 = style.height = border+padding+content</td>
</tr>
<tr>
    <td class="z-samp">offsetLeft()</td>
    <td>元素相对父元素左偏移 = style.left，火狐需除去左边框</td>
</tr>
<tr>
    <td class="z-samp">offsetTop()</td>
    <td>元素相对父元素上偏移 = style.top</td>
</tr>
<tr>
    <td class="z-samp">offsetLeftBody()</td>
    <td>元素相对body左偏移（绝对左偏移）</td>
</tr>
<tr>
    <td class="z-samp">offsetTopBody()</td>
    <td>元素相对body上偏移（绝对上偏移）</td>
</tr>
<tr>
    <td class="z-samp">clientWidth()</td>
    <td>元素可操作宽度 = padding+content</td>
</tr>
<tr>
    <td class="z-samp">clientHeight()</td>
    <td>元素可操作高度 = padding+height</td>
</tr>
<tr>
    <td class="z-samp">clientLeft()</td>
    <td>元素左边框 = style.borderLeftWidth</td>
</tr>
<tr>
    <td class="z-samp">clientTop()</td>
    <td>元素上边框 = style.borderTopWidth</td>
</tr>
<tr>
    <td class="z-samp">clientX()</td>
    <td>元素X坐标（绝对坐标）</td>
</tr>
<tr>
    <td class="z-samp">clientY()</td>
    <td>元素Y坐标（绝对坐标）</td>
</tr>
</table>

<#-- Z.Query函数（事件相关操作） -->
<div class="tutorial title">Z.Query函数（事件相关操作）</div>

<table class="z-table z-bordered z-pd10 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="30%">函数</td>
    <td width="30%">说明</td>
    <td width="10%">参数</td>
    <td width="*">参数说明</td>
</tr>
<tr>
    <td colspan="4" class="z-bg-cyan">事件增加删除</td>
</tr>
<tr>
    <td rowspan="3" class="z-samp">on($event, $function, $this)</td>
    <td rowspan="3">增加事件</td>
    <td class="z-samp">$event</td>
    <td>事件</td>
</tr>
<tr>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="3" class="z-samp">un($event, $function, $this)</td>
    <td rowspan="3">删除事件</td>
    <td class="z-samp">$event</td>
    <td>事件</td>
</tr>
<tr>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td colspan="4" class="z-bg-cyan">按键事件（三项）</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">keydown($function, $this)</td>
    <td rowspan="2">按键按下事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unkeydown($function, $this)</td>
    <td rowspan="2">删除按键按下事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">keypress($function, $this)</td>
    <td rowspan="2">按键按下字符事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unkeypress($function, $this)</td>
    <td rowspan="2">删除按键按下字符事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">keyup($function, $this)</td>
    <td rowspan="2">按键松开事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unkeyup($function, $this)</td>
    <td rowspan="2">删除按键松开事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td colspan="4" class="z-bg-cyan">点击事件（二项）</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">click($function, $this)</td>
    <td rowspan="2">鼠标点击事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unclick($function, $this)</td>
    <td rowspan="2">删除鼠标点击事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">dblclick($function, $this)</td>
    <td rowspan="2">鼠标双击事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">undblclick($function, $this)</td>
    <td rowspan="2">删除鼠标双击事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td colspan="4" class="z-bg-cyan">变更事件（二项）</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">change($function, $this)</td>
    <td rowspan="2">变更事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unchange($function, $this)</td>
    <td rowspan="2">删除变更事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">blur($function, $this)</td>
    <td rowspan="2">跳出事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unblur($function, $this)</td>
    <td rowspan="2">删除跳出事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td colspan="4" class="z-bg-cyan">鼠标事件（八项）</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">mouseenter($function, $this)</td>
    <td rowspan="2">鼠标进入事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unmouseenter($function, $this)</td>
    <td rowspan="2">删除鼠标进入事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">mouseleave($function, $this)</td>
    <td rowspan="2">鼠标离开事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unmouseleave($function, $this)</td>
    <td rowspan="2">删除鼠标离开事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">mouseover($function, $this)</td>
    <td rowspan="2">鼠标移入事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unmouseover($function, $this)</td>
    <td rowspan="2">删除鼠标移入事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">mouseout($function, $this)</td>
    <td rowspan="2">鼠标移出事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unmouseout($function, $this)</td>
    <td rowspan="2">删除鼠标移出事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">mouseup($function, $this)</td>
    <td rowspan="2">鼠标按下释放事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unmouseup($function, $this)</td>
    <td rowspan="2">删除鼠标按下释放事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">mousedown($function, $this)</td>
    <td rowspan="2">鼠标按下事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unmousedown($function, $this)</td>
    <td rowspan="2">删除鼠标按下事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">mousemove($function, $this)</td>
    <td rowspan="2">鼠标移动事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unmousemove($function, $this)</td>
    <td rowspan="2">删除鼠标移动事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">mousewheel($function, $this)</td>
    <td rowspan="2">鼠标滚轮事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unmousewheel($function, $this)</td>
    <td rowspan="2">删除鼠标滚轮事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="3" class="z-samp">hover($function1, $function2, $this)</td>
    <td rowspan="3">鼠标进入和离开事件</td>
    <td class="z-samp">$function1</td>
    <td>鼠标进入回调函数</td>
</tr>
</tr>
    <td class="z-samp">$function2</td>
    <td>鼠标离开回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="3" class="z-samp">unhover($function1, $function2, $this)</td>
    <td rowspan="3">删除鼠标进入和离开事件</td>
    <td class="z-samp">$function1</td>
    <td>鼠标进入回调函数</td>
</tr>
</tr>
    <td class="z-samp">$function2</td>
    <td>鼠标离开回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td colspan="4" class="z-bg-cyan">窗体事件（四项）</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">resize($function, $this)</td>
    <td rowspan="2">缩放事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">resize($function, $this)</td>
    <td rowspan="2">删除缩放事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">scroll($function, $this)</td>
    <td rowspan="2">滚动事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unscroll($function, $this)</td>
    <td rowspan="2">删除滚动事件</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">load($function, $this)</td>
    <td rowspan="2">加载事件，删除请使用un("unload", $function, $this)函数</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">unload($function, $this)</td>
    <td rowspan="2">卸载事件，删除请使用un("unload", $function, $this)函数</td>
    <td class="z-samp">$function</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
</table>

<#-- Z.Query函数（动画相关操作） -->
<div class="tutorial title">Z.Query函数（动画相关操作 fade & slide & drag）</div>

<table class="z-table z-bordered z-pd10 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="30%">函数</td>
    <td width="30%">说明</td>
    <td width="10%">参数</td>
    <td width="*">参数说明</td>
</tr>
<tr>
    <td rowspan="3" class="z-samp">fadeTo(duration, opacity, complete)</td>
    <td rowspan="3">淡入到指定的透明度</td>
    <td class="z-samp">duration</td>
    <td>持续时间</td>
</tr>
<tr>
    <td class="z-samp">opacity</td>
    <td>指定的透明度0－1之间</td>
</tr>
<tr>
    <td class="z-samp">complete</td>
    <td>完成后的回调函数</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">fadeIn(duration, complete)</td>
    <td rowspan="2">淡入</td>
    <td class="z-samp">duration</td>
    <td>持续时间</td>
</tr>
<tr>
    <td class="z-samp">complete</td>
    <td>完成后的回调函数</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">fadeOut(duration, complete)</td>
    <td rowspan="2">淡出</td>
    <td class="z-samp">duration</td>
    <td>持续时间</td>
</tr>
<tr>
    <td class="z-samp">complete</td>
    <td>完成后的回调函数</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">slideDown(duration, complete)</td>
    <td rowspan="2">向下滑动</td>
    <td class="z-samp">duration</td>
    <td>持续时间</td>
</tr>
<tr>
    <td class="z-samp">complete</td>
    <td>完成后的回调函数</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">slideUp(duration, complete)</td>
    <td rowspan="2">向上滑动</td>
    <td class="z-samp">duration</td>
    <td>持续时间</td>
</tr>
<tr>
    <td class="z-samp">complete</td>
    <td>完成后的回调函数</td>
</tr>
<tr>
    <td rowspan="2" class="z-samp">slideToggle(duration, complete)</td>
    <td rowspan="2">上下滑动切换</td>
    <td class="z-samp">duration</td>
    <td>持续时间</td>
</tr>
<tr>
    <td class="z-samp">complete</td>
    <td>完成后的回调函数</td>
</tr>
<tr>
    <td rowspan="3" class="z-samp">drag(param, callback, $this)</td>
    <td rowspan="3">拖拽或滑动</td>
    <td class="z-samp">param</td>
    <td>指定参数</td>
</tr>
<tr>
    <td class="z-samp">callback</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
<tr>
    <td rowspan="4" class="z-samp">dragInParent(drag, parent, callback, $this)</td>
    <td rowspan="4">拖拽或滑动</td>
    <td class="z-samp">drag</td>
    <td>无参数</td>
</tr>
<tr>
    <td class="z-samp">parent</td>
    <td>无参数</td>
</tr>
<tr>
    <td class="z-samp">callback</td>
    <td>回调函数</td>
</tr>
<tr>
    <td class="z-samp">$this</td>
    <td>回调函数this指针</td>
</tr>
</table>
</div>

<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
    <a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
    <div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
    <a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
    <div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}

<!-- content结束 -->
</div>

${zhiqim_com_chapter()}
<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>

${zhiqim_com_footer()}