Pengenalan kepada 5 antara muka HTML5 yang anda tidak tahu_html5 kemahiran tutorial

Alamat asal: 5 API HTML5 Yang Anda Tidak Tahu Wujud
Tarikh asal: 27 September 2010
Tarikh terjemahan: 7 Ogos 2013
Apabila orang melihat atau Apabila perkataan "HTML5 " dikatakan, dianggarkan sekurang-kurangnya separuh daripada orang akan menganggapnya sebagai kecantikan yang seksi dan menawan, tetapi juga unicorn yang boleh membuat anda sengsara. Tidak hairanlah Kami pemaju?
Kami mendapati bahawa API asas telah bertakung untuk sekian lama (mungkin 1999-2009) malah fungsi tambahan asas seperti "tempat letak" akan mengambil masa yang lama untuk kami proses.
Walaupun penyemak imbas arus perdana semasa telah melaksanakan banyak ciri HTML5 baharu, ramai pembangun tidak menyedari API yang lebih mudah dan berguna ini.
Siri artikel ini memperkenalkan API antara muka ini dan juga berharap dapat menggalakkan lebih ramai pembangun meneroka API yang belum diketahui secara meluas.
Element.classList
Atribut ini telah dikeluarkan selama beberapa tahun Melalui classList, kita boleh memanipulasi atribut kelas css asas melalui JavaScript
Kodnya adalah seperti berikut 🎜>

Salin kodKodnya adalah seperti berikut:

// Gunakan atribut classList ( Elemen Dom, nama kelas css)
function toggleClassList(elemen,cName){
// 1. classList API
// Tukar kelas, alih keluar jika wujud, tambah jika tidak
jika(elemen.classList.toggle){
elemen .classList.toggle(cName);
kembali benar;
}
// !!! ,
// maka kod berikut tidak akan dilaksanakan Ini hanya untuk demonstrasi, sila gunakannya secara fleksibel
// 2. classList API
// Sama ada atribut kelas elemen mengandungi sembunyikan kelas CSS ini.
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// Alih keluar hide class
elemen. classList.remove(cName);
} else {
// 4. classList API
// Tambah hide class
element.classList.add(cName}
return benar;
};

ContextMenu API
Selepas ujian, chrome28 tidak berfungsi. . .
API baharu, ContextMenu, ialah antara muka yang sangat baik: Antara muka ini membolehkan anda menambah item menu dengan mudah pada menu konteks penyemak imbas (menu klik kanan), dan bukannya mengatasi menu klik kanan lalai penyemak imbas. Perlu diambil perhatian bahawa anda lebih baik menggunakan skrip js untuk mencipta menu konteks menu secara dinamik, untuk mengelakkan kod HTML berlebihan apabila halaman melumpuhkan skrip JS.
Kod adalah seperti berikut:

Salin kodKod tersebut adalah seperti berikut:

Klik kawasan ini untuk melihat menu

/menuitem>

Element.dataset
API set data (set data) membenarkan pembangun menetapkan (menetapkan) dan mendapatkan (mendapatkan) nilai atribut bermula dengan awalan data pada elemen DOM.
Kod adalah seperti berikut:

Salin kod

Kod tersebut adalah seperti berikut:

Salin kod

Kodnya adalah seperti berikut:

function testDataset(){
//
var intro = document.getElementById("intro"); atribut, tetapi nilai data-id
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website-; url, sarung unta..
var blogUrl = intro.dataset.blogUrl
// data-my-name
var myName = intro.dataset.myName; = "qq:" id
",laman web:" tapak web
",blogUrl:" blogUrl
",myName:" myName
//
warn(msg);
};


Tiada apa-apa untuk dikatakan, sama seperti classList, ringkas tetapi praktikal. (Fikirkanlah, adakah ia telah mengubah beberapa interaksi dan penyahgandingan latar belakang dan bahagian hadapan JS?)

window.postMessage API

IE8 telah menyokong postMessage API selama beberapa tahun, API ini membenarkan tetingkap dan elemen iframe untuk berkomunikasi antara satu sama lain.

Sokongan merentas domain. Kodnya adalah seperti berikut:



Salin kod

Kod adalah seperti berikut:

// Dari tetingkap atau bingkai pada domain 1, hantar mesej ke iframe yang mengehoskan domain lain var iframeWindow = document.getElementById("iframe").contentWindow iframeWindow.postMessage("Hello dari tetingkap pertama !");

// Dari dalam iframe pada hos yang berbeza, terima mesej

window.addEventListener("message", function(event) {

// Pastikan kami mempercayai domain penghantaran
if(event.origin = = "http://davidwalsh.name") {
// Log keluar mesej
console.log(event.data);// Hantar mesej kembali
event.source.postMessage ("Hello kembali!");
]);
// mesej hanya membenarkan data jenis rentetan, tetapi anda boleh menggunakan JSON.stringify dan JSON.parse untuk menghantar lebih banyak mesej yang bermakna.



Atribut autofokus

Atribut autofokus memastikan bahawa elemen BUTTON, INPUT atau TEXTAREA yang diberikan mendapat fokus secara automatik apabila halaman dimuatkan.

Salin kod

Kod adalah seperti berikut:

Hai!

Atribut autofokus digunakan terutamanya dalam halaman input mudah Untuk butiran, sila rujuk: atribut autofokus

Setiap pengeluar penyemak imbas mempunyai sokongan yang berbeza untuk API ini, jadi sebaiknya semak keserasian sebelum menggunakannya dan luangkan sedikit masa membaca. API yang disenaraikan di atas, anda akan mengetahui lebih lanjut tentangnya dan menguasainya. Kod ujian untuk bahagian

adalah seperti berikut:

Salin kod


Kod adalah seperti berikut:

// Paparkan mesej amaran
fungsi amaran(msg){
amaran = amaran ||
jika(window.console){
console.warn(msg); atribut (elemen Dom, nama kelas css)
fungsi toggleClassList(elemen, cName){
// 1. classList API
// Tukar kelas, alih keluarnya jika wujud, tambahkannya jika tiada wujud
jika (elemen.classList.toggle){
elemen.classList.toggle(cName); kembali benar;
}
// !!! disokong,
// Kemudian kod berikut tidak akan dilaksanakan Ia hanya untuk demonstrasi Sila gunakannya secara fleksibel
// 2. API classList
// Sama ada atribut kelas elemen mengandungi sembunyikan CSS ini. class
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// Alih keluar hide class
elemen .classList.remove( cName);
} else {
// 4. classList API
// Tambah hide class
element.classList.add(cName>}
return true;
};
// Gunakan atribut className (elemen Dom, nama kelas css)
fungsi toggleClassName(elemen, cName){
var className = element.className || 🎜>// Alih keluar ruang Kosong pada permulaan dan akhir
cName = cName.replace(/^s*|s*$/g,"");
// Jika terdapat aksara kosong di tengah-tengah cName, ia akan gagal. Jika anda ingin mengendalikannya dengan baik, anda boleh membahagikannya Untuk tatasusunan, proseskannya secara individu
var blankReg = /s /; jika(blankReg.test(cName)){
warn("'" cName "'mengandungi aksara kosong di tengah");
kembali palsu;
// "hide2 hide hide myname" Kemudian,
// Ada yang maya sebelum dan selepas hide2 Ada juga b sebelum dan selepas hide,
// tapi bukan antara hi dan de.
// g mewakili satu baris global
//var rep = /bhideb/g;
var rep = new RegExp("\b" cName "\b", "g"
jika (rep.test(className)){
className = className.replace(rep,""); / Gantikan nama kelas baharu.
elemen.className = className;
kembali benar;
// Fungsi, togol (id elemen, className)
function toggleClass(elementId, cName){
// Dapatkan elemen DOM
var element = document.getElementById(elementId);
// Jika elemen tidak wujud
if(!element){
warn("The element with id " elementId " tidak wujud ");
return false;
}
if(!element.classList){
warn("Elemen dengan id " elementId " tidak menyokong atribut classList dan akan menggunakan yang lain bermakna untuk mencapainya") ;
kembali toggleClassName(elemen,cName);
} lain {
kembali toggleClassList(elemen,cName);
}
};
function testDataset( ){
/ /
var intro = document.getElementById("intro"); .dataset.id;
/ /data-website
var website = intro.dataset.website;
// data-blog-url, camel case..
var blogUrl = intro.dataset. blogUrl;
// data -my-name
var myName = intro.dataset.myName;
//
var msg = "qq:" id
",laman web:" laman web
",blogUrl:" blogUrl
",myName:" myName
;
//
warning(msg);
// Jalankan selepas dom dimuatkan
window.addEventListener("DOMContentLoaded" , function() {
var open = document.getElementById("open");
var close = document.getElementById("close");
open.addEventListener ("klik",function(){
//
toggleClass("diary2","hide");
toggleClass("loading","hide");
}); >close.addEventListener("klik", function(){
//
toggleClass("diary2","hide");
toggleClass("loading","hide");
} );
//
testDataset(); div>

Tutup< ;/a>

style="position:absolute; top:10px;width: 50px;height: 50px;border-radius: 10px;-webkit; -jejari-sempadan: 10px;">

Memuatkan

Klik kawasan ini untuk melihat menu

/menuitem>
" data-website="www.csdn.net" data-id="551996458" data-my-name="Iron Anchor" data-blog-url="http://blog.csdn.net/renfufei" >

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn