JQuery untuk pengenalan dan konsep kami yang diperlukan untuk meletakkannya untuk digunakan.
Pengertian Dasar
Pengantar tutorial ini dimaksudkan untuk memberikan Anda dengan jQuery penindasan. Jika Anda belum memiliki membuat halaman, membuat halaman HTML dengan isi berikut:
<html>
<head>
<script type="text/javascript" src="pfad/zu/jquery.js"></script>
<script type="text/javascript">
// Di sini Anda datang kode bersih
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
|
Anda memiliki atribut src pada skrip tag menyesuaikan diri agar Anda salinan jquery.js menunjukkan. Jika Anda jquery.js dalam direktori yang sama seperti file HTML, tampaknya sebagai berikut:
<script type="text/javascript" src="jquery.js"></script> |
Anda dapat membuat salinan jQuery men-download dari situs jQuery.
Jalankan kode untuk “Document Siap” - setelah dokumen siap
Hal pertama yang banyak JavaScript programmer, adalah dokumen kode untuk menambahkan, ini adalah sama:
window.onload = function(){ ... }
|
Ini adalah kode yang akan dijalankan ketika halaman di-load. Masalahnya di sini adalah kode yang tidak dilaksanakan sebelum semua telah selesai memuat gambar (yang termasuk spanduk periklanan). Alasan mengapa kita harus window.onload zurückgreift adalah bahwa Anda ingin memastikan bahwa dokumen yang memuat selesai sebelum anda menjalankan kode JavaScript. Kode JavaScript akan dijalankan terlalu awal, dapat menimbulkan masalah.
Untuk menghindari masalah ini, ada pernyataan jQuery sederhana, Anda dapat digunakan. Hal ini dikenal sebagai “Siap-acara” (engl. siap acara “) diketahui:
$(document).ready(function(){
// Contoh di sini JQuery
});
|
Kode ini memeriksa dokumen dan menunggu sampai siap untuk dimanipulasi - persis apa yang kami butuhkan. Salinan potongan kode ini dan menambahkan skrip ke daerah ( “/ / Di sini Anda datang kode bersih”) halaman pengujian Anda. Sisa jQuery contoh harus dilakukan dalam panggilan fungsi ini terpasang, sehingga mereka akan dilaksanakan jika dokumen sudah siap.
Bila mengklik membuat sesuatu
Yang pertama, kita akan mencoba untuk adalah sesuatu yang terjadi ketika link diklik. Untuk melakukan hal ini, kami menambahkan dalam siap-fungsi ( “/ / jQuery contoh di sini”) kode berikut:
$("a").click(function(){
alert("Terima kasih untuk mengunjungi!");
});
|
Simpan dokumen HTML Anda dan mengundang halaman dalam browser Anda. Jika anda klik pada link, browser popup dengan pesan “Terima kasih untuk mengunjungi!” dibuka sebelum jQuery halaman terbuka.
Untuk “klik” dan kebanyakan acara lainnya dapat standar perilaku mencegah browser (dalam hal ini, membuka link) dengan menggunakan “palsu” dalam hal penanganan hasilnya:
$("a").click(function(){
alert("Terima kasih untuk mengunjungi!");
return false;
});
|
Sebuah kelas CSS untuk menambahkan
Tugas umum lain adalah dengan menambahkan (atau menghapus) oleh CSS kelas elemen:
$("a").addClass("test");
|
Jika Anda memiliki deklarasi CSS berikut di kepala dari dokumen HTML:
<style type="text/css">a.test { font-weight: bold; }
</style>
|
dan kemudian yang telah disebutkan sebelumnya addClass panggilan untuk dilaksanakan, maka semua A-lemak item ( “tebal”) ditampilkan. CSS ke kelas, Anda dapat menghapus panggilan removeClass dalam cara analog.
Efek Khusus
jQuery menyajikan beberapa efek khusus tersedia untuk membantu anda berdiri keluar dari situs web lain dapat. Untuk tes ini, anda dapat klik seorang pedagang yang digunakan:
$("a").click(function(){
$(this).hide("slow");
return false;
});
|
Jika sekarang Anda klik pada link, akan sangat lambat masalah.
Chaining (The Magic dari jQuery)
jQuery menggunakan pendekatan untuk menarik para kode pendek dan mudah untuk mempertahankan. Untuk semua yang berorientasi objek dengan pemrograman, konsep ini harus mudah dimengerti.
singkatnya: Setiap jQuery metode kembali objek itu sendiri, sehingga memungkinkan untuk menggunakan hubungan:
$("a").addClass("test").show().html("foo");
|
Setiap satu metode (addClass, menampilkan, dan html), yang jQuery objek, sehingga memungkinkan untuk terus metode lain.
Anda dapat mempengaruhi yang item yang dipilih untuk metode tertentu akan diterapkan:
$("a")
.filter(".clickme")
.click(function(){
alert("Anda akan meninggalkan halaman ini sekarang.");
})
.end()
.filter(".hideme")
.click(function(){
$(this).hide();
return false;
})
.end();
|
Contoh ini berfungsi untuk kode HTML berikut:
<a href="http://google.com/" class="clickme">saya menampilkan pesan </a> <a href="http://yahoo.com/" class="hideme">saya verschinde</a> <a href="http://microsoft.com/">Saya biasa link</a> |
Pemilihan elemen dapat digunakan dengan cara berikut dipengaruhi:
* add(),
* children(),
* eq(),
* filter(),
* find(),
* gt(),
* lt(),
* next(),
* not(),
* parent(),
* parents() und
* siblings()
|
Untuk rincian tentang metode ini dapat ditemukan dalam dokumentasi.
Fungsi panggilan
Fungsi panggilan balik (Inggris panggil fungsi) dijelaskan dalam ilmu komputer fungsi ke fungsi lainnya sebagai parameter diberikan, dan dari ini dalam kondisi tertentu disebut. Berikut ini pendekatan desain pola pembalikan dari kontrol. Adalah penting untuk mengetahui cara menggunakan panggilan berfungsi dengan baik sebagai parameter lulus.
Panggil fungsi tanpa parameter
Panggilan balik fungsi tanpa parameter akan disahkan sebagai berikut:
$.get('myHTML.html', myFunction);
|
Parameter yang kedua adalah hanya fungsi nama (bukan sebagai string dan tanpa tanda kurung)
Panggil fungsi dengan parameter
Apa yang Anda lakukan ketika Anda menarik kembali fungsi parameter ingin memberikan?
salah:
$.get('myHTML.html', myFunction(param1, param2));
|
Yang tidak akan berfungsi karena di sini pertama fitur myFunction (param1, param2) akan dijalankan dan hasil kemudian kedua sebagai parameter untuk $. Dapatkan () digunakan.
dengan benar:
$.get('myHTML.html', function(){
myFunction(param1, param2);
});
|
Informasi lebih lanjut tersedia pada dokumentasi samping.