Il-ħolqien ta 'applikazzjoni bbażata fuq Ajax isir sempliċi ħafna u veloċi b'jQuery.
jQuery inħoloq oriġinarjament minn John Resig kmieni fl-2006. Il-proġett jQuery bħalissa huwa miżmum u miżmum minn grupp distribwit ta 'żviluppaturi bħala proġett ta' sors miftuħ.
Tista 'tiffranka ħafna ħin u sforz b'jQuery. Allura żid dan is-sit mal-favoriti tiegħek u kompli aqra
Hemm ħafna aktar affarijiet li tista 'tagħmel b'jQuery.
Il-lista ma tispiċċax hemm, hemm ħafna affarijiet oħra friski li tista 'tagħmel b'jQuery.
Hemm diversi vantaġġi għaliex wieħed għandu jagħżel li juża jQuery:
Biex tibda, ejja l-ewwel tniżżel kopja ta 'jQuery u mbagħad tinkludiha fil-proġett tagħna. Żewġ verżjonijiet ta' jQuery huma disponibbli biex jitniżżlu: mgħaġġel e mhux kompressat .
Il-fajl mhux kompressat huwa aktar adattat għall-iżvilupp jew id-debugging; filwaqt li, il-fajl minifikat u kkompressat huwa rakkomandat għall-produzzjoni minħabba li jiffranka bandwidth u jtejjeb il-prestazzjoni minħabba d-daqs iżgħar tal-fajl.
Nistgħu tniżżel jQuery minn hawn: https://jquery.com/download/
Ladarba tniżżel il-fajl jQuery tista' tara li għandu estensjoni js, jiġifieri huwa fajl JavaScript. Fil-fatt JQuery mhu xejn ħlief librerija JavaScript, għalhekk tista' tinkludi l-fajl jQuery fid-dokument HTML bl-element bħalma tinkludi fajls JavaScript regolari.
<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>Ftakar li dejjem tinkludi l-fajl jQuery qabel skripts tad-dwana; inkella, il-jQuery APIs ma jkunux disponibbli meta l-kodiċi jQuery tiegħek jipprova jaċċessahom.
Kif forsi innotajt, qbiżna l-attribut fl-eżempju preċedenti type="text/javascript" ġewwa t-tikketta . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefilest fl-HTML5 u fil-browsers moderni kollha.
Bħala alternattiva, tista' tiddaħħal jQuery fid-dokument tiegħek permezz ta' links tas-CDN (Netwerk ta' Kunsinna tal-Kontenut) disponibbli liberament, jekk tippreferi tevita li tniżżel il-fajl.
Is-CDNs jistgħu joffru vantaġġ ta 'prestazzjoni billi jnaqqsu l-ħin tat-tagħbija, minħabba li jospitaw jQuery fuq servers multipli madwar id-dinja, u meta utent jitlob il-fajl, dan jiġi moqdi mill-eqreb server.
Dan għandu wkoll il-vantaġġ li jekk il-viżitatur tal-paġna tal-web tiegħek ikun diġà niżżel kopja tal-jQuery mill-istess CDN waqt li jżur siti oħra, ma jkollux għalfejn jerġa' jniżżha peress li diġà jinsab fil-cache tal-browser tagħhom.
F'dan il-każ ikollok tikteb:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Minbarra s-CDN ipprovdut mill-proġett jquery, tista 'tinkludi jQuery permezz Google e Microsoft cdn.
Wara li rajt l-għanijiet tal-librerija jQuery u kif tinkludiha fid-dokument tiegħek, issa huwa ż-żmien li tpoġġi jQuery fil-prattika.
Issa ejja nagħmlu operazzjoni jQuery sempliċi billi nibdlu l-kulur tat-test tal-header mill-kulur ta 'qabeldefilewn iswed għal aħdar lest.
<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>Fil-kodiċi wettaqna operazzjoni jQuery sempliċi billi nbiddlu l-kulur tal-header jiġifieri l-element bl-użu tas-selettur tal-element jQuery u l-metodu css() meta d-dokument ikun lest, magħruf bħala l-avveniment lest tad-dokument.
Dikjarazzjoni jQuery normalment tibda b'sinjal tad-dollaru ( $) u tispiċċa b'punt u virgola ( ;).
F'jQuery, is-sinjal tad-dollaru ( $) huwa biss alias għal jQuery. Ikkunsidra l-kodiċi tal-kampjun li ġej li juri l-aktar dikjarazzjoni jQuery sempliċi.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>L-eżempju sempliċement juri messaġġ ta 'twissija "Hello I'm a JQuery sign” lill-utent. Ejja naraw xi karatteristiċi:
<script>: jQuery hija biss librerija JavaScript, il-kodiċi jQuery jista 'jitqiegħed ġewwa l-element <script>, jew tista 'tpoġġiha f'fajl JavaScript estern;$(document).ready(handler); huwa magħruf bħala avveniment lest. Fejn hi handler hija funzjoni li tiġi mgħoddija lill-metodu li għandu jiġi esegwit, hekk kif id-dokument ikun lest, jiġifieri meta l-ġerarkija DOM tkun inbniet kompletament.Il-metodu jQuery ready() normalment jintuża b'funzjoni anonima. Allura, l-eżempju ta 'hawn fuq jista' jinkiteb ukoll f'notazzjoni qasira bħal din:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Ġewwa funzjoni tista 'tikteb dikjarazzjonijiet jQuery biex twettaq kwalunkwe azzjoni wara sintassi bażika, bħal:
$(selector).action();Fejn hi, $(selector) bażikament jagħżel l-elementi HTML mis-siġra DOM sabiex ikun jista 'jiġi manipulat u action() applika xi azzjonijiet fuq l-elementi magħżula, bħall-bdil tal-valur tal-proprjetà CSS, jew l-issettjar tal-kontenut tal-element, eċċ.
Issa ejja nħarsu lejn eżempju ieħor li jistabbilixxi t-test tal-paragrafu:
<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>L-eżempju jQuery jirreferi għas-selettur p, u dan jagħżel il-paragrafi kollha, imbagħad il-metodu text() issettja l-kontenut tat-test tal-paragrafu b'“Hello World!".
It-test tal-paragrafu fl-eżempju preċedenti jiġi sostitwit awtomatikament meta d-dokument ikun lest. Imma ejja naraw kif tagħmel dan f'każ li trid twettaq azzjoni qabel ma tħaddem il-kodiċi jQuery, biex tissostitwixxi t-test tal-paragrafu.
Ejja nikkunsidraw l-aħħar eżempju wieħed:
<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>F'dan l-eżempju t-test tal-paragrafu jiġi sostitwit biss meta jseħħ avveniment ta' klikk fuq il-buttuna "Replace Text", li sempliċement tfisser meta utent jikklikkja din il-buttuna.
Tista' tuża s-selettur tal-ID biex tagħżel oġġett wieħed bl-ID unika fuq il-paġna.
Pereżempju, il-kodiċi jQuery li ġej se jagħżel u jenfasizza element bl-attribut ID id="markid", meta d-dokument ikun lest.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Is-selettur tal-klassi jista' jintuża biex jintgħażlu elementi bi klassi speċifika.
Pereżempju, il-kodiċi jQuery li ġej se jagħżel u jenfasizza elementi bl-attribut tal-klassi class="markclass", meta d-dokument ikun lest.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Is-selettur tal-oġġett jista' jintuża biex jintgħażlu oġġetti skont l-isem tal-oġġett.
Pereżempju, il-kodiċi jQuery li ġej se jagħżel u jenfasizza l-paragrafu kollu, jiġifieri l-elementi "<p>" tad-dokument meta jkun lest.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Tista' tuża s-selettur tal-attributi biex tagħżel element ibbażat fuq wieħed mill-attributi HTML tiegħu, bħal attribut tal-link targetjew l-attribut ta' input type, eċċ.
Pereżempju, il-kodiċi jQuery li ġej se jagħżel u jenfasizza l-inputs kollha tat-test, bħal elementi "<input>" ma type="text", meta d-dokument ikun lest.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Tista 'wkoll tgħaqqad is-seletturi tas-CSS biex tagħmel l-għażla tiegħek saħansitra aktar preċiża.
Pereżempju, tista' tgħaqqad is-selettur tal-klassi ma' selettur tal-element biex issib elementi f'dokument li għandhom ċertu tip u klassi.
<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>Minbarra l-seletturi definiti, jQuery jipprovdi s-selettur tad-dwana tiegħu stess biex ikompli jsaħħaħ il-kapaċitajiet ta 'għażla ta' elementi fuq paġna.
<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>L-avvenimenti ħafna drabi jiġu attivati mill-interazzjoni tal-utent mal-paġna tal-web, bħal meta tikklikkja link jew buttuna, iddaħħal test f'kaxxa tad-dħul jew żona tat-test, tagħmel għażla f'kaxxa tal-għażla, agħfas ċavetta fuq it-tastiera, ċċaqlaq il-pointer tal-maws , eċċ. F'xi każijiet, il-browser innifsu jista 'jikkawża avvenimenti, bħal avvenimenti ta' tagħbija u tniżżil tal-paġna.
jQuery itejjeb il-mekkaniżmi bażiċi tal-immaniġġjar tal-avvenimenti billi joffri metodi tal-avvenimenti għall-biċċa l-kbira tal-avvenimenti tal-browser indiġeni, xi wħud minn dawn il-metodi huma ready(), click(), keypress(), focus(), blur(), change(), eċċ.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>B'mod ġenerali, l-avvenimenti jistgħu jiġu kklassifikati f'erba' gruppi ewlenin:
Avveniment tal-maws jiġi attivat meta l-utent jikklikkja fuq oġġett, iċċaqlaq il-pointer tal-maws, eċċ.
Hawn huma xi metodi jQuery użati b'mod komuni biex jimmaniġġaw avvenimenti tal-maws.
click()Il-metodu click() waħħal funzjoni tal-immaniġġjar tal-avvenimenti mal-elementi magħżula għall-avveniment "click“. Il-funzjoni marbuta tesegwixxi meta l-utent jikklikkja fuq dak l-oġġett. L-eżempju li ġej se jaħbi l-elementi <p> fuq paġna meta għafast.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Il-metodu dblclick() waħħal funzjoni tal-immaniġġjar tal-avvenimenti mal-elementi magħżula għall-avveniment "dblclick“. Il-funzjoni marbuta tesegwixxi meta l-utent jikklikkja darbtejn dak l-oġġett. L-eżempju li ġej se jaħbi l-elementi <p> meta tikklikkjahom darbtejn.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Il-metodu hover() waħħal waħda jew tnejn funzjoni tal-immaniġġjar tal-avvenimenti ma' elementi magħżula li jeżegwixxu meta l-pointer tal-maws jimxi 'l ġewwa u 'l barra mill-elementi. L-ewwel funzjoni taħdem meta l-utent ipoġġi l-mouse pointer fuq oġġett, filwaqt li t-tieni funzjoni taħdem meta l-utent ineħħi l-mouse pointer minn dak l-oġġett.
L-eżempju li ġej se jenfasizza l-oġġetti <p> meta tpoġġi l-cursor fuqu, il-qofol jitneħħa meta tneħħi l-cursor.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Il-metodu mouseenter() waħħal funzjoni tal-immaniġġjar tal-avvenimenti mal-elementi magħżula li tiġi eżegwita meta l-maws jidħol f'element. L-eżempju li ġej se jżid l-enfasi tal-klassi mal-element <p> meta tpoġġi l-cursor fuqha.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Il-metodu mouseleave() ehmeż funzjoni tal-immaniġġjar tal-avvenimenti ma' oġġetti magħżula li taħdem meta l-maws iħalli oġġett. L-eżempju li ġej se jneħħi l-enfasi tal-klassi mill-element <p> meta tneħħi l-cursor minnha.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Avveniment tat-tastiera jitqajjem meta l-utent jagħfas jew jirrilaxxa ċavetta fuq it-tastiera. Ejja nħarsu lejn xi metodi jQuery użati komunement biex jimmaniġġaw avvenimenti tat-tastiera.
keypress()Il-metodu keypress() tehmeż funzjoni ta 'ġestjoni tal-avvenimenti ma' elementi magħżula (tipikament jiffurmaw kontrolli) li taħdem meta l-browser jirċievi input tat-tastiera mill-utent. L-eżempju li ġej se juri messaġġ meta l-avveniment jiġi attivat keypress u kemm-il darba tiġi attivata meta tagħfas iċ-ċavetta fuq it-tastiera tiegħek.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>L-avveniment tal-pressjoni tat-tasti huwa simili għall-avveniment ta 'keydown, ħlief dak modifikatur u ċwievet mhux stampar bħal Shift, Esc, Backspace jew Delete, arrow keys, eċċ. jisparaw avvenimenti keydown iżda mhux avvenimenti keypress.
keydown()Il-metodu keydown() tehmeż funzjoni ta 'ġestjoni tal-avvenimenti ma' oġġetti magħżula (tipikament jiffurmaw kontrolli) li tiġi eżegwita meta l-utent għall-ewwel jagħfas ċavetta fuq it-tastiera. L-eżempju li ġej se juri messaġġ meta l-avveniment jiġi attivat keydown u kemm-il darba tiġi attivata meta tagħfas iċ-ċavetta fuq it-tastiera tiegħek.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Il-metodu keyup() ehmeż funzjoni ta 'ġestjoni tal-avvenimenti ma' elementi magħżula (tipikament jiffurmaw kontrolli) li tiġi eżegwita meta l-utent jirrilaxxa ċavetta fuq it-tastiera. L-eżempju li ġej se juri messaġġ meta l-avveniment jiġi attivat keyup u kemm-il darba tiġi attivata meta tagħfas u tirrilaxxa ċavetta fuq it-tastiera tiegħek.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Avveniment ta' formola jiġi attivat meta kontroll ta' formola jirċievi jew jitlef il-fokus, jew meta l-utent jibdel valur ta' kontroll ta' formola, bħall-ittajpjar ta' test f'input ta' test, għażla ta' għażla f'kaxxa ta' għażla, eċċ. Hawn huma xi metodi jQuery użati b'mod komuni biex jimmaniġġaw avvenimenti tal-forma.
change()Il-metodu change() ehmeż funzjoni tal-immaniġġjar tal-avvenimenti mal-elementi <input> u jiġi esegwit meta l-valur tiegħu jinbidel. L-eżempju li ġej se juri messaġġ ta’ twissija meta tagħżel għażla fil-kaxxa tal-għażla drop down.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Għal kaxxi tal-ikklikkja, kaxxi ta' kontroll u buttuni tar-radju, l-avveniment jispara immedjatament meta l-utent jagħmel għażla tal-maws, iżda għall-input tat-test u ż-żona tat-test l-avveniment jispara wara li l-element jitlef il-fokus.
focus()Il-metodu focus() tehmeż funzjoni ta' mmaniġġjar tal-avvenimenti ma' elementi magħżula (tipikament tikkontrolla u tifforma rbit) li tesegwixxi meta tingħata attenzjoni. L-eżempju li ġej se juri messaġġ meta l-input tat-test jirċievi fokus.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Il-metodu blur() ehmeż funzjoni event handler biex tifforma elementi bħal <input>, <textarea>, <select> li jiġi esegwit meta jitlef il-fokus. L-eżempju li ġej se juri messaġġ meta l-input tat-test jitlef il-fokus.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Il-metodu submit() ehmeż funzjoni tal-immaniġġjar tal-avvenimenti mal-elementi <form> li jibda meta l-utent jipprova jissottometti formola. L-eżempju li ġej se juri messaġġ ibbażat fuq il-valur imdaħħal meta tipprova tissottometti l-formola.
<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>L-avvenimenti huma wkoll sparati f'sitwazzjoni fejn il-paġna DOM (Document Object Model) hija lesta jew meta l-utent ibiddel id-daqs jew jiskrollja t-tieqa tal-browser, eċċ. Hawn huma xi metodi jQuery użati b'mod komuni biex jimmaniġġaw dan it-tip ta 'avveniment.
ready()Il-metodu ready() jispeċifika funzjoni li għandha tesegwixxi meta d-DOM ikun mgħobbi bis-sħiħ.
L-eżempju li ġej se jissostitwixxi t-test tal-paragrafu hekk kif il-ġerarkija DOM tkun mibnija kompletament u lesta biex tiġi manipulata.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Il-metodu resize() ehmeż funzjoni tal-immaniġġjar tal-avvenimenti mal-element tat-tieqa li jibda meta jinbidel id-daqs tat-tieqa tal-browser.
L-eżempju li ġej se juri l-wisa 'u l-għoli attwali tat-tieqa tal-brawżer meta tipprova tibdel id-daqs billi tkaxkru l-kantunieri tagħha.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Il-metodu scroll() ehmeż funzjoni tal-immaniġġjar tal-avvenimenti mat-tieqa jew mat- iframe u oġġetti li jistgħu jiskrollaw li jimxu kull meta l-pożizzjoni tal-iskrolljar tal-oġġett tinbidel.
L-eżempju li ġej se juri messaġġ meta tiskrollja t-tieqa tal-browser.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Is-settur navali huwa qawwa ekonomika globali vera, li navigat lejn suq ta’ 150 biljun...
It-Tnejn li għadda, il-Financial Times ħabbret ftehim mal-OpenAI. FT tagħti liċenzja għall-ġurnaliżmu ta’ klassi dinjija tagħha...
Miljuni ta 'nies iħallsu għal servizzi ta' streaming, iħallsu miżati ta 'abbonament ta' kull xahar. Hija opinjoni komuni li inti...
Coveware minn Veeam se jkompli jipprovdi servizzi ta' rispons għal inċidenti ta' estorsjoni ċibernetika. Coveware se joffri forensiċi u kapaċitajiet ta' rimedju...