JavaScript Asli Kaedah JQuery: DOM dan Borang

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.

pemilih dom

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

setara asli:

<code class="language-javascript">// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");</code>

<code class="language-javascript">var n = document.querySelectorAll("article#first p.summary");</code>

dilaksanakan dalam semua pelayar moden dan IE8 (walaupun ini hanya menyokong pemilih CSS2.1). JQuery menyediakan sokongan tambahan untuk pemilih yang lebih maju, tetapi untuk sebahagian besar ia berjalan dalam pembungkus

. 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

Kaedah

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

<code class="language-javascript">// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");</code>

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:

代码	时间
// jQuery 2.0<br>var c = $("#comments .comment");	4,649 ms
// jQuery 2.0<br>var c = $(".comment");	3,437 ms
// 原生 querySelectorAll<br>var c = document.querySelectorAll("#comments .comment");	1,362 ms
// 原生 querySelectorAll<br>var c = document.querySelectorAll(".comment");	1,168 ms
// 原生 getElementById / getElementsByClassName<br>var n = document.getElementById("comments");<br>var c = n.getElementsByClassName("comment");	107 ms
// 原生 getElementsByClassName<br>var c = document.getElementsByClassName("comment");	75 ms

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:

<code class="language-javascript">// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");</code>

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

<code class="language-javascript">var n = document.querySelectorAll("article#first p.summary");</code>

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

<code class="language-javascript">var n = document.getElementById("first");
var p = n.getElementsByTagName("p");</code>

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

<code class="language-javascript">$("#container").append("<p>more content</p>");</code>

persamaan asli untuk menggunakan innerHTML:

<code class="language-javascript">document.getElementById("container").innerHTML += "<p>more content</p>";</code>

atau fungsi kecil:

<code class="language-javascript">var p = document.createElement("p");
p.appendChild(document.createTextNode("more content"));
document.getElementById("container").appendChild(p);</code>

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

<code class="language-javascript">$("#container").empty();</code>

atau JavaScript asli:

<code class="language-javascript">document.getElementById("container").innerHTML = null;</code>

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

walaupun aplikasi web yang paling asas akan mempunyai satu atau dua bentuk. Anda harus sentiasa mengesahkan data pengguna di sisi pelayan, tetapi idealnya anda akan menambahnya dengan pengesahan klien supaya kesilapan dapat ditangkap sebelum menyerahkan borang tersebut. Pengesahan pelanggan adalah mudah: 1. Jalankan fungsi apabila borang diserahkan. 2. Jika anda menghadapi sebarang masalah, hentikan menyerahkan dan memaparkan ralat.

anda boleh menggunakan jQuery. Anda boleh menggunakan JavaScript asli. Mana yang harus anda pilih? tidak memilih . HTML5 menyokong pelbagai jenis input yang biasa digunakan, seperti e -mel, telefon, URL, nombor, masa, tarikh, warna, dan bidang adat berdasarkan ungkapan biasa. Sebagai contoh, jika anda ingin memaksa pengguna memasukkan alamat e -mel, sila gunakan:

<code class="language-javascript">var c = document.getElementById("container");
while (c.lastChild) c.removeChild(c.lastChild);</code>

Kecuali anda memerlukan ciri -ciri yang lebih kompleks (seperti membandingkan dua atau lebih medan atau memaparkan mesej ralat tersuai), tidak ada keperluan untuk JavaScript atau kod jQuery tambahan. Pelayar yang lebih tua (termasuk IE9 dan ke bawah) tidak memahami jenis baru dan akan dipulihkan ke medan input teks standard. Pengguna ini akan kembali ke pengesahan sisi pelayan; Dalam jawatan saya yang seterusnya, kami akan melihat operasi dan animasi kelas CSS asli.

Soalan Lazim Mengenai JQuery dan JavaScript asli

(bahagian FAQ ditinggalkan di sini kerana kandungan bahagian ini lemah berkaitan dengan gambar dan artikel subjek, dan artikel itu lebih lama, jadi ia boleh diproses secara berasingan.)

Atas ialah kandungan terperinci JavaScript Asli Kaedah JQuery: DOM dan Borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!