makala

JQuery, ni nini na tunaweza kufanya nini na maktaba ya JavaScript

jQuery ni maktaba ya JavaScript ya haraka, nyepesi na yenye vipengele vingi kulingana na kanuni "andika kidogo, fanya zaidi" . API za JQuery hurahisisha usimamizi na utunzaji wa hati za HTML, usimamizi wa hafla, na kuongeza athari za uhuishaji kwenye ukurasa wa wavuti. Inaoana na vivinjari vyote vikuu kama vile Chrome, Firefox, Safari, Edge.

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

Unachoweza kufanya na jQuery

Kuna mambo mengi zaidi unaweza kufanya na jQuery.

  • Unaweza kuchagua vipengele vya ukurasa wa HTML kwa urahisi, kusoma au kurekebisha sifa;
  • Unaweza kuunda madoido kwa urahisi kama onyesho au kuficha vipengee, mipito, tafrija na kadhalika;
  • Unaweza kuunda uhuishaji changamano wa CSS kwa urahisi na mistari michache ya msimbo;
  • Unaweza kuendesha kwa urahisi vipengele vya DOM na sifa zao;
  • Unaweza kutekeleza kwa urahisi Ajax ili kuwezesha ubadilishanaji wa data usiolingana kati ya mteja na seva;
  • Unaweza kuvuka mti wote wa DOM kwa urahisi kupata kitu chochote;
  • Unaweza kufanya vitendo vingi kwa urahisi kwenye kipengele na mstari mmoja wa kanuni;
  • Unaweza kupata au kuweka ukubwa wa vipengele vya HTML kwa urahisi.

Orodha haiishii hapo, kuna mambo mengine mengi mazuri unaweza kufanya na jQuery.

Faida za kutumia jQuery

Kuna faida kadhaa kwa nini mtu anapaswa kuchagua kutumia jQuery:

  • Okoa muda mwingi: Unaweza kuokoa muda na juhudi nyingi kwa kutumia athari na viteuzi vilivyojengewa ndani vya jQuery na kuzingatia vipengele vingine vya maendeleo;
  • Rahisisha kazi za kawaida za JavaScript - jQuery hurahisisha sana kazi za kawaida za JavaScript. Sasa unaweza kuunda kurasa za wavuti zenye vipengele vingi na shirikishi kwa urahisi, na mistari michache ya msimbo. Mfano wa kawaida ni utekelezaji wa Ajax ili kuonyesha upya maudhui ya ukurasa, bila kuirejesha;
  • Urahisi: jQuery ni rahisi sana kutumia. Mtu yeyote aliye na ujuzi wa kimsingi wa kufanya kazi wa HTML, CSS, na JavaScript anaweza kuanza kuendeleza kwa kutumia jQuery;
  • Inatumika na vivinjari vyote: jQuery iliundwa kwa kuzingatia vivinjari vya kisasa na inaendana na vivinjari vyote vikuu vya kisasa kama vile Chrome, Firefox, Safari, Edge;
  • Bure Kabisa - Na sehemu bora ni kwamba ni bure kabisa kupakua na kutumia.

upakuaji wa 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.

jQuery kutoka CDN

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.

Ukurasa wa kwanza wa wavuti kulingana na jQuery

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. 

syntax ya jQuery

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:

  • kipengele <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;
  • Mstari $(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>

Wateuzi

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.

Kuchagua vipengee kwa kitambulisho

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>
Kuchagua vipengele vilivyo na jina la darasa

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>
Kuchagua vitu kwa majina

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.

Jarida la uvumbuzi
Usikose habari muhimu zaidi kuhusu uvumbuzi. Jisajili ili kuzipokea kwa barua pepe.
<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $("p").css("background", "grey");
});
</script>
Uteuzi wa vipengele kwa sifa

Unaweza kutumia kiteuzi cha sifa kuchagua kipengele kulingana na mojawapo ya sifa zake za HTML, kama vile sifa ya kiungo. targetau 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>
Uteuzi wa kipengele kupitia kiteuzi kiwanja cha CSS

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>
Kiteuzi Maalum cha jQuery

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

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: 

  • matukio ya panya,
  • matukio ya kibodi,
  • moduli ya matukio ed
  • hati/matukio ya dirisha. 

Matukio ya panya

Tukio la kipanya huanzishwa mtumiaji anapobofya kipengee, anasogeza kiashiria cha kipanya, n.k.

Hapa kuna njia za kawaida za jQuery kushughulikia matukio ya panya.

Mbinu 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>
Mbinu 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>
Mbinu 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>
Mbinu 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>
Mbinu 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>

Matukio ya kibodi

Tukio la kibodi huonyeshwa mtumiaji anapobonyeza au kutoa kitufe kwenye kibodi. Wacha tuangalie baadhi ya njia zinazotumika za jQuery kushughulikia matukio ya kibodi.

Mbinu 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.

Mbinu 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>
Mbinu 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>

Matukio ya fomu

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.

Mbinu 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.

Mbinu 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>
Mbinu 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>
Mbinu 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 ya Hati/Dirisha

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.

Mbinu 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>
Mbinu 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>
Mbinu 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

.

Jarida la uvumbuzi
Usikose habari muhimu zaidi kuhusu uvumbuzi. Jisajili ili kuzipokea kwa barua pepe.

Makala ya hivi karibuni

Smart Lock Market: ripoti ya utafiti wa soko iliyochapishwa

Neno Smart Lock Market linamaanisha tasnia na mfumo ikolojia unaozunguka uzalishaji, usambazaji na matumizi…

Machi 27 2024

Je, ni mifumo ya kubuni: kwa nini matumizi yao, uainishaji, faida na hasara

Katika uhandisi wa programu, muundo wa muundo ni suluhisho bora kwa shida zinazotokea kwa kawaida katika muundo wa programu. mimi ni kama...

Machi 26 2024

Mageuzi ya kiteknolojia ya kuashiria viwanda

Uwekaji alama wa viwandani ni neno pana ambalo linajumuisha mbinu kadhaa zinazotumiwa kuunda alama za kudumu kwenye uso wa…

Machi 25 2024

Mifano ya Excel Macros iliyoandikwa na VBA

Mifano ifuatayo rahisi ya jumla ya Excel iliandikwa kwa kutumia Muda uliokadiriwa wa VBA: dakika 3 Mfano...

Machi 25 2024