博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
读<jquery 权威指南>[7]-性能优化与最佳实践
阅读量:5317 次
发布时间:2019-06-14

本文共 1669 字,大约阅读时间需要 5 分钟。

一、优化选择器执行速度

1. 优先使用ID选择器和标记选择器

  • 使用选择器时应该首选ID选择器($("#id")),其次是标记选择器($("div")),最后再选用class、属性等选择器。
  • 避免重复使用ID号修饰ID号,例如$("#div1 #div2")。也避免使用tag,class等修饰ID号,例如$(".title #id")。
  • 使用属性选择器时,尽量使用标记进行修饰。例如$(div[title='aa'])。

2. 使用jQuery对象缓存

  • 如果多次操作同一个DOM元素,可以将其存在全局变量中,避免重复调用选择器。
  • 缓存JQuery的变量命名规则尽量以$开头。
  • 如果同一个DOM对象进行多个操作,尽量使用链式写法。

3. 给选择器一个上下文

格式:$(expression,[context]),expression是选择器表达式,context是选择器查找的范围。这样会比在全局查找效率高一些。

实例:

二、处理选择器不规范元素

1. 选择器属性中包含特殊符号:特殊字符前添加转义字符\\。

2. 选择器中空格符:包含空格时表示祖先元素和后代元素的关系;不包含空格时表示一个选择器中两种筛选条件的合并。

三、解决jQuery库与其他库$冲突问题

使用jQuery.noConflict()转让$使用权,然后只能使用jQuery变量访问jQuery对象。

1.jQuery库先于其他库导入

无需使用jQuery.noConflict()方法。只要使用jQuery方法时不要使用$符号而是使用jQuery符号就可以了。

2.jQuery库后于其他库导入

需要先使用jQury.noConflict(),然后使用jQuery符号操作jQuery中的对象。如果仍然想使用简洁符号,有两种方法

①自定义其他符号用作快捷方式:

var j=jQuery.noConflict();        j( function() {            j( "#Button1").click(function () {                获取对象                var $objTmp = j("#txtName" );                显示内容                j( "#divTmp").html("J_" + $objTmp.val());            })        })

②在jQuery方法内部继续使用$符号。

jQuery.noConflict();        jQuery( function($) {            $( "#Button1").click(function () {                //获取对象                var $objTmp = $("#txtName" );                //显示内容                $( "#divTmp").html("J_" + $objTmp.val());            })        })

四、其他优化

  • 尽量减少对DOM元素直接操作的次数。
  • 使用子查询优化选择器性能。

五、区分DOM对象和jQuery对象

1.DOM对象和jQuery对象定义的区别

  • DOM对象:通过传统js方法获取的DOM元素对象;
  • jQuery对象:通过jQuery方法包装原始的DOM对象后生成的新对象。

2.DOM对象和jQuery对象的转换

如果想使DOM对象和jQuery对象之间的方法相互调用,需要先将对象进行类型转换。

  • DOM转jQuery:DOM对象通过$()方法进行包装就可以转换为jQuery对象。
  • jQuery转DOM:通过get(index)或者[index]方法,可以将jQuery对象转换为DOM对象。

转载于:https://www.cnblogs.com/janes/p/3541455.html

你可能感兴趣的文章
三.野指针和free
查看>>
简单【用户输入验证】
查看>>
python tkinter GUI绘制,以及点击更新显示图片
查看>>
20130330java基础学习笔记-语句_for循环嵌套练习2
查看>>
Spring面试题
查看>>
C语言栈的实现
查看>>
TC SRM 593 DIV1 250
查看>>
SRM 628 DIV2
查看>>
2018-2019-2 20165314『网络对抗技术』Exp5:MSF基础应用
查看>>
SecureCRT的使用方法和技巧(详细使用教程)
查看>>
自建数据源(RSO2)、及数据源增强
查看>>
关于View控件中的Context选择
查看>>
2018icpc徐州OnlineA Hard to prepare
查看>>
使用命令创建数据库和表
查看>>
在16aspx.com上下了一个简单商品房销售系统源码,怎么修改它的默认登录名和密码...
查看>>
linux下Rtree的安装
查看>>
多米诺骨牌
查看>>
Linq 学习(1) Group & Join--网摘
查看>>
asp.net 调用前台JS调用后台,后台掉前台JS
查看>>
苹果手表:大方向和谷歌一样,硬件分道扬镳
查看>>