5 API mudah dan praktikal dalam kemahiran tutorial HTML5

5 API mudah dan praktikal dalam kemahiran tutorial HTML5_html5

WBOY

Lepaskan： 2016-05-16 15:47:59

asal

1713 orang telah melayarinya

Ini tidak boleh dikatakan sia-sia bagi kita Selama bertahun-tahun, API HTML asas tidak berkembang sama sekali, sehingga apabila ciri baru yang kecil muncul, seperti pemegang tempat, ia akan menjadikan kita kelihatan baru. Walaupun banyak ciri HTML5 dilaksanakan dalam penyemak imbas moden, kebanyakan pengaturcara masih tidak tahu atau tidak pernah mendengar tentang beberapa API yang kecil dan sangat berguna. Dalam artikel ini saya akan memperkenalkan beberapa API sedemikian dan mengalu-alukan semua orang untuk menemui lebih banyak API HTML5 yang tidak diketahui!

Element.classList

API classList menyediakan fungsi asas mengawal CSS yang telah kami laksanakan menggunakan perpustakaan alat JavaScript selama bertahun-tahun:

Salin kod

Kodnya adalah seperti berikut:

// Tambah kelas CSS
myElement.classList.add("newClass");
//Padam kelas CSS
myElement. classList.remove("existingClass");
// Semak sama ada terdapat kelas CSS
myElement.classList.contains("oneClass");
// Terbalikkan kehadiran kelas CSS
myElement.classList.toggle("anotherClass");

Nilai utama API baharu ini ialah: mudah dan praktikal.

API ContextMenu

API ContextMenu baharu ini sangat berguna: ia tidak menggantikan menu klik kanan asal, tetapi menambahkan menu klik kanan tersuai anda pada menu klik kanan penyemak imbas:

Salin kod

Kod tersebut adalah seperti berikut:

Perlu diambil perhatian bahawa yang terbaik adalah menggunakan JavaScript untuk mencipta kod menu ini secara dinamik, kerana acara menu akhirnya akan memanggil JavaScript untuk melaksanakan tugasan Jika pengguna melumpuhkan JavaScript, menu klik kanan tidak akan dihasilkan, dan dia tidak akan melihat menu pada masa yang sama.

Element.dataset

Menggunakan API set data, pengaturcara boleh mendapatkan atau menetapkan data dengan mudah-*atribut tersuai:

Salin kod

Kod tersebut adalah seperti berikut:

/* Ambil kod berikut sebagai contoh

*/
// Dapatkan elemen
var element = document.getElementById("myDiv");
// Dapatkan id
var id = element.dataset.id;
// Baca nilai "data -my-custom-key"
var customKey = element.dataset.myCustomKey;
// Ubah suai kepada nilai lain
element.dataset.myCustomKey = "Sesetengah nilai lain";
// Hasilnya ialah:
//

< /div>

Tidak perlu berkata lebih, sama seperti classList, ringkas dan praktikal

window.postMessage API

Malah IE8 telah menyokong API postMessage selama bertahun-tahun Fungsi API postMessage adalah untuk membolehkan anda memindahkan data maklumat antara dua tetingkap penyemak imbas atau iframe:

Salin kodKod adalah seperti berikut:

// Dari tetingkap atau iframe dalam domain A, hantar mesej ke tetingkap atau ifame dalam domain B
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Salam dari tetingkap pertama!");

//Terima mesej dalam tetingkap atau iframe pada domain kedua yang berbeza
window.addEventListener("message", function(event) {
// Semak kesahihan domain
if( event.origin == "http://www.jb51.net") {
// Maklumat log keluaran
console.log(event.data);
// Mesej maklum balas
acara. source.postMessage("Apa khabar juga!");
}
]);

Isi mesej hanya boleh menjadi rentetan, tetapi anda boleh menggunakan JSON.stringify dan JSON.parse untuk menukar mesej kepada badan data yang lebih bermakna!

atribut autofokus

Atribut

autofokus membolehkan elemen BUTTON, INPUT atau TEXTAREA menjadi fokus halaman secara automatik apabila halaman dimuatkan:

Salin kod

Kodnya adalah seperti berikut:

Di tempat dengan corak tetap seperti halaman carian Google, atribut autofokus ialah ciri yang paling ideal.

Sokongan penyemak imbas untuk setiap API adalah berbeza sedikit, jadi semak sokongan untuk ciri ini sebelum menggunakannya. Luangkan sedikit masa untuk membaca penerangan terperinci setiap API, saya percaya anda akan menemui lebih banyak lagi.