网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

jQuery各种获取元素的方式效率比较

/**这种方式最快,因为它直接使用原生的getElementById,ByTagName 和 querySelectorAll();*/
$('#box').find('p'); 
/**jQuery会自动把这条语句转换为$('#box').find('p'),效率较最快的方式慢了5%-10%*/
$('p','#box'); 
/**
 *这条语句在jQuery内部会使用$.sibling()和javascript的nextSiblint()方法,
 *一个个的遍历结点,会比最快的方式慢50%左右
 */
$('#box').children('p'); 
/**
 *jQuery内部使用的Sizzle引擎,处理各种选择器。Sizzle引擎的选择顺序是从右到左,
 *所以这条语句的选择顺序是先选择p,然后再一个个的过滤出父元素#box,
 *这导致他比最快的方式慢了大约70%
 */
$('#box>p');
/**
 *这条语句与上面那一条是同样的情况,但是上一条选择了直接的子元素,这一条可以选择多级子元素
 *所以它的速度更加的慢,大约比最快的方式慢77%
 */
$('#box p');
/**
 *jQuery内部会将这种方式转换为$('#box').find('p'),比最快的方式慢了大约23%
 */
$('p',$('#box'));

    综上所述,最快的方式是find方式,最慢的是$('#box p')这种高级选择器方式,如果一开始可以对$('#box')进行赋值的话,效率会进一步的增加。

我们提供的服务有:成都网站制作、做网站、外贸营销网站建设、微信公众号开发、网站优化、网站认证、临淄ssl等。为上千多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的临淄网站制作公司

var box = $('#box');
var p = box.find('p');

    

    我们应该推荐使用哪种方案呢?其实,使用哪种都差不多。这里,我们推荐使用jQuery 提供的方法。 因为不但方法的速度比高级选择器运行的更快, 并且它的灵活性和扩展要高于高级选择器。使用“+”或“~”从字面上没有 next 和 nextAll 更加语义化,更加清晰,jQuery 的方法更加丰富,提供了相对的 prev 和 prevAll。毕竟 jQuery 是编程语言,需要能够灵活的拆分和组合选择器,而使用 CSS 模式过于死板。所以,如果 jQuery 提供了独立的方法来代替某些选择器的功能,我们还是推荐优先使用独立的方法。

    学习李彦恢老师的jQuery教程笔记


文章标题:jQuery各种获取元素的方式效率比较
网页路径:http://bjjierui.cn/article/jpcios.html

其他资讯