Mencipta aplikasi berasaskan Ajax menjadi sangat mudah dan pantas dengan jQuery.
jQuery pada asalnya dicipta oleh John Resig pada awal tahun 2006. Projek jQuery kini diselenggara dan diselenggara oleh kumpulan pembangun yang diedarkan sebagai projek sumber terbuka.
Anda boleh menjimatkan banyak masa dan usaha dengan jQuery. Jadi tambahkan tapak ini pada kegemaran anda dan teruskan membaca
Terdapat banyak lagi perkara yang boleh anda lakukan dengan jQuery.
Senarai itu tidak berakhir di sana, terdapat banyak perkara hebat lain yang boleh anda lakukan dengan jQuery.
Terdapat beberapa kelebihan mengapa seseorang harus memilih untuk menggunakan jQuery:
Untuk bermula, mari kita muat turun salinan jQuery dahulu dan kemudian masukkannya dalam projek kami. Dua versi jQuery tersedia untuk dimuat turun: tergesa-gesa e tidak dimampatkan .
Fail yang tidak dimampatkan lebih sesuai untuk pembangunan atau penyahpepijatan; manakala, fail yang diperkecil dan dimampatkan disyorkan untuk pengeluaran kerana ia menjimatkan lebar jalur dan meningkatkan prestasi kerana saiz fail yang lebih kecil.
Kami boleh memuat turun jQuery dari sini: https://jquery.com/download/
Sebaik sahaja anda memuat turun fail jQuery, anda boleh melihat bahawa ia mempunyai sambungan js, iaitu fail JavaScript. Sebenarnya JQuery hanyalah perpustakaan JavaScript, jadi anda boleh memasukkan fail jQuery dalam dokumen HTML dengan elemen sama seperti anda memasukkan fail JavaScript biasa.
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Ingat untuk sentiasa memasukkan fail jQuery sebelum skrip tersuai; jika tidak, API jQuery tidak akan tersedia apabila kod jQuery anda cuba mengaksesnya.
Seperti yang anda mungkin perasan, kami melangkau atribut dalam contoh sebelumnya type="text/javascript" di dalam tag . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiselesai dalam HTML5 dan dalam semua penyemak imbas moden.
Sebagai alternatif, anda boleh membenamkan jQuery ke dalam dokumen anda melalui pautan CDN (Content Delivery Network) yang tersedia secara percuma, jika anda lebih suka mengelak daripada memuat turun fail.
CDN boleh menawarkan kelebihan prestasi dengan mengurangkan masa muat, kerana mereka mengehoskan jQuery pada berbilang pelayan di seluruh dunia, dan apabila pengguna meminta fail, ia akan disampaikan daripada pelayan terdekat.
Ini juga mempunyai kelebihan bahawa jika pelawat halaman web anda telah memuat turun salinan jQuery daripada CDN yang sama semasa melawat tapak lain, mereka tidak perlu memuat turunnya semula kerana ia sudah berada dalam cache penyemak imbas mereka.
Dalam kes ini anda perlu menulis:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Sebagai tambahan kepada CDN yang disediakan oleh projek jquery, anda boleh memasukkan jQuery melalui Google e microsoft cdn.
Setelah melihat matlamat perpustakaan jQuery dan cara memasukkannya ke dalam dokumen anda, kini adalah masa untuk mempraktikkan jQuery.
Sekarang mari kita lakukan operasi jQuery yang mudah dengan menukar warna teks pengepala daripada warna pradefiwarna hitam hingga hijau.
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Dalam kod kami melakukan operasi jQuery mudah dengan menukar warna pengepala iaitu elemen menggunakan kaedah pemilih dan css() elemen jQuery apabila dokumen sedia, dikenali sebagai acara sedia dokumen.
Pernyataan jQuery biasanya bermula dengan tanda dolar ( $) dan diakhiri dengan koma bertitik ( ;).
Dalam jQuery, tanda dolar ( $) hanyalah alias untuk jQuery. Pertimbangkan contoh kod berikut yang menunjukkan pernyataan jQuery yang paling mudah.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Contoh hanya memaparkan mesej amaran "Hello I'm a JQuery sign” kepada pengguna. Mari lihat beberapa ciri:
<script>: jQuery hanyalah perpustakaan JavaScript, kod jQuery boleh diletakkan di dalam elemen <script>, atau anda boleh meletakkannya dalam fail JavaScript luaran;$(document).ready(handler); dikenali sebagai acara bersedia. Di mana handler ia adalah fungsi yang dihantar kepada kaedah yang akan dilaksanakan, sebaik sahaja dokumen itu siap, iaitu apabila hierarki DOM telah dibina sepenuhnya.Kaedah jQuery ready() ia biasanya digunakan dengan fungsi tanpa nama. Jadi, contoh di atas juga boleh ditulis dalam notasi trengkas seperti ini:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Di dalam fungsi anda boleh menulis pernyataan jQuery untuk melakukan sebarang tindakan mengikut sintaks asas, seperti:
$(selector).action();Di mana, $(selector) ia pada asasnya memilih elemen HTML daripada pokok DOM supaya ia boleh dimanipulasi dan action() gunakan beberapa tindakan pada elemen yang dipilih, seperti menukar nilai sifat CSS, atau menetapkan kandungan elemen, dsb.
Sekarang mari kita lihat contoh lain yang menetapkan teks perenggan:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>Contoh jQuery merujuk kepada pemilih p, dan ini memilih semua perenggan, kemudian kaedah text() tetapkan kandungan teks perenggan dengan “Hello World!".
Teks perenggan dalam contoh sebelumnya digantikan secara automatik apabila dokumen sedia. Tetapi mari lihat bagaimana untuk melakukannya sekiranya anda ingin melakukan tindakan sebelum menjalankan kod jQuery, untuk menggantikan teks perenggan.
Mari kita pertimbangkan satu contoh terakhir:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>Dalam contoh ini teks perenggan digantikan hanya apabila peristiwa klik berlaku pada butang "Replace Text“, yang bermaksud apabila pengguna mengklik butang ini.
Anda boleh menggunakan pemilih ID untuk memilih satu item dengan ID unik pada halaman.
Sebagai contoh, kod jQuery berikut akan memilih dan menyerlahkan elemen dengan atribut ID id="markid", apabila dokumen sudah sedia.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Pemilih kelas boleh digunakan untuk memilih elemen dengan kelas tertentu.
Sebagai contoh, kod jQuery berikut akan memilih dan menyerlahkan elemen dengan atribut kelas class="markclass", apabila dokumen sudah sedia.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Pemilih item boleh digunakan untuk memilih item mengikut nama item.
Sebagai contoh, kod jQuery berikut akan memilih dan menyerlahkan semua perenggan, iaitu elemen "<p>" dokumen apabila ia sudah siap.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Anda boleh menggunakan pemilih atribut untuk memilih elemen berdasarkan salah satu atribut HTMLnya, seperti atribut pautan targetatau atribut sesuatu input type, dan lain-lain.
Sebagai contoh, kod jQuery berikut akan memilih dan menyerlahkan semua input teks, seperti elemen "<input>" dengan type="text", apabila dokumen sudah sedia.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Anda juga boleh menggabungkan pemilih CSS untuk membuat pilihan anda lebih tepat.
Sebagai contoh, anda boleh menggabungkan pemilih kelas dengan pemilih elemen untuk mencari elemen dalam dokumen yang mempunyai jenis dan kelas tertentu.
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>Sebagai tambahan kepada pemilih defiOleh itu, jQuery menyediakan pemilih tersuainya sendiri untuk meningkatkan lagi keupayaan memilih elemen pada halaman.
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>Peristiwa sering dicetuskan oleh interaksi pengguna dengan halaman web, seperti apabila mengklik pautan atau butang, memasukkan teks ke dalam kotak input atau kawasan teks, membuat pilihan dalam kotak pilihan, tekan kekunci pada papan kekunci, gerakkan penunjuk tetikus , dan lain-lain. Dalam sesetengah kes, penyemak imbas itu sendiri boleh mencetuskan peristiwa, seperti pemuatan halaman dan acara muat turun.
jQuery menambah baik pada mekanisme pengendalian acara asas dengan menawarkan kaedah acara untuk kebanyakan acara pelayar asli, beberapa kaedah ini adalah ready(), click(), keypress(), focus(), blur(), change(), dan lain-lain.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Secara amnya, acara boleh dikelaskan kepada empat kumpulan utama:
Peristiwa tetikus dicetuskan apabila pengguna mengklik pada item, menggerakkan penuding tetikus, dsb.
Berikut ialah beberapa kaedah jQuery yang biasa digunakan untuk mengendalikan acara tetikus.
click()Cara click() lampirkan fungsi pengendali acara pada elemen yang dipilih untuk acara "click“. Fungsi dipautkan dilaksanakan apabila pengguna mengklik pada item tersebut. Contoh berikut akan menyembunyikan unsur-unsur <p> pada halaman apabila diklik.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Cara dblclick() lampirkan fungsi pengendali acara pada elemen yang dipilih untuk acara "dblclick“. Fungsi dipautkan dilaksanakan apabila pengguna mengklik dua kali item tersebut. Contoh berikut akan menyembunyikan unsur-unsur <p> apabila mengklik dua kali padanya.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Cara hover() lampirkan satu atau dua fungsi pengendali acara pada elemen terpilih yang dilaksanakan apabila penunjuk tetikus bergerak masuk dan keluar dari elemen. Fungsi pertama berjalan apabila pengguna meletakkan penunjuk tetikus pada item, manakala fungsi kedua berjalan apabila pengguna mengalih keluar penunjuk tetikus daripada item tersebut.
Contoh berikut akan menyerlahkan item <p> apabila anda meletakkan kursor padanya, serlahan akan dialih keluar apabila anda mengeluarkan kursor.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Cara mouseenter() lampirkan fungsi pengendali acara pada elemen yang dipilih yang dilaksanakan apabila tetikus memasuki elemen. Contoh berikut akan menambah penonjolan kelas pada elemen <p> apabila anda meletakkan kursor di atasnya.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Cara mouseleave() lampirkan fungsi pengendali acara pada item terpilih yang berjalan apabila tetikus meninggalkan item. Contoh berikut akan mengalih keluar sorotan kelas daripada elemen <p> apabila anda mengeluarkan kursor daripadanya.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Acara papan kekunci dibangkitkan apabila pengguna menekan atau melepaskan kekunci pada papan kekunci. Mari lihat beberapa kaedah jQuery yang biasa digunakan untuk mengendalikan acara papan kekunci.
keypress()Cara keypress() melampirkan fungsi pengendalian acara pada elemen terpilih (biasanya kawalan bentuk) yang berjalan apabila penyemak imbas menerima input papan kekunci daripada pengguna. Contoh berikut akan memaparkan mesej apabila peristiwa dicetuskan keypress dan berapa kali ia dicetuskan apabila anda menekan kekunci pada papan kekunci anda.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Peristiwa tekan kekunci adalah serupa dengan peristiwa kekunci, kecuali kekunci pengubah suai dan bukan pencetak seperti Shift, Esc, Backspace atau Delete, kekunci anak panah, dsb. mereka melancarkan acara keydown tetapi bukan acara menekan kekunci.
keydown()Cara keydown() melampirkan fungsi pengendalian acara pada item terpilih (biasanya membentuk kawalan) yang dilaksanakan apabila pengguna pertama kali menekan kekunci pada papan kekunci. Contoh berikut akan memaparkan mesej apabila peristiwa dicetuskan keydown dan berapa kali ia dicetuskan apabila anda menekan kekunci pada papan kekunci anda.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Cara keyup() lampirkan fungsi pengendalian acara pada elemen terpilih (biasanya kawalan bentuk) yang dilaksanakan apabila pengguna melepaskan kekunci pada papan kekunci. Contoh berikut akan memaparkan mesej apabila peristiwa dicetuskan keyup dan berapa kali ia dicetuskan apabila anda menekan dan melepaskan kekunci pada papan kekunci anda.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Peristiwa borang dicetuskan apabila kawalan borang menerima atau kehilangan fokus, atau apabila pengguna menukar nilai kawalan borang, seperti menaip teks ke dalam input teks, memilih pilihan dalam kotak pilihan, dsb. Berikut ialah beberapa kaedah jQuery yang biasa digunakan untuk mengendalikan acara borang.
change()Cara change() lampirkan fungsi pengendali acara pada elemen <input> dan dilaksanakan apabila nilainya berubah. Contoh berikut akan memaparkan mesej amaran apabila memilih pilihan dalam kotak pilihan juntai bawah.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Untuk kotak klik, kotak semak dan butang radio, acara akan dihidupkan serta-merta apabila pengguna membuat pilihan tetikus, tetapi untuk input teks dan kawasan teks, acara akan menyala selepas elemen kehilangan fokus.
focus()Cara focus() melampirkan fungsi pengendali acara pada elemen terpilih (biasanya mengawal dan membentuk pengikatan) yang dilaksanakan apabila ia mendapat fokus. Contoh berikut akan memaparkan mesej apabila input teks menerima fokus.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Cara blur() lampirkan fungsi pengendali acara untuk membentuk elemen seperti <input>, <textarea>, <select> yang dilaksanakan apabila ia hilang fokus. Contoh berikut akan memaparkan mesej apabila input teks kehilangan fokus.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Cara submit() lampirkan fungsi pengendali acara pada elemen <form> yang berjalan apabila pengguna cuba menyerahkan borang. Contoh berikut akan memaparkan mesej berdasarkan nilai yang dimasukkan semasa cuba menyerahkan borang.
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>Peristiwa juga dicetuskan dalam situasi di mana halaman DOM (Model Objek Dokumen) sedia atau apabila pengguna mengubah saiz atau menatal tetingkap penyemak imbas, dsb. Berikut ialah beberapa kaedah jQuery yang biasa digunakan untuk mengendalikan jenis acara ini.
ready()Cara ready() menentukan fungsi untuk dilaksanakan apabila DOM dimuatkan sepenuhnya.
Contoh berikut akan menggantikan teks perenggan sebaik sahaja hierarki DOM dibina sepenuhnya dan sedia untuk dimanipulasi.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Cara resize() lampirkan fungsi pengendali acara pada elemen tetingkap yang berjalan apabila saiz tetingkap penyemak imbas berubah.
Contoh berikut akan menunjukkan lebar dan ketinggian semasa tetingkap penyemak imbas apabila anda cuba mengubah saiznya dengan menyeret sudutnya.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Cara scroll() lampirkan fungsi pengendali acara pada tetingkap atau pada iframe dan item boleh tatal yang berjalan apabila kedudukan tatal item berubah.
Contoh berikut akan memaparkan mesej apabila menatal tetingkap penyemak imbas.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Sektor tentera laut adalah kuasa ekonomi global yang sebenar, yang telah menavigasi ke arah pasaran 150 bilion...
Isnin lalu, Financial Times mengumumkan perjanjian dengan OpenAI. FT melesenkan kewartawanannya bertaraf dunia…
Berjuta-juta orang membayar untuk perkhidmatan penstriman, membayar yuran langganan bulanan. Adalah menjadi pendapat umum bahawa anda…
Coveware oleh Veeam akan terus menyediakan perkhidmatan tindak balas insiden pemerasan siber. Coveware akan menawarkan keupayaan forensik dan pemulihan…