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

Posted 2020-11-09 小山子子

一、使用最新版本的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内部处理顺序是从右到左，这两条语句都是先获取子元素，然后在与多个父元素相匹配，这样操作会使速度大大折扣；其他几种方法在执行的过程中，语句都会转换，因此在性能上损耗不少；