analisis kod sumber jQuery jQuery.fn.each dan jQuery.each usage_jquery

Contoh dalam artikel ini menerangkan penggunaan jQuery.fn.each dan jQuery.each dalam analisis kod sumber jQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Mari kita mulakan dengan contoh Fungsi kod berikut adalah untuk menambah kelas merah pada setiap elemen div yang dipilih

Salin kod Kod adalah seperti berikut:

$('div').each(function(index, elem) {

$(this).addClass('red');
}
});

.each yang digunakan di atas ialah jQuery.fn.each, yang dilaksanakan secara dalaman melalui jQuery.each

Salin kod Kod adalah seperti berikut:

jQuery.fn.each

Mula-mula, mari siarkan perihalan API rasmi. Terdapat hanya dua perkara yang perlu diperhatikan
$(this).addClass('red') dalam contoh di atas, di mana ini merujuk kepada elemen dom yang sedang dikendalikan
Kaedah yang diluluskan dalam setiap satu boleh mengembalikan sebarang nilai Apabila nilai yang dikembalikan adalah palsu, lompat keluar daripada operasi gelung semasa

Salin kod Kod adalah seperti berikut:

/**

* @description Jalankan kaedah untuk setiap elemen dom yang sepadan dalam objek jQuery

* @param {Number} index Kedudukan elemen yang sedang diproses dalam koleksi

* @param {DOMElement} Elemen Elemen dom yang sedang diproses

*/
.
.setiap( fungsi(indeks, Elemen) )

Berikut ialah dua contoh mudah

Contoh 1:

Tambahkan kelas merah pada semua elemen div pada halaman

Salin kod Kod adalah seperti berikut:

$('div').each(function(index, elem) {

$(this).addClass('red');
}
});

Contoh 2

Tambahkan kelas merah pada 5 elemen div pertama pada halaman

Salin kod Kod adalah seperti berikut:

$('div').each(function(index, elem) {

If(index>=5) return false; // Keluar dari gelung
$(this).addClass('red');
}
});

Seperti di atas, penggunaannya agak mudah, jadi saya tidak akan pergi ke butiran untuk butiran, sila semak http://api.jquery.com/each/

Kod sumber dalaman dilaksanakan melalui jQuery.each Mari kita bercakap tentang kod sumber jQuery.each Selepas bercakap tentang kod sumber jQuery.each, kod sumber jQuery.fn.each adalah sangat mudah
jQuery.each:

Begitu juga dengan contoh mudah

Salin kod Kod adalah seperti berikut:

$.each([52, 97], function(index, value ) {

alert(index ': ' value ':' this);
}
});

Kandungan output adalah seperti berikut:
0: 52-52

1
1: 97-97

Penerangan API rasmi kelas

Terdapat juga dua perkara yang perlu diperhatikan

Ini dalam contoh di atas ialah elemen dalam koleksi, iaitu nilaiOfElement berikut

Kembalikan palsu dalam panggilan balik untuk keluar dari gelung

Salin kod Kod adalah seperti berikut:

/**

* @description Lakukan operasi pada setiap elemen dalam koleksi (tatasusunan atau objek)

* @param {Number|String} indexInArray Kedudukan elemen yang sepadan dalam koleksi (jika koleksi ialah tatasusunan, ia adalah nombor; jika koleksi ialah objek, ia adalah nilai kunci)

* @param {AnyValue} valueOfElement Elemen dalam koleksi

*/
j
jQuery.each( koleksi, panggil balik(indexInArray, valueOfElement) )

Contoh 1

Salin kod Kod adalah seperti berikut:

$.each( ['satu,'dua','tiga' , 'empat'], fungsi(indeks, nilai){

If(index >= 2) return false;

makluman( "Indeks:" indeks ", nilai: " nilai );
}
});

Contoh 2

Contohnya disalin terus dari laman web rasmi, cuma buat dengannya

Salin kod Kod adalah seperti berikut:

$.each( { nama: "John", lang: "JS " }, fungsi(k, v){

​​ alert( "Kunci: " k ", Nilai: " v );
}
});

Kod sumber:

Salin kod Kod adalah seperti berikut:

// args adalah untuk kegunaan dalaman sahaja
e
setiap: fungsi( obj, panggil balik, args ) {

nilai var,

i = 0,

panjang = obj.panjang,

isArray = isArraylike( obj ); // Adakah obj objek seperti tatasusunan, seperti {'0':'hello', '1':'world', 'length':2}, yang sebenarnya menyajikan objek jQuery

Jika ( args ) { // args, saya sebenarnya tidak menjumpai apa-apa kesan sebenar parameter ini~~ Cuma langkau dan lihat kandungan dalam lain Tiada perbezaan lain kecuali parameter yang diluluskan dalam panggilan balik adalah berbeza
           jika ( isArray ) {
untuk ( ; i < panjang; i ) {
                     nilai = panggil balik. apply( obj[ i ], args );
Jika ( nilai === palsu ) {
rehat;
                }
            }
         } lain {
untuk ( i dalam obj ) {
                         nilai = panggil balik. apply( obj[ i ], args );
Jika ( nilai === palsu ) {
rehat;
                }
            }
}
// Sarung khas, pantas, untuk kegunaan paling biasa setiap
} lain {
If (Isarray) {// Memproses tatasusunan
untuk ( ; i < panjang; i ) {
                   nilai = panggil balik.panggilan( obj[ i ], i, obj[ i ] );
Jika ( nilai === palsu ) {
rehat;
                }
            }
} Lain {// Objek rawatan
untuk ( i dalam obj ) {
                    nilai = panggilan balik.panggilan( obj[ i ], i, obj[ i ] ); // nilai ialah nilai pulangan bagi panggilan balik
Jika (nilai === palsu) {// Perhatikan di sini, apabila nilai === salah, lompat keluar dari kitaran terus
rehat;
                }
            }
}
}
Kembalikan obj;
}
},

jQuery.fn.setiap kod sumber lewat:

Ia sangat mudah selagi anda memahami jQuery.setiap, anda tidak boleh bercakap tentang~

Salin kod Kod adalah seperti berikut:

setiap: function( panggil balik, args ) {

Kembalikan jQuery.each( ini, panggil balik, args );
}
},

Kesimpulan

Sama seperti jQuery.extend dan jQuery.fn.extend, walaupun kod jQuery.each dan jQuery.fn.each sangat mudah, ia juga memainkan peranan yang sangat penting Kedua-dua kaedah ini digunakan secara meluas dalam jQuery, untuk contoh:

Salin kod Kod adalah seperti berikut:

jQuery.each("Boolean Number String Function Array Date RegExp Object Ralat" .split( " "), fungsi(i, nama) {

Class2type[ "[objek " name "]" ] = name.toLowerCase();
}
});

Jadi, kuasai setiap satu!

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.