Kuunda programu-msingi ya Ajax inakuwa rahisi sana na haraka na jQuery.
jQuery iliundwa awali na John Resig mapema 2006. Mradi wa jQuery kwa sasa unadumishwa na kudumishwa na kikundi kilichosambazwa cha wasanidi programu kama mradi wa chanzo huria.
Unaweza kuokoa muda mwingi na bidii na jQuery. Kwa hivyo ongeza tovuti hii kwa vipendwa vyako na uendelee kusoma
Kuna mambo mengi zaidi unaweza kufanya na jQuery.
Orodha haiishii hapo, kuna mambo mengine mengi mazuri unaweza kufanya na jQuery.
Kuna faida kadhaa kwa nini mtu anapaswa kuchagua kutumia jQuery:
Ili kuanza, hebu kwanza tupakue nakala ya jQuery na kisha tuijumuishe katika mradi wetu. Matoleo mawili ya jQuery yanapatikana kwa kupakuliwa: kwa haraka e haijabanwa .
Faili isiyobanwa inafaa zaidi kwa ukuzaji au utatuzi; wakati, faili iliyopunguzwa na iliyobanwa inapendekezwa kwa uzalishaji kwa sababu huhifadhi kipimo data na kuboresha utendaji kutokana na saizi ndogo ya faili.
Tunaweza kupakua jQuery kutoka hapa: https://jquery.com/download/
Mara tu unapopakua faili ya jQuery unaweza kuona kuwa ina kiendelezi cha js, i.e. ni faili ya JavaScript. Kwa kweli JQuery sio chochote ila maktaba ya JavaScript, kwa hivyo unaweza kujumuisha faili ya jQuery kwenye hati ya HTML na kitu hicho. kama vile unavyojumuisha faili za kawaida za 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>
Kumbuka kila wakati kujumuisha faili ya jQuery kabla ya hati maalum; vinginevyo, API za jQuery hazitapatikana wakati msimbo wako wa jQuery unapojaribu kuzifikia.
Kama unaweza kuwa umeona, tuliruka sifa katika mfano uliopita type="text/javascript"
ndani ya lebo . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiimekamilika katika HTML5 na katika vivinjari vyote vya kisasa.
Kama mbadala, unaweza kupachika jQuery kwenye hati yako kupitia viungo vya CDN (Content Delivery Network) vinavyopatikana bila malipo, ikiwa ungependa kuepuka kupakua faili.
CDN zinaweza kutoa faida ya utendakazi kwa kupunguza muda wa kupakia, kwa sababu zinapangisha jQuery kwenye seva nyingi duniani kote, na mtumiaji anapoomba faili, itatolewa kutoka kwa seva iliyo karibu zaidi.
Hii pia ina faida kwamba ikiwa mgeni wa ukurasa wako wa wavuti tayari amepakua nakala ya jQuery kutoka CDN sawa wakati akitembelea tovuti zingine, hatalazimika kuipakua tena kwa kuwa tayari iko kwenye kache ya kivinjari chake.
Katika kesi hii, itabidi uandike:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>
Kwa kuongeza CDN iliyotolewa na mradi wa jQuery, unaweza kujumuisha jQuery kupitia google e microsoft cdn.
Baada ya kuona malengo ya maktaba ya jQuery na jinsi ya kuijumuisha kwenye hati yako, sasa ni wakati wa kutekeleza jQuery.
Sasa hebu tufanye operesheni rahisi ya jQuery kwa kubadilisha rangi ya maandishi ya kichwa kutoka kwa rangi ya awalidefirangi nyeusi hadi kijani kibichi.
<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>
Katika msimbo tulifanya operesheni rahisi ya jQuery kwa kubadilisha rangi ya kichwa yaani kipengele kwa kutumia kichaguzi cha kipengee cha jQuery na mbinu ya css() wakati hati iko tayari, inayojulikana kama tukio tayari la hati.
Taarifa ya jQuery kawaida huanza na ishara ya dola ( $
) na kuishia na nusu koloni ( ;
).
Katika jQuery, ishara ya dola ( $
) ni lakabu tu la jQuery. Fikiria nambari ifuatayo ya sampuli inayoonyesha taarifa rahisi zaidi ya jQuery.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>
Mfano unaonyesha tu ujumbe wa onyo "Hello I'm a JQuery sign
” kwa mtumiaji. Hebu tuone baadhi ya vipengele:
<script>
: jQuery ni maktaba ya JavaScript tu, nambari ya jQuery inaweza kuwekwa ndani ya kipengee <script>
, au unaweza kuiweka kwenye faili ya JavaScript ya nje;$(document).ready(handler)
; inajulikana kama tukio tayari. Iko wapi handler
ni kazi ambayo inapitishwa kwa njia ya kutekelezwa, mara tu hati iko tayari, yaani wakati uongozi wa DOM umejengwa kabisa.Mbinu ya jQuery ready()
kawaida hutumiwa na kazi isiyojulikana. Kwa hivyo, mfano hapo juu unaweza pia kuandikwa kwa nukuu fupi kama hii:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>
Ndani ya kitendakazi unaweza kuandika taarifa za jQuery kufanya kitendo chochote kufuatia syntax ya msingi, kama:
$(selector).action();
Iko wapi, $(selector)
kimsingi huchagua vipengee vya HTML kutoka kwa mti wa DOM ili iweze kudanganywa na action()
tumia baadhi ya vitendo kwenye vipengele vilivyochaguliwa, kama vile kubadilisha thamani ya kipengele cha CSS, au kuweka maudhui ya kipengele, n.k.
Sasa hebu tuangalie mfano mwingine unaoweka maandishi ya aya:
<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>
Mfano wa jQuery unarejelea kichaguzi p, na hii huchagua aya zote, kisha njia text()
weka maandishi ya aya na "Hello World!
".
Maandishi ya aya katika mfano uliopita yanabadilishwa kiotomati wakati hati iko tayari. Lakini wacha tuone jinsi ya kuifanya ikiwa unataka kufanya kitendo kabla ya kuendesha nambari ya jQuery, kuchukua nafasi ya maandishi ya aya.
Hebu tuchunguze mfano mmoja wa mwisho:
<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>
Katika mfano huu maandishi ya aya yanabadilishwa tu wakati tukio la kubofya linatokea kwenye kitufe "Replace Text
", ambayo inamaanisha wakati mtumiaji anabofya kitufe hiki.
Unaweza kutumia kiteuzi cha kitambulisho ili kuchagua kipengee kimoja kilicho na kitambulisho cha kipekee kwenye ukurasa.
Kwa mfano, nambari ifuatayo ya jQuery itachagua na kuangazia kipengele chenye sifa ya kitambulisho id="markid"
, wakati hati iko tayari.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>
Kiteuzi cha darasa kinaweza kutumika kuchagua vipengee vilivyo na darasa maalum.
Kwa mfano, nambari ifuatayo ya jQuery itachagua na kuangazia vipengee vilivyo na sifa ya darasa class="markclass"
, wakati hati iko tayari.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>
Kiteuzi cha bidhaa kinaweza kutumika kuchagua vipengee kwa jina la kipengee.
Kwa mfano, nambari ifuatayo ya jQuery itachagua na kuangazia aya yote, i.e. vipengee "<p>"
wa hati wakati iko tayari.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>
Unaweza kutumia kiteuzi cha sifa kuchagua kipengele kulingana na mojawapo ya sifa zake za HTML, kama vile sifa ya kiungo. target
au sifa ya ingizo type
, na kadhalika.
Kwa mfano, nambari ifuatayo ya jQuery itachagua na kuangazia viingizo vyote vya maandishi, kama vile vipengele "<input>"
na type="text"
, wakati hati iko tayari.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>
Unaweza pia kuchanganya viteuzi vya CSS ili kufanya uteuzi wako kuwa sahihi zaidi.
Kwa mfano, unaweza kuchanganya kiteuzi cha darasa na kiteuzi cha kipengele ili kupata vipengele katika hati ambayo ina aina na darasa fulani.
<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>
Mbali na wateule definiti, jQuery hutoa kichaguzi chake maalum ili kuongeza zaidi uwezo wa kuchagua vipengee kwenye ukurasa.
<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>
Matukio mara nyingi huchochewa na mwingiliano wa mtumiaji na ukurasa wa wavuti, kama vile unapobofya kiungo au kitufe, kuingiza maandishi kwenye kisanduku cha ingizo au eneo la maandishi, kufanya uteuzi katika kisanduku cha uteuzi, bonyeza kitufe kwenye kibodi, sogeza pointer ya kipanya. , na kadhalika. Katika baadhi ya matukio, kivinjari chenyewe kinaweza kusababisha matukio, kama vile upakiaji wa ukurasa na matukio ya kupakua.
jQuery inaboresha mifumo ya msingi ya kushughulikia tukio kwa kutoa mbinu za tukio kwa matukio mengi ya asili ya kivinjari, baadhi ya njia hizi ni ready()
, click()
, keypress()
, focus()
, blur()
, change()
, na kadhalika.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>
Kwa ujumla, matukio yanaweza kugawanywa katika vikundi vinne kuu:
Tukio la kipanya huanzishwa mtumiaji anapobofya kipengee, anasogeza kiashiria cha kipanya, n.k.
Hapa kuna njia za kawaida za jQuery kushughulikia matukio ya panya.
click(
)Njia click()
ambatisha kitendaji cha kushughulikia tukio kwa vipengee vilivyochaguliwa kwa tukio "click
“. Chaguo za kukokotoa zilizounganishwa hutekeleza mtumiaji anapobofya kipengee hicho. Mfano unaofuata utaficha vipengele <p>
kwenye ukurasa unapobofya.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>
dblclick()
Njia dblclick()
ambatisha kitendaji cha kushughulikia tukio kwa vipengee vilivyochaguliwa kwa tukio "dblclick
“. Chaguo za kukokotoa zilizounganishwa hutekeleza mtumiaji anapobofya mara mbili kipengee hicho. Mfano unaofuata utaficha vipengele <p>
unapozibofya mara mbili.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>
hover()
Njia hover()
ambatisha kidhibiti cha tukio kimoja au viwili kwa vipengee vilivyochaguliwa ambavyo hutekeleza wakati kielekezi cha kipanya kinapoingia na kutoka kwenye vipengele. Chaguo za kukokotoa za kwanza hutumika mtumiaji anapoweka kielekezi cha kipanya juu ya kipengee, huku chaguo la kukokotoa la pili likifanya kazi wakati mtumiaji anaondoa kielekezi cha kipanya kwenye kipengee hicho.
Mfano ufuatao utaangazia vitu <p>
unapoweka mshale juu yake, mwangaza utaondolewa unapoondoa mshale.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>
mouseenter()
Njia mouseenter()
ambatisha kitendaji cha tukio kwa vipengele vilivyochaguliwa ambavyo hutekelezwa wakati kipanya kinapoingia kwenye kipengele. Mfano ufuatao utaongeza kuangazia darasa kwenye kipengele <p>
unapoweka mshale juu yake.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>
mouseleave()
Njia mouseleave()
ambatisha kitendaji cha tukio kwa vipengee vilivyochaguliwa ambavyo hutumika wakati kipanya kinaacha kipengee. Mfano ufuatao utaondoa kiangazio cha darasa kutoka kwa kipengee <p>
unapoondoa mshale kutoka kwake.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>
Tukio la kibodi huonyeshwa mtumiaji anapobonyeza au kutoa kitufe kwenye kibodi. Wacha tuangalie baadhi ya njia zinazotumika za jQuery kushughulikia matukio ya kibodi.
keypress()
Njia keypress()
huambatisha kitendakazi cha kushughulikia tukio kwa vipengee vilivyochaguliwa (kwa kawaida vidhibiti vya fomu) ambavyo hutumika wakati kivinjari kinapokea ingizo la kibodi kutoka kwa mtumiaji. Mfano ufuatao utaonyesha ujumbe tukio linapoanzishwa keypress
na ni mara ngapi inaanzishwa unapobonyeza kitufe kwenye kibodi yako.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
Tukio la kubonyeza vitufe ni sawa na tukio la vitufe, isipokuwa vibonye vya kurekebisha na visivyochapisha kama vile Shift, Esc, Backspace au Delete, vitufe vya vishale, n.k. wanawasha matukio ya vitufe lakini sio matukio ya kubonyeza kitufe.
keydown()
Njia keydown()
huambatisha kitendakazi cha kushughulikia tukio kwa vipengee vilivyochaguliwa (kwa kawaida vidhibiti vya fomu) ambavyo hutekelezwa mtumiaji anapobonyeza kitufe cha kwanza kwenye kibodi. Mfano ufuatao utaonyesha ujumbe tukio linapoanzishwa keydown
na ni mara ngapi inaanzishwa unapobonyeza kitufe kwenye kibodi yako.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
keyup()
Njia keyup()
ambatisha kitendakazi cha kushughulikia tukio kwa vipengele vilivyochaguliwa (kwa kawaida vidhibiti vya fomu) ambavyo hutekelezwa mtumiaji anapotoa ufunguo kwenye kibodi. Mfano ufuatao utaonyesha ujumbe tukio linapoanzishwa keyup
na ni mara ngapi huwashwa unapobonyeza na kutoa kitufe kwenye kibodi yako.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
Tukio la fomu huanzishwa wakati kidhibiti cha fomu kinapokea au kupoteza mwelekeo, au mtumiaji anapobadilisha thamani ya udhibiti wa fomu, kama vile kuandika maandishi kwenye ingizo la maandishi, kuchagua chaguo katika kisanduku teule, n.k. Hapa kuna njia za kawaida za jQuery kushughulikia hafla za fomu.
change()
Njia change()
ambatisha kitendaji cha tukio kwa vipengele <input>
na inatekelezwa wakati thamani yake inabadilika. Mfano ufuatao utaonyesha ujumbe wa onyo wakati wa kuchagua chaguo katika kisanduku cha uteuzi kunjuzi.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>
Kwa visanduku vya kubofya, visanduku vya kuteua, na vitufe vya redio, tukio huwaka mara moja mtumiaji anapofanya uteuzi wa kipanya, lakini kwa uingizaji maandishi na eneo la maandishi tukio huwaka baada ya kipengele kupoteza mwelekeo.
focus()
Njia focus()
huambatisha kitendaji cha tukio kwa vipengee vilivyochaguliwa (kawaida hudhibiti na kuunda vifungo) ambavyo hutekeleza linapozingatiwa. Mfano ufuatao utaonyesha ujumbe wakati ingizo la maandishi linapokea umakini.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>
blur()
Njia blur()
ambatisha kitendaji cha tukio ili kuunda vipengele kama vile <input>
, <textarea>
, <select>
ambayo inatekelezwa wakati inapoteza mwelekeo. Mfano ufuatao utaonyesha ujumbe wakati ingizo la maandishi linapoteza mwelekeo.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>
submit()
Njia submit()
ambatisha kitendaji cha tukio kwa vipengele <form>
ambayo hutumika mtumiaji anapojaribu kuwasilisha fomu. Mfano ufuatao utaonyesha ujumbe kulingana na thamani iliyowekwa wakati wa kujaribu kuwasilisha fomu.
<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>
Matukio pia yanafukuzwa katika hali ambapo ukurasa wa DOM (Mfano wa Kitu cha Hati) uko tayari au wakati mtumiaji anabadilisha ukubwa au kusonga dirisha la kivinjari, nk. Hapa kuna njia za kawaida za jQuery kushughulikia aina hii ya tukio.
ready()
Njia ready()
inabainisha chaguo la kukokotoa la kutekeleza wakati DOM imepakiwa kikamilifu.
Mfano ufuatao utachukua nafasi ya maandishi ya aya punde tu uongozi wa DOM utakapoundwa kikamilifu na uko tayari kubadilishwa.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
resize()
Njia resize()
ambatisha kitendaji cha tukio kwenye kipengee cha dirisha kinachofanya kazi wakati saizi ya dirisha la kivinjari inabadilika.
Mfano ufuatao utaonyesha upana na urefu wa sasa wa dirisha la kivinjari unapojaribu kubadilisha ukubwa kwa kuburuta pembe zake.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>
scroll()
Njia scroll()
ambatisha kitendaji cha tukio kwenye dirisha au kwa iframe
na vipengee vinavyoweza kusongeshwa ambavyo hutumika wakati wowote nafasi ya kusogeza ya kitu inapobadilika.
Mfano ufuatao utaonyesha ujumbe wakati wa kusogeza dirisha la kivinjari.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>
Ercole Palmeri
.
Operesheni ya ophthalmoplasty kwa kutumia kitazamaji cha kibiashara cha Apple Vision Pro ilifanywa katika Catania Polyclinic…
Kukuza ujuzi mzuri wa magari kupitia kupaka rangi huwatayarisha watoto kwa ujuzi changamano zaidi kama vile kuandika. Kupaka rangi...
Sekta ya majini ni nguvu ya kweli ya kiuchumi duniani, ambayo imepitia kwenye soko la bilioni 150 ...
Jumatatu iliyopita, Financial Times ilitangaza makubaliano na OpenAI. FT inatoa leseni kwa uandishi wake wa habari wa kiwango cha kimataifa…