4. Buat html Anda bergerak.
Anda dapat menggunakan jQuery untuk melakukan beberapa animasi dan efek dasar. Inti dari efek animasi adalah fungsi animate(), yang dapat mengubah gaya css yang ditentukan kapan saja, misalnya, Anda dapat mengubah tinggi, lebar, transparansi, atau posisi Anda dapat menggunakan milidetik saat mengubah kecepatan (milidetik), atau Anda dapat menggunakan nilai kecepatan yang telah ditentukan: lambat, normal, atau cepat.
Berikut adalah contoh animasi yang mengubah lebar dan tinggi suatu elemen secara bersamaan tidak ada nilai awal, hanya nilai akhir. Nilai. Nilai awal dapat diambil langsung dari elemen yang ada. Pada saat yang sama, saya juga menambahkan fungsi panggilan balik:
$('#grow').animate({ height: 500). , lebar: 500 }, "lambat", function() {alert('Elemen selesai berkembang!');});Menggunakan fungsi bawaan jQuery ini, cukup mudah untuk membuat efek animasi yang dapat Anda gunakan fungsi show() dan fungsi hide() untuk menampilkan dan menyembunyikan Elemen dapat diatur agar segera dieksekusi atau pada kecepatan tertentu. Anda juga dapat menggunakan fungsi fadeIn() dan fadeOut() atau fungsi slideDown() dan slideUp() untuk menampilkan atau menyembunyikan suatu elemen, tergantung pada efek apa yang Anda inginkan. Berikut adalah contoh sederhana untuk menampilkan efek geser ke bawah pada bilah navigasi:
$('#nav').slideDown('slow'); scripting dan penanganan event jQuery mungkin yang terbaik dalam memanipulasi DOM dan pemrosesan Event telah dilakukan. Sebenarnya sangat mudah untuk melintasi dan mengoperasikan DOM. Mengikat, menghapus dan memanggil event juga sangat alami dan mudah digunakan, dan dibandingkan dengan secara manual menulis kode ini, kesalahan bisa sangat dikurangi. Faktanya, jQuery menyederhanakan Berbagai operasi DOM. Anda dapat membuat elemen dan menautkannya ke elemen lain menggunakan fungsi append(), Anda dapat menyalin elemen menggunakan clone(), Anda bisa. mengatur konten menggunakan html(), Anda dapat menghapus konten menggunakan fungsi kosong(), dan menghapus menggunakan fungsi () menghapus elemen dan konten, dan Anda bahkan dapat menggunakan fungsi wrap() untuk membungkus elemen ini dengan elemen lain fungsi yang dapat mengubah konten objek jQuery itu sendiri dengan melintasi DOM. Anda juga bisa mendapatkan saudara() dari sebuah elemen. , Parents(), atau Children() find saudara. find() mungkin yang paling kuat dari fungsi-fungsi ini. Ini memungkinkan Anda untuk menggunakan pemilih jQuery untuk Mencari di dalam objek jQuery Anda dan node turunannya. Fungsi-fungsi ini menjadi lebih kuat ketika dipasangkan dengan fungsi end() fungsi end() bertindak seperti pembatalan, menyebabkan objek jQuery Anda kembali ke saat Anda memanggil find() atau parent() atau keadaan lain sebelum fungsi traversal. Jika Anda menggunakan tautan metode yang kami sebutkan di atas, fungsinya sangat kompleks dapat diimplementasikan dengan kode sederhana. Listing7 menunjukkan contoh, Anda akan menemukan formulir login dan melakukan beberapa operasi pada elemen di dalamnya. Listing 7. Melintasi dan memanipulasi DOM dengan mudah$('form#login')// sembunyikan semua label di dalam formulir dengan 'opsional' class.find( 'label.optional').hide().end()// tambahkan batas merah ke bidang kata sandi apa pun di form.find('input:password') .css('border', '1px solid red'). end()// tambahkan pengendali pengiriman ke form.submit(function(){return konfirmasi('Apakah Anda yakin ingin mengirimkan?');}) ; Percaya atau tidak, contoh ini sebenarnya hanya memiliki satu tautan Sebaris kode dengan beberapa spasi di tengahnya. Pertama, saya memilih formulir login. Kemudian, saya menemukan label opsional di dalamnya, menyembunyikannya, lalu memanggil end( ) untuk kembali ke formulir. Saya menemukan kotak masukan kata sandi dan mengubah batas menjadi merah, lalu memanggil end() lagi untuk kembali ke formulir. Terakhir, saya menambahkan fungsi pemrosesan waktu pengiriman ke formulir ini Yang menarik adalah selain kodenya yang sangat ringkas, jQuery juga mengoptimalkan semua operasi dengan sendirinya untuk memastikan bahwa ketika semuanya terhubung dengan baik, Anda tidak perlu mencari elemen dua kali. Menangani kejadian umum juga sangat sederhana, seperti memanggil fungsi click(), submit(), atau mouseover(), lalu meneruskannya ke event pendengar Fungsinya sama. Selain itu, Anda juga bisa menggunakan bind('eventname', function(){}) untuk tentukan fungsi pemrosesan acara. Anda dapat menggunakan unbind('eventname') untuk melepaskan ikatan suatu peristiwa, atau menggunakan unbind() untuk melepaskan ikatan semua peristiwa. Untuk informasi lebih lanjut tentang rangkaian fungsi ini dan cara menggunakannya, silakan lihat pemrograman aplikasi jQuery dokumentasi antarmuka (API). 6. Mengungkap kekuatan penyeleksi jQuery
Biasanya, Anda menggunakan ID untuk memilih elemen, seperti #myid; atau menggunakan nama kelas Untuk memilih, seperti div.myclass. Namun, jQuery memiliki cara yang cukup rumit dan lengkap sintaks pemilih yang memungkinkan Anda menggunakan satu pemilih untuk menemukan kombinasi elemen apa pun.
Sintaks pemilih jQuery sebagian besar didasarkan pada CSS3 dan XPath. Semakin banyak Anda tahu tentang CSS3 dan XPath, semakin baik Anda dapat menggunakan jQuery , termasuk CSS3 dan XPath, silakan merujuk ke tautan sumber daya di akhir artikel ini.
CSS3 menyertakan beberapa sintaks yang didukung oleh semua, jadi Anda mungkin tidak terlalu sering melihatnya. Namun, Anda masih dapat menggunakannya untuk memilih elemen di jQuery, karena jQuery memiliki mesin parsing pemilih khusus sendiri. Misalnya, untuk menambahkan tanda hubung ke setiap kolom kosong dalam tabel, Anda dapat menggunakan operator semu :empty:
$('td:empty').html('- '); Bagaimana menemukan setiap elemen yang tidak mengandung nama kelas tertentu? CSS3 memiliki sintaks khusus untuk situasi ini, menggunakan :not pseudo-operator. Kode berikut akan menyembunyikan semua elemen kotak input teks yang tidak mengandung yang diperlukan nama kelas. $('input:not(.required)').hide( ); Anda juga dapat menggunakan koma untuk menghubungkan beberapa penyeleksi secara bersamaan, seperti di CSS pada saat yang sama. $('ul, ol, dl' ).hide();XPath adalah alat yang ampuh untuk menemukan elemen dalam dokumen. Ini agak berbeda dari CSS dan memungkinkan Anda menemukan banyak hal yang tidak dapat ditemukan menggunakan CSS Misalnya, Anda ingin menambahkan Untuk perbatasan, Anda dapat melakukan ini: $("input:checkbox/..").css('border', '1px solid #777'); jQuery juga memiliki beberapa penyeleksi tambahan itu tidak ditemukan di css dan XPath, misalnya, Untuk meningkatkan keterbacaan tabel, Anda mungkin ingin mengatur baris ganjil dan genap untuk menggunakan nama kelas yang berbeda. Ini disebut zebra bar. terima kasih kepada pemilih :odd. Ini kodenya. Mendemonstrasikan penggunaan kelas bergaris untuk mengubah warna latar belakang baris bernomor ganjil dalam tabel: $('table.striped > tr:odd').css('background', ' #999999'); Lihat, penyeleksi jQuery yang kuat dapat menyederhanakan kode Anda. Tidak peduli elemen apa yang ingin Anda pengaruhi, tidak peduli seberapa jelas atau buramnya, Anda selalu dapat menemukan cara untuk menargetkannya menggunakan pemilih jQuery sederhana. Memperluas jQuery menggunakan plug-in Tidak seperti perangkat lunak lain, Anda bisa Menulis plug-in jQuery bukanlah cobaan berat dengan sekumpulan API yang rumit. Faktanya, menulis plug-in untuk jQuery sangatlah sederhana sehingga Anda mungkin ingin melakukannya tulis sebuah plug-in nanti untuk membuat kode Anda lebih ringkas. Berikut adalah bagian paling dasar dari plug-in yang akan Anda tulis: $.fn.donothing = function(){return this;}; , perlu sedikit penjelasan. Pertama, Anda perlu menambahkan fungsi ke setiap objek jQuery, Anda harus menetapkannya ke $.fn. Kedua, fungsi tersebut harus mengembalikan ini (objek jQuery) untuk memastikan bahwa itu tidak merusak rangkaian metode aturan yang disebutkan di atas. Anda dapat dengan mudah memperluas kode di atas. Untuk menulis Untuk mengubah warna latar belakang plug-in daripada menggunakan css('background'), Anda dapat melakukan ini: $.fn.background = function(bg) {return this.css('background', bg);}; Perhatikan bahwa saya dapat langsung mengembalikan fungsi css(), karena ini sudah menjadi objek jQuey itu sendiri, sehingga rangkaian metode dapat bekerja dengan baik menemukan bahwa Anda terus-menerus mengulangi kode. Misalnya, ketika Anda menggunakan fungsi every() untuk menangani hal yang sama berulang kali, Anda dapat mempertimbangkan untuk menggunakan plugin [Anotasi: Tidak terlalu jelas.]. sangat mudah untuk dikembangkan, ada ribuan plug-in yang tersedia untuk Anda Gunakan. jQuery memiliki plug-in untuk tabel, sudut membulat, tayangan slide, tooltips, pemilihan tanggal, dan hampir semua aplikasi yang dapat Anda temukan daftar lengkap plug-in ada di daftar sumber daya di akhir artikel ini. Plug-in yang paling kompleks dan banyak digunakan adalah Interface, sebuah plug-in animasi yang menangani pengurutan, drag efek, berbagai efek khusus yang kompleks, dan lainnya. efek antarmuka pengguna yang menarik dan kompleks. Antarmuka untuk jQuery seperti halnya Scriptaculous untuk Prototipe. Plugin yang sama populer dan berguna adalah plugin Formulir, memungkinkan Anda mengirimkan formulir di latar belakang dengan mudah menggunakan ajax situasi ini: ketika Anda perlu membajak acara pengiriman formulir, kemudian temukan semua bidang keluaran teks yang berbeda, dan gunakan untuk membuat panggilan ajax.8.jquery Setelah itu, saya hanya berbicara tentang beberapa hal dangkal tentang jQuery menarik untuk digunakan, karena fitur-fitur baru dan metode baru yang Anda pelajari tampak sangat alami dan logis. Setelah Anda menggunakan jQuery, Anda akan menyadari bahwa itu dapat menyederhanakan pekerjaan Anda dalam pengembangan Javascript dan Ajax, setiap kali Anda mempelajari sesuatu, kodenya akan menjadi lebih sederhana
Setelah mempelajarijQuery
, saya menemukan banyak kesenangan dalam pemrograman Javascript, dan semua hal yang membosankan ditangani dengan baik, jadi saya hanya perlu Fokus pada bagian inti setelah menggunakan jQuery, saya hampir tidak dapat mengingat kapan terakhir kali saya menggunakan for loop. Saya bahkan takut menggunakan perpustakaan Javascript lainnya. jQuery benar-benar mengubah pandangan saya tentang pemrograman Javascript.