Crearea unei aplicații bazate pe Ajax devine foarte simplă și rapidă cu jQuery.
jQuery a fost creat inițial de John Resig la începutul anului 2006. Proiectul jQuery este în prezent întreținut și întreținut de un grup distribuit de dezvoltatori ca proiect open source.
Puteți economisi mult timp și efort cu jQuery. Așa că adăugați acest site la favorite și continuați să citiți
Există multe alte lucruri pe care le puteți face cu jQuery.
Lista nu se termină aici, există multe alte lucruri interesante pe care le puteți face cu jQuery.
Există mai multe avantaje de ce ar trebui să optați pentru utilizarea jQuery:
Pentru a începe, să descarcăm mai întâi o copie a jQuery și apoi să o includem în proiectul nostru. Două versiuni de jQuery sunt disponibile pentru descărcare: în grabă e necomprimat .
Fișierul necomprimat este mai potrivit pentru dezvoltare sau depanare; în timp ce, fișierul miniat și comprimat este recomandat pentru producție, deoarece economisește lățime de bandă și îmbunătățește performanța datorită dimensiunii mai mici a fișierului.
Putem descărca jQuery de aici: https://jquery.com/download/
Odată ce descărcați fișierul jQuery, puteți vedea că are o extensie js, adică este un fișier JavaScript. De fapt, JQuery nu este altceva decât o bibliotecă JavaScript, așa că puteți include fișierul jQuery în documentul HTML cu elementul la fel cum includeți fișiere JavaScript obișnuite.
<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>Nu uitați să includeți întotdeauna fișierul jQuery înaintea scripturilor personalizate; în caz contrar, API-urile jQuery nu vor fi disponibile atunci când codul dvs. jQuery încearcă să le acceseze.
După cum probabil ați observat, am omis atributul din exemplul anterior type="text/javascript" în interiorul etichetei . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiterminat în HTML5 și în toate browserele moderne.
Ca alternativă, puteți încorpora jQuery în documentul dvs. prin link-uri CDN (Content Delivery Network) disponibile gratuit, dacă preferați să evitați descărcarea fișierului.
CDN-urile pot oferi un avantaj de performanță prin reducerea timpului de încărcare, deoarece găzduiesc jQuery pe mai multe servere din întreaga lume, iar atunci când un utilizator solicită fișierul, acesta va fi servit de pe cel mai apropiat server.
Acest lucru are, de asemenea, avantajul că, dacă vizitatorul paginii dvs. web a descărcat deja o copie a jQuery de pe același CDN în timp ce vizitează alte site-uri, nu va trebui să o descarce din nou, deoarece este deja în memoria cache a browserului său.
În acest caz va trebui să scrieți:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Pe lângă CDN-ul furnizat de proiectul jquery, puteți include jQuery prin Google e Microsoft cdn.
După ce ați văzut obiectivele bibliotecii jQuery și cum să o includeți în documentul dvs., acum este momentul să puneți jQuery în practică.
Acum să facem o operațiune jQuery simplă, schimbând culoarea textului antetului de la culoarea prealabilădeficuloare neagră până la verde.
<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>În cod am efectuat o operație jQuery simplă prin schimbarea culorii antetului, adică a elementului folosind selectorul elementului jQuery și metoda css() atunci când documentul este gata, cunoscut sub numele de evenimentul gata de document.
O instrucțiune jQuery începe de obicei cu un semn dolar ( $) și se termină cu punct și virgulă ( ;).
În jQuery, semnul dolarului ( $) este doar un alias pentru jQuery. Luați în considerare următorul exemplu de cod care demonstrează cea mai simplă instrucțiune jQuery.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Exemplul afișează pur și simplu un mesaj de avertizare „Hello I'm a JQuery sign” către utilizator. Să vedem câteva caracteristici:
<script>: jQuery este doar o bibliotecă JavaScript, codul jQuery poate fi plasat în interiorul elementului <script>, sau îl puteți pune într-un fișier JavaScript extern;$(document).ready(handler); este cunoscut ca un eveniment gata. Unde este handler este o funcție care este transmisă metodei care urmează să fie executată, de îndată ce documentul este gata, adică atunci când ierarhia DOM a fost complet construită.Metoda jQuery ready() este de obicei folosit cu o funcție anonimă. Deci, exemplul de mai sus poate fi scris și în notație scurtă astfel:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>În interiorul unei funcții puteți scrie instrucțiuni jQuery pentru a efectua orice acțiune urmând sintaxa de bază, cum ar fi:
$(selector).action();Unde este, $(selector) practic selectează elementele HTML din arborele DOM pentru a putea fi manipulate și action() aplicați unele acțiuni asupra elementelor selectate, cum ar fi modificarea valorii proprietății CSS sau setarea conținutului elementului etc.
Acum să ne uităm la un alt exemplu care stabilește textul paragrafului:
<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>Exemplul jQuery se referă la selector p, iar aceasta selectează toate paragrafele, apoi metoda text() setați conținutul text al paragrafului cu „Hello World!".
Textul paragrafului din exemplul anterior este înlocuit automat când documentul este gata. Dar haideți să vedem cum să faceți acest lucru în cazul în care doriți să efectuați o acțiune înainte de a rula codul jQuery, pentru a înlocui textul paragrafului.
Să luăm în considerare un ultim exemplu:
<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>În acest exemplu, textul paragrafului este înlocuit numai atunci când apare un eveniment de clic pe butonul "Replace Text„, ceea ce înseamnă pur și simplu când un utilizator face clic pe acest buton.
Puteți utiliza selectorul de ID pentru a selecta un singur articol cu ID-ul unic pe pagină.
De exemplu, următorul cod jQuery va selecta și evidenția un element cu atributul ID id="markid", când documentul este gata.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Selectorul de clasă poate fi folosit pentru a selecta elemente cu o anumită clasă.
De exemplu, următorul cod jQuery va selecta și evidenția elemente cu atributul class class="markclass", când documentul este gata.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Selectorul de articole poate fi folosit pentru a selecta articole după numele articolului.
De exemplu, următorul cod jQuery va selecta și evidenția tot paragraful, adică elementele "<p>" a documentului când este gata.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Puteți utiliza selectorul de atribute pentru a selecta un element pe baza unuia dintre atributele sale HTML, cum ar fi un atribut de legătură targetsau atributul unei intrări typeetc.
De exemplu, următorul cod jQuery va selecta și evidenția toate intrările de text, cum ar fi elementele "<input>" cu type="text", când documentul este gata.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>De asemenea, puteți combina selectoare CSS pentru a face selecția dvs. și mai precisă.
De exemplu, puteți combina selectorul de clasă cu un selector de elemente pentru a găsi elemente dintr-un document care au un anumit tip și clasă.
<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>Pe lângă selectoare definiti, jQuery oferă propriul selector personalizat pentru a îmbunătăți și mai mult capacitățile de selectare a elementelor dintr-o pagină.
<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>Evenimentele sunt adesea declanșate de interacțiunea utilizatorului cu pagina web, cum ar fi atunci când faceți clic pe un link sau pe un buton, când introduceți text într-o casetă de introducere sau într-o zonă de text, faceți o selecție într-o casetă de selecție, apăsați o tastă de pe tastatură, mutați indicatorul mouse-ului , etc. În unele cazuri, browserul însuși poate declanșa evenimente, cum ar fi evenimente de încărcare și descărcare a paginii.
jQuery îmbunătățește mecanismele de bază de gestionare a evenimentelor, oferind metode de evenimente pentru majoritatea evenimentelor din browser nativ, unele dintre aceste metode sunt ready(), click(), keypress(), focus(), blur(), change()etc.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>În general, evenimentele pot fi clasificate în patru grupe principale:
Un eveniment de mouse este declanșat atunci când utilizatorul face clic pe un articol, mută cursorul mouse-ului etc.
Iată câteva metode jQuery utilizate în mod obișnuit pentru a gestiona evenimentele mouse-ului.
click()Metoda click() atașați o funcție de gestionare a evenimentelor la elementele selectate pentru eveniment „click„. Funcția legată se execută atunci când utilizatorul face clic pe acel element. Următorul exemplu va ascunde elementele <p> pe o pagină când se face clic.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Metoda dblclick() atașați o funcție de gestionare a evenimentelor la elementele selectate pentru eveniment „dblclick„. Funcția legată se execută atunci când utilizatorul face dublu clic pe acel element. Următorul exemplu va ascunde elementele <p> când faceți dublu clic pe ele.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Metoda hover() atașați una sau două funcții de gestionare a evenimentelor elementelor selectate care se execută atunci când cursorul mouse-ului se mișcă în interior și în afara elementelor. Prima funcție rulează atunci când utilizatorul plasează indicatorul mouse-ului peste un articol, în timp ce a doua funcție rulează atunci când utilizatorul îndepărtează indicatorul mouse-ului din acel articol.
Următorul exemplu va evidenția elementele <p> când plasați cursorul pe acesta, evidențierea va fi eliminată când eliminați cursorul.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Metoda mouseenter() atașați o funcție de gestionare a evenimentelor la elementele selectate care este executată atunci când mouse-ul intră într-un element. Următorul exemplu va adăuga evidențierea clasei elementului <p> când plasezi cursorul peste el.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Metoda mouseleave() atașați o funcție de gestionare a evenimentelor la elementele selectate care rulează atunci când mouse-ul părăsește un articol. Următorul exemplu va elimina evidențierea clasei din element <p> când eliminați cursorul de pe acesta.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Un eveniment de la tastatură este declanșat atunci când utilizatorul apasă sau eliberează o tastă de pe tastatură. Să ne uităm la câteva metode jQuery utilizate în mod obișnuit pentru a gestiona evenimentele de la tastatură.
keypress()Metoda keypress() atașează o funcție de gestionare a evenimentelor elementelor selectate (de obicei, controale de formular) care rulează atunci când browserul primește intrare de la tastatură de la utilizator. Următorul exemplu va afișa un mesaj când evenimentul este declanșat keypress și de câte ori se declanșează atunci când apăsați tasta de pe tastatură.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Evenimentul de apăsare a tastei este similar cu evenimentul de apăsare a tastei, cu excepția faptului că tastele modificatoare și care nu se imprimă, cum ar fi Shift, Esc, Backspace sau Delete, tastele săgeți etc. ele declanșează evenimente de tastare, dar nu evenimente de apăsare de taste.
keydown()Metoda keydown() atașează o funcție de gestionare a evenimentelor elementelor selectate (de obicei, controale de formulare) care este executată atunci când utilizatorul apasă pentru prima dată o tastă de pe tastatură. Următorul exemplu va afișa un mesaj când evenimentul este declanșat keydown și de câte ori se declanșează atunci când apăsați tasta de pe tastatură.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Metoda keyup() atașați o funcție de gestionare a evenimentelor la elementele selectate (de obicei, controale de formular) care este executată atunci când utilizatorul eliberează o tastă de pe tastatură. Următorul exemplu va afișa un mesaj când evenimentul este declanșat keyup și de câte ori se declanșează atunci când apăsați și eliberați o tastă de pe tastatură.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Un eveniment de formular este declanșat atunci când un control de formular primește sau pierde focalizarea sau când utilizatorul modifică o valoare de control al formularului, cum ar fi introducerea textului într-o intrare de text, selectarea unei opțiuni într-o casetă de selectare etc. Iată câteva metode jQuery utilizate în mod obișnuit pentru a gestiona evenimentele din formular.
change()Metoda change() atașați o funcție de gestionare a evenimentelor elementelor <input> și se execută atunci când valoarea sa se modifică. Următorul exemplu va afișa un mesaj de avertizare atunci când selectați o opțiune în caseta de selecție drop-down.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Pentru casetele de clic, casetele de selectare și butoanele radio, evenimentul se declanșează imediat când utilizatorul face o selecție cu mouse-ul, dar pentru introducerea textului și zona de text, evenimentul se declanșează după ce elementul își pierde focalizarea.
focus()Metoda focus() atașează o funcție de gestionare a evenimentelor elementelor selectate (de obicei, controale și legături de formulare) care se execută atunci când se concentrează. Următorul exemplu va afișa un mesaj când introducerea textului este focalizată.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Metoda blur() atașați o funcție de gestionare a evenimentelor pentru a forma elemente precum <input>, <textarea>, <select> care se execută atunci când își pierde focalizarea. Următorul exemplu va afișa un mesaj când introducerea textului își pierde focalizarea.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Metoda submit() atașați o funcție de gestionare a evenimentelor elementelor <form> care rulează atunci când utilizatorul încearcă să trimită un formular. Următorul exemplu va afișa un mesaj bazat pe valoarea introdusă atunci când încercați să trimiteți formularul.
<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>Evenimentele sunt declanșate și în situația în care pagina DOM (Document Object Model) este gata sau când utilizatorul redimensionează sau derulează fereastra browserului etc. Iată câteva metode jQuery utilizate în mod obișnuit pentru a gestiona acest tip de eveniment.
ready()Metoda ready() specifică o funcție de executat când DOM-ul este încărcat complet.
Următorul exemplu va înlocui textul paragrafului de îndată ce ierarhia DOM este complet construită și gata pentru a fi manipulată.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Metoda resize() atașați o funcție de gestionare a evenimentelor la elementul fereastră care rulează atunci când dimensiunea ferestrei browserului se modifică.
Următorul exemplu va afișa lățimea și înălțimea curentă a ferestrei browserului atunci când încercați să o redimensionați trăgând colțurile.
<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() atașați o funcție de gestionare a evenimentelor la fereastră sau la iframe și elemente care pot fi derulate care rulează ori de câte ori se modifică poziția de defilare a elementului.
Următorul exemplu va afișa un mesaj când derulați fereastra browserului.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Coveware de la Veeam va continua să ofere servicii de răspuns la incidente de extorcare cibernetică. Coveware va oferi capacități criminalistice și de remediere...
Întreținerea predictivă revoluționează sectorul petrolului și gazelor, cu o abordare inovatoare și proactivă a managementului uzinelor...
CMA din Marea Britanie a emis un avertisment cu privire la comportamentul Big Tech pe piața inteligenței artificiale. Acolo…
Decretul „Case verzi”, formulat de Uniunea Europeană pentru creșterea eficienței energetice a clădirilor, și-a încheiat procesul legislativ cu...