Kehilangan jquery kembung

mata teras

• nodelist.js, sebagai alternatif kepada operasi DOM untuk jQuery, menawarkan fungsi yang sama, tetapi lebih kecil (4K selepas mampatan) dan mengambil kesempatan daripada penambahbaikan kepada API penyemak imbas asli.

• Tidak seperti jQuery, nodelist.js merawat tatasusunan nod sebagai nod tunggal, membolehkan kod bersih dan operasi objek nodelist yang lebih mudah.

• nodelist.js mengandungi kaedah khas untuk menetapkan dan mendapatkan atribut, memanggil kaedah spesifik elemen, dan mengakses nod dalam nodel, dan atribut

  bersamaan dengan atribut JQuery's prevObject. owner

• nodelist.js serasi dengan pelayar arus perdana selepas versi tertentu (Firefox 6, Safari 5.0.5, Chrome 6, IE 9, Opera 11.6), dan dikemas kini secara automatik untuk memasukkan kaedah/sifat baru yang ditambah oleh penyemak imbas.
  p.tip { latar belakang warna: RGBA (128,128,128,0.05); Border-top-kanan-Radius: 5px; Sempadan-Bottom-Right-Radius: 5px; Padding: 15px 20px; Sempadan-kiri: 10px RGBA pepejal (128,128,128,0.075); }

Pada tahun -tahun kebelakangan ini, JQuery telah menjadi perpustakaan de facto JavaScript di web. Ia menghilangkan banyak ketidakkonsistenan silang penyemak imbas dan menambah lapisan gula sintaksis yang popular kepada skrip pelanggan. Salah satu titik kesakitan utama dalam pemprosesan abstraksi adalah operasi DOM, tetapi sejak kemunculan jQuery, pelayar asli API telah bertambah baik, dan konsep "anda mungkin tidak memerlukan jQuery" telah menjadi popular.

Sebabnya adalah seperti berikut:

jQuery mengandungi banyak ciri yang anda tidak perlukan atau gunakan (dan oleh itu ia tidak perlu menjadi besar).
JQuery mengambil terlalu banyak fungsi untuk terlalu banyak orang. Umumnya, perpustakaan yang lebih kecil boleh melakukan beberapa tugas dengan lebih baik.
Dari segi operasi DOM, API penyemak imbas kini boleh melaksanakan sebahagian besar fungsi jQuery.
API penyemak imbas kini lebih disegerakkan, contohnya menggunakan
4. bukan addEventListener. attachEvent

apa masalahnya?

Masalahnya ialah menggunakan JavaScript asli (atau tulen) untuk DOM boleh menyusahkan berbanding dengan jQuery. Ini kerana anda perlu menulis lebih banyak kod yang berlebihan dan mengendalikan nodelist yang tidak berguna penyemak imbas.

Pertama, mari kita lihat definisi nodelist MDN:

Objek nodelist

adalah koleksi nod, seperti yang dikembalikan oleh kaedah

dan Node.childNodes. document.querySelectorAll

kadang -kadang ada nodelis dinamik (yang boleh mengelirukan):

Dalam beberapa kes, nodelist adalah koleksi dinamik, yang bermaksud perubahan dalam DOM ditunjukkan dalam koleksi. Sebagai contoh,

dinamik. Node.childNodes

Ini boleh menjadi masalah kerana anda tidak dapat memberitahu yang dinamik dan yang statik. Kecuali anda mengeluarkan setiap nod dari nodel dan kemudian periksa sama ada nodelist kosong. Jika kosong, anda mempunyai nodelis dinamik (ia hanya idea yang buruk).

Di samping itu, penyemak imbas tidak menyediakan sebarang kaedah yang berguna untuk memanipulasi objek nodel ini.

contohnya, malangnya, tidak mungkin untuk gelung melalui nod menggunakan forEach

Oleh itu, anda perlu melakukan perkara berikut:

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数

atau hanya menggunakan "hack":

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

Nodelist asli penyemak imbas hanya mempunyai satu kaedah:

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

. Ia mengembalikan nod dari Nodelist melalui Indeks. Apabila kita dapat mengakses nod seperti kita menggunakan array (menggunakan

), ia tidak berguna: item array[index]

Ini adalah tempat nodelist.js masuk - menjadikannya mudah untuk mengendalikan DOM menggunakan API asli pelayar menggunakan jQuery, tetapi hanya memerlukan saiz mampatan 4K.

var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true

Penyelesaian

Saya mencipta nodelist.js kerana saya telah menggunakan apis dom asli, tetapi ingin menjadikannya lebih ringkas, dengan itu mengurangkan banyak redundansi ketika menulis kod (seperti untuk gelung).

nodelist.js adalah pembungkus untuk API DOM asli yang membolehkan anda memanipulasi tatasusunan nod (iaitu nodel saya) seolah -olah ia adalah nod tunggal. Ini memberi anda lebih banyak fungsi daripada objek nodelist asli penyemak imbas.

Jika anda fikir ini bagus, dapatkan salinan nodelist.js dari repositori GitHub rasmi dan terus membaca tutorial ini.

Penggunaan:

memilih node dom adalah mudah:

// kembali ke nodelist saya

$$(selector); Kaedah ini digunakan di latar belakang

.

querySelectorAll(selector) Tetapi bagaimana ia dibandingkan dengan jQuery?

gembira anda mengemukakan soalan ini. Mari kita bandingkan JS asli, jQuery, dan nodelist.js.

Katakan kita mempunyai tiga butang:

mari kita ubah teks setiap butang untuk "klik saya":

Native JS:

var buttons = document.querySelectorAll('button'); // 返回浏览器无用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].textContent = 'Click Me';
}

jQuery:

$('button').text('Click Me');

nodelist.js:

$$('button').textContent = 'Click Me';

Di sini, kita melihat bahawa nodelist.js secara berkesan dapat merawat nodelis sebagai nod tunggal. Iaitu, kita merujuk seorang nodel dan menetapkan harta

untuk "klik saya". Nodelist.js kemudian melakukan ini untuk setiap nod dalam nodel. Sangat pandai, bukan?

textContent Jika kita mahukan rantaian kaedah (serupa dengan jQuery), kita melakukan yang berikut, yang mengembalikan rujukan kepada nodel:

$$('button').set('textContent', 'Click Me');

Sekarang, mari tambahkan pendengar acara klik ke setiap butang:

Native JS:

var buttons = document.querySelectorAll('button'); // 返回浏览器无用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    this.classList.add('clicked');
  });
}

jQuery:

$('button').on('click', function() {
  $(this).addClass('click');
  // 或将 jQuery 与原生混合使用 `classList`：
  this.classList.add('clicked');
});

nodelist.js:

$$('button').addEventListener('click', function() {
  this.classList.add('clicked');
});

Okay, jadi kaedah

jQuery agak baik. Perpustakaan saya menggunakan API DOM asli penyemak imbas (oleh itu

), tetapi itu tidak menghalang kami daripada membuat alias untuk kaedah: on addEventListener

$$.NL.on = $$.NL.addEventListener;

$$('button').on('click', function() {
  this.classList.add('clicked');
});

tidak buruk! Ini menunjukkan bagaimana kita menambah kaedah kita sendiri:

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数

sokongan nodelist.js untuk kaedah array

nodelist.js tidak mewarisi dari Array.prototype, tetapi tidak secara langsung, kerana beberapa kaedah telah berubah, jadi masuk akal untuk menggunakannya dengan nodelist (pelbagai nod).

push dan unshift

contohnya: push dan unshift kaedah hanya boleh mengambil nod sebagai parameter, jika tidak, ralat akan dilemparkan:

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

jadi kedua -dua push dan unshift kembali nodelist untuk membolehkan kaedah chaining, bermakna ia berbeza daripada kaedah asli JavaScript Array#push atau Array#unshift, yang menerima apa -apa dan mengembalikan panjang baru array. Jika kita mahu panjang nodel, kita hanya perlu menggunakan harta length.

Kedua -dua kaedah ini, seperti kaedah array asli JavaScript, menukar nodel.

concat

Kaedah menerima yang berikut sebagai parameter: concat

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

adalah kaedah rekursif, jadi tatasusunan ini boleh menjadi mendalam seperti yang kita mahu dan akan diratakan. Walau bagaimanapun, jika mana -mana elemen dalam array yang diluluskan bukan nod, nodel, atau htmlcollection, ia akan membuang kesilapan. concat

Mengembalikan nodelist baru, sama seperti kaedah JavaScript concat. Array#concat

, pop, shift, map, slice, filter,

Kedua -dua kaedah

pop dan shift boleh mengambil parameter pilihan, menunjukkan berapa banyak nod untuk pop atau beralih dari nodel. Tidak seperti JavaScript's Native Array#pop atau Array#shift, yang terakhir selalu muncul atau mengalihkan elemen dalam array tanpa mengira apa yang diluluskan sebagai parameter.

Jika setiap nilai dipetakan adalah nod, kaedah map mengembalikan nodel;

Kaedah

slice dan filter melakukan perkara yang sama seperti yang mereka lakukan dalam tatasusunan sebenar, tetapi mengembalikan nodel.

Sejak nodelist.js tidak mewarisi secara langsung dari Array.prototype, jika anda menambah kaedah untuk Array.prototype apabila memuatkan nodelist.js, ia tidak akan diwarisi.

anda boleh melihat kaedah array yang tinggal nodelist.js di sini.

Kaedah Khas

nodelist.js mempunyai empat kaedah unik, dan harta yang dipanggil

, yang bersamaan dengan atribut owner jQuery. prevObject

dan get kaedah: set

Beberapa elemen mempunyai atribut khusus untuk unsur -unsur jenis itu (contohnya, atribut

pada tag utama). Inilah sebabnya href akan kembali tidak ditentukan - kerana ia bukan harta yang diwarisi oleh setiap elemen dalam nodel. Inilah cara kami menggunakan kaedah $$('a').href untuk mengakses sifat -sifat ini: get

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数

Kaedah

set boleh digunakan untuk menetapkan sifat -sifat ini untuk setiap elemen:

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

set juga mengembalikan nodel untuk membolehkan kaedah chaining. Kita boleh menggunakannya dalam textContent dan lain -lain (kedua -duanya bersamaan):

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

kita juga boleh menetapkan pelbagai sifat dalam satu panggilan:

var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true

Semua operasi di atas boleh dilakukan menggunakan atribut mana -mana, contohnya style:

var buttons = document.querySelectorAll('button'); // 返回浏览器无用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].textContent = 'Click Me';
}

call kaedah

Kaedah

call membolehkan anda memanggil kaedah spesifik elemen (contohnya, pause pada elemen video):

$('button').text('Click Me');

item kaedah

Kaedah

item bersamaan dengan kaedah eq jQuery. Ia mengembalikan nodel yang mengandungi hanya nod yang melewati indeks:

$$('button').textContent = 'Click Me';

atribut owner Atribut

bersamaan dengan

jQuery. owner prevObject

$$('button').set('textContent', 'Click Me');

Mengembalikan array gaya, manakala

akan mengembalikan nodelist yang dipetakan oleh btns.style. owner style keserasian nodelist.js

Perpustakaan saya serasi dengan semua penyemak imbas baru seperti yang diterangkan di bawah.

penyemak imbas versi firefox

6 Safari 5.0.5 Chrome 6 ie 9 opera 11.6 Kesimpulan Sekarang kita akhirnya boleh menggunakan objek nodelist yang berguna! Untuk saiz mampatan kira -kira 4k anda mendapat semua di atas dan banyak lagi, yang boleh anda pelajari dalam repositori github nodelist.js.

Sejak nodelist.js menggunakan penyemak imbas sebagai kebergantungan, tiada peningkatan diperlukan. Apabila pelayar menambah kaedah/atribut baru ke elemen DOM, anda boleh menggunakan kaedah/atribut ini secara automatik melalui nodelist.js. Semua ini bermakna bahawa satu -satunya penyusutan yang perlu anda bimbang ialah kaedah penyingkiran penyemak imbas. Ini biasanya kaedah penggunaan yang sangat rendah kerana kita tidak dapat memecahkan web.

Jadi apa pendapat anda? Adakah anda akan mempertimbangkan menggunakan perpustakaan ini? Adakah ciri -ciri penting hilang? Saya suka mendengar komen anda dalam komen di bawah.

soalan yang sering ditanya mengenai operasi DOM dengan nodelist.js

Apakah perbezaan antara nodel dan htmlcollection?

nodelist dan htmlcollection adalah kedua -dua koleksi nod. Perbezaan utama di antara mereka ialah nodelist boleh mengandungi sebarang jenis nod, manakala HtmlCollection adalah koleksi nod elemen. HtmlCollection juga dinamik, bermakna ia akan dikemas kini secara automatik apabila struktur dokumen berubah. Nodelist, sebaliknya, adalah statik dan tidak mengemaskini untuk mencerminkan perubahan dalam dokumen.

bagaimana untuk menukar nodel ke array?

3 Inilah caranya:

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数

Kenapa pemilih jQuery pulangan prevobject bukan elemen biasa?

Mekanisme chaining JQuery berfungsi dengan menyimpan objek sebelumnya sebelum membuat perubahan. Ini membolehkan anda menggunakan kaedah .end() untuk memulihkan ke keadaan terdahulu anda. Jika anda ingin mendapatkan elemen DOM sebenar, anda boleh menggunakan kaedah .get() atau notasi array.

bagaimana untuk gelung melalui nodel?

anda boleh gelung melalui nodel menggunakan gelung, untuk ... gelung, atau forEach() kaedah. Berikut adalah contoh menggunakan gelung untuk:

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

Apakah penggunaan kaedah .prev () dalam jQuery?

Kaedah .prev() dalam jQuery digunakan untuk memilih elemen yang dipilih segera di sebelah adik terdahulu. Jika pemilih disediakan, elemen saudara terdahulu hanya diambil apabila pemilih dipadankan.

Adakah jQuery masih relevan pada tahun 2022?

Walaupun JQuery adalah penukar permainan pada pelancaran, ekosistem JavaScript moden telah berubah dengan ketara. Banyak ciri -ciri yang membuat jQuery popular kini dibina dalam JavaScript sendiri. Walau bagaimanapun, jQuery masih digunakan secara meluas dan dikekalkan, dan ia mungkin pilihan yang baik untuk beberapa projek.

Bagaimana untuk memilih nod tertentu dari Nodelist?

anda boleh memilih nod tertentu dari nodelist menggunakan notasi array atau kaedah item(). Inilah caranya:

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

Bolehkah saya menggunakan peta, penapis, dan mengurangkan kaedah pada nodel?

Nodelist bukanlah array, jadi ia tidak mempunyai kaedah seperti peta, penapis, dan mengurangkan. Walau bagaimanapun, anda boleh menukar nodel kepada array dan kemudian menggunakan kaedah ini.

Apakah perbezaan antara QuerySelector dan QuerySelectorall?

querySelector Mengembalikan elemen pertama dalam dokumen yang sepadan dengan pemilih CSS yang ditentukan, dan querySelectorAll mengembalikan nodelist semua elemen yang sepadan dengan pemilih CSS.

bagaimana untuk memeriksa sama ada nodelist kosong?

anda boleh menyemak sama ada nodelist kosong dengan memeriksa harta . Jika panjangnya 0, nodelist kosong. Inilah caranya: length

Atas ialah kandungan terperinci Kehilangan jquery kembung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!