高效使用jQuery之选择器

Posted 2020-07-02

1   javascript和jQuery在选择id元素时是异曲同工的，但是从执行效率上面来讲，差距很大。由于jQuery需要对参数串进行解析配出是id值后再调用getElementById（）方法获取该id元素，所以花费时间更长！所以应当积极使用JavaScript原生的get**（）方法，即使在复杂的环境下嵌入使用getelementtagname（）也比$()方法来说效率要快！

2 层级选择器中，包含选择器，子选择器，兄弟选择器，相邻选择器。

第一类 结构上讲属于内部结构

  包含选择器和子选择器选择部分重合，但是包含选择还包括选择部分的嵌套内；

第二类 同级结构选择

   相邻选择器和兄弟选择器，显然兄弟选择器匹配更多元素。

3 看过一些书上说多使用id选择器，但是前面看过的html5书籍说过应该尽量少的使用id，不便于维护，很纠结的问题（一个解决方法是在父级元素添加一个id选择器）。

4少直接使用class选择器，因为每次使用同都需要遍历一次文档，可以使用复合选择器tag.class。

5少使用嵌套关系多使用父子关系 parent>child 代替parent child，只从子节点匹配，不需要递归，后代选择器递归所有子节点还有儿子的儿子（为什么不直接说孙子）。

6缓存jQuery对，

   {  for（i=0;i<100;i++）

        {    var mylisy=$("mylist");

               mylist.append(i);

         }

}

使用下面的方法效率更高  

var mylist=$("mylist");

for (*******)

      mylist.append(i);