更高效的使用JQuery 这里总结了8个小技巧

前端技术 2023/09/09 JavaScript

1、DOM遍历是昂贵的，将变量缓存起来。

复制代码 代码如下:

//不推荐
var h = $(\'#ele\').height();
$(\'#ele\').css(\'height\', h-20);

复制代码 代码如下:

//推荐
var $ele = $(\'#ele\');
var h = $ele.height();
$ele.css(\'height\',h-20);

2、优化选择符。

复制代码 代码如下:

//不推荐
$(\'div#myid\')

复制代码 代码如下:

//推荐
$(\'#myid\')

3、避免隐式通用选择符。

复制代码 代码如下:

//不推荐
$(\'.someclass :radio\')

复制代码 代码如下:

//推荐
$(\'.someclass input:radio\')

4、避免通用选择符。

复制代码 代码如下:

//不推荐
$(\'.container > *\')

复制代码 代码如下:

//推荐
$(\'.container\').children()

5、尽可能保持代码简洁。

复制代码 代码如下:

//不推荐
if(arr.length > 0){}

 
复制代码 代码如下:

//推荐  
if(arr.length){}

6、尽可能地合并函数。

复制代码 代码如下:

//不推荐
$f.on(\"click\", function(){
    $(this).css(\'border\',\'1px solid red\');
    $(this).css(\'color\',\'blue\');
});

复制代码 代码如下:

//推荐
$f.on(\"click\", function(){
    $(this).css({
        \'border\':\'1px solid red\',
        \'color\': \'blue\'
    });
});

7、尽可能使用链式操作。

复制代码 代码如下:

//不推荐
$ele.html();
$ele.on(\"click\",function(){});
$ele.fadeIn(\'slow\');

复制代码 代码如下:

//推荐
$ele.on(\"click\",function(){
  
}).fadeIn(\'slow\').animate({height:\'12px\'},500);

8、对DOM元素作大量操作，先分离在追加

复制代码 代码如下:

//不推荐
var $container = $(\'#somecontainer\');
var $ele = $container.first();
.......一系列复杂操作
 

复制代码 代码如下:

//推荐
var $container = $(\'#somecontainer\');
var $ele = $container.first().detach();
.......一系列复杂操作
$container.append($ele);

本文地址：https://www.stayed.cn/item/25842

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案