优化jquery选择器

小方块的博客 小方块的博客     2022-08-09     716

关键词:

优化jQuery选择器

选择优化比以前更加重要,因为越来越多的浏览器实现了queryselectorall()并承担了将jQuery选择器转移到浏览器的责任。记住这些小技巧可以让你轻松突破学习选择器时的瓶颈。

jQuery 扩展

如果可能的话,避免使用jQuery扩展选择器。这些扩展无法在性能让原生的queryselectorall() DOM提供的方法更有效,所以还是用jQuery提供的常规选择器吧。

1
2
3
4
5
// Slower (the zero-based :even selector is a jQuery extension)
$( "#my-table tr:even" );
 
// Better, though not exactly equivalent
$( "#my-table tr:nth-child(odd)" );

记住,许多jQuery的扩展,包括在上面的例子中的:even,没有在CSS规范准确的对应。在某些情况下,这些扩展的方便性可能会超过其性能成本。

避免过度使用选择器

1
2
3
4
$( ".data table.attendees td.gonzalez" );
 
// Better: Drop the middle if possible.
$( ".data td.gonzalez" );

减少DOM节点同样可以提高选择器的效率,因为这样可以使寻找元素时减少遍历的层数。

ID选择器

使用以ID选择器开始的选择器确保万无一失。

1
2
3
4
5
// Fast:
$( "#container div.robotarm" );
 
// Super-fast:
$( "#container" ).find( "div.robotarm" );

第一种方法 DOM 使用document.querySelectorAll(). 第二种方法 jQuery 使用效率更高的document.getElementById(), 尽管提高的效率会受后续的.find()的影响。

关于老版本的浏览器

使用就浏览器比如ie8或ie8-时有必要考虑一下建议

明确选择器

右边的选择器尽可能明确,左边的不用。

1
2
3
4
5
// Unoptimized:
$( "div.data .gonzalez" );
 
// Optimized:
$( ".data td.gonzalez" );

如果可能的话,在你的右边选择器使用tag.class形式,左边使用tag或.class。

避免使用通用选择器

通用选择器放在任何地方效率都不高。

1
2
3
4
5
6
$( ".buttons > *" ); // Extremely expensive.
$( ".buttons" ).children(); // Much better.
 
$( ":radio" ); // Implied universal selection.
$( "*:radio" ); // Same thing, explicit now.
$( "input:radio" ); // Much better.

jQuery 优化多个选择器

】jQuery优化多个选择器【英文标题】:jQueryOptimisationMultipleSelectors【发布时间】:2011-11-1819:25:37【问题描述】:在我的脚本顶部我有两个变量持有两个选择器:varall_open=$(\'ul#festival_datesli.controlsa:eq(0)\');varall_close=$(\'ul#festival_datesli... 查看详情

如何使用 jQuery 日期选择器优化引导输入标签

】如何使用jQuery日期选择器优化引导输入标签【英文标题】:HowtooptimizeBootstrapInputTagsWithajQueryDatepicker【发布时间】:2019-03-1422:07:34【问题描述】:我已经实现了一个日期选择器。这样当我从日期选择器中选择一年时,选定的年... 查看详情

哪个 jQuery 多元素选择器优化得更好

】哪个jQuery多元素选择器优化得更好【英文标题】:WhichjQueryselectorformultipleelementsisbetteroptimized【发布时间】:2019-08-1317:16:58【问题描述】:我有一个根据AJAX调用返回的数据构建的动态表。在构建表格的函数结束时,我需要将jQue... 查看详情

如何优化 jQuery tag:contains() 选择器?

】如何优化jQuerytag:contains()选择器?【英文标题】:HowtooptimizejQuerytag:contains()selector?【发布时间】:2020-06-2117:36:15【问题描述】:我正在尝试从包含给定单词集的网页中提取所有元素。例如。鉴于我有一个随机单词数组words=["sky",... 查看详情

前端性能优化:jquery性能优化

...Query的each循环比原生的for循环性能相差几十倍。前端性能优化:循环优化2尽量使用ID,类型,类选择器,避免使用属性选择器 尽量使用ID,类,类型选择器,避免属性选择器。I 查看详情

jquery学习笔记之选择器

...:                   选择器应用优化 简单的伪类选择器  内容伪类选择器 显隐伪类选择器 子元素伪类选择器 表单对象伪类选择器 表单属性伪类选择器 属性选择器 HelloWorld  &n... 查看详情

jquery性能优化

1,总是从ID选择器开始继承在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法。例如有一段HTML代码:<divid="content">  <formmethod="post"action="#">    <h2>交通信号灯</h2>    <... 查看详情

哪个jquery选择器可以更好地优化多个元素(代码片段)

...由“map-marker”和“th-list”图标标识。哪两个选项更好地优化?$("#tblResultstbodytrtd").find("a[data-icon='map-marker'],a[data-icon='th-list']").button();要 查看详情

jquery选择器

...这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专注业务逻辑的编写。jQuery几乎支持主流的css1~css3选择器的写法,我们从最简单的也是最常用的开始学起id选择器:一个用来查找的ID,即元素的id属性$("#id 查看详情

选择器:ID 与上下文

...述】:我使用jQuery。我已经阅读了很多关于选择器性能和优化我们的AJAX应用程序的内容。我希望提高我的选择器性能。我知道所有的jquery性能提示。我还没有找到一个问题的确切答案。我正在使用几乎所有当前的jquery性能提示... 查看详情

jquery学习笔记-选择器

...行匹配,而反向解析利用排除法,逐步缩小元素候选集,优化了从子元素找父元素的过程,对于大量元素很有效(所以采用通配符很低效)   CSS的基础选择器:  群组选择器:selector1,selector 查看详情

前端性能优化jquery性能优化

一、使用合适的选择器$("#id");1.使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery底层将直接调用本地方法document.getElementById();如果这个方式不能直接找到你需要的元素,那么你可以考虑调用find()方法,代码如下:$("#domo"... 查看详情

jquery选择器之id选择器

...这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专注业务逻辑的编写。jQuery几乎支持主流的css1~css3选择器的写法,我们从最简单的也是最常用的开始学起。id选择器:一个用来查找的ID,即元素的id属性。$(‘#... 查看详情

jquery的选择器

...这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专注业务逻辑的编写。jQuery几乎支持主流的css1~css3选择器的写法,我们从最简单的也是最常用的开始学起1、id选择器:一个用来查找的ID,即元素的id属性  $(... 查看详情

jquery的选择器

...这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专注业务逻辑的编写。jQuery内部很多都是使用JavaScript函数来获取元素,几乎支持全部的css1-css3选择器的写法,我就从最简单的说起。ID选择器:$("#id"),要注意... 查看详情

jquery代码性能优化的10种方法

1、总是使用#id去寻找element在jQuery中最快的选择器是ID选择器($(‘#someid‘)).这是因为它直接映射为JavaScript的getElementById()方法。选择单个元素<divid="content"><formmethod="post"action="/"><h2>TrafficLight</h2><ulid= 查看详情

jquery基础,选择器

...cript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和 查看详情

jquery笔记1--选择器

...cript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 查看详情