Vytvorenie aplikácie založenej na Ajaxe je vďaka jQuery veľmi jednoduché a rýchle.
jQuery pôvodne vytvoril John Resig začiatkom roku 2006. Projekt jQuery je v súčasnosti udržiavaný a udržiavaný distribuovanou skupinou vývojárov ako open source projekt.
S jQuery môžete ušetriť veľa času a úsilia. Pridajte si teda túto stránku medzi svoje obľúbené a pokračujte v čítaní
S jQuery môžete robiť oveľa viac vecí.
Zoznam tam nekončí, existuje mnoho ďalších skvelých vecí, ktoré môžete robiť s jQuery.
Existuje niekoľko výhod, prečo by ste sa mali rozhodnúť pre používanie jQuery:
Na začiatok si najprv stiahneme kópiu jQuery a potom ju zahrnieme do nášho projektu. Na stiahnutie sú k dispozícii dve verzie jQuery: tabletu e nie stlačený .
Nekomprimovaný súbor je vhodnejší na vývoj alebo ladenie; zatiaľ čo miniifikovaný a komprimovaný súbor sa odporúča na výrobu, pretože šetrí šírku pásma a zlepšuje výkon vďaka menšej veľkosti súboru.
jQuery si môžeme stiahnuť tu: https://jquery.com/download/
Po stiahnutí súboru jQuery môžete vidieť, že má príponu js, t.j. je to súbor JavaScript. V skutočnosti JQuery nie je nič iné ako knižnica JavaScript, takže súbor jQuery môžete zahrnúť do dokumentu HTML s prvkom rovnako ako zahrniete bežné súbory 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>Nezabudnite vždy zahrnúť súbor jQuery pred vlastné skripty; V opačnom prípade nebudú rozhrania jQuery API dostupné, keď sa k nim váš kód jQuery pokúsi získať prístup.
Ako ste si mohli všimnúť, v predchádzajúcom príklade sme preskočili atribút type="text/javascript" vnútri značky . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefidokončené v HTML5 a vo všetkých moderných prehliadačoch.
Ako alternatívu môžete do dokumentu vložiť jQuery prostredníctvom voľne dostupných odkazov CDN (Content Delivery Network), ak sa chcete radšej vyhnúť sťahovaniu súboru.
CDN môžu ponúknuť výkonnostnú výhodu skrátením času načítania, pretože hosťujú jQuery na viacerých serveroch po celom svete a keď používateľ požiada o súbor, bude doručený z najbližšieho servera.
To má tiež tú výhodu, že ak si návštevník vašej webovej stránky už stiahol kópiu jQuery z rovnakého CDN pri návšteve iných stránok, nebude ju musieť sťahovať znova, pretože je už uložená vo vyrovnávacej pamäti prehliadača.
V tomto prípade budete musieť napísať:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Okrem CDN, ktoré poskytuje projekt jquery, môžete zahrnúť jQuery cez Google e Microsoft cdn.
Keď ste videli ciele knižnice jQuery a ako ju zahrnúť do dokumentu, teraz je čas uviesť jQuery do praxe.
Teraz urobme jednoduchú operáciu jQuery zmenou farby textu hlavičky z pôvodnej farbydefidokončená čierna až zelená farba.
<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 kóde sme vykonali jednoduchú operáciu jQuery zmenou farby hlavičky, teda prvku pomocou selektora prvku jQuery a metódy css(), keď je dokument pripravený, čo je známe ako udalosť pripravenosti dokumentu.
Výpis jQuery zvyčajne začína znakom dolára ( $) a končí bodkočiarkou ( ;).
V jQuery znak dolára ( $) je len alias pre jQuery. Zvážte nasledujúci vzorový kód demonštrujúci najjednoduchší príkaz jQuery.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Príklad jednoducho zobrazí varovnú správu „Hello I'm a JQuery sign“ používateľovi. Pozrime sa na niektoré funkcie:
<script>: jQuery je len knižnica JavaScript, kód jQuery je možné umiestniť do prvku <script>, alebo ho môžete vložiť do externého súboru JavaScript;$(document).ready(handler); je známa ako pripravená udalosť. Kde to je handler je to funkcia, ktorá sa odovzdá metóde, ktorá sa má vykonať, hneď ako je dokument pripravený, t. j. keď je hierarchia DOM úplne vybudovaná.Metóda jQuery ready() zvyčajne sa používa s anonymnou funkciou. Takže vyššie uvedený príklad môže byť napísaný aj v skratke takto:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Vo vnútri funkcie môžete napísať príkazy jQuery na vykonanie akejkoľvek akcie podľa základnej syntaxe, napríklad:
$(selector).action();Kde to je, $(selector) v podstate vyberá prvky HTML zo stromu DOM, aby sa s nimi dalo manipulovať a action() aplikovať na vybrané prvky niektoré akcie, ako je zmena hodnoty vlastnosti CSS, alebo nastavenie obsahu prvku atď.
Teraz sa pozrime na ďalší príklad, ktorý nastavuje text odseku:
<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>Príklad jQuery odkazuje na selektor p, a tým sa vyberú všetky odseky a potom metóda text() nastavte textový obsah odseku pomocou „Hello World!".
Text odseku v predchádzajúcom príklade sa automaticky nahradí, keď je dokument pripravený. Pozrime sa však, ako to urobiť v prípade, že chcete pred spustením kódu jQuery vykonať akciu, ktorou nahradíte text odseku.
Zoberme si posledný príklad:
<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 tomto príklade je odsekový text nahradený iba vtedy, keď sa vyskytne kliknutie na tlačidlo "Replace Text“, čo jednoducho znamená, keď používateľ klikne na toto tlačidlo.
Na výber jednej položky s jedinečným ID na stránke môžete použiť selektor ID.
Napríklad nasledujúci kód jQuery vyberie a zvýrazní prvok s atribútom ID id="markid", keď je dokument pripravený.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Selektor triedy možno použiť na výber prvkov s konkrétnou triedou.
Napríklad nasledujúci kód jQuery vyberie a zvýrazní prvky s atribútom class class="markclass", keď je dokument pripravený.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Selektor položky možno použiť na výber položiek podľa názvu položky.
Napríklad nasledujúci kód jQuery vyberie a zvýrazní všetky odseky, t. j. prvky "<p>" dokumentu, keď je pripravený.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Selektor atribútov môžete použiť na výber prvku na základe jedného z jeho atribútov HTML, ako je napríklad atribút odkazu targetalebo atribút vstupu type, atď.
Napríklad nasledujúci kód jQuery vyberie a zvýrazní všetky textové vstupy, ako sú prvky "<input>" s type="text", keď je dokument pripravený.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Môžete tiež kombinovať selektory CSS, aby bol váš výber ešte presnejší.
Môžete napríklad skombinovať selektor triedy so selektorom prvkov, aby ste našli prvky v dokumente, ktoré majú určitý typ a triedu.
<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>Okrem selektorov definiti, jQuery poskytuje svoj vlastný selektor na ďalšie zlepšenie možností výberu prvkov na stránke.
<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>Udalosti sú často spúšťané interakciou používateľa s webovou stránkou, ako je kliknutie na odkaz alebo tlačidlo, zadávanie textu do vstupného poľa alebo textovej oblasti, výber v poli výberu, stlačenie klávesu na klávesnici, pohyb ukazovateľa myši , atď. V niektorých prípadoch môže samotný prehliadač spúšťať udalosti, ako je načítanie stránky a sťahovanie.
jQuery vylepšuje základné mechanizmy spracovania udalostí tým, že ponúka metódy udalostí pre väčšinu natívnych udalostí prehliadača, niektoré z týchto metód sú ready(), click(), keypress(), focus(), blur(), change(), atď.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Vo všeobecnosti možno udalosti rozdeliť do štyroch hlavných skupín:
Udalosť myši sa spustí, keď používateľ klikne na položku, pohne ukazovateľom myši atď.
Tu je niekoľko bežne používaných metód jQuery na spracovanie udalostí myši.
click()Metóda click() pripojiť funkciu obsluhy udalosti k vybraným prvkom pre udalosť “click“. Prepojená funkcia sa spustí, keď používateľ klikne na túto položku. Nasledujúci príklad skryje prvky <p> na stránke po kliknutí.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Metóda dblclick() pripojiť funkciu obsluhy udalosti k vybraným prvkom pre udalosť “dblclick“. Prepojená funkcia sa spustí, keď používateľ dvakrát klikne na túto položku. Nasledujúci príklad skryje prvky <p> pri dvojitom kliknutí na ne.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Metóda hover() pripojiť jednu alebo dve funkcie obsluhy udalostí k vybraným prvkom, ktoré sa vykonajú, keď sa kurzor myši presunie dovnútra a von z prvkov. Prvá funkcia sa spustí, keď používateľ umiestni ukazovateľ myši na položku, zatiaľ čo druhá funkcia sa spustí, keď používateľ z tejto položky odstráni ukazovateľ myši.
Nasledujúci príklad zvýrazní položky <p> keď naň umiestnite kurzor, zvýraznenie sa po odstránení kurzora odstráni.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Metóda mouseenter() pripojiť k vybraným prvkom funkciu obsluhy udalosti, ktorá sa vykoná, keď myš zadá prvok. Nasledujúci príklad pridá k prvku zvýraznenie triedy <p> keď naň umiestnite kurzor.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Metóda mouseleave() pripojiť k vybraným položkám funkciu obsluhy udalosti, ktorá sa spustí, keď myš opustí položku. Nasledujúci príklad odstráni zvýraznenie triedy z prvku <p> keď z neho odstránite kurzor.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Udalosť klávesnice sa vyvolá, keď používateľ stlačí alebo uvoľní kláves na klávesnici. Pozrime sa na niektoré bežne používané metódy jQuery na spracovanie udalostí klávesnice.
keypress()Metóda keypress() pripojí k vybraným prvkom (zvyčajne ovládacie prvky formulára) funkciu spracovania udalostí, ktorá sa spustí, keď prehliadač prijme vstup z klávesnice od používateľa. Nasledujúci príklad zobrazí správu pri spustení udalosti keypress a koľkokrát sa spustí, keď stlačíte kláves na klávesnici.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Udalosť stlačenia klávesu je podobná udalosti stlačenia klávesu s výnimkou modifikačných a netlačiteľných kláves, ako sú Shift, Esc, Backspace alebo Delete, kláves so šípkami atď. spúšťajú udalosti stlačenia klávesu, ale nie udalosti stlačenia klávesu.
keydown()Metóda keydown() pripojí k vybraným položkám (zvyčajne ovládacie prvky formulára) funkciu spracovania udalostí, ktorá sa spustí, keď používateľ prvýkrát stlačí kláves na klávesnici. Nasledujúci príklad zobrazí správu pri spustení udalosti keydown a koľkokrát sa spustí, keď stlačíte kláves na klávesnici.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Metóda keyup() pripojiť funkciu spracovania udalostí k vybraným prvkom (zvyčajne ovládacím prvkom formulára), ktorá sa vykoná, keď používateľ uvoľní kláves na klávesnici. Nasledujúci príklad zobrazí správu pri spustení udalosti keyup a koľkokrát sa spustí, keď stlačíte a uvoľníte kláves na klávesnici.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Udalosť formulára sa spustí, keď ovládací prvok formulára získa alebo stratí zameranie, alebo keď používateľ zmení hodnotu ovládacieho prvku formulára, ako je napríklad zadanie textu do textového vstupu, výber možnosti v poli výberu atď. Tu je niekoľko bežne používaných metód jQuery na spracovanie udalostí formulára.
change()Metóda change() pripojiť k prvkom funkciu obsluhy udalosti <input> a vykoná sa, keď sa zmení jeho hodnota. Nasledujúci príklad zobrazí varovné hlásenie pri výbere možnosti v rozbaľovacom poli výberu.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>V prípade políčok na kliknutie, začiarkavacích políčok a prepínačov sa udalosť spustí okamžite, keď používateľ vykoná výber myšou, ale v prípade zadávania textu a oblasti textu sa udalosť spustí, keď prvok stratí zameranie.
focus()Metóda focus() pripojí funkciu obsluhy udalosti k vybraným prvkom (zvyčajne ovládacím prvkom a väzbám formulárov), ktorá sa vykoná, keď sa zameria. V nasledujúcom príklade sa zobrazí hlásenie, keď sa zadáva text.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Metóda blur() pripojiť funkciu obsluhy udalosti na vytvorenie prvkov, ako napr <input>, <textarea>, <select> ktorý sa vykoná, keď stratí zameranie. Nasledujúci príklad zobrazí správu, keď zadávanie textu stratí zameranie.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Metóda submit() pripojiť k prvkom funkciu obsluhy udalosti <form> ktorý sa spustí, keď sa používateľ pokúsi odoslať formulár. Nasledujúci príklad zobrazí správu založenú na hodnote zadanej pri pokuse o odoslanie formulára.
<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>Udalosti sa spúšťajú aj v situácii, keď je stránka DOM (Document Object Model) pripravená alebo keď používateľ zmení veľkosť alebo roluje okno prehliadača atď. Tu je niekoľko bežne používaných metód jQuery na zvládnutie tohto typu udalosti.
ready()Metóda ready() určuje funkciu, ktorá sa má vykonať, keď je DOM plne načítaný.
Nasledujúci príklad nahradí text odseku hneď, ako bude hierarchia DOM úplne vytvorená a pripravená na manipuláciu.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Metóda resize() pripojiť funkciu obsluhy udalosti k prvku okna, ktorá sa spustí pri zmene veľkosti okna prehliadača.
Nasledujúci príklad ukáže aktuálnu šírku a výšku okna prehliadača, keď sa pokúsite zmeniť jeho veľkosť pretiahnutím jeho rohov.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Metóda scroll() pripojiť funkciu obsluhy udalosti k oknu alebo k iframe a rolovateľné položky, ktoré sa spúšťajú vždy, keď sa zmení pozícia rolovania položky.
Nasledujúci príklad zobrazí správu pri rolovaní okna prehliadača.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Rozvíjanie jemnej motoriky pomocou vyfarbovania pripravuje deti na zložitejšie zručnosti, ako je písanie. Na farbenie…
Námorný sektor je skutočnou globálnou ekonomickou veľmocou, ktorá smerovala k 150 miliardovému trhu...
Minulý pondelok Financial Times oznámili dohodu s OpenAI. FT licencuje svoju žurnalistiku svetovej triedy…
Milióny ľudí platia za streamovacie služby a platia mesačné predplatné. Je bežný názor, že si…