Ƙirƙirar aikace-aikacen tushen Ajax ya zama mai sauƙi da sauri tare da jQuery.
jQuery John Resig ne ya kirkiro shi a farkon 2006. A halin yanzu ana kiyaye aikin jQuery kuma ƙungiyar masu haɓakawa da aka rarraba azaman aikin buɗe ido.
Kuna iya adana lokaci mai yawa da ƙoƙari tare da jQuery. Don haka ƙara wannan rukunin yanar gizon zuwa abubuwan da kuka fi so kuma ku ci gaba da karantawa
Akwai abubuwa da yawa da za ku iya yi tare da jQuery.
Jerin bai ƙare a can ba, akwai wasu abubuwa masu daɗi da yawa da zaku iya yi tare da jQuery.
Akwai fa'idodi da yawa da yasa yakamata mutum yayi amfani da jQuery:
Don farawa, bari mu fara zazzage kwafin jQuery sannan mu saka shi cikin aikinmu. Akwai nau'ikan jQuery guda biyu don saukewa: cikin gaggawa e ba a matsa ba .
Fayil ɗin da ba a haɗa shi ba ya fi dacewa don haɓakawa ko gyarawa; yayin da, an ba da shawarar ƙananan fayil ɗin da aka matsa don samarwa saboda yana adana bandwidth kuma yana inganta aikin saboda ƙananan girman fayil.
Za mu iya sauke jQuery daga nan: https://jquery.com/download/
Da zarar ka sauke fayil ɗin jQuery za ka ga cewa yana da tsawo js, watau fayil ɗin JavaScript ne. A zahiri JQuery ba komai bane illa ɗakin karatu na JavaScript, don haka zaku iya haɗa fayil ɗin jQuery a cikin takaddar HTML tare da kashi. kamar yadda kuka haɗa fayilolin JavaScript na yau da kullun.
<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>Ka tuna koyaushe haɗa fayil ɗin jQuery kafin rubutun al'ada; in ba haka ba, jQuery APIs ba za su kasance ba lokacin da lambar jQuery ɗinku ta yi ƙoƙarin samun dama ga su.
Kamar yadda wataƙila kun lura, mun tsallake sifa a cikin misalin da ya gabata type="text/javascript" cikin tag . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefigama a HTML5 da kuma a duk zamani browser.
A matsayin madadin, zaku iya shigar da jQuery cikin takaddar ku ta hanyoyin haɗin CDN (Cibiyar Isar da abun ciki) kyauta, idan kuna son guje wa sauke fayil ɗin.
CDNs na iya ba da fa'idar aiki ta hanyar rage lokacin ɗaukar nauyi, saboda suna karɓar jQuery akan sabobin da yawa a duniya, kuma lokacin da mai amfani ya buƙaci fayil ɗin, za a yi amfani da shi daga sabar mafi kusa.
Wannan kuma yana da fa'idar cewa idan maziyartan shafin yanar gizonku ya riga ya zazzage kwafin jQuery daga CDN ɗaya yayin ziyartar wasu rukunin yanar gizon, ba za su sake zazzage shi ba tunda yana cikin ma'ajiyar burauzar su.
A wannan yanayin, dole ne ka rubuta:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Baya ga CDN da aikin jquery ya bayar, zaku iya haɗa jQuery ta hanyar Google e Microsoft cdn.
Bayan ganin manufofin ɗakin karatu na jQuery da yadda ake haɗa shi a cikin takaddun ku, yanzu shine lokacin da za a saka jQuery a aikace.
Yanzu bari mu yi aikin jQuery mai sauƙi ta hanyar canza launin rubutun kai daga farkon launidefinished baki zuwa koren launi.
<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>A cikin lambar mun yi aikin jQuery mai sauƙi ta hanyar canza launi na taken watau kashi ta amfani da hanyar zaɓin jQuery element da hanyar css() lokacin da takardar ke shirye, wanda aka sani da taron shirye-shiryen daftarin aiki.
Bayanin jQuery yawanci yana farawa da alamar dala ( $) kuma ya ƙare da semicolon ( ;).
A cikin jQuery, alamar dala ( $) kawai laƙabi ne na jQuery. Yi la'akari da lambar samfurin mai zuwa wanda ke nuna mafi sauƙin bayanin jQuery.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Misalin yana nuna saƙon gargaɗi kawai "Hello I'm a JQuery sign"ga mai amfani. Bari mu ga wasu fasali:
<script>jQuery shine kawai ɗakin karatu na JavaScript, za'a iya sanya lambar jQuery a cikin kashi <script>, ko za ku iya sanya shi a cikin fayil ɗin JavaScript na waje;$(document).ready(handler); an san shi azaman taron shirye-shirye. Ina handler aiki ne da aka wuce zuwa hanyar da za a aiwatar da shi, da zaran an shirya takardar, watau lokacin da aka gina tsarin DOM gaba ɗaya.Hanyar jQuery ready() yawanci ana amfani da shi tare da aikin da ba a san sunansa ba. Don haka, misalin da ke sama kuma za a iya rubuta shi cikin taqaitaccen rubutu kamar haka:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>A cikin aiki zaku iya rubuta maganganun jQuery don aiwatar da kowane aiki da ke bin asali na asali, kamar:
$(selector).action();Ina, $(selector) yana zaɓar abubuwan HTML daga itacen DOM don haka ana iya sarrafa shi kuma action() Aiwatar da wasu ayyuka akan abubuwan da aka zaɓa, kamar canza ƙimar kadarorin CSS, ko saita abun ciki na kashi, da sauransu.
Yanzu bari mu kalli wani misali da ke saita rubutun sakin layi:
<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>Misalin jQuery yana nufin mai zaɓe p, kuma wannan yana zaɓar duk sakin layi, sannan hanyar text() saita abun cikin sakin layi tare da "Hello World!".
Rubutun sakin layi a misalin da ya gabata ana maye gurbinsa ta atomatik lokacin da takaddar ta shirya. Amma bari mu ga yadda za a yi idan kuna son yin wani aiki kafin gudanar da lambar jQuery, don maye gurbin rubutun sakin layi.
Bari mu yi la’akari da misali ɗaya na ƙarshe:
<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>A cikin wannan misalin ana musanya rubutun sakin layi ne kawai lokacin danna abin da ya faru akan maɓallin "Replace Text", wanda ke nufin kawai lokacin da mai amfani ya danna wannan maɓallin.
Kuna iya amfani da mai zaɓin ID don zaɓar abu ɗaya tare da keɓaɓɓen ID akan shafin.
Misali, lambar jQuery mai zuwa zata zaɓa kuma zata haskaka wani abu tare da sifa ta ID id="markid", lokacin da takardar ta shirya.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Ana iya amfani da mai zaɓin aji don zaɓar abubuwa tare da takamaiman aji.
Misali, lambar jQuery mai zuwa zata zaɓa kuma zata haskaka abubuwa tare da sifa ta aji class="markclass", lokacin da takardar ta shirya.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Ana iya amfani da mai zaɓin abu don zaɓar abubuwa ta sunan abu.
Misali, lambar jQuery mai zuwa zata zaɓa kuma zata haskaka dukkan sakin layi, watau abubuwan "<p>" na daftarin aiki lokacin da ya shirya.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Kuna iya amfani da mai zaɓin sifa don zaɓar wani abu dangane da ɗaya daga cikin halayen HTML, kamar sifa ta hanyar haɗin gwiwa. targetko sifa ta shigarwa type, da dai sauransu
Misali, lambar jQuery mai zuwa zata zaɓa kuma zata haskaka duk abubuwan da aka shigar da rubutu, kamar abubuwa "<input>" con type="text", lokacin da takardar ta shirya.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Hakanan zaka iya haɗa masu zaɓin CSS don yin zaɓin naka madaidaici.
Misali, zaku iya haɗa mai zaɓin aji tare da mai zaɓin element don nemo abubuwa a cikin takaddun da ke da wani nau'i da aji.
<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>Baya ga masu zabar definiti, jQuery yana ba da zaɓi na al'ada don ƙara haɓaka damar zaɓar abubuwa akan shafi.
<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>Sau da yawa ana haifar da al'amura ta hanyar hulɗar mai amfani da shafin yanar gizon, kamar lokacin danna hanyar haɗi ko maɓalli, shigar da rubutu a cikin akwatin shigarwa ko wurin rubutu, yin zaɓi a cikin akwatin zaɓi, danna maɓalli akan madannai, matsar da alamar linzamin kwamfuta. , da dai sauransu. A wasu lokuta, burauzar kanta na iya haifar da abubuwan da suka faru, kamar loda shafi da zazzage abubuwan da suka faru.
jQuery yana inganta kan ainihin hanyoyin gudanar da taron ta hanyar ba da hanyoyin aukuwa don mafi yawan abubuwan da suka faru na burauza, wasu daga cikin waɗannan hanyoyin sune ready(), click(), keypress(), focus(), blur(), change(), da dai sauransu
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Gabaɗaya, ana iya rarraba abubuwan da suka faru zuwa manyan ƙungiyoyi huɗu:
Ana haifar da taron linzamin kwamfuta lokacin da mai amfani ya danna abu, ya motsa alamar linzamin kwamfuta, da sauransu.
Anan akwai wasu hanyoyin jQuery da aka saba amfani dasu don tafiyar da al'amuran linzamin kwamfuta.
click()Hanyar click() haɗa aikin mai sarrafa taron zuwa abubuwan da aka zaɓa don taron "click“. Ayyukan haɗin gwiwar yana aiwatarwa lokacin da mai amfani ya danna wannan abu. Misali mai zuwa zai ɓoye abubuwan <p> a shafi idan an danna.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Hanyar dblclick() haɗa aikin mai sarrafa taron zuwa abubuwan da aka zaɓa don taron "dblclick“. Aikin da aka haɗa yana aiwatarwa lokacin da mai amfani ya danna wancan abu sau biyu. Misali mai zuwa zai ɓoye abubuwan <p> lokacin danna su sau biyu.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Hanyar hover() haɗa ayyuka ɗaya ko biyu na mai sarrafa taron zuwa abubuwan da aka zaɓa waɗanda ke aiwatarwa lokacin da mai nunin linzamin kwamfuta ke motsawa ciki da waje daga abubuwa. Aiki na farko yana gudana ne lokacin da mai amfani ya sanya alamar linzamin kwamfuta akan abu, yayin da aiki na biyu ke gudana lokacin da mai amfani ya cire alamar linzamin kwamfuta daga wannan abun.
Misali mai zuwa zai haskaka abubuwa <p> lokacin da ka sanya siginan kwamfuta a kai, za a cire abin haskakawa lokacin da ka cire siginan kwamfuta.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Hanyar mouseenter() haɗa aikin mai kula da taron zuwa abubuwan da aka zaɓa waɗanda ake aiwatarwa lokacin da linzamin kwamfuta ya shiga wani abu. Misali mai zuwa zai ƙara haskaka ajin zuwa kashi <p> lokacin da ka sanya siginar a kai.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Hanyar mouseleave() haɗa aikin mai sarrafa taron zuwa zaɓaɓɓun abubuwa waɗanda ke gudana lokacin da linzamin kwamfuta ya bar abu. Misali mai zuwa zai cire haskaka ajin daga kashi <p> lokacin da ka cire siginan kwamfuta daga gare ta.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Ana ɗaga taron maɓalli lokacin da mai amfani ya danna ko ya saki maɓalli akan madannai. Bari mu kalli wasu hanyoyin jQuery da aka saba amfani da su don gudanar da abubuwan da suka faru a madannai.
keypress()Hanyar keypress() yana haɗa aikin gudanar da taron zuwa abubuwan da aka zaɓa (yawanci nau'ikan sarrafawa) waɗanda ke gudana lokacin da mai lilo ya karɓi shigar da madannai daga mai amfani. Misali mai zuwa zai nuna saƙo lokacin da aka kunna taron keypress da kuma sau nawa ake kunna shi lokacin da kake danna maɓallin da ke kan madannai.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Lamarin latsa maɓalli yayi kama da taron saukar da maɓalli, sai dai mai gyarawa da maɓallan marasa bugawa kamar Shift, Esc, Backspace ko Share, maɓallan kibiya, da sauransu. suna kunna abubuwan da suka faru na maɓalli amma ba abubuwan latsa maɓalli ba.
keydown()Hanyar keydown() yana haɗa aikin sarrafa taron zuwa abubuwan da aka zaɓa (yawanci tsarin sarrafawa) wanda ake aiwatarwa lokacin da mai amfani ya fara danna maɓalli akan madannai. Misali mai zuwa zai nuna saƙo lokacin da aka kunna taron keydown da kuma sau nawa ake kunna shi lokacin da kake danna maɓallin da ke kan madannai.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Hanyar keyup() haɗa aikin sarrafa taron zuwa abubuwan da aka zaɓa (yawanci nau'ikan sarrafawa) waɗanda ake aiwatarwa lokacin da mai amfani ya saki maɓalli akan madannai. Misali mai zuwa zai nuna saƙo lokacin da aka kunna taron keyup da kuma sau nawa ake kunna shi lokacin da ka danna kuma ka saki maɓalli akan madannai naka.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Ana haifar da taron nau'i lokacin da sarrafa nau'i ya karɓi ko rasa hankali, ko lokacin da mai amfani ya canza ƙimar sarrafa nau'i, kamar buga rubutu cikin shigar da rubutu, zaɓi zaɓi a cikin akwatin zaɓi, da sauransu. Anan akwai wasu hanyoyin jQuery da aka saba amfani dasu don gudanar da abubuwan da suka faru.
change()Hanyar change() haɗa aikin mai sarrafa taron zuwa abubuwa <input> kuma ana aiwatar da shi lokacin da darajarsa ta canza. Misali mai zuwa zai nuna saƙon gargaɗi lokacin zabar wani zaɓi a cikin akwatin zaɓi na ƙasa.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Don danna akwatuna, duba akwatuna, da maɓallan rediyo, taron yana buɗewa nan da nan lokacin da mai amfani ya zaɓi zaɓin linzamin kwamfuta, amma don shigar da rubutu da wurin rubutu taron yana ƙonewa bayan kashi ya rasa hankali.
focus()Hanyar focus() yana haɗa aikin mai gudanar da taron zuwa abubuwan da aka zaɓa (yawanci sarrafawa da nau'ikan ɗaure) waɗanda ke aiwatarwa lokacin da aka mai da hankali. Misali mai zuwa zai nuna saƙo lokacin shigar da rubutu ya karɓi hankali.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Hanyar blur() haɗa aikin mai sarrafa taron don samar da abubuwa kamar <input>, <textarea>, <select> wanda ake aiwatarwa lokacin da aka rasa hankali. Misali mai zuwa zai nuna saƙo lokacin da shigar da rubutu ya rasa hankali.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Hanyar submit() haɗa aikin mai sarrafa taron zuwa abubuwa <form> wanda ke gudana lokacin da mai amfani yayi ƙoƙarin ƙaddamar da fom. Misali mai zuwa zai nuna saƙo dangane da ƙimar da aka shigar lokacin ƙoƙarin ƙaddamar da fom ɗin.
<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>Hakanan ana kora abubuwan da suka faru a cikin yanayin da shafin DOM (Model Abun Takardun Takardun) ke shirye ko lokacin da mai amfani ya sake girman ko gungurawa taga mai bincike, da sauransu. Anan akwai wasu hanyoyin jQuery da aka saba amfani dasu don gudanar da irin wannan taron.
ready()Hanyar ready() Yana ƙayyade aiki don aiwatarwa lokacin da DOM ya cika.
Misali mai zuwa zai maye gurbin rubutun sakin layi da zaran an gina babban matsayi kuma a shirye ake sarrafa shi.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Hanyar resize() haɗa aikin mai sarrafa taron zuwa ɓangaren taga wanda ke gudana lokacin da girman taga mai lilo ya canza.
Misalin da ke gaba zai nuna faɗin da tsayin taga na yanzu lokacin da kake ƙoƙarin canza girmansa ta hanyar jan sasanninta.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Hanyar scroll() haɗa aikin mai sarrafa taron zuwa taga ko zuwa ga iframe da abubuwa masu gungurawa waɗanda ke gudana duk lokacin da wurin gungurawa abu ya canza.
Misali mai zuwa zai nuna saƙo lokacin gungurawa taga mai lilo.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Coveware ta Veeam zai ci gaba da ba da sabis na amsa abin da ya faru ta hanyar intanet. Coveware zai ba da damar bincikar bincike da damar gyarawa…
Kulawa da tsinkaya yana kawo sauyi a fannin mai & iskar gas, tare da sabbin hanyoyin kula da tsirrai.…
Hukumar CMA ta Burtaniya ta ba da gargadi game da halayen Big Tech a cikin kasuwar bayanan sirri. Akwai…
Dokar "Green Houses" da Tarayyar Turai ta tsara don inganta ingantaccen makamashi na gine-gine, ta kammala aikinta na majalisar tare da…