表单中的按钮问题、jQuery选择器优化效率问题

一、表单中有<button>一旦点击就会提交表单,要给<button>加上type=“button”属性。

二、

1.  Duplicated jQuery selector

两处使用了同一个id选择器,JQuery建议使用一个变量去存储这个选择器,而不是每次用的时候便拿来调用一下,它不会帮你做缓存,而是重新去取。可以参考StackOverflow上的回答:

https://stackoverflow.com/questions/16863844/jquery-duplicate-selector-error

2.Inefficient jQuery usage

效率不足。

参考jq选择器效率总结:

表单中的按钮问题、jQuery选择器优化效率问题

1.最好直接使用id选择器。

最快的选择器是id选择器,因为他直接会使用js原生的方法:getElementById()

表单中的按钮问题、jQuery选择器优化效率问题


2.在class前记得标签(tag),最好标出父代id

第二快的是标签选择器,因为他直接使用js原生:getElementsByTagName()

var active_light = $('#traffic_light input.on');
class选择器是jq里效率最低的之一,在IE里他会循环查找整个dom。所以这选择器能不用就不要用。

也不要在id选择器前加上tag。例如

var content = $('div#content');
因为他为了找到id为content的元素会循环查找所有div。

也不要使用两个id,这样是多余的,例如:

var traffic_light = $('#content #traffic_light');

3.缓存jq元素

如果你要使用一个元素很多次,千万不要这样:

表单中的按钮问题、jQuery选择器优化效率问题

应该这样:

表单中的按钮问题、jQuery选择器优化效率问题

如果你有一个函数想使用多次,可以使用一个全局变量缓存。例如:

表单中的按钮问题、jQuery选择器优化效率问题

4.使用链式操作

不用解释了吧

表单中的按钮问题、jQuery选择器优化效率问题

5.使用多层查找

即jq遍历方法的使用,祖先、后代、同胞的查找。

也就是.find()的使用。


6.不要直接操作dom

可以先放在变量里,再一次性塞进去。

表单中的按钮问题、jQuery选择器优化效率问题


7....之后的比较少用了,不记录了。

总:https://www.cnblogs.com/50614090/archive/2011/09/06/2168910.html