Selector 选择器
简介
虽然当前数据驱动模式大行其道,但是对于JavaScript而言,Dom选择器是他最基础的能力,虽然document.querySelector和document.querySelectorAll可以解决很多问题,但是总归没有jQuery那么方便。
jQuery让人爱不释手的重要地方之一便是他的选择器,查看其源码便知道jQuery为了创造专属选择器使用了不少代码。
本框架本着实事求是原则,根据实际需要编写了自己的选择器。
axSelector
该函数返回所选择的Dom是否包含了选择器,包括id、className或节点名称,返回true或false
完整写法:axSelector(elem, selector),可简写axSelector(elem),参数说明如下:
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- selector:可选参数,如果不填则该函数返回true;该参数可以是用英文逗号隔开的多个值,值可以是#id、.className、node节点,只要符合一个立即返回true
举例:axSelector('#demo', '.yes,div'),该例子说明#demo这个节点如果包含.yse样式或是node节点便返回true
axNot
该函数返回所选择的Dom是否未包含选择器,包括id、className或节点名称,返回true或false
完整写法:axNot(elem, selector),可简写axNot(elem),参数说明如下:
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- selector:可选参数,如果不填则该函数返回true;该参数可以是用英文逗号隔开的多个值,值可以是#id、.className、node节点,只要符合一个立即返回true
举例:axNot('#demo', '.yes,div'),该例子说明#demo这个节点如果不包含.yse样式或是node节点便返回true
axSiblings
该函数返回所选择的Dom的兄弟节点数组
完整写法:axSiblings(elem, self, selector, ignore),可简写axSiblings(elem),参数说明如下:
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- self:是否包含自己,默认为false,可选true
- selector:可选参数,符合的选择器;该参数可以是用英文逗号隔开的多个值,值可以是#id、.className、node节点
- ignore:可选参数,排除的选择器;该参数可以是用英文逗号隔开的多个值,值可以是#id、.className、node节点
举例:axSiblings('#demo',true, '.yes,div'),该例子返回#demo这个节点兄弟节点,包含自己,并且所有兄弟节点包含.yse样式或是div节点
axChildren
该函数返回所选择的Dom的子节点数组
完整写法:axChildren(elem, selector, ignore),可简写axChildren(elem),参数说明如下:
- elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- selector:可选参数,符合的选择器;该参数可以是用英文逗号隔开的多个值,值可以是#id、.className、node节点
- ignore:可选参数,排除的选择器;该参数可以是用英文逗号隔开的多个值,值可以是#id、.className、node节点
举例:axChildren('#demo','.yes,div'),该例子返回#demo这个子节点,包含自己,并且所有子节点包含.yse样式或是div节点
axParents
该函数返回某节点的所有父节点数组(body以下)
完整写法:axParents(start, end, containStart, containEnd),可简写axParents(start),参数说明如下:
- start:必填参数,可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- end:可选参数,可以填"#id"、".className"、"div"等原生选择器以及Dom对象
- containStart:可选参数,是否包含start节点,默认为false,可填true
- containEnd:可选参数,是否包含end节点,默认为false,可填true
举例:axParents('#demo','#outer',true,false),该例子返回#demo这个子节点到#outer的父节点,包含#demo但是不包含#outer