jQuery提供了功能强大,并兼容多种css版本的选择器,不过发现很多同学在使用选择器时并未注重效率的问题。

a) 尽量使用Id选择器,jQuery选择器使用的API都是基于getElementById或getElementsByTagName,因此可以知道效率最高的是Id选择器,因为jQuery会直接调用getElementById去获取dom,而通过样式选择器获取jQuery对象时往往会使用 getElementsByTagName去获取然后筛选。

b) 样式选择器应该尽量明确指定tagName, 如果开发人员使用样式选择器来获取dom,且这些dom属于同一类型,例如获取所有className为jquery的div,那么我们应该使用的写法 是$('div.jquery')而不是$('.jquery'),这样写的好处非常明显,在获取dom时jQuery会获取div然后进行筛选,而不是获取所有dom再筛选。

c) 避免迭代,很多同学在使用jQuery获取指定上下文中的dom时喜欢使用迭代方式,如$('.jquery .child'),获取className为jquery的dom下的所有className为child的节点,其实这样编写代码付出的代价是非常大的,jQuery会不断的进行深层遍历来获取需要的元素,即使确实需要,我们也应该使用诸如$(selector,context), $('selector1>selector2'), $(selector1).children(selector2),
$(selctor1).find(selector2)之类的方式。

jQuery选择器的效率问题的更多相关文章

  1. jquery选择器及效率问题

    $('p2') //选择名字 $('.class') //选择class $('#id') //选择id $('#id li') //所有id=”id”标签内的li标签 $(“#id”).find(“ ...

  2. 在.NET中使用JQuery 选择器精确提取网页内容

    1. 前言 相信很多人做开发时都有过这样的需求:从网页中准确提取所需的内容.思前想后,方法无非是以下几种:(本人经验尚浅,有更好的方法还请大家指点) 1. 使用正则表达式匹配所需元素.(缺点:同类型的 ...

  3. CSS选择器和jQuery选择器的区别与联系之一

    到底什么是选择器?我们通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的 ...

  4. jquery选择器效率优化问题

    jquery选择器效率优化问题   jquery选择器固然强大,但是使用不当回导致效率问题: 1.要养成将jQuery对象缓存进变量的习惯 //不好的写法 $('#btn').bind("c ...

  5. 二、jquery选择器

    在jquery库中,可以通过选择器实现DOM元素快捷选择这一重要的核心功能. 1.选择器的优势 (1)代码更简单 由于在jquery库中,封装了大量可以通过选择器直接调用的方法或函数,使编写代码更加简 ...

  6. 转:JQuery选择器

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理 解,它们本身用法就非常简单,我更希望的是它能够提升个人编 ...

  7. [置顶] Jquery学习总结(二) jquery选择器详解

    1.基本选择器 l ID 根据元素ID选择 l Elementname 根据元素名称选择 l Classname 根据元素css类名选择 举例: <input type=”text” id=”I ...

  8. jQuery选择器大全(48个代码片段+21幅图演示)

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编 ...

  9. jQuery选择器(适合初学者哟....)

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...

随机推荐

  1. 最长特殊序列 II

    最长特殊序列 II class Solution { boolean containsSub(String s,String p){ int i,j; for(i=0,j=0;i<p.lengt ...

  2. [CISCN2019 华北赛区 Day1 Web1]Dropbox-phar文件能够上传到服务器端实现任意文件读取

    0x00知识点 phar是什么: 我们先来了解一下流包装 大多数PHP文件操作允许使用各种URL协议去访问文件路径:如data://,zlib://或php://.例如常见的 include('php ...

  3. 普通java项目转换为带有Tomcat的动态Web项目

    原文链接:http://blog.csdn.net/l4432321/article/details/52049125 直接项目右键进入Properties配置,点击Project Facets,再点 ...

  4. Vue.js——2.第一个Vue程序

    代码 <div id="app"> <p>{{msg}}</p> </div> <script> let vm=new ...

  5. 美团:WSDM Cup 2019自然语言推理任务获奖解题思路

    WSDM(Web Search and Data Mining,读音为Wisdom)是业界公认的高质量学术会议,注重前沿技术在工业界的落地应用,与SIGIR一起被称为信息检索领域的Top2. 刚刚在墨 ...

  6. ajax上传图片到服务器简单操作

    前端: 通过Ajax方式上传文件,使用FormData进行Ajax请求.上传文件或图片时,要求的格式为enctype ="multipart/form-data"(以二进制格式上传 ...

  7. 17.3.12---sys模块

    1---sys是system的缩写,用来获取操作系统和编译器的一些配置,设置和操作,如判断文件和文件夹是否存在,创建文件夹,获取系统版本之类的操作 import sys  #导入sys模块 2--一些 ...

  8. webgis笔记

    3.8(02) .特点:由服务端进行数据管理 开源的GO sever WMS/WCS/WTS 1sever/2engine/3database/4standard 扩展的空间数据库,存矢量.栅格.直接 ...

  9. c语言中命令行参数argc,argv[]详解

    main(int argc,char *argv[ ]) 1.argc为整数 2.argv为指针的指针(可理解为:char **argv or: char *argv[] or: char argv[ ...

  10. 前端快速构建神器vue-cli,windows下安装并且构建前端项目

    1.nodejs官网http://nodejs.cn/下载安装包,傻瓜式安装即可 2.dos命令查询node的版本 node -v 查询版本号 npm -v 查询npm包管理版本 3.安装国内镜像 n ...