`
axl234
  • 浏览: 268828 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery find选择器

阅读更多
jQuery有非常强大的Sizzle引擎来实现选择器,jQuery做了优化,他们能很好的工作,你一般不必担心太多。然而,我们可以稍微做一些改进,将可以使你的脚本略有提高。
一般在jquery中能不要用Sizzle引擎就不要用,当然前面说了只要有可能,就尽量使用.find()方法。比如:
$('#someDiv p.someClass').hide(); 
$('#someDiv').find('p.someClass').hide();
上面两行代码执行的结果是完全一样的,但是下面一句的效率要比上面一句的执行效率高。
现代浏览器(除IE6,IE7)都有QuerySelectorAll支持,能允许你像CSS选择器一样获取对象,而不需要用到jQuery中的Sizzle引擎。jQuery会在使用自己的引擎之前检查是否存在这个函数。
对于IE6/IE7,就需要jQuery使用Sizzle引擎,jQuery会把你的选择器转化成一个数组,并且通过从右往左来迭代匹配。通过正则表达式匹配页面每一个元素,所以你的可以尽量减少选择器的层级,尽可能的使用最右边的选择器,比如使用ID选择器等;这个规则和我们的css的查找规则是一直的,如果你要优化css选择器也要知道这个规则:从右往左来迭代匹配!
尺度把握:
1.保持代码简单
2.尽可能的使用find()查找,使用浏览器的原生查找函数
3.尽可能使用最右边的选择器,比如ID等
分享到:
评论

相关推荐

    jQuery选择器的一个Bug

    另外,还可以尝试优化选择器,避免使用过于复杂的选择表达式,或者使用`.find()`方法替代部分选择器操作,以提高性能。 同时,开发者也可以借助浏览器的开发者工具进行调试,检查选择器的执行结果是否符合预期。这...

    jquery 元素选择器使用方法技巧

    ### jQuery元素选择器使用方法技巧 #### 一、引言 在前端开发中,jQuery 是一个非常流行的 JavaScript 库,它极大地简化了 HTML 文档遍历、事件处理、动画等操作,并提供了强大的 DOM 操作能力。jQuery 的核心功能...

    jQuery双向选择器数据添加删除选择代码

    jQuery还支持更复杂的选择器组合,如后代选择器(selector1 selector2)、并集选择器(selector1, selector2)和属性选择器([attribute=value])等,使得选取特定元素变得更加灵活。 在“jQuery双向选择器数据添加...

    jquery双向选择器两侧select框列表文字左右选择器代码

    本文将深入探讨“jquery双向选择器两侧select框列表文字左右选择器代码”,这是一种常见于网页表单设计的功能,用于实现两个下拉列表(select框)之间的双向同步选择。 首先,我们需要理解jQuery的选择器。jQuery...

    Jquery选择器说明文档.doc

    本文将详细阐述JQuery中的各种选择器及其使用方法。 1. **基础选择器**: - `#id`:通过元素的ID选择器,如`$("#divId")`选取ID为`divId`的元素。 - `element`:根据元素名称选择,例如`$("a")`选择所有`<a>`元素...

    jQuery中Find选择器用法示例

    在jQuery库中,`find()`选择器是一个非常实用的功能,用于在当前匹配的元素集合中查找指定的后代元素。这个选择器允许开发者深入DOM(文档对象模型)结构,找到目标元素,无论它们位于多深的嵌套层级。下面将详细...

    php操作html(类似jquery的选择器)

    首先,我们了解下jQuery选择器的基本概念。jQuery选择器是基于CSS选择器的,允许开发者高效地定位HTML元素,如`$("#id")`选择ID为"id"的元素,`$(".class")`选择所有class为"class"的元素,以及`$("tagname")`选择...

    jQuery树结构菜单选择器代码.zip

    在给定的“jQuery树结构菜单选择器代码.zip”压缩包中,我们关注的是如何利用jQuery来创建一个树形结构的菜单选择器。这种组件在网页设计中广泛用于导航和数据组织,特别是对于具有层级关系的数据展示,如目录结构、...

    jQuery树形选择器代码.zip

    《jQuery树形选择器代码详解》 在网页开发中,数据的展示方式多种多样,其中树形结构是一种常见的数据组织形式,尤其适用于层次关系复杂的场景。jQuery作为一个强大的JavaScript库,提供了丰富的选择器来操作DOM...

    Web前端开发技术-Jquery选择器.pptx

    jQuery选择器分为多种类型,包括基本选择器、层级选择器、筛选选择器和其他选择器。 **1. 基本选择器** 基本选择器与CSS选择器有很高的相似性,主要包括以下四种: - **ID选择器**: 使用`$("#id")`来选取具有特定...

    Jquery 选择器

    jQuery 提供了与 CSS 相似的基本选择器,如 ID 选择器(`#id`)、类选择器(`.class`)、元素选择器(`element`)和通配符选择器(`*`)。例如: ```javascript $("#myID"); // 选择 ID 为 "myID" 的元素 $("....

    12个很棒的jQuery选择器扩展

    这篇博客文章“12个很棒的jQuery选择器扩展”深入探讨了一些超越了标准CSS选择器的高级jQuery选择器,这些扩展极大地提升了开发效率和代码的可读性。通过阅读和理解这些选择器的用法,开发者可以更加熟练地操纵页面...

    jQuery实现获取元素索引值index的方法

    1. jQuery的选择器使用:通过id选择器("#btnli")选中所有按钮的列表项,通过类选择器(".box")来选取对应的盒子。 2. jQuery的事件绑定:通过点击事件(.click)对按钮进行操作,当按钮被点击时执行相应的函数。 3. ...

    Jquery中的层次选择器与find()的区别示例介绍

    在jQuery中,层次选择器和`find()`方法都是用于定位DOM元素,但它们的应用场景和范围有所不同。本文将深入探讨这两个概念的区别,并通过示例进行详细解析。 首先,层次选择器是jQuery提供的一种强大功能,它允许...

    jQuery中find()方法用法实例

    此方法获得匹配元素集合中所有元素的子元素,并通过选择器、jQuery 对象或元素删选。 find()方法是获取匹配元素后代元素的好方法。 注意:children()只获取一级子元素,而find()将查找所所有子元素。 语法结构一: ...

    jQuery find和children方法使用

    同样,`find`也接受一个选择器作为参数,用来过滤出满足条件的子元素。例如,如果你想找到`parentDiv`中所有class为"myClass"的后代元素,代码如下: ```javascript var allDescendants = parentDiv.find(".myClass...

    jQuery时间日期选择器代码日历插件.zip

    **jQuery时间日期选择器代码日历插件** 这个压缩包包含了一个基于jQuery的时间日期选择器插件,它为用户在网页上输入日期和时间提供了一种直观、便捷的方式。jQuery作为一个轻量级的JavaScript库,简化了DOM操作、...

    jQuery选择器及jQuery基本操作

    jQuery选择器及基本操作是jQuery库的核心组成部分,它极大地简化了JavaScript中DOM元素的选取和操作。jQuery选择器允许开发者使用CSS1至CSS3的选择器语法来定位HTML元素,使得代码更加简洁、高效。 1. **jQuery选择...

    jquery常见的选择器、筛选器、事件.docx

    以上介绍了 jQuery 中各种常用的选择器、筛选器、查找方法以及属性操作的基本用法。这些方法可以极大地提高前端开发的效率,并帮助开发者更轻松地处理页面元素。通过灵活运用这些功能,可以实现更加复杂的用户界面...

Global site tag (gtag.js) - Google Analytics