Bermula dengan Mootools

Tutorial ini memperkenalkan salah satu kerangka JavaScript yang paling popular hari ini: Mootools. Mootools (untuk alat berorientasikan objek saya

) bersesuaian dengan Internet Explorer 6, Firefox, Opera, dan Chrome. Mootools direka untuk menjadi padat, modular dan berorientasikan objek. Mootools direka untuk pengaturcara JavaScript pertengahan hingga tinggi, jadi pastikan anda mempunyai pengalaman yang cukup sebelum anda menggali lebih mendalam.

mata teras

mootools (wakil

alat berorientasikan objek saya
• ) adalah rangka kerja JavaScript yang padat, modular dan objek. Ia serasi dengan Internet Explorer 6, Firefox, Opera, dan Chrome dan direka untuk pengaturcara JavaScript peringkat pertengahan hingga tinggi. Rangka kerja ini mengandungi ciri -ciri seperti pemilih elemen, peristiwa domready, penciptaan elemen, mengikat acara, dan pengesanan penyemak imbas. Pemilih elemen memudahkan operasi memilih elemen melalui mod ID, kelas, atau atribut. Acara Domready dilaksanakan dengan segera selepas DOM dimuatkan, membolehkan pelaksanaan skrip lebih cepat. Pengikatan peristiwa membolehkan pelaksanaan kod apabila peristiwa tertentu berlaku, manakala pengesanan penyemak imbas ditulis dengan mudah dalam kod bersyarat berdasarkan penyemak imbas pengguna.
• Mootools sangat disesuaikan, membolehkan pemaju memilih dan mengubah suai komponen yang mereka mahu gunakan. Ini meningkatkan kecekapan skrip dan meningkatkan prestasi. Ia juga menyediakan keserasian dengan perpustakaan JavaScript lain dan menyediakan ciri yang dipanggil abstraksi penyemak imbas yang menormalkan perbezaan antara pelayar yang berbeza untuk prestasi kod yang konsisten.

Dapatkan mootools

Mendapatkan mootools sangat mudah. Mootools dibahagikan kepada dua bahagian, yang dipanggil Core dan banyak lagi. Teras mengandungi kelas teras dan modul rangka kerja, dan lebih banyak termasuk kelas tambahan yang boleh dimasukkan mengikut keperluan permohonan. Mootools mempunyai halaman pembina yang kuat yang menyesuaikan teras dan lebih banyak keperluan kami. Versi stabil semasa Mootools Core (pada masa penulisan) adalah 1.4.5 dan lebih 1.4.0.1.

pemilih elemen

Salah satu operasi paling asas bagi mana -mana rangka kerja JavaScript adalah untuk memilih elemen. Mootools menggunakan Slick sebagai enjin pemilihnya. Mootools menyokong pelbagai jenis pemilih. Bahagian ini menerangkan beberapa pemilih yang paling berguna dan penting.

pilih elemen dengan id

Jika kita mahu memilih elemen dengan id dalam JavaScript tulen, kita perlu menggunakan sintaks

verbose. Mootools, seperti banyak kerangka JavaScript lain, menggunakan

untuk memendekkan operasi ini. Kod anda berakhir seperti ini: document.getElementById('id_of_element') $

Jika anda memasukkan mootools dan perpustakaan lain (seperti jQuery) pada halaman yang sama, ini akan menyebabkan masalah. Untuk mengatasinya, Mootools menyediakan

<code class="language-javascript">var element = $('id_of_element');</code>

sebagai cara lain untuk memilih elemen. Kod yang anda pilih elemen sekarang kelihatan seperti ini:

$ document.id() Pilih Elemen mengikut kelas

<code class="language-javascript">var element = document.id('id_of_element');</code>

Ini akan mengembalikan pelbagai elemen dengan kelas tertentu. Untuk mendapatkan setiap elemen individu, kita perlu melangkah ke atas array seperti yang ditunjukkan di bawah.

<code class="language-javascript">var element = $('id_of_element');</code>

pilih elemen melalui mod atribut

Contoh berikut memilih unsur -unsur yang atribut ID dan kelas bermula dengan corak tertentu.

<code class="language-javascript">var element = document.id('id_of_element');</code>

Begitu juga, contoh berikut sepadan dengan unsur -unsur yang atribut ID dan kelas berakhir dalam corak tertentu.

<code class="language-javascript">$$('.class_name').each(function(ele){
  console.log(ele);
});</code>

acara domready

Domready adalah peristiwa yang hanya boleh terikat pada objek tetingkap. Domready melaksanakan segera selepas DOM dimuatkan, yang mungkin jauh lebih awal daripada acara Window.Load yang menunggu semua sumber lain untuk dimuatkan. Saya cadangkan membaca secara mendalam tentang perbandingan domready dan window.load. Contoh berikut menggunakan Domready untuk menunggu untuk memuatkan sebelum menanyakan DOM.

<code class="language-javascript">$$('[id^=id_start_]').each(function(ele){
  console.log(ele);
});

$$('[class^=class_start_]').each(function(ele){
  console.log(ele);
});</code>

penciptaan elemen

Mootools boleh membuat unsur -unsur HTML baru dan menyuntiknya ke dalam DOM. Mewujudkan elemen HTML baru di Mootools sangat mudah. Sebagai contoh, kod berikut mencipta elemen Div baru.

<code class="language-javascript">$$('[id$=_end_id]').each(function(ele){
  console.log(ele);
});

$$('[class$=_end_class]').each(function(ele){
  console.log(ele);
});</code>

Kod sebelumnya mencipta elemen baru tetapi tidak menyuntiknya ke DOM. Untuk melakukan suntikan, anda perlu memanggil kaedah adopt(). Contoh berikut menunjukkan cara melakukan ini.

<code class="language-javascript">window.addEvent('domready', function(){
  if(document.id('id_of_element'))
  {
    alert('Element Exists');
  }
});</code>

Apabila melaksanakan kod ini, anda dapat melihat div baru yang ditambah sebelum menamatkan tag badan.

mengikat acara

mengikat peristiwa menyebabkan kod dilaksanakan apabila peristiwa tertentu dilaksanakan pada unsur -unsur. Klik, klik dua kali, dan hover adalah contoh peristiwa biasa. Anda juga boleh membuat acara tersuai anda sendiri, tetapi ini adalah di luar skop artikel ini. Sebagai contoh peristiwa Mootools yang mengikat, kod berikut menambah pengendali acara klik mudah ke elemen.

<code class="language-javascript">var new_div = new Element('div', {'class': 'new_div'});</code>

Anda juga boleh menambah peristiwa ke unsur -unsur yang dibuat secara dinamik. Kod berikut menambah pengendali klik ke elemen yang dibuat secara dinamik.

<code class="language-javascript">var new_div = new Element('div', {'class': 'new_div'});

$$('body').adopt(new_div);</code>

Pengesanan penyemak imbas

Terakhir tetapi paling tidak adalah pengesanan penyemak imbas menggunakan mootools. Ini diperlukan apabila anda ingin menulis kod bersyarat berdasarkan penyemak imbas pengguna. MOOTOOLS menyediakan objek Browser yang dihuni apabila halaman dimuatkan. Contoh berikut menggunakan pernyataan suis untuk mengenal pasti penyemak imbas semasa.

<code class="language-javascript">document.id('id_of_ele').addEvent('click', function(){
  console.log('I was just clicked');
});</code>

Kesimpulan

Artikel ini memperkenalkan banyak pengetahuan asas tentang mootools. Terdapat banyak sumber yang sangat baik untuk belajar menggunakan mootool dengan berkesan. Saya belajar banyak dari dokumentasi Mootools dan blog David Walsh. Anda juga boleh merujuk kerja mootools saya.

(bahagian FAQ kedua boleh ditulis semula sama seperti yang diperlukan, dan struktur kata dan kalimat dapat diselaraskan sambil mengekalkan konsistensi kandungan)

Atas ialah kandungan terperinci Bermula dengan Mootools. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!