Ustvarjanje aplikacije, ki temelji na Ajaxu, postane z jQuery zelo preprosto in hitro.
jQuery je prvotno ustvaril John Resig v začetku leta 2006. Projekt jQuery trenutno vzdržuje in vzdržuje porazdeljena skupina razvijalcev kot odprtokodni projekt.
Z jQuery lahko prihranite veliko časa in truda. Zato dodajte to stran med svoje priljubljene in nadaljujte z branjem
Z jQuery lahko naredite veliko več stvari.
Seznam se tu ne konča, z jQuery lahko počnete še veliko drugih kul stvari.
Obstaja več prednosti, zakaj bi se morali odločiti za uporabo jQuery:
Za začetek najprej prenesimo kopijo jQuery in jo nato vključimo v naš projekt. Za prenos sta na voljo dve različici jQuery: tablico e ni stisnjen .
Nestisnjena datoteka je bolj primerna za razvoj ali odpravljanje napak; medtem ko je zmanjšana in stisnjena datoteka priporočljiva za produkcijo, ker prihrani pasovno širino in izboljša zmogljivost zaradi manjše velikosti datoteke.
jQuery lahko prenesemo od tukaj: https://jquery.com/download/
Ko prenesete datoteko jQuery, lahko vidite, da ima pripono js, tj. da je datoteka JavaScript. Pravzaprav JQuery ni nič drugega kot knjižnica JavaScript, zato lahko datoteko jQuery vključite v dokument HTML z elementom tako kot vključite običajne datoteke JavaScript.
<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 pozabite vedno vključiti datoteke jQuery pred skripte po meri; sicer API-ji jQuery ne bodo na voljo, ko bo vaša koda jQuery poskušala dostopati do njih.
Kot ste morda opazili, smo atribut v prejšnjem primeru preskočili type="text/javascript" znotraj oznake . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefidokončan v HTML5 in v vseh sodobnih brskalnikih.
Namesto tega lahko v svoj dokument vdelate jQuery prek prosto dostopnih povezav CDN (Content Delivery Network), če se raje izognete prenosu datoteke.
CDN-ji lahko nudijo prednost pri zmogljivosti s skrajšanim časom nalaganja, ker gostijo jQuery na več strežnikih po vsem svetu in ko uporabnik zahteva datoteko, bo ta postrežena z najbližjega strežnika.
To ima tudi prednost, da če je obiskovalec vaše spletne strani že prenesel kopijo jQueryja iz iste CDN med obiskom drugih spletnih mest, mu je ne bo treba ponovno prenesti, saj je že v predpomnilniku brskalnika.
V tem primeru boste morali napisati:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Poleg CDN, ki ga zagotavlja projekt jquery, lahko vključite jQuery prek google e Microsoft cdn.
Ko ste videli cilje knjižnice jQuery in kako jo vključiti v svoj dokument, je zdaj čas, da uporabite jQuery v praksi.
Zdaj pa izvedimo preprosto operacijo jQuery, tako da spremenimo barvo besedila glave iz predbarvedefiprefinjena črna do zelena barva.
<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>V kodi smo izvedli preprosto operacijo jQuery s spremembo barve glave, tj. elementa z uporabo izbirnika elementa jQuery in metode css(), ko je dokument pripravljen, kar je znano kot dogodek pripravljenosti dokumenta.
Stavek jQuery se običajno začne z znakom za dolar ( $) in se konča s podpičjem ( ;).
V jQuery je znak za dolar ( $) je samo vzdevek za jQuery. Razmislite o naslednji vzorčni kodi, ki prikazuje najpreprostejši stavek jQuery.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Primer preprosto prikaže opozorilno sporočilo "Hello I'm a JQuery sign« uporabniku. Oglejmo si nekaj funkcij:
<script>: jQuery je samo knjižnica JavaScript, kodo jQuery lahko postavite znotraj elementa <script>ali pa ga vstavite v zunanjo datoteko JavaScript;$(document).ready(handler); je znan kot pripravljen dogodek. Kje je handler je funkcija, ki se posreduje metodi, ki jo je treba izvesti, takoj ko je dokument pripravljen, tj. ko je hierarhija DOM popolnoma zgrajena.Metoda jQuery ready() običajno se uporablja z anonimno funkcijo. Torej lahko zgornji primer zapišemo tudi v skrajšanem zapisu, kot je ta:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Znotraj funkcije lahko napišete stavke jQuery za izvajanje katerega koli dejanja po osnovni sintaksi, na primer:
$(selector).action();Kje je, $(selector) v bistvu izbere elemente HTML iz drevesa DOM, tako da jih je mogoče manipulirati in action() uporabite nekaj dejanj za izbrane elemente, kot je spreminjanje vrednosti lastnosti CSS ali nastavitev vsebine elementa itd.
Zdaj pa poglejmo še en primer, ki določa besedilo odstavka:
<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>Primer jQuery se nanaša na izbirnik p, in to izbere vse odstavke, nato metodo text() nastavite vsebino besedila odstavka z "Hello World!".
Besedilo odstavka v prejšnjem primeru se samodejno zamenja, ko je dokument pripravljen. Toda poglejmo, kako to storiti, če želite izvesti dejanje, preden zaženete kodo jQuery, da zamenjate besedilo odstavka.
Poglejmo še zadnji primer:
<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>V tem primeru se besedilo odstavka zamenja le, ko pride do klika na gumb "Replace Text«, kar preprosto pomeni, ko uporabnik klikne ta gumb.
Z izbirnikom ID-jev lahko izberete posamezen element z edinstvenim ID-jem na strani.
Naslednja koda jQuery bo na primer izbrala in označila element z atributom ID id="markid", ko je dokument pripravljen.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Izbirnik razreda lahko uporabite za izbiro elementov z določenim razredom.
Naslednja koda jQuery bo na primer izbrala in označila elemente z atributom class class="markclass", ko je dokument pripravljen.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Izbirnik elementov lahko uporabite za izbiro elementov po imenu artikla.
Naslednja koda jQuery bo na primer izbrala in označila vse odstavke, tj. elemente "<p>" dokumenta, ko je pripravljen.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Z izbirnikom atributov lahko izberete element na podlagi enega od njegovih atributov HTML, kot je atribut povezave targetali atribut vnosa type, itd.
Naslednja koda jQuery bo na primer izbrala in označila vse vnose besedila, kot so elementi "<input>" z type="text", ko je dokument pripravljen.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Izbirnike CSS lahko tudi kombinirate, da bo vaša izbira še natančnejša.
Izbirnik razreda lahko na primer kombinirate z izbirnikom elementov, da poiščete elemente v dokumentu, ki imajo določeno vrsto in razred.
<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>Poleg selektorjev definiti jQuery ponuja lasten izbirnik po meri za dodatno izboljšanje zmožnosti izbiranja elementov na strani.
<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>Dogodke pogosto sproži interakcija uporabnika s spletno stranjo, na primer ko klikne povezavo ali gumb, vnese besedilo v polje za vnos ali besedilno območje, naredi izbor v izbirnem polju, pritisne tipko na tipkovnici, premakne kazalec miške itd. V nekaterih primerih lahko sam brskalnik sproži dogodke, kot so dogodki nalaganja strani in prenosa.
jQuery izboljšuje osnovne mehanizme za obravnavanje dogodkov tako, da ponuja metode dogodkov za večino izvornih dogodkov v brskalniku, nekatere od teh metod so ready(), click(), keypress(), focus(), blur(), change(), itd.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Na splošno lahko dogodke razvrstimo v štiri glavne skupine:
Dogodek miške se sproži, ko uporabnik klikne na element, premakne kazalec miške itd.
Tukaj je nekaj pogosto uporabljenih metod jQuery za obravnavanje dogodkov miške.
click()Metoda click() priložite funkcijo obdelovalca dogodkov izbranim elementom za dogodek “click“. Povezana funkcija se izvede, ko uporabnik klikne ta element. Naslednji primer bo skril elemente <p> na strani ob kliku.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Metoda dblclick() priložite funkcijo obdelovalca dogodkov izbranim elementom za dogodek “dblclick“. Povezana funkcija se izvede, ko uporabnik dvakrat klikne ta element. Naslednji primer bo skril elemente <p> ko jih dvokliknete.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Metoda hover() izbranim elementom priložite eno ali dve funkciji obdelovalca dogodkov, ki se izvajata, ko se kazalec miške premakne v elemente in iz njih. Prva funkcija se zažene, ko uporabnik postavi kazalec miške na element, medtem ko se druga funkcija zažene, ko uporabnik odstrani kazalec miške s tega elementa.
Naslednji primer bo poudaril elemente <p> ko nanj postavite kazalec, bo osvetlitev odstranjena, ko odstranite kazalec.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Metoda mouseenter() izbranim elementom priloži funkcijo obdelovalca dogodkov, ki se izvede, ko miška vstopi v element. Naslednji primer bo elementu dodal označevanje razreda <p> ko postavite kazalec nanj.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Metoda mouseleave() izbranim elementom priloži funkcijo obdelovalnika dogodkov, ki se zažene, ko miška zapusti element. Naslednji primer bo odstranil osvetlitev razreda iz elementa <p> ko z nje odstranite kazalec.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Dogodek tipkovnice se sproži, ko uporabnik pritisne ali spusti tipko na tipkovnici. Oglejmo si nekaj pogosto uporabljenih metod jQuery za obravnavanje dogodkov na tipkovnici.
keypress()Metoda keypress() izbranim elementom (običajno kontrolnikom obrazca) priloži funkcijo za obravnavo dogodkov, ki se zažene, ko brskalnik od uporabnika prejme vnos s tipkovnico. Naslednji primer bo prikazal sporočilo, ko se dogodek sproži keypress in kolikokrat se sproži, ko pritisnete tipko na tipkovnici.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Dogodek pritiska na tipko je podoben dogodku pritiska na tipko, le da modifikatorske in nenatisljive tipke, kot so Shift, Esc, vračalka ali Delete, puščične tipke itd. sprožijo dogodke spuščanja tipk, ne pa dogodkov s pritiskom tipk.
keydown()Metoda keydown() izbranim elementom (običajno kontrolnikom obrazca) doda funkcijo za obravnavo dogodkov, ki se izvede, ko uporabnik prvič pritisne tipko na tipkovnici. Naslednji primer bo prikazal sporočilo, ko se dogodek sproži keydown in kolikokrat se sproži, ko pritisnete tipko na tipkovnici.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Metoda keyup() izbranim elementom (običajno kontrolnikom obrazca) priloži funkcijo za obravnavo dogodkov, ki se izvede, ko uporabnik spusti tipko na tipkovnici. Naslednji primer bo prikazal sporočilo, ko se dogodek sproži keyup in kolikokrat se sproži, ko pritisnete in spustite tipko na tipkovnici.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Dogodek obrazca se sproži, ko kontrolnik obrazca prejme ali izgubi fokus ali ko uporabnik spremeni vrednost kontrolnika obrazca, kot je vnos besedila v besedilni vnos, izbira možnosti v izbirnem polju itd. Tukaj je nekaj pogosto uporabljenih metod jQuery za obravnavanje dogodkov na obrazcu.
change()Metoda change() elementom priložite funkcijo obdelovalca dogodkov <input> in se izvede, ko se spremeni njegova vrednost. Naslednji primer bo prikazal opozorilo, ko izberete možnost v spustnem izbirnem polju.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Za polja za klikanje, potrditvena polja in izbirne gumbe se dogodek sproži takoj, ko uporabnik izbere miško, za vnos besedila in področje besedila pa se dogodek sproži, ko element izgubi fokus.
focus()Metoda focus() izbranim elementom (običajno kontrolnikom in vezavam obrazca) priloži funkcijo obdelovalca dogodkov, ki se izvede, ko dobi fokus. Naslednji primer bo prikazal sporočilo, ko vnos besedila prejme fokus.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Metoda blur() elementom obrazca, kot je npr <input>, <textarea>, <select> ki se izvede, ko izgubi fokus. Naslednji primer bo prikazal sporočilo, ko vnos besedila izgubi fokus.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Metoda submit() elementom priložite funkcijo obdelovalca dogodkov <form> ki se zažene, ko uporabnik poskuša oddati obrazec. Naslednji primer bo prikazal sporočilo glede na vrednost, vneseno ob poskusu oddaje obrazca.
<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>Dogodki se sprožijo tudi v situaciji, ko je stran DOM (Document Object Model) pripravljena ali ko uporabnik spremeni velikost ali se pomika po oknu brskalnika itd. Tukaj je nekaj pogosto uporabljenih metod jQuery za obravnavo te vrste dogodkov.
ready()Metoda ready() določa funkcijo za izvedbo, ko je DOM popolnoma naložen.
Naslednji primer bo nadomestil besedilo odstavka takoj, ko bo hierarhija DOM v celoti zgrajena in pripravljena za manipulacijo.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Metoda resize() elementu okna priložite funkcijo obdelovalca dogodkov, ki se zažene, ko se spremeni velikost okna brskalnika.
Naslednji primer bo pokazal trenutno širino in višino okna brskalnika, ko ga poskušate spremeniti tako, da povlečete njegove vogale.
<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() oknu ali v iframe in pomične elemente, ki se zaženejo vsakič, ko se položaj pomikanja elementa spremeni.
Naslednji primer bo med drsenjem po oknu brskalnika prikazal sporočilo.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Coveware by Veeam bo še naprej zagotavljal storitve odzivanja na incidente kibernetskega izsiljevanja. Coveware bo nudil forenziko in zmogljivosti sanacije ...
Prediktivno vzdrževanje revolucionira sektor nafte in plina z inovativnim in proaktivnim pristopom k upravljanju obratov.…
Britanski CMA je izdal opozorilo glede obnašanja Big Tech na trgu umetne inteligence. tam …
Odlok "Case Green", ki ga je oblikovala Evropska unija za povečanje energetske učinkovitosti stavb, je zaključil svoj zakonodajni postopek z ...