JQuery优化之 -- jquery对象的使用

一、使用最新版本的JQuery文件

二、避免过度使用JQuery对象

  在jQuery中,用户每次使用选择器获取页面中的元素时候,都会自动生成一个jQuery对象,该对象包括众多的属性和方法,而通过对象自身去调用这些方法时,资源消耗大,可以通过对象调用方法对应的函数,代码如下:

//定义保存值的变量
var strName = "";
//定义一个jQuery对象
var $name = $("#name");
//通过调用对象方法获取他的值
strName = $name.text();
//通过调用jQuery函数获取它的值
strName = $.text($name);

三、更多的使用链接式写法

使用链接式写法,使执行的每一步结果都进行了自动缓存,在速度上快于非链接式,代码如下:

//链接式写法
$("div").show().addClass('red');
//非链接式写法
$("div").show();
$("div").addClass('red');
$("div").html('非链接式写法!');

四、正确处理元素间父子关系

从父元素中选中子元素,有以下几种组合,代码如下:

//定义父元素和子元素
var $p = $('#parent');
var $c = $('.child');
//第一种
$p.find($c);
//第二种
$($c, $p);
//第三种
$p.children($c);
//第四种
$($p > $c);
//第五种
$("#parent .child");
//第六种
$(".child", $("#parent"));

执行速度最快的是第一种。第一种方法使用find()方法时,自动调用了浏览器固有的原生方法(getElementById),因此最快;速度最慢的是第四种和第五种方法,因为在使用这两种方法时,jQuery内部处理顺序是从右到左,这两条语句都是先获取子元素,然后在与多个父元素相匹配,这样操作会使速度大大折扣;其他几种方法在执行的过程中,语句都会转换,因此在性能上损耗不少;

猜你喜欢

转载自www.cnblogs.com/slovey/p/9100258.html