查询对象(Z.Query):
Z.Query是设计成类似jQuery的DOM操作类。Z.Query采用HTML5原生的document.querySelectorAll实现了大部分jQuery的API,如selector,DOM操作,事件方法,动画等。 并增加了自身的一些特性和命名,如offsetLeftBody()、focusEnd()等。
Z.Query属性
| 属性 | 说明 |
| selector | 选择器对象,支持是document、function、element、element列表、CSS3选择器、HTML文本等 |
| length | 包含顶级元素长度 |
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函数(内部操作)
| 函数 | 说明 | 举例 |
| 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函数(元素相关操作)
| 函数 | 说明 | 参数 | 参数说明 |
| 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函数(元素相关操作)
| 函数 | 说明 | 参数 | 参数说明 |
| appendTo($selector) | 将元素增加到选择器元素中 | $selector | 指定的选择器 |
| appendToPos($selector)) | 将元素增加到选择器元素中,并检查position:static标志转为position:relative | $selector | 指定的选择器 |
| append($selector) | 向选择器元素内部追加内容 | $selector | 指定的选择器 |
| remove() | 移除本身元素 | ||
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函数(样式相关操作 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函数(显示/隐藏 保留占位)
| 函数 | 说明 |
| isHidden() | 是否隐藏 |
| hidden() | 隐藏 |
| visible() | 显示 |
Z.Query函数(显示/隐藏)
| 函数 | 说明 |
| isHide() | 是否隐藏 |
| hide() | 隐藏 |
| show() | 显示,先查是否有隐藏时的缓存,如果没有查elem缺省值 |
| toggle() | 切换元素的可见状态 |
Z.Query函数(内容相关操作 text & html)
| 函数 | 说明 | 参数 | 参数说明 |
| text(text) | 设置或获取元素文本内容 | text | 指定的文本,如果未传值表示获取 |
| html(html) | 设置或获取元素innerHTML | html | 指定的HTML,如果未传值表示获取 |
| htmlx() | 获取HTML的扩展方式,对readonly、tbody等作处理 | ||
| htmlt() | 获取HTML的扩展方式,把<>转化为<> | ||
| htmls() | 获取自己本身的HTML | ||
Z.Query函数(焦点动作 focus & focusEnd & select & section)
| 函数 | 说明 |
| focus() | 设置元素获取焦点 |
| focusEnd() | 设置元素获取焦点,并移动光标到最后 |
| select() | 设置元素获取焦点,并选中文本 |
| selection() | 选中的文本内容 |
| isSelection() | 是否选中内容 |
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函数(事件相关操作)
| 函数 | 说明 | 参数 | 参数说明 |
| 事件增加删除 | |||
| 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函数(动画相关操作 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指针 |