Membuat aplikasi berbasis Ajax menjadi sangat sederhana dan cepat dengan jQuery.
jQuery awalnya dibuat oleh John Resig pada awal tahun 2006. Proyek jQuery saat ini dikelola dan dikelola oleh sekelompok pengembang terdistribusi sebagai proyek sumber terbuka.
Anda dapat menghemat banyak waktu dan tenaga dengan jQuery. Jadi tambahkan situs ini ke favorit Anda dan lanjutkan membaca
Ada banyak hal lagi yang dapat Anda lakukan dengan jQuery.
Daftarnya tidak berakhir di situ, ada banyak hal keren lainnya yang dapat Anda lakukan dengan jQuery.
Ada beberapa keuntungan mengapa seseorang harus memilih menggunakan jQuery:
Untuk memulai, pertama-tama mari kita unduh salinan jQuery dan kemudian sertakan dalam proyek kita. Dua versi jQuery tersedia untuk diunduh: terburu-buru e tidak dikompresi .
File yang tidak dikompresi lebih cocok untuk pengembangan atau debugging; sementara, file yang diperkecil dan dikompresi direkomendasikan untuk produksi karena menghemat bandwidth dan meningkatkan kinerja karena ukuran file yang lebih kecil.
Kita dapat mengunduh jQuery dari sini: https://jquery.com/download/
Setelah Anda mengunduh file jQuery, Anda dapat melihat bahwa file tersebut memiliki ekstensi js, yaitu file JavaScript. Sebenarnya JQuery tidak lain adalah pustaka JavaScript, sehingga Anda dapat memasukkan file jQuery ke dalam dokumen HTML dengan elemen tersebut sama seperti Anda menyertakan file 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>Ingatlah untuk selalu menyertakan file jQuery sebelum skrip khusus; jika tidak, API jQuery tidak akan tersedia saat kode jQuery Anda mencoba mengaksesnya.
Seperti yang mungkin telah Anda perhatikan, kami melewatkan atribut pada contoh sebelumnya type="text/javascript" di dalam tag . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiselesai dalam HTML5 dan di semua browser modern.
Sebagai alternatif, Anda dapat menyematkan jQuery ke dalam dokumen Anda melalui tautan CDN (Content Delivery Network) yang tersedia secara gratis, jika Anda lebih suka menghindari mengunduh file.
CDN dapat menawarkan keunggulan kinerja dengan mengurangi waktu muat, karena mereka menghosting jQuery di beberapa server di seluruh dunia, dan ketika pengguna meminta file, itu akan dilayani dari server terdekat.
Ini juga memiliki keuntungan bahwa jika pengunjung halaman web Anda telah mengunduh salinan jQuery dari CDN yang sama saat mengunjungi situs lain, mereka tidak perlu mengunduhnya lagi karena sudah ada di cache browser mereka.
Dalam hal ini Anda harus menulis:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Selain CDN yang disediakan oleh proyek jquery, Anda dapat menyertakan jQuery via Google e Microsoft cdn.
Setelah melihat tujuan library jQuery dan cara memasukkannya ke dalam dokumen Anda, sekarang saatnya untuk mempraktikkan jQuery.
Sekarang mari kita lakukan operasi jQuery sederhana dengan mengubah warna teks header dari warna sebelumnyadefiselesai warna hitam ke 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 kode kami melakukan operasi jQuery sederhana dengan mengubah warna header yaitu elemennya menggunakan pemilih elemen jQuery dan metode css() saat dokumen siap, yang dikenal sebagai peristiwa siap dokumen.
Pernyataan jQuery biasanya dimulai dengan tanda dolar ( $) dan diakhiri dengan titik koma ( ;).
Di jQuery, tanda dolar ( $) hanyalah alias untuk jQuery. Pertimbangkan contoh kode berikut yang mendemonstrasikan pernyataan jQuery paling sederhana.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Contoh hanya menampilkan pesan peringatan “Hello I'm a JQuery sign” kepada pengguna. Mari kita lihat beberapa fitur:
<script>: jQuery hanyalah pustaka JavaScript, kode jQuery dapat ditempatkan di dalam elemen <script>, atau Anda dapat memasukkannya ke dalam file JavaScript eksternal;$(document).ready(handler); dikenal sebagai peristiwa siap. Dimana itu handler itu adalah fungsi yang diteruskan ke metode yang akan dieksekusi, segera setelah dokumen siap, yaitu ketika hierarki DOM telah selesai dibuat.Metode jQuery ready() biasanya digunakan dengan fungsi anonim. Nah, contoh di atas juga bisa ditulis dengan notasi steno seperti ini:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Di dalam suatu fungsi, Anda dapat menulis pernyataan jQuery untuk melakukan tindakan apa pun mengikuti sintaks dasar, seperti:
$(selector).action();Merpati, $(selector) itu pada dasarnya memilih elemen HTML dari pohon DOM sehingga dapat dimanipulasi dan action() terapkan beberapa tindakan pada elemen yang dipilih, seperti mengubah nilai properti CSS, atau menyetel konten elemen, dll.
Sekarang mari kita lihat contoh lain yang mengatur teks paragraf:
<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 mengacu pada pemilih p, dan ini memilih semua paragraf, lalu metodenya text() atur isi teks paragraf dengan “Hello World!".
Teks paragraf pada contoh sebelumnya secara otomatis diganti saat dokumen sudah siap. Tapi mari kita lihat bagaimana melakukannya jika Anda ingin melakukan tindakan sebelum menjalankan kode jQuery, untuk mengganti teks paragraf.
Mari 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 paragraf diganti hanya ketika peristiwa klik terjadi pada tombol "Replace Text“, yang berarti ketika pengguna mengklik tombol ini.
Anda dapat menggunakan pemilih ID untuk memilih satu item dengan ID unik di halaman.
Misalnya, kode jQuery berikut akan memilih dan menyorot elemen dengan atribut ID id="markid", ketika dokumen sudah siap.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Pemilih kelas dapat digunakan untuk memilih elemen dengan kelas tertentu.
Misalnya, kode jQuery berikut akan memilih dan menyorot elemen dengan atribut kelas class="markclass", ketika dokumen sudah siap.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Pemilih item dapat digunakan untuk memilih item berdasarkan nama item.
Misalnya, kode jQuery berikut akan memilih dan menyorot semua paragraf, yaitu elemen "<p>" dokumen ketika sudah siap.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Anda dapat menggunakan pemilih atribut untuk memilih elemen berdasarkan salah satu atribut HTML-nya, seperti atribut tautan targetatau atribut input type, dll.
Misalnya, kode jQuery berikut akan memilih dan menyorot semua masukan teks, seperti elemen "<input>" dengan type="text", ketika dokumen sudah siap.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Anda juga dapat menggabungkan pemilih CSS untuk membuat pilihan Anda lebih tepat.
Misalnya, Anda dapat menggabungkan pemilih kelas dengan pemilih elemen untuk menemukan elemen dalam dokumen yang memiliki 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>Selain pemilih definiti, jQuery menyediakan pemilih kustomnya sendiri untuk lebih meningkatkan kemampuan pemilihan 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 dipicu oleh interaksi pengguna dengan halaman web, seperti saat mengklik link atau tombol, memasukkan teks ke dalam kotak input atau area teks, membuat pilihan di kotak pilihan, menekan tombol pada keyboard, menggerakkan penunjuk tetikus , dll. Dalam beberapa kasus, browser itu sendiri dapat memicu peristiwa, seperti peristiwa pemuatan halaman dan pengunduhan.
jQuery meningkatkan mekanisme penanganan kejadian dasar dengan menawarkan metode kejadian untuk sebagian besar kejadian browser asli, beberapa dari metode ini adalah ready(), click(), keypress(), focus(), blur(), change(), dll.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Secara umum, peristiwa dapat diklasifikasikan menjadi empat kelompok utama:
Acara mouse dipicu ketika pengguna mengklik item, menggerakkan pointer mouse, dll.
Berikut adalah beberapa metode jQuery yang umum digunakan untuk menangani event mouse.
click()Metode click() lampirkan fungsi pengendali acara ke elemen yang dipilih untuk acara "click“. Fungsi tertaut dijalankan saat pengguna mengklik item tersebut. Contoh berikut akan menyembunyikan elemen <p> pada halaman saat diklik.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Metode dblclick() lampirkan fungsi pengendali acara ke elemen yang dipilih untuk acara "dblclick“. Fungsi tertaut dijalankan saat pengguna mengklik dua kali item tersebut. Contoh berikut akan menyembunyikan elemen <p> ketika mengklik dua kali mereka.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Metode hover() lampirkan satu atau dua fungsi event handler ke elemen terpilih yang dijalankan saat pointer mouse bergerak masuk dan keluar dari elemen. Fungsi pertama berjalan saat pengguna meletakkan penunjuk tetikus di atas item, sedangkan fungsi kedua berjalan saat pengguna menghapus penunjuk tetikus dari item tersebut.
Contoh berikut akan menyoroti item <p> saat Anda meletakkan kursor di atasnya, sorotan akan dihapus saat Anda menghapus kursor.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Metode mouseenter() lampirkan fungsi event handler ke elemen yang dipilih yang dijalankan saat mouse memasuki elemen. Contoh berikut akan menambahkan penyorotan kelas ke elemen <p> ketika Anda menempatkan kursor di atasnya.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Metode mouseleave() lampirkan fungsi penangan kejadian ke item terpilih yang berjalan saat mouse meninggalkan item. Contoh berikut akan menghapus sorotan kelas dari elemen <p> ketika Anda menghapus kursor dari itu.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Acara keyboard dimunculkan saat pengguna menekan atau melepaskan tombol pada keyboard. Mari kita lihat beberapa metode jQuery yang biasa digunakan untuk menangani event keyboard.
keypress()Metode keypress() melampirkan fungsi penanganan peristiwa ke elemen yang dipilih (biasanya kontrol formulir) yang berjalan saat browser menerima input keyboard dari pengguna. Contoh berikut akan menampilkan pesan saat event dipicu keypress dan berapa kali dipicu saat Anda menekan tombol di keyboard.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Acara penekanan tombol mirip dengan acara keydown, kecuali pengubah dan tombol noncetak seperti Shift, Esc, Backspace atau Hapus, tombol panah, dll. mereka mengaktifkan peristiwa keydown tetapi bukan peristiwa penekanan tombol.
keydown()Metode keydown() melampirkan fungsi penanganan peristiwa ke item yang dipilih (biasanya kontrol formulir) yang dijalankan saat pengguna pertama kali menekan tombol pada keyboard. Contoh berikut akan menampilkan pesan saat event dipicu keydown dan berapa kali dipicu saat Anda menekan tombol di keyboard.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Metode keyup() lampirkan fungsi penanganan peristiwa ke elemen yang dipilih (biasanya kontrol formulir) yang dijalankan saat pengguna melepaskan tombol pada keyboard. Contoh berikut akan menampilkan pesan saat event dipicu keyup dan berapa kali dipicu saat Anda menekan dan melepaskan tombol pada keyboard Anda.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Kejadian formulir dipicu saat kontrol formulir menerima atau kehilangan fokus, atau saat pengguna mengubah nilai kontrol formulir, seperti mengetik teks ke input teks, memilih opsi di kotak pilih, dll. . Berikut adalah beberapa metode jQuery yang umum digunakan untuk menangani event form.
change()Metode change() lampirkan fungsi event handler ke elemen <input> dan dieksekusi ketika nilainya berubah. Contoh berikut akan menampilkan pesan peringatan saat memilih opsi di kotak pilihan drop down.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Untuk kotak klik, kotak centang, dan tombol radio, peristiwa akan langsung aktif saat pengguna membuat pilihan mouse, tetapi untuk input teks dan area teks, peristiwa akan aktif setelah elemen kehilangan fokus.
focus()Metode focus() melampirkan fungsi event handler ke elemen yang dipilih (biasanya mengontrol dan membentuk binding) yang dijalankan saat mendapat fokus. Contoh berikut akan menampilkan pesan saat input teks menerima fokus.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Metode blur() lampirkan fungsi event handler untuk membentuk elemen seperti <input>, <textarea>, <select> yang dijalankan saat kehilangan fokus. Contoh berikut akan menampilkan pesan ketika input teks kehilangan fokus.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Metode submit() lampirkan fungsi event handler ke elemen <form> yang berjalan saat pengguna mencoba mengirimkan formulir. Contoh berikut akan menampilkan pesan berdasarkan nilai yang dimasukkan saat mencoba mengirimkan formulir.
<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 dipicu dalam situasi di mana halaman DOM (Document Object Model) sudah siap atau saat pengguna mengubah ukuran atau menggulir jendela browser, dll. Berikut adalah beberapa metode jQuery yang biasa digunakan untuk menangani jenis acara ini.
ready()Metode ready() menentukan fungsi untuk dieksekusi ketika DOM dimuat penuh.
Contoh berikut akan mengganti teks paragraf segera setelah hierarki DOM dibangun sepenuhnya dan siap untuk dimanipulasi.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Metode resize() lampirkan fungsi event handler ke elemen jendela yang berjalan saat ukuran jendela browser berubah.
Contoh berikut akan menampilkan lebar dan tinggi jendela browser saat ini saat Anda mencoba mengubah ukurannya 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()Metode scroll() lampirkan fungsi event handler ke jendela atau ke iframe dan item yang dapat digulir yang berjalan setiap kali posisi gulir item berubah.
Contoh berikut akan menampilkan pesan saat menggulir jendela browser.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Operasi oftalmoplasti menggunakan penampil komersial Apple Vision Pro dilakukan di Poliklinik Catania…
Mengembangkan keterampilan motorik halus melalui mewarnai mempersiapkan anak untuk keterampilan yang lebih kompleks seperti menulis. Mewarnai…
Sektor angkatan laut adalah kekuatan ekonomi global sejati, yang telah menuju pasar 150 miliar...
Senin lalu, Financial Times mengumumkan kesepakatan dengan OpenAI. FT melisensikan jurnalisme kelas dunianya…