Contoh penggunaan acara dan animasi dalam JQuery_jquery
WBOYasal
2016-05-16 16:17:581189semak imbas
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
}
});
})
Operasi di atas menyedari bahawa apabila anda mengklik untuk membesarkan, ketinggian kawasan teks menjadi lebih tinggi dan kawasan menjadi lebih besar Apabila anda mengklik untuk mengurangkan masa, kawasan kawasan teks menjadi lebih kecil, iaitu kesan animasi adalah. dicapai.
$(fungsi () {
$("#checkall").bind("klik", fungsi () {
$(":checkbox").setiap(fungsi () {
$(this).attr("checked", "checked"); //Apabila anda mengklik butang, semua item perlu dipilih
});
});
$("#checkno").bind("klik", fungsi () {
$(":checkbox").attr("checked", false); //Apabila anda mengklik butang, semua butang mesti dinyahtanda
});
$("#checkRev").bind("klik", fungsi () {
$(":checkbox").setiap(fungsi () {
if ($(this).attr("checked") == "checked") {
$(this).attr("checked", false);
}
lain {
$(this).attr("checked", true); //Yang dipilih perlu dikosongkan apabila butang diklik dan yang tidak dipilih dipilih
}
});
});
//Atau:
$(this).attr("checked", !$(this).attr("checked"));
});
Apa yang perlu diperhatikan di sini ialah untuk menentukan sama ada kotak semak ditandakan atau tidak ditanda, tujuan mesti dicapai dengan mengawal atribut yang ditandakan jika atribut yang ditanda adalah benar, ia bermakna ia dipilih jika ia adalah palsu , ini bermakna ia tidak dipilih.
$(fungsi () {
$("#add").klik(fungsi () {
var selectoption = $("#select1 option:selected");
selectoption.remove();
selectoption.appendTo('#select2'); //Tambahkan item yang dipilih pada kotak aelect di sebelah kanan
});
$("#addAll").bind("klik",fungsi () {
var options = $("#select1 option");
options.appendTo('#select2');
});
});
Tambah di sebelah kanan Tambahkan semua di sebelah kanan
Operasi di atas dicapai dengan mengklik pada item yang dipilih di sebelah kiri, dan kemudian menambahnya pada kotak di sebelah kanan Anda boleh menambahnya satu demi satu, atau anda boleh menambahnya sekaligus.
$("#table tr:odd").addClass("odd"); //Pilih bilangan baris dengan indeks ganjil
$("#table tr:even:not(:first)").addClass("even"); //Pilih bilangan baris dengan nombor genap kecuali indeks 0
$("jadual tr").setiap(fungsi () {
$(this).klik(fungsi () {
$(this).css("backgroundColor","red").siblings().css("backgroundColor","");
});
})
Nama
Jantina
Kediaman sementara
Pasukan Reka Bentuk Meja Hadapan
Zhang San
Lelaki
Ningbo, Zhejiang
Wang Wu
Lelaki
Changsha, Hunan
Zhao Liu
Lelaki
Changsha, Hunan
Pasukan Pembangunan Belakang
Sun Qi
Lelaki
Changsha, Hunan
Rabu
Lelaki
Changsha, Hunan
Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn