Nyieun hiji aplikasi basis Ajax janten pisan basajan tur gancang kalayan jQuery.
jQuery asalna dijieun ku John Resig dina awal 2006. Proyék jQuery ayeuna dijaga tur dijaga ku grup disebarkeun pamekar salaku hiji proyék open source.
Anjeun tiasa nyimpen loba waktu jeung usaha kalawan jQuery. Janten tambahkeun situs ieu kana paporit anjeun sareng teraskeun maca
Aya seueur deui hal anu anjeun tiasa laksanakeun sareng jQuery.
daftar teu mungkas didinya, aya loba hal tiis séjén anjeun bisa ngalakukeun kalawan jQuery.
Aya sababaraha kaunggulan naha hiji kedah milih pikeun ngagunakeun jQuery:
Pikeun ngamimitian, hayu urang mimiti ngundeur salinan jQuery teras lebetkeun kana proyék urang. Dua vérsi jQuery sayogi diunduh: buru-buru e teu dikomprés .
File anu teu dikomprés langkung cocog pikeun pangwangunan atanapi debugging; bari, file minified sarta dikomprés dianjurkeun pikeun produksi sabab ngaheéat rubakpita sarta ngaronjatkeun kinerja alatan ukuran file leutik.
Urang tiasa ngaunduh jQuery ti dieu: https://jquery.com/download/
Sakali anjeun unduh file jQuery anjeun tiasa ningali yén éta ngagaduhan ekstensi js, nyaéta file JavaScript. Kanyataanna, JQuery sanés ngan ukur perpustakaan JavaScript, ku kituna anjeun tiasa ngalebetkeun file jQuery dina dokumen HTML sareng unsur. kawas anjeun kaasup 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>Inget pikeun salawasna kaasup file jQuery saméméh Aksara custom; Upami teu kitu, API jQuery moal sadia nalika kode jQuery Anjeun nyoba ngakses aranjeunna.
Sakumaha anjeun tiasa perhatoskeun, kami ngalangkungan atribut dina conto sateuacana type="text/javascript" jero tag . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiréngsé dina HTML5 sareng dina sadaya panyungsi modéren.
Alternatipna, anjeun tiasa ngalebetkeun jQuery kana dokumén anjeun ngalangkungan tautan CDN (Content Delivery Network) anu sayogi, upami anjeun langkung resep ngahindarkeun file na.
CDNs tiasa nawiskeun kaunggulan kinerja ku ngurangan waktu beban, sabab host jQuery on sababaraha server di sakuliah dunya, sarta lamun pamaké requests file, eta bakal dilayanan ti server pangcaketna.
Ieu ogé gaduh kauntungan yén upami halaman wéb anjeun parantos ngaunduh salinan jQuery tina CDN anu sami nalika nganjang ka situs-situs sanés, aranjeunna henteu kedah ngaunduh deui sabab éta parantos aya dina cache browser na.
Dina hal ieu anjeun kedah nyerat:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Sajaba CDN disadiakeun ku proyék jquery, Anjeun bisa ngawengku jQuery via Google e Microsoft cdn.
Saatos ningali tujuan perpustakaan jQuery sareng kumaha cara ngalebetkeun kana dokumen anjeun, ayeuna waktosna pikeun ngalaksanakeun jQuery.
Ayeuna hayu urang ngalakukeun operasi jQuery basajan ku cara ngarobah warna téks lulugu tina warna predefiwarna hideung nepi ka héjo.
<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>Dina kode urang ngalakukeun operasi jQuery basajan ku cara ngarobah warna lulugu nyaéta unsur ngagunakeun pamilih unsur jQuery sarta css () metoda nalika dokumen geus siap, dipikawanoh salaku acara siap dokumen.
Pernyataan jQuery biasana dimimitian ku tanda dollar ( $) jeung ditungtungan ku titik koma ( ;).
Dina jQuery, tanda dollar ( $) ngan hiji landian pikeun jQuery. Pertimbangkeun kode sampel di handap ieu nunjukkeun pernyataan jQuery pangbasajanna.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Conto éta ngan ukur ningalikeun pesen peringatan "Hello I'm a JQuery sign"ka pamaké. Hayu urang tingali sababaraha fitur:
<script>: jQuery ngan perpustakaan JavaScript, kode jQuery bisa ditempatkeun di jero unsur <script>, atawa anjeun bisa nempatkeun eta dina file JavaScript éksternal;$(document).ready(handler); katelah acara siap. Dimana handler eta mangrupakeun fungsi anu disalurkeun kana métode pikeun dieksekusi, pas dokumén geus siap, ie lamun hirarki DOM geus sagemblengna diwangun.Métode jQuery ready() biasana dipaké kalawan fungsi anonim. Jadi, conto di luhur ogé bisa ditulis dina notasi shorthand kawas kieu:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Di jero hiji fungsi anjeun tiasa nyerat pernyataan jQuery pikeun ngalakukeun tindakan naon waé anu nuturkeun sintaksis dasar, sapertos:
$(selector).action();japati, $(selector) eta dasarna milih elemen HTML tina tangkal DOM sangkan bisa dimanipulasi jeung action() nerapkeun sababaraha lampah dina elemen dipilih, kayaning ngarobah nilai tina sipat CSS, atawa netepkeun eusi unsur, jsb.
Ayeuna hayu urang nempo conto sejen nu susunan téks 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>Conto jQuery nujul kana pamilih p, sareng ieu milih sadaya paragraf, teras metodena text() atur eusi téks paragraf kalawan “Hello World!".
Teks paragraf dina conto sateuacana sacara otomatis diganti nalika dokumenna parantos siap. Tapi hayu urang tingali kumaha ngalakukeun éta upami anjeun hoyong ngalakukeun tindakan sateuacan ngajalankeun kode jQuery, pikeun ngagentos téks paragraf.
Hayu urang nganggap hiji conto panungtungan:
<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>Dina conto ieu téks paragraf diganti ngan lamun kajadian klik lumangsung dina tombol "Replace Text", anu hartosna nalika pangguna ngaklik tombol ieu.
Anjeun tiasa nganggo pamilih ID pikeun milih hiji item sareng ID unik dina kaca.
Contona, kode jQuery di handap bakal milih jeung nyorot hiji unsur jeung atribut ID id="markid", lamun dokumén geus siap.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Pamilih kelas tiasa dianggo pikeun milih elemen sareng kelas khusus.
Contona, kode jQuery handap bakal milih jeung nyorot elemen jeung atribut kelas class="markclass", lamun dokumén geus siap.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Pamilih item tiasa dianggo pikeun milih barang dumasar nami barang.
Contona, kode jQuery di handap ieu bakal milih jeung nyorot sakabéh paragraf, nyaéta elemen "<p>" tina dokumen lamun geus siap.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Anjeun tiasa nganggo pamilih atribut pikeun milih unsur dumasar kana salah sahiji atribut HTML na, sapertos atribut link targetatawa atribut hiji input type, jsb.
Contona, kode jQuery di handap bakal milih jeung nyorot sadaya inputs téks, kayaning elemen "<input>" jeung type="text", lamun dokumén geus siap.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Anjeun ogé tiasa ngagabungkeun pamilih CSS pikeun ngajantenkeun pilihan anjeun langkung tepat.
Salaku conto, anjeun tiasa ngagabungkeun pamilih kelas sareng pamilih unsur pikeun mendakan elemen dina dokumen anu ngagaduhan jinis sareng kelas anu tangtu.
<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>Salian ti pamilih defiSajaba ti éta, jQuery nyadiakeun pamilih custom sorangan jang ningkatkeun pidangan kamampuhan pikeun milih elemen dina kaca.
<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>Kajadian sering dipicu ku interaksi pangguna sareng halaman wéb, sapertos nalika ngaklik tautan atanapi tombol, ngalebetkeun téks kana kotak input atanapi daérah téks, ngadamel pilihan dina kotak pilihan, pencét konci dina kibor, pindahkeun pointer beurit. , jsb. Dina sababaraha kasus, browser sorangan tiasa memicu kajadian, sapertos beban halaman sareng acara unduhan.
jQuery ningkatkeun mékanisme penanganan acara dasar ku cara nawiskeun metode acara pikeun kalolobaan acara browser asli, sababaraha metode ieu ready(), click(), keypress(), focus(), blur(), change(), jsb.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Sacara umum, acara bisa digolongkeun kana opat grup utama:
Kajadian beurit dipicu nalika pangguna ngaklik hiji barang, mindahkeun pointer beurit, jsb.
Di dieu aya sababaraha métode jQuery ilahar dipaké pikeun nanganan acara mouse.
click()Cara na click() ngagantelkeun fungsi panangan acara ka elemen anu dipilih pikeun acara "click“. Fungsi numbu executes lamun pamaké clicks on item eta. Conto di handap ieu bakal nyumputkeun unsur <p> dina kaca nalika diklik.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Cara na dblclick() ngagantelkeun fungsi panangan acara ka elemen anu dipilih pikeun acara "dblclick“. Fungsi numbu executes lamun pamaké ganda-klik item eta. Conto di handap ieu bakal nyumputkeun unsur <p> mun anjeun ganda-klik aranjeunna.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Cara na hover() ngagantelkeun hiji atawa dua fungsi Handler acara ka elemen dipilih nu ngaéksekusi nalika pointer mouse ngalir asup jeung kaluar elemen. Pungsi kahiji jalan nalika pamaké nempatkeun pointer beurit dina hiji item, sedengkeun pungsi kadua jalan nalika pamaké ngaluarkeun pointer beurit ti item eta.
Conto di handap ieu bakal nyorot item <p> mun anjeun nempatkeun kursor dina eta, sorotan bakal dihapus mun anjeun nyabut kursor.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Cara na mouseenter() ngagantelkeun hiji fungsi Handler acara ka elemen dipilih nu dieksekusi nalika beurit asup kana unsur. Conto di handap ieu bakal nambihan panyorot kelas kana unsur <p> mun anjeun nempatkeun kursor dina eta.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Cara na mouseleave() ngagantelkeun hiji fungsi Handler acara ka item nu dipilih nu dijalankeun nalika beurit ninggalkeun hiji item. Conto di handap ieu bakal ngaleungitkeun sorotan kelas tina unsur <p> sawaktos Anjeun nyabut kursor ti dinya.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Kajadian keyboard dibangkitkeun nalika pangguna mencét atanapi ngaleupaskeun konci dina kibor. Hayu urang nempo sababaraha métode jQuery ilahar dipaké pikeun nanganan acara keyboard.
keypress()Cara na keypress() nempelkeun fungsi penanganan acara ka elemen anu dipilih (biasana ngabentuk kontrol) anu dijalankeun nalika browser nampi input keyboard ti pangguna. Conto di handap ieu bakal nampilkeun pesen nalika acara dipicu keypress jeung sabaraha kali eta dipicu mun anjeun mencet kenop dina kibor Anjeun.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Kajadian pencét kenop sarua jeung acara keydown, iwal kenop modifier jeung nonprinting kayaning Shift, Esc, Backspace atawa Pupus, kenop panah, jsb. aranjeunna seuneu acara keydown tapi teu keypress acara.
keydown()Cara na keydown() nempelkeun pungsi penanganan acara ka item nu dipilih (biasana ngabentuk kadali) nu dieksekusi nalika pamaké mimiti mencet kenop dina kibor. Conto di handap ieu bakal nampilkeun pesen nalika acara dipicu keydown jeung sabaraha kali eta dipicu mun anjeun mencet kenop dina kibor Anjeun.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Cara na keyup() ngagantelkeun hiji fungsi penanganan acara ka elemen nu dipilih (biasana ngabentuk kadali) nu dieksekusi nalika pamaké ngaleupaskeun konci dina kibor. Conto di handap ieu bakal nampilkeun pesen nalika acara dipicu keyup sareng sabaraha kali dipicu nalika anjeun mencét sareng ngaleupaskeun konci dina kibor anjeun.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Hiji acara formulir dipicu nalika kontrol formulir narima atawa leungit fokus, atawa lamun pamaké robah nilai kontrol formulir, kayaning ngetikkeun téks kana input téks, milih hiji pilihan dina kotak pilih, jsb. Di dieu aya sababaraha métode jQuery ilahar dipaké pikeun nanganan acara formulir.
change()Cara na change() ngagantelkeun hiji fungsi Handler acara ka elemen <input> tur dieksekusi lamun nilai na robah. Conto di handap ieu bakal ningalikeun pesen peringatan nalika milih pilihan dina kotak pilihan serelek.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Pikeun kotak klik, kotak centang, sareng tombol radio, acara langsung hurung nalika pangguna milih beurit, tapi pikeun input téks sareng daérah téks, acara bakal hurung saatos unsur leungit fokus.
focus()Cara na focus() nempelkeun hiji fungsi Handler acara ka elemen dipilih (ilaharna ngadalikeun sarta ngabentuk bindings) nu executes nalika eta meunang fokus. Conto di handap ieu bakal nampilkeun pesen nalika input téks nampi fokus.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Cara na blur() ngagantelkeun hiji fungsi Handler acara pikeun ngabentuk elemen kayaning <input>, <textarea>, <select> nu dieksekusi lamun leungit fokus. Conto di handap ieu bakal nembongkeun pesen nalika input téks leungit fokus.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Cara na submit() ngagantelkeun hiji fungsi Handler acara ka elemen <form> nu dijalankeun nalika pamaké nyoba ngalebetkeun formulir a. Conto di handap ieu bakal nampilkeun pesen dumasar kana nilai anu dilebetkeun nalika nyobian ngalebetkeun 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>Kajadian ogé dipecat dina kaayaan dimana halaman DOM (Document Object Model) parantos siap atanapi nalika pangguna ngarobih ukuran atanapi ngagulung jandela browser, jsb. Di dieu aya sababaraha métode jQuery ilahar dipaké pikeun nanganan jenis ieu acara.
ready()Cara na ready() nangtukeun hiji fungsi pikeun ngaéksekusi nalika DOM geus pinuh dimuat.
Conto di handap ieu bakal ngagentos téks paragraf pas hierarki DOM parantos diwangun sareng siap dimanipulasi.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Cara na resize() ngagantelkeun hiji fungsi Handler acara ka unsur jandela nu dijalankeun nalika ukuran jandela browser robah.
Conto di handap ieu bakal nunjukkeun lebar sareng jangkungna jandela browser ayeuna nalika anjeun nyobian ngatur ukuranana ku cara nyéred juruna.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Cara na scroll() ngagantelkeun hiji fungsi Handler acara ka jandela atawa ka iframe jeung item scrollable nu ngajalankeun iraha wae posisi gulung item robah.
Conto di handap ieu bakal nampilkeun pesen nalika ngagulung jandela pangotektak.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Ngembangkeun kaahlian motorik halus ngaliwatan ngawarnaan nyiapkeun barudak pikeun kaahlian leuwih kompleks kawas nulis. Pikeun ngawarnaan…
Sektor angkatan laut mangrupikeun kakuatan ékonomi global anu leres, anu nuju ka arah pasar 150 milyar ...
Senén kamari, Financial Times ngumumkeun deal sareng OpenAI. FT ngalisensikeun jurnalisme kelas dunya na…
Jutaan jalma mayar jasa streaming, mayar biaya langganan bulanan. Pendapat umum yén anjeun…