JQuery: JavaScript mudah untuk pereka

Takeaways Key

JQuery adalah perpustakaan JavaScript yang memudahkan proses menggunakan JavaScript untuk reka bentuk web, menawarkan pelbagai fungsi dan alat yang telah dibina untuk meningkatkan fungsi dan pengalaman pengguna.
• JQuery membolehkan pereka untuk memanipulasi elemen HTML, mengendalikan peristiwa, membuat animasi, dan membuat panggilan Ajax, antara tugas lain, dengan cara yang lebih efisien dan cekap daripada javascript mentah.
• Salah satu ciri utama jQuery ialah keupayaannya untuk "rantai" berfungsi bersama -sama, yang membolehkan pelbagai tindakan dilakukan dalam satu baris kod. Ini menjadikannya alat yang berkuasa untuk memudahkan tugas JavaScript kompleks.
• fungsi acara beban JQuery membolehkan tugas selesai semasa memuatkan halaman, mula berfungsi sebaik sahaja ia mempunyai semua bahagian yang diperlukan. Ini adalah peningkatan kaedah onload tradisional.
• Walaupun keupayaannya untuk helah mewah, tarikan terbesar JQuery adalah keupayaannya untuk menyelesaikan masalah kecil dengan cepat dan dengan kekecohan minimum, menjadikannya alat yang berharga untuk pereka web.
• Jika kelahiran semula JavaScript telah menjadi tema terbesar dalam dua tahun yang lalu, anda mungkin boleh membahagikan sebahagian besar perbincangan mengenai topik ini menjadi dua bidang utama.
Di hujung bandar geekier, kami telah melihat Smarties memanfaatkan JavaScript untuk melakukan pelbagai jenis yang menakjubkan - dan kadang -kadang tidak masuk akal - perkara dengan Ajax.

Walau bagaimanapun, untuk lelaki depan seperti saya, kebanyakan skrip dan gelembung telah difokuskan di sekitar menyempurnakan markup anda-iaitu, menggunakan JavaScript untuk membuat markup anda berfungsi lebih baik selepas ia sampai ke penyemak imbas. Pembaca lama mengenai surat berita Reka Bentuk View mungkin akan mengingati beberapa eksperimen saya sendiri sepanjang beberapa tahun yang lalu:

Dalam imej gaya dengan DOM, kami menggunakan JavaScript untuk menambah sudut bulat ke imej.

dalam bayang -bayang teks dom, kami menggunakan JavaScript untuk membina bayangan pada teks tajuk.

dalam peraturan mendatar! Ok!, Kami menggunakan JavaScript untuk memperbaiki elemen HR yang cerdik.
• Walaupun setiap skrip ini mempunyai tujuan yang berbeza, mereka semua melibatkan menghantar markup yang kemas, semantik kepada pelayar, dan menggunakan JavaScript sama ada untuk memperbaiki atau memperluaskan kebolehan pelayar yang cukup pintar untuk difahami. Dalam kebanyakan kes, ini melibatkan "membungkus" sebahagian daripada markup anda dalam beberapa markup. Hari ini kita akan melihat kaedah yang mudah dan mudah yang membolehkan kita melakukan ini pada bila-bila masa, di mana sahaja: jQuery.
• Jadi, apakah jQuery?

JQuery adalah satu lagi perpustakaan JavaScript untuk menyertai ruang yang sudah sesak yang merangkumi prototaip, scriptaculous, rico, moo.fx dan lebih daripada sedozen yang lain. Untuk menggunakannya, pasangkan fail .js di kepala halaman anda: Secara ajaib, anda mempunyai akses kepada banyak fungsi dan gizmos yang telah dibina.

Q: Kenapa anda mungkin mahu Perpustakaan JavaScript yang lain berurusan dengan?
A: Tarikan utama jQuery adalah apa yang dapat ditawarkan anda dalam 10 minit pertama anda menggunakannya.

sebentar lagi, kami meluangkan sedikit masa untuk meningkatkan cara di mana pasaran SitePoint beroperasi. Semasa mencari cara yang elegan untuk membolehkan penjual memaparkan tangkapan skrin, statistik, graf dan imej lain tanpa meninggalkan halaman lelongan utama, saya menjumpai kotak tebal Cody Lindley, yang dikuasakan oleh Perpustakaan JavaScript John Resig. Imej di bawah menunjukkan kotak tebal dalam tindakan.

Selepas hanya lima minit untuk bermain -main dengan kotak tebal, anda akan mula melihat potensinya. Di pasaran, saya dapat menarik kedua -dua imej yang dipautkan dan dokumen HTML penuh melalui tetingkap tebal, sementara pada masa yang sama meredup (tetapi tidak kehilangan) halaman pelancaran. Pengguna dengan penyemak imbas di mana JavaScript dilumpuhkan atau tidak tersedia hanya diambil terus ke item (iaitu, imej atau halaman). Ini penyelesaian yang sangat pandai, boleh digunakan, dan boleh diakses untuk masalah "membesarkan gambar kecil ini".

Walau bagaimanapun, kerana kami sudah memutuskan untuk memasukkan Perpustakaan JQuery di halaman (ia adalah kecil - kira -kira 10KB), saya fikir ia adalah idea yang baik untuk mengetahui apa lagi yang boleh dilakukan untuk kami.

sejam kemudian, saya adalah penukar jQuery.

Keindahan sebenar jQuery adalah kesederhanaannya. Barisan tunggal kod jQuery boleh menggantikan selusin garis JavaScript biasa, namun ia tetap sangat penting dan fleksibel. Biarkan saya menggambarkan perkara ini dengan contoh. Dalam "Peraturan Horizontal Fixer" saya dari dua tahun yang lalu, kami menggunakan skrip berikut:

Sebagai ringkasan ringkas kod ini, penyemak imbas menunggu halaman untuk menyelesaikan pemuatan sebelum rifling melalui DOM untuk mencari setiap kejadian HR. Setiap kali ia mendapati satu, ia mewujudkan div baru, memberikan nama "garis" kelas, memasukkannya di mana HR itu, dan muncul HR lama di dalam div baru, untuk mencapai markup yang diperlukan untuk melaksanakan kesan tertentu ini. Pedantri semantik mengetepikan, hasil akhir skrip ini adalah bahawa kita dapat mencapai hasil yang diinginkan tanpa perlu mengubah beratus -ratus halaman.

function fancyRules() {  <br>
  if (!document.getElementsByTagName) return;  <br>
    var hr = document.getElementsByTagName("hr"); <br>
  for (var i=0; i<hr.length; i++) {  <br>
    var newhr = hr[i];  <br>
    var wrapdiv = document.createElement('div'); <br>
    wrapdiv.className = 'line';   <br>
    newhr.parentNode.replaceChild(wrapdiv, newhr);   <br>
    wrapdiv.appendChild(newhr);   <br>
  }  <br>
}  <br>
 <br>
window.onload = fancyRules;

Pada masa itu, saya fikir ia bukan hasil yang buruk untuk 12 baris kod. Tetapi mari kita lihat bagaimana kita akan mencapai hasil yang sama menggunakan jQuery.

Saya tidak anak anda.

$(document).ready(function(){ <br>
  $("hr").wrap("<div class='line'></div>"); <br>
});

untuk memecahkannya (tidak ada banyak untuk pecah):

Baris pertama dan ketiga adalah acara beban JQuery, dan mereka menggantikan tetingkap lama. Muat turun dari atas. Sebarang tugas yang ingin kami selesaikan semasa pemuatan halaman dapat dijatuhkan di dalam pendakap keriting ini.

Ini adalah peningkatan yang hebat pada kaedah onload lama, kerana bukannya menunggu sehingga semuanya telah selesai dimuatkan, fungsi JQuery menonton segala yang masuk, dan mula berfungsi sebaik sahaja ia mempunyai semua bahagian yang diperlukan. Ia benar -benar sangat kemas.

Hebatnya, baris kedua lebih mudah:

function fancyRules() {  <br>
  if (!document.getElementsByTagName) return;  <br>
    var hr = document.getElementsByTagName("hr"); <br>
  for (var i=0; i<hr.length; i++) {  <br>
    var newhr = hr[i];  <br>
    var wrapdiv = document.createElement('div'); <br>
    wrapdiv.className = 'line';   <br>
    newhr.parentNode.replaceChild(wrapdiv, newhr);   <br>
    wrapdiv.appendChild(newhr);   <br>
  }  <br>
}  <br>
 <br>
window.onload = fancyRules;

"Objek Dolar" - $ ("HR") - adalah semua yang kita perlukan untuk memberitahu jQuery untuk merebut setiap peraturan mendatar di halaman ini, dan bungkus adalah apa yang akan kita lakukan kepada unsur -unsur HR.

Fungsi bungkus terbina dalam JQuery mengambil apa-apa HTML yang kami berikan (dalam kes ini "

") dan membungkusnya di sekitar setiap jam di halaman kami-tiada gelung atau ujian yang diperlukan.

kami telah menggunakan div di sini, tetapi kami dapat dengan mudah mengubah atau membungkus b, rentang, atau elemen.

Dan walaupun kami telah menggunakan peraturan pemilihan yang sangat mudah di sini (semua jam), kami dapat dengan mudah lebih spesifik dengan apa yang kami sasarkan. Menggunakan sintaks CSS lama yang biasa, kita boleh menggunakan mana -mana yang berikut:

$ ("hr.separate") - Dapatkan elemen HR dengan nama kelas "berasingan".

• $ ("li: only-child")-Dapatkan item senarai yang dengan sendirinya.
• $ ("ul> li") - Dapatkan hanya item senarai dengan senarai ibu bapa yang tidak teratur.
Walaupun saya secara peribadi mendapati bungkus untuk menjadi fungsi jQuery yang paling berguna, ia hanya satu daripada banyak, termasuk Hide, Show, Fadeout ("Slow") dan Slideup ("Fast"), hanya untuk menamakan beberapa. Anda mungkin boleh meneka apa yang dilakukan oleh setiap fungsi ini. Tutorial Starter JQuery di laman jQuery adalah panduan pemula yang lembut, dan membawa anda melalui beberapa fungsi yang paling biasa.

Tetapi mungkin ciri paling kemas tunggal JQuery adalah keupayaannya untuk "rantai" berfungsi bersama -sama. Dalam erti kata lain, jika saya mahu menambah div kedua ke unsur -unsur HR kami untuk beberapa alasan gila, saya hanya dapat menambah panggilan lain ke fungsi bungkus ke akhir kod saya, seperti ini:

Ia begitu mudah, ia gila. Gila seperti musang!

$(document).ready(function(){ <br>
  $("hr").wrap("<div class='line'></div>"); <br>
});

bahagian laman web anda di pasaran memberikan anda satu lagi contoh di mana ini mungkin berguna, seperti yang ditunjukkan di bawah.

Apabila kami sedang membangunkan halaman ini, saya ingin menambah ikon kecil ke sudut bawah setiap lakaran kecil. Ini memerlukan setiap elemen IMG untuk dibalut div kontena, dan div lain yang menunjukkan ikon akan diposisikan dalam div kontena.

Sekali lagi, kod jQuery hanya satu baris (saya telah memisahkannya di sini kerana kita mempunyai lebar lajur terhad untuk bekerja dengan).

Dalam bahasa Inggeris biasa, kod ini hanya meminta jQuery untuk:

$(document).ready(function(){ <br>
  ... <br>
});

• Cari semua imej dalam elemen li yang berada di dalam #thumbnails.
• bungkus imej -imej ini dalam div yang disebut "bungkus".
• memerah div lain (yang mempunyai grafik ikon) dalam "bungkus" div saya sebelum imej saya.

Sekarang kita mempunyai struktur, CSS tidak selebihnya.

Sudah tentu, jika JavaScript dimatikan, lakaran kecil pautan terus ke fail imej mentah, dan tidak perlu ikon. Sekarang itulah yang saya panggil degradasi elegan.

Seperti kebanyakan perpustakaan JavaScript yang lain, jQuery mampu beberapa helah yang sangat tinggi (kami telah menutup ciri-ciri Ajaxnya dalam artikel sebelumnya), tetapi tarikan terbesar bagi saya adalah keupayaannya untuk menyelesaikan masalah kecil dengan cepat dan dengan minimum kekecohan.

Seperti yang mungkin anda katakan, saya sudah menjadi peminat besar. Saya harap anda juga akan berguna.

Dan tentu saja, jika anda memperluaskan cakrawala JavaScript anda, jangan lupa untuk menaik taraf ke versi terbaru Firebug Extension Joe Hewitt, yang kini menjadi debuggers Raja JavaScript yang tidak dipertikaikan.

Artikel ini pada asalnya diterbitkan dalam Reka Bentuk View #23.

soalan yang sering ditanya mengenai jQuery dan JavaScript untuk pereka

Apakah perbezaan antara JQuery dan JavaScript? JQuery, sebaliknya, adalah perpustakaan JavaScript yang cepat, kecil, dan kaya. Ia menjadikan perkara-perkara seperti traversal dan manipulasi dokumen HTML, pengendalian acara, dan animasi lebih mudah dengan API yang mudah digunakan yang berfungsi merentasi pelbagai pelayar. Pada asasnya, JQuery adalah satu set perpustakaan JavaScript yang direka untuk memudahkan dokumen HTML melintasi, pengendalian acara, dan animasi. Anda boleh memuat turunnya dari laman web JQuery rasmi atau memasukkannya terus dari rangkaian penghantaran kandungan (CDN). Sebaik sahaja perpustakaan dimasukkan ke dalam projek anda, anda boleh mula menggunakan fungsi jQuery dengan menggunakan tanda $ diikuti oleh pemilih (untuk memilih elemen html) dan tindakan jQuery (untuk melaksanakan pada unsur -unsur yang dipilih). Acara pengendalian (seperti klik atau pergerakan tetikus), membuat animasi, dan membuat panggilan AJAX untuk mengambil atau menghantar data ke pelayan. Ia juga digunakan untuk membuat ciri interaktif seperti slider imej, pengesahan bentuk, dan pemuatan kandungan dinamik.

Bagaimanakah JQuery memudahkan kerja dengan JavaScript? Ia juga mengendalikan banyak isu keserasian silang pelayar yang boleh timbul apabila menulis javascript mentah, menjadikan kod anda lebih mudah untuk menulis dan menyelenggara. Ia menyediakan ciri yang dipanggil Mod Noconflict, yang membolehkan anda menggunakan jQuery dengan perpustakaan lain yang juga menggunakan simbol $. Laman web JQuery rasmi menyediakan dokumentasi dan tutorial yang komprehensif. Platform dalam talian lain seperti CodeCademy, Udemy, dan Khan Academy juga menawarkan kursus pada jQuery. Anda boleh menggunakan alat pemaju penyemak imbas untuk memeriksa unsur -unsur, melihat log konsol, dan melangkah melalui kod anda. Di samping itu, jQuery menyediakan beberapa kaedah seperti .error (), .fail (), dan .done () untuk mengendalikan kesilapan dan pengecualian. JQuery CDN untuk masa pemuatan lebih cepat.

Bagaimana saya boleh mengoptimumkan kod jQuery saya untuk prestasi yang lebih baik?

Terdapat beberapa cara untuk mengoptimumkan kod jQuery anda untuk prestasi yang lebih baik. Ini termasuk: meminimumkan manipulasi DOM, menggunakan pemilih ID dan bukan pemilih kelas, objek caching jQuery, dan menggunakan kaedah .on () untuk mengikat acara. Ia menyediakan sistem antara muka pengguna berasaskan HTML5 yang bersatu untuk semua platform peranti mudah alih yang popular.

Atas ialah kandungan terperinci JQuery: JavaScript mudah untuk pereka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!