JQuery をより効率的に使用する 8 つのヒント_jquery を紹介します。

1. DOM traversal is expensive, so cache variables.

Copy code The code is as follows:

//Not recommended
var h = $('#ele').height();
$('#ele').css('height', h-20);

Copy code The code is as follows:

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

2. Optimize selectors.

Copy code The code is as follows:

//Not recommended
$('div#myid')

Copy code The code is as follows:

//Recommend
$('#myid')

3. Avoid implicit universal selectors.

Copy code The code is as follows:

//Not recommended
$('.someclass :radio')

Copy code The code is as follows:

//Recommend
$('.someclass input:radio')

4. Avoid universal selectors.

Copy code The code is as follows:

//Not recommended
$('.container > *')

Copy code The code is as follows:

//Recommend
$('.container').children()

5. Keep the code as simple as possible.

Copy code The code is as follows:

//Not recommended
if(arr.length > 0){}

Copy code The code is as follows:

//Recommended
if(arr.length){}

6. Merge functions as much as possible.

Copy code The code is as follows:

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

Copy code The code is as follows:

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

7. Use chain operations as much as possible.

Copy code The code is as follows:

//Not recommended
$ele.html();
$ele.on("click",function(){});
$ele.fadeIn('slow');

Copy code The code is as follows:

//おすすめ
$ele.on("クリック",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);