mata teras

JQuery adalah alat yang berguna untuk pemaju yang perlu menyokong Legacy Internet Explorer atau menulis perpustakaan seperti jQuery lebih lama daripada membangunkan aplikasi. Walau bagaimanapun, untuk kebanyakan kes lain, menggunakan JavaScript asli lebih cekap kerana ia tidak memerlukan pemuatan perpustakaan besar seperti jQuery.
Kesamaan JavaScript asli dari kaedah jQuery yang biasa digunakan seperti pemilih DOM dan operasi DOM biasanya dilaksanakan lebih cepat dan lebih cekap daripada rakan -rakan jQuery mereka. Sebagai contoh, dengan menggunakan atau
• mungkin lebih cepat daripada menggunakan pembungkus JQuery's document.getElementsByClassName. document.getElementById $() HTML5 menyediakan sokongan terbina dalam untuk pelbagai jenis input biasa tanpa menambah kod JavaScript atau jQuery tambahan untuk pengesahan borang. Pelayar lama yang tidak menyokong jenis baru ini akan dipulihkan ke medan input teks standard dan memerlukan pengesahan sisi pelayan.
mengenai saya baru -baru ini "Adakah anda benar -benar memerlukan jQuery? 》 Artikel, perdebatan berterusan, tetapi ringkasnya, terdapat dua sebab untuk menggunakan jQuery: 1. Anda perlu menyokong IE6/7/8 (ingat anda tidak boleh berhijrah ke JQuery 2.0), atau 2. Tanpa jQuery, anda akan Luangkan lebih banyak daripada pembangunan permohonan mengambil masa yang lebih lama untuk menulis perpustakaan seperti jQuery.

sila pragmatik untuk semua situasi lain. JQuery adalah Perpustakaan Universal 270KB. Tidak mungkin anda memerlukan semua fungsi yang disediakannya, walaupun anda menghilangkan modul tertentu, ia masih sebahagian besar kod. Anda boleh memuatkan versi 30kb dari CDN, tetapi penyemak imbas mesti berhenti memproses dan menghuraikan kod pada setiap halaman sebelum melakukan tindakan lain. Ini adalah yang pertama dalam satu siri artikel yang mempamerkan setara JavaScript asli dengan kaedah jQuery yang biasa digunakan. Walaupun anda mungkin mahu membungkus beberapa ini dalam fungsi alias yang lebih pendek, anda pasti tidak perlu membuat perpustakaan seperti jQuery anda sendiri.

jQuery membolehkan pemilihan nod dom menggunakan sintaks pemilih CSS, contohnya:

// 在 ID 為“first”的文章中查找所有具有類(lèi)“summary”的段落
var n = $("article#first p.summary");

var n = document.querySelectorAll("article#first p.summary");

. JavaScript asli juga menawarkan empat alternatif, yang hampir pasti lebih cepat daripada document.querySelectorAll jika anda boleh menggunakannya: $()

1. document.querySelector(selector) - Dapatkan hanya nod sepadan pertama
2. document.getElementById(idname) - Dapatkan nod tunggal dengan nama idnya
3. document.getElementsByTagName(tagname) - Dapatkan nod yang sepadan dengan elemen (seperti H1, P, Strong, dan lain -lain).
4. document.getElementsByClassName(class) - Dapatkan nod dengan nama kelas tertentu

getElementsByTagName dan getElementsByClassName juga boleh digunakan untuk nod tunggal untuk mengehadkan hasilnya kepada keturunan sahaja, contohnya:

// 在 ID 為“first”的文章中查找所有具有類(lèi)“summary”的段落
var n = $("article#first p.summary");

mari kita buat beberapa ujian. Saya menulis beberapa skrip kecil untuk mendapatkan dari "Adakah anda benar -benar memerlukan jQuery?" 》 Mencari semua nod komen 10,000 kali dalam artikel. Keputusan:

Saya tidak boleh menuntut keadaan makmal yang ketat, dan tidak mencerminkan penggunaan dunia sebenar, tetapi dalam hal ini JavaScript asli adalah 60 kali lebih cepat. Ia juga menyatakan bahawa mendapatkan nod oleh ID, Tag, atau kelas biasanya lebih baik daripada querySelectorAll.

operasi dom

JQuery menyediakan beberapa cara untuk menambah lebih banyak kepada DOM, seperti:

// 在 ID 為“first”的文章中查找所有具有類(lèi)“summary”的段落
var n = $("article#first p.summary");

di bawah permukaan, jQuery menggunakan kaedah innerHTML asli, contohnya:

var n = document.querySelectorAll("article#first p.summary");

Anda juga boleh menggunakan teknologi Dom Build. Ini lebih selamat, tetapi jarang lebih cepat daripada innerHTML:

var n = document.getElementById("first");
var p = n.getElementsByTagName("p");

kita juga boleh memadam semua nod kanak -kanak dalam jQuery:

$("#container").append("<p>more content</p>");

persamaan asli untuk menggunakan innerHTML:

document.getElementById("container").innerHTML += "<p>more content</p>";

atau fungsi kecil:

var p = document.createElement("p");
p.appendChild(document.createTextNode("more content"));
document.getElementById("container").appendChild(p);

Akhirnya, kita boleh memadamkan seluruh elemen dari Dom dalam jQuery:

$("#container").empty();

atau JavaScript asli:

document.getElementById("container").innerHTML = null;

grafik vektor berskala (svg)

Perpustakaan JQuery Core telah dibangunkan untuk memproses dokumen semasa. SVG juga mempunyai DOM, tetapi jQuery tidak memberikan manipulasi langsung kepada objek -objek ini, kerana ia biasanya memerlukan kaedah seperti createElementNS dan getAttributeNS. Ia berfungsi dan terdapat beberapa plugin yang tersedia, tetapi lebih cekap untuk menulis kod anda sendiri atau menggunakan perpustakaan SVG yang berdedikasi seperti Rapha?l atau Svg.js.

html5 Form

var c = document.getElementById("container");
while (c.lastChild) c.removeChild(c.lastChild);