到处都是jQuery选择器的年代 不了解它们的性能，行吗

最近，我就对jQuery的选择器使用做了一些个小小的实验，用来说明jQuery的不同选择器在不同的情况下，哪个效率更高，更值得使用。

先在每个测试页面的head中引入google提供的jquery文件和用于测试的小插件firejspt。


代码如下:

<!-- 引入FireJSPT的库文件 -->
<script type="text/javascript" src="firejspt.js"></script>
<!-- 引入google提供的1.44版的jQuery的库文件，其实哪个版本都无所谓了，呵呵 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

1. 最常用的id选择器和class选择器
将以下代码复制200次，置于body标签内。


代码如下:

<div id="ilian">比较id选择器和class选择器</div>
<div class="ilian">比较id选择器和class选择器</div>

用于本次测试的JS代码如下：


代码如下:

function ilianTest01(){
$('#ilian').click(function() { alert('Hello World'); });
}

function ilianTest02(){
$('.ilian').click(function() { alert('Hello World'); });
}

/*调用2个函数进行测试*/
$(function(){
jspt.test(function(){ ilianTest01(); });
jspt.test(function(){ ilianTest02(); });
});

测试结果如下：

由图可以id选择器相比于class选择器的效率优势是非常地。。。。。

2. 在选择标签时，层级选择器用得也非常频繁，这次对比测试直接子标签符号“>”和children。

将以下代码放入body标签内，并将其中的li标签复制500次。


代码如下:

<ul id="ilian">
<li>比较直接子标签符号“>”和children</li>
<li>比较直接子标签符号“>”和children</li>
<li>比较直接子标签符号“>”和children</li>
<!-- 省略497次 -->
</ul>

用于本次测试的JS代码如下：


代码如下:

function ilianTest01(){
$('#ilian > li').click(function() { alert('Hello World'); });
}

function ilianTest02(){
$('#ilian').children('li').click(function() { alert('Hello World'); });
}

/*调用2个函数进行测试*/
$(function(){
jspt.test(function(){ ilianTest01(); });
jspt.test(function(){ ilianTest02(); });
});

测试结果：

由此可见children选择器要优于直接子标签符号选择器。
限于文章长度，本文只展示了最基本的测试，且以上测试，均是在简单环境中测试的，测试效果并不代表绝对的结论。

赞 (0)

相关推荐

  • js+jquery常用知识点汇总

    js+jquery常用知识点汇总

    一.jquery源码中常见的知识点 1.string,number类型转换的快捷方法 复制代码 代码如下: // @param s为字符串,n为数字 function fn(obj){     //转换为String类型     var s = obj +"";     //转换为number类型     var n = +obj; } 分享一个面试例子: //加会将其后面自动转换成字符串 "64"+4="644" //减会将其自动转换成数字 &

  • jQuery操作表格（table）的常用方法、技巧汇总

    以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色 复制代码 代码如下: $('#table1 tr').hover(function(){    $(this).children('td').addClass('hover')}, function(){    $(this).children('td').removeClass('hover')}); 方法二: 复制代码 代码如下: $("#table1 tr:gt(0)").hover(function()

  • jquery each的几种常用的使用方法示例

    jQuery源码里自己也有很多用到each方法.其实jQuery里的each方法是通过js里的call方法来实现的.下面简单介绍一下call方法. call这个方法很奇妙,其实官方的说明是:"调用一个对象的一个方法,以另一个对象替换当前对象."网上更多的解释是变换上下文环境,也有说是改变上下文this指针. 复制代码 代码如下: call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 参数 thisObj  可选项.将被用作当前对象的对象.arg1,

  • jQuery中大家不太了解的几个方法

    jQuery近些年来仍旧是web开发中最受欢迎的类库,虽然大家褒贬不一,但是仍旧不失为一款最流行的Javascript, 在事件中return false 可能大家在编写事件相关代码的时候,有时候会使用return false语句,代码如下: 复制代码 代码如下: $("a").click(function() {    $(".gbtags").toggle();    return false; } 以上代码中,我们点击a元素,如果不return false,会

  • jQuery动态创建html元素的常用方法汇总

    jQuery动态创建html元素的常用方法汇总

    本文实例讲述了jQuery动态创建html元素的常用方法,在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到数组中,再遍历数组动态创建html元素 3.使用模版 1.使用jQuery动态创建元素追加到jQuery对象上. <meta http-equiv="Content-Type" content="text/html;

  • Jquery 常用方法经典总结

    1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.ge

  • jquery和javascript的区别(常用方法比较)

    jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单.人家怎么说的来着,jquery就是要用更少的代码,漂亮的完成更多的功能.JavaScript 与JQuery 常用方法比较 1.加载DOM区别 JavaScript: window.onload function first(){ alert('first'); } function second(){ alert('second'); } window.onload = first; window

  • 常用的JQuery数字类型验证正则表达式整理

    复制代码 代码如下: var regexEnum = { intege:"^-?[1-9]//d*$", //整数 intege1:"^[1-9]//d*$", //正整数 intege2:"^-[1-9]//d*$", //负整数 num:"^([+-]?)//d*//.?//d+$", //数字 num1:"^([1-9]//d*|0)$", //正数(正整数 + 0) num2:"^-[1-

  • 到处都是jQuery选择器的年代 不了解它们的性能，行吗

    到处都是jQuery选择器的年代 不了解它们的性能，行吗

    最近,我就对jQuery的选择器使用做了一些个小小的实验,用来说明jQuery的不同选择器在不同的情况下,哪个效率更高,更值得使用. 先在每个测试页面的head中引入google提供的jquery文件和用于测试的小插件firejspt. 复制代码 代码如下: <!-- 引入FireJSPT的库文件 --> <script type="text/javascript" src="firejspt.js"></script> <

  • jQuery选择器全集详解

    jQuery选择器全集详解

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率.本文配合截图.代码和简单的概括对所有jQuery选择器进行 了介绍,也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(fu

  • JQuery 选择器、过滤器介绍

    JQuery 选择器、过滤器介绍

    今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰.JQuery原则:"write less, do more.",这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化.老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训.经过多年的总结,他已经有自己一套成熟的教学方式.这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~ 从学习JavaWEB.Struts

  • jquery选择器大全 全面详解jquery选择器

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点:1．简化代码的编写2．隐式迭代3．无须判断对象是否存在其中"$"是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的.如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式.现在我们正式进入j

  • jQuery 选择器项目实例分析及实现代码

    jQuery 选择器项目实例分析及实现代码

    首先废话一句,jQuery选择器真心很强大! 在项目中遇到这么一个问题easyui的问题  如图所示,当前页面显示的是"原始报文查询"的页面,当时左侧导航栏却选中的是"重发报文查询".如何让右侧的菜单和左侧的导航实现联动即:左侧点击"原始报文查询",那么右侧的"补发运抵报文"展开,并选中"原始报文查询","后台管理"关闭? 实现方式如下: 1.右侧的"原始报文查询"等

  • jQuery选择器全面总结

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 jQuery选择器使得获得页面元素变得更加容易.更加灵活,从而大大减轻了开发人员的压力.如同盖楼一样,没有砖瓦,就盖不起楼房.得不到元素谈何其他各种操作呢?可见,jQuery选择器的重要性.当然想一下子掌握所有选择器也是很困难的,这个得靠实践和积累. 现在我们正式进入jQuery选择器的学习.我们将jQuery选择器进行分类学习,将jQuery选择器分为以下几种: 1.基本选择器 ◦id                 

  • jQuery选择器中含有空格的使用示例及注意事项

    此文摘自<锋利的jQuery>,另外添加了一点自己的东西 选择器中的空格是不容忽视的,多一个空格或少一个空格也许得到的结果会截然不同的.下面来看一个例子. 先构建如下的HTML代码: 复制代码 代码如下: <div class="test"> <div style="display:none;">Jquery教程</div> <div style="display:none;">Jque

  • 巧用jQuery选择器提高写表单效率的方法

    相信很多小伙伴都会遇到需要做表单的需求,就像我现在做的医院项目,茫茫多的表单无穷无尽.一开始做表单使用最笨的方法:一个个span去定义ID,每个数据都用ajax获取后赋值显示,然后在表单提交前一个个用jQuery根据ID获取元素的value,组成一个model来提交给服务器. 后来发现使用jQuery可以大大简化这个过程.于是我修改了工作方法,总结了我的一些提高写表单效率的方法. 需求 表单中存在最多的无非就是文本.文本框.单选框.多选框.而一些表单中会有几十个甚至几百个选项.我们的目标就是以最

  • jQuery 选择器、DOM操作、事件、动画

    Jquery选择器 $(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对象 选择器 1, 判断页面是否存在某元素:if($("#tt").length>0){} 或者if($("#tt")[0]){}; 2, 基本选择器 $("#test") 选择id为test的元素 $(".test

  • jQuery 选择器详解

    jQuery 选择器详解

    $()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是. $("#id")通过id来获取元素,用来代替document.getElementById()函数. $("tagName")通过标签名来获取元素,用来代替document.getElementsByTagName()函数. jQuery的基本语法是:$(selector).action(), selector即选择器. jQuery选择器的分类 jQuery的选择器基本

随机推荐