Gunakan JQuery dengan lebih cekap Berikut ialah 8 tips_jquery

1. DOM traversal mahal, jadi pembolehubah cache.

Salin kod Kod adalah seperti berikut:

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

Salin kod Kod adalah seperti berikut:

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

2.

Salin kod Kod adalah seperti berikut:

//Tidak disyorkan
$('div#myid')

Salin kod Kod adalah seperti berikut:

//Syorkan
$('#myid')

3. Elakkan pemilih universal tersirat.

Salin kod Kod adalah seperti berikut:

//Tidak disyorkan
$('.someclass :radio')

Salin kod Kod adalah seperti berikut:

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

4. Elakkan pemilih universal.

Salin kod Kod adalah seperti berikut:

//Tidak disyorkan
$('.bekas > *')

Salin kod Kod adalah seperti berikut:

//Syorkan
$('.bekas').kanak-kanak()

5. Pastikan kod semudah mungkin.

Salin kod Kod adalah seperti berikut:

//Tidak disyorkan
if(arr.length > 0){}

Salin kod Kod adalah seperti berikut:

//Disyorkan
if(arr.length){}

6. Gabungkan fungsi sebanyak mungkin.

Salin kod Kod adalah seperti berikut:

//Tidak disyorkan
$f.on("klik", function(){
$(this).css('sempadan','1px merah pepejal');
$(this).css('warna', 'biru');
});

Salin kod Kod adalah seperti berikut:

//Syorkan
$f.on("klik", function(){
$(this).css({
         'sempadan':'1px merah pepejal',
         'warna': 'biru'
});
});

7 Gunakan operasi rantaian sebanyak mungkin.

Salin kod Kod adalah seperti berikut:

//Tidak disyorkan
$ele.html();
$ele.on("klik",function(){});
$ele.fadeIn('perlahan');

Salin kod Kod adalah seperti berikut:

//Syorkan
$ele.on("klik",fungsi(){

}).fadeIn('perlahan').animate({ketinggian:'12px'},500);

8 Lakukan sejumlah besar operasi pada elemen DOM, pisahkan mereka dahulu dan kemudian tambahkannya

Salin kod Kod adalah seperti berikut:

//Tidak disyorkan
var $container = $('#somecontainer');
var $ele = $container.first();
.....Siri operasi kompleks

Salin kod Kod adalah seperti berikut:

//Syorkan
var $container = $('#somecontainer');
var $ele = $container.first().detach();
.....Siri operasi kompleks
$container.append($ele);