CSS选择器与JS高效填表教程中的课件笔记
父元素>子元素祖元素 后代元素
兄弟用+ span+p表示span的下一个兄弟节点
连着写指向同一个元素
选中多个元素用逗号
表示title的属性值为flower的元素
title的属性值包含独立的flower 空格分割
title的属性值的开头包含flower 独立的或横线分割的
title的属性值的开头包含flower 开头包含即可
title的属性值的结尾包含flower 结尾包含即可
p:first-child p标签的父节点下的第一个标签是p标签的元素
p:last-child p标签的父节点下的最后一个标签是p标签的元素
p:nth(6) p标签的父节点的第6个元素
p:nth-child(2n+1) p标签的父节点下顺序为奇数的p元素
p:nth-child(2n) 偶数
p:empty p标签对中内容为空的p元
p:only-child p标签的父节点下只有一个p标签的p元素
p>i:first-child 先定位p，再找p的子，并对子元素使用伪类过滤
p:first-child i 先用伪类定位p 再找p的后代元素i
最终的演示例子
document.queryselectAll('#div_r>#div_rr:child(2n)>a').innerText='abc'
注意：
在动作中的标签属性值处使用手写css选择器时，不可以用索引指定获取结果伪数组中的成员。
所以手写的css选择器必须准确定位待获取元素（即：css选择器的获取结果伪数组中只有一个成员，这个成员就是待获取的元素），或者待获取的元素应处于css选择器的定位结果伪数组中的第一个成员。
在执行JS中使用时，可以直接复制console中的代码来执行。
JS高效填表演示代码
例程一：
var spans=document.querySelectorAll('.title-content-title');
var arr=['aa','bb','cc','dd','ee','ff'];
for(var i=0;i<spans.length;i++){
spans.innerText=arr;
}
例程二：
var spans=document.querySelectorAll('.title-content-title');
var arr=['aa','bb','cc','dd','ee','ff'];
for(var i=0;i<spans.length;i++){
if(i==2 || i==4){
spans.innerText=arr;
}
}
例程三：
var spans=document.querySelectorAll('.title-content-title');
var arr=['aa','bb','cc','dd','ee','ff'];
var m=0;
for(var i=0;i<spans.length;i++){
if(i==2 || i==4){
spans.innerText=arr;
m++;
}
}
易博中执行JS代码时只需要使用调用标签修改arr数组的成员数据即可。例如：
var arr=['[调用表|内容列表{字段一|假}]','[调用表|内容列表{字段二|假}]','[调用表|内容列表{字段三|假}]','[调用表|内容列表{字段四|假}]','[调用表|内容列表{字段五|假}]','[调用表|内容列表{字段六|假}]'];
页:
[1]