CSS选择器与JS高效填表教程中的课件笔记

人亦已歌

1. 父元素>子元素
   
2. 
   
3. 祖元素 后代元素
   
4. 
   
5. 兄弟用+ span+p表示span的下一个兄弟节点
   
6. 
   
7. 连着写指向同一个元素
   
8. 
   
9. 选中多个元素用逗号
   
10. 
    
11. [title=flower]表示title的属性值为flower的元素
    
12. 
    
13. [title~=flower]title的属性值包含独立的flower 空格分割
    
14. 
    
15. [title|=flower]title的属性值的开头包含flower 独立的或横线分割的
    
16. 
    
17. [title^=flower]title的属性值的开头包含flower 开头包含即可
    
18. 
    
19. [title$=flower]title的属性值的结尾包含flower 结尾包含即可
    
20. 
    
21. p:first-child p标签的父节点下的第一个标签是p标签的元素
    
22. 
    
23. p:last-child p标签的父节点下的最后一个标签是p标签的元素
    
24. 
    
25. p:nth(6) p标签的父节点的第6个元素
    
26. 
    
27. p:nth-child(2n+1) p标签的父节点下顺序为奇数的p元素
    
28. 
    
29. p:nth-child(2n) 偶数
    
30. 
    
31. p:empty p标签对中内容为空的p元
    
32. 
    
33. p:only-child p标签的父节点下只有一个p标签的p元素
    
34. 
    
35. p>i:first-child 先定位p，再找p的子，并对子元素使用伪类过滤
    
36. 
    
37. p:first-child i 先用伪类定位p 再找p的后代元素i

复制代码

最终的演示例子

1. document.queryselectAll('#div_r>#div_rr:child(2n)>a')[0].innerText='abc'

复制代码

注意：
在动作中的标签属性值处使用手写css选择器时，不可以用索引指定获取结果伪数组中的成员。
所以手写的css选择器必须准确定位待获取元素（即：css选择器的获取结果伪数组中只有一个成员，这个成员就是待获取的元素），或者待获取的元素应处于css选择器的定位结果伪数组中的第一个成员。
在执行JS中使用时，可以直接复制console中的代码来执行。

JS高效填表演示代码
例程一：

1. var spans=document.querySelectorAll('.title-content-title');
   
2. var arr=['aa','bb','cc','dd','ee','ff'];
   
3. for(var i=0;i<spans.length;i++){
   
4.         spans[i].innerText=arr[i];
   
5. }

复制代码

例程二：

1. var spans=document.querySelectorAll('.title-content-title');
   
2. var arr=['aa','bb','cc','dd','ee','ff'];
   
3. for(var i=0;i<spans.length;i++){
   
4.         if(i==2 || i==4){
   
5.                 spans[i].innerText=arr[i];       
   
6.         }
   
7. }

复制代码

例程三：

1. var spans=document.querySelectorAll('.title-content-title');
   
2. var arr=['aa','bb','cc','dd','ee','ff'];
   
3. var m=0;
   
4. for(var i=0;i<spans.length;i++){
   
5.         if(i==2 || i==4){
   
6.                 spans[i].innerText=arr[m];
   
7.                 m++;               
   
8.         }
   
9. }

复制代码

易博中执行JS代码时只需要使用调用标签修改arr数组的成员数据即可。例如：

1. var arr=['[调用表|内容列表{字段一|假}]','[调用表|内容列表{字段二|假}]','[调用表|内容列表{字段三|假}]','[调用表|内容列表{字段四|假}]','[调用表|内容列表{字段五|假}]','[调用表|内容列表{字段六|假}]'];

复制代码