Kreiranje aplikacije zasnovane na Ajaxu postaje vrlo jednostavno i brzo uz jQuery.
jQuery je prvobitno kreirao John Resig početkom 2006. jQuery projekat trenutno održava i održava distribuirana grupa programera kao projekat otvorenog koda.
Uz jQuery možete uštedjeti mnogo vremena i truda. Zato dodajte ovu stranicu u svoje favorite i nastavite čitati
Postoji još mnogo stvari koje možete učiniti s jQueryjem.
Lista se tu ne završava, postoji mnogo drugih super stvari koje možete da uradite sa jQuery-jem.
Postoji nekoliko prednosti zbog kojih se treba odlučiti za korištenje jQueryja:
Za početak, hajde da prvo preuzmemo kopiju jQueryja, a zatim je uključimo u naš projekat. Dvije verzije jQueryja su dostupne za preuzimanje: tablet e nije komprimirano .
Nekomprimovani fajl je prikladniji za razvoj ili otklanjanje grešaka; dok se minimizirana i komprimirana datoteka preporučuje za proizvodnju jer štedi propusni opseg i poboljšava performanse zbog manje veličine datoteke.
jQuery možemo preuzeti ovdje: https://jquery.com/download/
Nakon što preuzmete jQuery fajl možete vidjeti da ima js ekstenziju, odnosno da je JavaScript datoteka. Zapravo JQuery nije ništa drugo do JavaScript biblioteka, tako da možete uključiti jQuery datoteku u HTML dokument sa elementom baš kao što uključujete obične JavaScript datoteke.
<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>Ne zaboravite uvijek uključiti jQuery datoteku prije prilagođenih skripti; u suprotnom, jQuery API-ji neće biti dostupni kada vaš jQuery kod pokuša da im pristupi.
Kao što ste možda primijetili, preskočili smo atribut u prethodnom primjeru type="text/javascript" unutar oznake . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefizavršeno u HTML5 i svim modernim pretraživačima.
Kao alternativu, možete ugraditi jQuery u svoj dokument putem besplatno dostupnih CDN (mreža za isporuku sadržaja) veza, ako biste radije izbjegli preuzimanje datoteke.
CDN-ovi mogu ponuditi prednost u performansama smanjenjem vremena učitavanja, jer hostuju jQuery na više servera širom svijeta, a kada korisnik zatraži datoteku, ona će biti poslužena sa najbližeg servera.
Ovo takođe ima prednost da ako je posetilac vaše web stranice već preuzeo kopiju jQueryja sa istog CDN-a dok je posećivao druge sajtove, neće morati ponovo da je preuzima pošto je već u kešu njihovog pretraživača.
U ovom slučaju morate napisati:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Pored CDN-a koji pruža jquery projekat, možete uključiti jQuery putem Google e Microsoft cdn.
Nakon što smo vidjeli ciljeve jQuery biblioteke i kako je uključiti u svoj dokument, sada je vrijeme da jQuery provedete u praksi.
Hajde da sada uradimo jednostavnu jQuery operaciju tako što ćemo promeniti boju teksta zaglavlja sa predbojedefinijansa crne do zelene boje.
<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>U kodu smo izveli jednostavnu jQuery operaciju promjenom boje zaglavlja, odnosno elementa koristeći selektor elementa jQuery i metodu css() kada je dokument spreman, poznat kao događaj spreman za dokument.
jQuery izjava obično počinje znakom dolara ( $) i završava se tačkom i zarezom ( ;).
U jQueryju, znak dolara ( $) je samo pseudonim za jQuery. Razmotrite sljedeći primjer koda koji demonstrira najjednostavniji jQuery izraz.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Primjer jednostavno prikazuje poruku upozorenja "Hello I'm a JQuery sign” korisniku. Pogledajmo neke karakteristike:
<script>: jQuery je samo JavaScript biblioteka, jQuery kod se može postaviti unutar elementa <script>, ili ga možete staviti u vanjski JavaScript fajl;$(document).ready(handler); je poznat kao spreman događaj. Gdje je handler to je funkcija koja se prosljeđuje metodi koja će se izvršiti, čim je dokument spreman, odnosno kada je DOM hijerarhija u potpunosti izgrađena.Metoda jQuery ready() obično se koristi s anonimnom funkcijom. Dakle, gornji primjer također može biti napisan u skraćenom zapisu ovako:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Unutar funkcije možete napisati jQuery izjave za izvođenje bilo koje radnje slijedeći osnovnu sintaksu, kao što je:
$(selector).action();Gdje je, $(selector) u osnovi bira HTML elemente iz DOM stabla tako da se njime može manipulirati i action() primijeniti neke radnje na odabrane elemente, kao što je promjena vrijednosti CSS svojstva, ili postavljanje sadržaja elementa, itd.
Sada pogledajmo još jedan primjer koji postavlja tekst pasusa:
<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>jQuery primjer se odnosi na selektor p, a ovo bira sve pasuse, a zatim metod text() postavite sadržaj teksta pasusa sa “Hello World!".
Tekst pasusa u prethodnom primjeru automatski se zamjenjuje kada je dokument spreman. Ali hajde da vidimo kako to učiniti u slučaju da želite da izvršite radnju pre pokretanja jQuery koda, da biste zamenili tekst pasusa.
Razmotrimo posljednji primjer:
<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>U ovom primjeru tekst pasusa se zamjenjuje samo kada dođe do klika na dugme "Replace Text“, što jednostavno znači kada korisnik klikne na ovo dugme.
Možete koristiti ID birač da odaberete jednu stavku sa jedinstvenim ID-om na stranici.
Na primjer, sljedeći jQuery kod će odabrati i istaknuti element s ID atributom id="markid", kada je dokument spreman.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Selektor klase može se koristiti za odabir elemenata sa određenom klasom.
Na primjer, sljedeći jQuery kod će odabrati i istaknuti elemente s atributom class class="markclass", kada je dokument spreman.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Birač stavki se može koristiti za odabir stavki prema nazivu stavke.
Na primjer, sljedeći jQuery kod će odabrati i istaknuti sve pasuse, odnosno elemente "<p>" dokumenta kada bude spreman.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Možete koristiti selektor atributa da odaberete element na osnovu jednog od njegovih HTML atributa, kao što je atribut veze targetili atribut ulaza typeitd.
Na primjer, sljedeći jQuery kod će odabrati i istaknuti sve unose teksta, kao što su elementi "<input>" con type="text", kada je dokument spreman.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Također možete kombinirati CSS selektore kako biste svoj odabir učinili još preciznijim.
Na primjer, možete kombinirati selektor klase sa selektorom elemenata da biste pronašli elemente u dokumentu koji imaju određeni tip i klasu.
<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>Pored selektora definiti, jQuery pruža vlastiti prilagođeni selektor za dalje poboljšanje mogućnosti odabira elemenata na stranici.
<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>Događaji se često pokreću interakcijom korisnika s web stranicom, kao što je klik na vezu ili dugme, unošenje teksta u polje za unos ili tekstualno područje, odabir u okviru za odabir, pritiskanje tipke na tipkovnici, pomicanje pokazivača miša , itd. U nekim slučajevima, sam pretraživač može pokrenuti događaje, kao što su događaji učitavanja stranice i preuzimanja.
jQuery poboljšava osnovne mehanizme za rukovanje događajima nudeći metode događaja za većinu domaćih događaja pretraživača, neke od ovih metoda su ready(), click(), keypress(), focus(), blur(), change()itd.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Generalno, događaji se mogu klasifikovati u četiri glavne grupe:
Događaj miša se pokreće kada korisnik klikne na stavku, pomjeri pokazivač miša itd.
Evo nekih najčešće korištenih jQuery metoda za rukovanje događajima miša.
click()Metoda click() priložite funkciju rukovanja događajima odabranim elementima za događaj “click“. Povezana funkcija se izvršava kada korisnik klikne na tu stavku. Sljedeći primjer će sakriti elemente <p> na stranici kada se klikne.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Metoda dblclick() priložite funkciju rukovanja događajima odabranim elementima za događaj “dblclick“. Povezana funkcija se izvršava kada korisnik dvaput klikne tu stavku. Sljedeći primjer će sakriti elemente <p> kada ih dvaput kliknete.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Metoda hover() priložite jednu ili dvije funkcije rukovanja događajima odabranim elementima koji se izvršavaju kada se pokazivač miša pomiče unutra i izvan elemenata. Prva funkcija se pokreće kada korisnik postavi pokazivač miša preko stavke, dok se druga funkcija pokreće kada korisnik ukloni pokazivač miša sa te stavke.
Sljedeći primjer će istaknuti stavke <p> kada postavite kursor na njega, isticanje će biti uklonjeno kada uklonite kursor.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Metoda mouseenter() priložiti funkciju rukovanja događajima odabranim elementima koja se izvršava kada miš uđe u element. Sljedeći primjer će elementu dodati isticanje klase <p> kada postavite kursor preko njega.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Metoda mouseleave() priložiti funkciju rukovanja događajima odabranim stavkama koja se pokreće kada miš napusti stavku. Sljedeći primjer će ukloniti oznaku klase iz elementa <p> kada uklonite kursor sa njega.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Događaj tipkovnice se pokreće kada korisnik pritisne ili otpusti tipku na tipkovnici. Pogledajmo neke najčešće korišćene jQuery metode za rukovanje događajima na tastaturi.
keypress()Metoda keypress() pridaje funkciju rukovanja događajima odabranim elementima (obično kontrole obrasca) koja se pokreće kada pretraživač primi unos sa tastature od korisnika. Sljedeći primjer će prikazati poruku kada se događaj pokrene keypress i koliko puta se aktivira kada pritisnete taster na tastaturi.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Događaj pritiska na tipku sličan je događaju tipke down, osim što su modifikatorske i neispisne tipke kao što su Shift, Esc, Backspace ili Delete, tipke sa strelicama itd. oni pokreću događaje pritiska na tastere, ali ne i događaje pritiska na taster.
keydown()Metoda keydown() pridaje funkciju rukovanja događajima odabranim stavkama (obično kontrole obrasca) koja se izvršava kada korisnik prvi put pritisne tipku na tipkovnici. Sljedeći primjer će prikazati poruku kada se događaj pokrene keydown i koliko puta se aktivira kada pritisnete taster na tastaturi.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Metoda keyup() priložiti funkciju upravljanja događajima odabranim elementima (obično kontrole obrasca) koja se izvršava kada korisnik otpusti tipku na tipkovnici. Sljedeći primjer će prikazati poruku kada se događaj pokrene keyup i koliko puta se aktivira kada pritisnete i otpustite tipku na tastaturi.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Događaj obrasca se pokreće kada kontrola obrasca primi ili izgubi fokus, ili kada korisnik promijeni vrijednost kontrole obrasca, kao što je kucanje teksta u unos teksta, odabir opcije u polju za odabir itd. . Evo nekih najčešće korištenih jQuery metoda za rukovanje događajima obrasca.
change()Metoda change() elementima priključiti funkciju rukovanja događajima <input> i izvršava se kada se njegova vrijednost promijeni. Sljedeći primjer će prikazati poruku upozorenja kada odaberete opciju u padajućem okviru za odabir.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Za okvire za klik, potvrdne okvire i radio dugmad, događaj se pokreće odmah kada korisnik izvrši odabir miša, ali za unos teksta i područje teksta događaj se pokreće nakon što element izgubi fokus.
focus()Metoda focus() pridaje funkciju rukovanja događajima odabranim elementima (obično kontrole i vezivanja oblika) koja se izvršava kada dobije fokus. Sljedeći primjer će prikazati poruku kada unos teksta dobije fokus.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Metoda blur() priložite funkciju rukovanja događajima za formiranje elemenata kao što su <input>, <textarea>, <select> koji se izvršava kada izgubi fokus. Sljedeći primjer će prikazati poruku kada unos teksta izgubi fokus.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Metoda submit() elementima priključiti funkciju rukovanja događajima <form> koji se pokreće kada korisnik pokuša poslati obrazac. Sljedeći primjer će prikazati poruku na osnovu vrijednosti unesene prilikom pokušaja slanja obrasca.
<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>Događaji se također aktiviraju u situaciji kada je stranica DOM (Document Object Model) spremna ili kada korisnik promijeni veličinu ili skroluje prozor pretraživača, itd. Evo nekih najčešće korištenih jQuery metoda za rukovanje ovom vrstom događaja.
ready()Metoda ready() specificira funkciju koja se izvršava kada je DOM potpuno učitan.
Sljedeći primjer će zamijeniti tekst pasusa čim DOM hijerarhija bude u potpunosti izgrađena i spremna za manipulaciju.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Metoda resize() priložite funkciju rukovanja događajima elementu prozora koji se pokreće kada se promijeni veličina prozora pretraživača.
Sljedeći primjer će pokazati trenutnu širinu i visinu prozora pretraživača kada pokušate da mu promijenite veličinu povlačenjem njegovih uglova.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Metoda scroll() priložite funkciju rukovanja događajima na prozor ili na iframe i stavke koje se mogu pomicati koje se pokreću kad god se promijeni pozicija pomicanja stavke.
Sljedeći primjer će prikazati poruku prilikom pomicanja prozora pretraživača.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Razvijanje finih motoričkih sposobnosti kroz bojenje priprema djecu za složenije vještine poput pisanja. Za bojenje…
Pomorski sektor je prava globalna ekonomska sila, koja je krenula ka tržištu od 150 milijardi...
Prošlog ponedjeljka Financial Times je objavio dogovor sa OpenAI. FT licencira svoje novinarstvo svjetske klase…
Milioni ljudi plaćaju usluge striminga, plaćajući mjesečne pretplate. Uvriježeno je mišljenje da vi…