Contoh penggunaan acara dan animasi dalam JQuery_jquery
WBOY
Lepaskan： 2016-05-16 16:17:58
asal
1198 orang telah melayarinya
Contoh dalam artikel ini menerangkan penggunaan acara dan animasi dalam JQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:
$(fungsi () {
$("#divid h5.head").bind("click", function () { //bind event, yang mengandungi tiga parameter, yang pertama ialah acara, yang kedua ialah acara
alert($(this).text());
});
$("#divid h5.content").css("display", "none"); //Kaedah css adalah untuk menetapkan gaya label secara dinamik
});
$(fungsi () {
$("#btnid").bind("klik", fungsi () {
jika (bool == benar) {
$("#btnid .content").css("paparan", "tiada");
bool = palsu;
$(this).val("paparan");
}
lain {
$("#btnid .content").css("display", "");
bool = benar;
$(this).val("tersembunyi");
}
});
});
$(fungsi () {
$("input[type=button]").bind("klik", fungsi () { //Paparkan dan sembunyikan kandungan
kandungan var = $("#divid .content");
jika (content.is(":visible")) {
content.hide();
$(this).val("paparan");
}
lain {
content.show();
$(this).val("tersembunyi");
}
});
});
Rocky?
Biarkan hujan tidak perlu membawa payung. Biarkan semuanya selesai.
Dalam operasi di atas, kami baru mempelajari peristiwa bind, dan peristiwa bind mempunyai tiga parameter Parameter pertama ialah nama acara, seperti: klik, dbclick, alih tetikus, dll. Parameter kedua ialah data. Objek yang dilalui, parameter ketiga ialah kaedah, yang digunakan untuk memproses fungsi acara terikat Ini adalah acara istimewa kami daripada maklumat teks Sebelum kita belajar show() dan hide(), kita biasanya menulis dengan cara pertama di atas. Hanya tentukan pembolehubah jenis bool Ia masih sangat mudah untuk menulis, tetapi apabila menulis butang pemprosesan masa sembunyikan di atas masih agak menjengkelkan, jadi selepas belajar show() dan hide(), ia menjadi lebih mudah, iaitu, anda boleh menyembunyikan dan menunjukkannya secara langsung. Anda boleh membandingkannya. Jelas sekali, pemprosesan kod adalah mudah.
$(fungsi () {
$("input[type=button]").togol(function () { //Kedua-dua parameter togol ialah peristiwa, yang dipanggil secara bergilir
$(this).css("backgroundColor","merah");
}, fungsi () {
$(this).css("warna latar", "kuning");
});
});
$(fungsi () {
$("div").setiap(fungsi () {
$(this).bind("mouseup", fungsi (e) {
alert(e.pageX); //Keluarkan kedudukan arah-x tetikus
alert(e.pageY); //Keluarkan kedudukan tetikus dalam arah y
alert(e.which); //Output pilihan butang tetikus, 1 ialah butang kiri tetikus, 2 ialah butang roller, 3 ialah butang kanan tetikus
});
});
});
$(fungsi () {
$("#txt").keydown(fungsi () {
e.preventDefault(); //Cegah pautan tag
alert(e.keyCode); //Papan kekunci mendapat kod tanyanya
});
});
$(fungsi () {
$("#ouuerdiv").klik(fungsi () {
alert($(this).text());
});
$("#div").klik(fungsi () {
alert($(this).text());
});
$("#innerdiv").click(function () { //Di sini kami menulis fenomena menggelegak sesuatu acara. Anda boleh menggunakan preventDefault atau recentDefault untuk mengatur gelembung.
alert($(this).text());
});
})
Togol peristiwa: mensimulasikan peristiwa klik tetikus Peristiwa pertama dicetuskan apabila tetikus bergerak ke atas elemen, dan peristiwa kedua dicetuskan apabila tetikus meninggalkan elemen. Kedua-dua peristiwa dicetuskan dengan bertukar antara satu sama lain; di samping itu, acara menggelegak sebenarnya difahami secara ringkas sebagai: terdapat berbilang peristiwa pada halaman, atau berbilang elemen boleh sepadan dengan satu acara. Andaikan terdapat dua elemen dalam halaman seperti di atas, satu elemen div bersarang dalam elemen div yang lain dan kedua-duanya mempunyai peristiwa klik yang terikat kepada mereka Kemudian apabila anda mengklik pada elemen div dalam, div luar juga akan dipaparkan hanya peristiwa yang menggelegak. Apa yang perlu diperhatikan di sini adalah bahawa mereka semua terikat dengan acara Adalah mudah untuk mengambil mudah bahawa hanya peristiwa klik berlaku secara dalaman.
3. Alih keluar acara dan tambahkan berbilang acara berturut-turut
$(fungsi () {
$("alih keluar").klik(fungsi () {
$("#btn").unbind(); //Alih keluar acara
});
$("#btn").bind("click", function () { //Anda boleh menambah berbilang acara secara berterusan
$("#text").append("
Saya adalah acara pertama ditambah
")
})
.bind("klik", fungsi () {
$("#text").append("
Saya adalah acara tambahan kedua
")
})
.bind("klik", fungsi () {
$("#text").append("
Saya adalah acara ketiga ditambah
")
})
});
div maklumat teks
Di atas kami mengetahui bahawa acara mengikat adalah untuk menambah acara, dan menyahikat adalah untuk mengalih keluar acara Kami boleh membandingkannya, hehe, dan untuk menambah berbilang acara berturut-turut, ia sebenarnya apabila anda menambah acara dan terus mengikat ke. menambah acara.
4. Acara simulasi
Peristiwa pengikatan di atas, peristiwa klik, dsb. yang kami pelajari secara amnya ialah peristiwa yang boleh dicetuskan dengan mengklik butang Walau bagaimanapun, kadangkala, adalah perlu untuk mensimulasikan operasi pengguna untuk mencapai kesan klik, contohnya: apabila pengguna masuk dan pembelian Jika peristiwa klik dicetuskan kemudian tanpa pengguna perlu mengklik, maka kami akan menggunakan kaedah pencetus() untuk menyelesaikan operasi simulasi.
$(fungsi () {
$("#btn").klik(fungsi () {
//$("#div").hide(2000); //Sembunyi dalam masa 2 saat
//$("#div").show(2000); //Tunjukkan dalam masa 2 saat
//$("#div").fadeIn(2000); //Tingkatkan kelegapan elemen sehingga elemen dipaparkan sepenuhnya
//$("#div").fadeOut(2000); //Kurangkan kelegapan elemen sehingga elemen hilang sepenuhnya
$("#btn").togol(fungsi () {
$("div").slideDown(2000); //Tukar ketinggian elemen dan paparkannya dari atas ke bawah
$(this).val("paparan")
}, fungsi () {
$("div").slideUp(2000); //Tukar ketinggian elemen, pendekkan dan sembunyikannya dari bawah ke atas
$(this).val("tersembunyi")
});
});
//$("#btn").klik(fungsi () {
// $("div").fadeTo(600,0.2); //Kaedah fadeTo boleh digunakan apabila ketelusan ialah 0.2 dalam masa 0.6s
//});
});
1234
Kaedah animasi
6. Aplikasi kotak teks berbilang baris - perubahan ketinggian
$(fungsi () {
var comment = $("#comment");
$(".lebih besar").klik(fungsi () {
jika (komen.tinggi() < 500) {
comment.height($("#comment").height() 100); //Naikkan ketinggian sebanyak 100 berdasarkan ketinggian asal
}
});
$(".smaller").klik(fungsi () {
if (comment.height() > 100) {
comment.height($("#comment").height() - 100); //Kurangkan ketinggian asal sebanyak 100
}
});
})
