具体在代码里的表现形式
Fox.query(selector, context);selector及其类型
selector是一种选择DOM元素/集合的一种符号。它包括以下的类型:
包括通配选择符——*
类型选择符——如E { sRules }
属性选择符——它包含四种等式:
E[attr] 选择具有 attr 属性的 E
E[attr=value] 选择具有 attr 属性且属性值等于 value 的 E
E[attr~=value] 选择具有 attr 属性且属性值为一用空格分隔的字词列表,其中一个等于 value 的 E 。这里的 value 不能包含空格
E[attr|=value] 选择具有 attr 属性且属性值为一用连字符分隔的字词列表,由 value 开始的 E
E[attr^=value] 选择具有 attr 属性开始的值为value的 E
E[attr$=value] 选择具有 attr 属性结尾的值为value的 E
E[attr*=value] 选择具有 attr 属性里包含value的E
包含选择符(祖先)——如E1 E2 选择所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。
子对象选择符——如E1 > E2 选择所有作为 E1 子对象的 E2 。
ID选择符——#ID { sRules } 以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符。
类选择符——E.className { sRules } ,它是属性选择符的一种简写形式。其效果等同于E [ class ~= className ] 。
伪类选择符——E : Pseudo-Classes { sRules } JS selector里取到的伪类有如下几种: “first-child”,”last-child”, “only-child”,”nth-child”,”nth-last-child”,”first-of-type”,”last-of-type”,
“only-of-type”,”nth-of-type”,”nth-last-of-type”,”empty”,”parent”,
“not”,”enabled”,”disabled”,”checked”,”contains”
伪对象选择符。E : Pseudo-Elements { sRules } 这在JS selector里可不实现(在DOM树里无法找到)
开发完的代码已支持的selector表
*
E
E F
E > F
E + F
E ~ F
E.warning
E#myid
E:first-child
E:last-child
E:nth-child(n)
E:nth-last-child(n)
E:only-child
E:enabled
E:disabled
E:checked
E:contains(“foo”)
E:not(s)
E[foo]
E[foo="bar"]
E[foo~="bar"]
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E[foo|="bar"]
使用示例:
alert(Fox.query('div~div', document.body).length);
alert(Fox.query('div~div.aa', document.body).length);
alert(Fox.query('div span', document.body).length);
alert(Fox.query('div div', document.body).length);
alert(Fox.query('div>input[type="text"]', document.body).length);
alert(Fox.query('input[type="text"]', document.body).length);
alert(Fox.query('*[type="text"]', document.body).length);
(function nthTest() {
var arr = Fox.query('tr:nth-child(2n)');
for (var i=0; i<arr.length; i++) {
arr[i].style.background = "#eee";
}
})();总结归纳selector语法
要想写好selector,必然要熟悉selector的语法,功能。
观察selector的语法,将所有selector分为四类:
标签元素——标签就不解释了,但需要注意的是如果没有标签元素,则为选择符里的通配符。 例如这样的selector:”div .link”表示,div后裔节点中所有节点里属性className为link的元素集。
选择符——包含“通配符、类型符、属性符。”(注:属性选择符包括了”.link”这样的selector。也包括了”#id”这样的selector。)
伪类——例如:last-child,first-child等伪类。
关系符——包括:“祖先、儿子、相邻兄弟。”
总结,任意一个selector由上面所述四类构成。
以下是描述selector规则,伪正则描述。
(关系符{1}(标签元素{1})((?:属性选择符)*)(:伪类)?)+
细心些的人应该会提出这样的问题,如果给出这样的selector:document.querySelectorAll(“.link”) 应该怎么理解?
——这代表着document根元素下所有className为link的节点集合。可以等价为document.querySelectorAll(” .link”)(注意:.link前有空格)
也就是说,如果传入的selector第一个字符不是关系符,那么我们默认会认为它以空格关系符开始解析selector表达式与实现思路
总体思路:由左往右一步步的方式,在查找过程中进行节点滤重。理论实现流程:
1.从入口的参数进行解析,即document.querySelectorAll(“div.note, div.alert”)参数解析成格式化好的形式方便处理。
2.循环解析出来的单个selector,将快捷选择符转换为标准选择符。如上所述,例如将#id属性选择转成[id='id']。
3.用getElementsByTagName得到集合,再根据条件进行过滤。
4.最后除重。将所有找到的元素集合concat连接,再除重过滤。这里顺便提一下,为什么要除重,例如:document.querySelectorAll(“div a”,”div.alert a”),很明显, “div a”包含”div.alert a”,所谓除重就是求各子selector的并集。
6.之后可能会有针对不同的selector作优化或者作特殊处理。——例如nth-child、selector解析优化。
有个简单印象之后再随之实践,假设selector传入为:
Fox.query(“div.panel div[className='shadow']“);
假设HTML结构为:
<div>
<div class="panel">
<div class="sd">要找到这个节点</div>
</div>
<div>
<div>a</div>
<div>b</div>
<div>c</div>
</div>
</div>
Fox.query(selector, context);selector及其类型
selector是一种选择DOM元素/集合的一种符号。它包括以下的类型:
包括通配选择符——*
类型选择符——如E { sRules }
属性选择符——它包含四种等式:
E[attr] 选择具有 attr 属性的 E
E[attr=value] 选择具有 attr 属性且属性值等于 value 的 E
E[attr~=value] 选择具有 attr 属性且属性值为一用空格分隔的字词列表,其中一个等于 value 的 E 。这里的 value 不能包含空格
E[attr|=value] 选择具有 attr 属性且属性值为一用连字符分隔的字词列表,由 value 开始的 E
E[attr^=value] 选择具有 attr 属性开始的值为value的 E
E[attr$=value] 选择具有 attr 属性结尾的值为value的 E
E[attr*=value] 选择具有 attr 属性里包含value的E
包含选择符(祖先)——如E1 E2 选择所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。
子对象选择符——如E1 > E2 选择所有作为 E1 子对象的 E2 。
ID选择符——#ID { sRules } 以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符。
类选择符——E.className { sRules } ,它是属性选择符的一种简写形式。其效果等同于E [ class ~= className ] 。
伪类选择符——E : Pseudo-Classes { sRules } JS selector里取到的伪类有如下几种: “first-child”,”last-child”, “only-child”,”nth-child”,”nth-last-child”,”first-of-type”,”last-of-type”,
“only-of-type”,”nth-of-type”,”nth-last-of-type”,”empty”,”parent”,
“not”,”enabled”,”disabled”,”checked”,”contains”
伪对象选择符。E : Pseudo-Elements { sRules } 这在JS selector里可不实现(在DOM树里无法找到)
开发完的代码已支持的selector表
*
E
E F
E > F
E + F
E ~ F
E.warning
E#myid
E:first-child
E:last-child
E:nth-child(n)
E:nth-last-child(n)
E:only-child
E:enabled
E:disabled
E:checked
E:contains(“foo”)
E:not(s)
E[foo]
E[foo="bar"]
E[foo~="bar"]
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E[foo|="bar"]
使用示例:
alert(Fox.query('div~div', document.body).length);
alert(Fox.query('div~div.aa', document.body).length);
alert(Fox.query('div span', document.body).length);
alert(Fox.query('div div', document.body).length);
alert(Fox.query('div>input[type="text"]', document.body).length);
alert(Fox.query('input[type="text"]', document.body).length);
alert(Fox.query('*[type="text"]', document.body).length);
(function nthTest() {
var arr = Fox.query('tr:nth-child(2n)');
for (var i=0; i<arr.length; i++) {
arr[i].style.background = "#eee";
}
})();总结归纳selector语法
要想写好selector,必然要熟悉selector的语法,功能。
观察selector的语法,将所有selector分为四类:
标签元素——标签就不解释了,但需要注意的是如果没有标签元素,则为选择符里的通配符。 例如这样的selector:”div .link”表示,div后裔节点中所有节点里属性className为link的元素集。
选择符——包含“通配符、类型符、属性符。”(注:属性选择符包括了”.link”这样的selector。也包括了”#id”这样的selector。)
伪类——例如:last-child,first-child等伪类。
关系符——包括:“祖先、儿子、相邻兄弟。”
总结,任意一个selector由上面所述四类构成。
以下是描述selector规则,伪正则描述。
(关系符{1}(标签元素{1})((?:属性选择符)*)(:伪类)?)+
细心些的人应该会提出这样的问题,如果给出这样的selector:document.querySelectorAll(“.link”) 应该怎么理解?
——这代表着document根元素下所有className为link的节点集合。可以等价为document.querySelectorAll(” .link”)(注意:.link前有空格)
也就是说,如果传入的selector第一个字符不是关系符,那么我们默认会认为它以空格关系符开始解析selector表达式与实现思路
总体思路:由左往右一步步的方式,在查找过程中进行节点滤重。理论实现流程:
1.从入口的参数进行解析,即document.querySelectorAll(“div.note, div.alert”)参数解析成格式化好的形式方便处理。
2.循环解析出来的单个selector,将快捷选择符转换为标准选择符。如上所述,例如将#id属性选择转成[id='id']。
3.用getElementsByTagName得到集合,再根据条件进行过滤。
4.最后除重。将所有找到的元素集合concat连接,再除重过滤。这里顺便提一下,为什么要除重,例如:document.querySelectorAll(“div a”,”div.alert a”),很明显, “div a”包含”div.alert a”,所谓除重就是求各子selector的并集。
6.之后可能会有针对不同的selector作优化或者作特殊处理。——例如nth-child、selector解析优化。
有个简单印象之后再随之实践,假设selector传入为:
Fox.query(“div.panel div[className='shadow']“);
假设HTML结构为:
<div>
<div class="panel">
<div class="sd">要找到这个节点</div>
</div>
<div>
<div>a</div>
<div>b</div>
<div>c</div>
</div>
</div>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货