Articles

JQuery, he aha ia a me ka mea hiki iā mākou ke hana me ka waihona JavaScript

ʻO ka jQuery kahi waihona JavaScript wikiwiki, māmā a waiwai nui ma muli o ke kumu “Kākau emi, hana hou aku” . ʻO nā JQuery API ka mea maʻalahi i ka hoʻokele a me ka mālama ʻana i nā palapala HTML, ka hoʻokele hanana, ka hoʻohui ʻana i nā hopena animation i kahi ʻaoʻao pūnaewele.

E maʻalahi a wikiwiki ka hana ʻana i kahi noi Ajax me ka jQuery.

Ua hoʻokumu mua ʻia ʻo jQuery e John Resig i ka hoʻomaka ʻana o 2006. Ke mālama ʻia nei ka papahana jQuery a mālama ʻia e kahi pūʻulu o nā mea hoʻomohala ma ke ʻano he papahana open source.

Hiki iā ʻoe ke mālama i ka manawa a me ka hoʻoikaika ʻana me jQuery. No laila e hoʻohui i kēia pūnaewele i kāu mau punahele a hoʻomau i ka heluhelu

He aha kāu e hana ai me jQuery

Nui nā mea e hiki iā ʻoe ke hana me jQuery.

  • Hiki iā ʻoe ke koho maʻalahi i nā mea ʻaoʻao HTML, e heluhelu a hoʻololi i nā ʻano;
  • Hiki iā ʻoe ke hana maʻalahi i nā hopena e like me ka hōʻike a hūnā i nā mea, nā hoʻololi, nā ʻōwili a pēlā aku;
  • Hiki iā ʻoe ke hana maʻalahi i nā animation CSS paʻakikī me nā laina liʻiliʻi o ke code;
  • Hiki iā ʻoe ke hana maʻalahi i nā mea DOM a me ko lākou mau ʻano;
  • Hiki iā ʻoe ke hoʻokō maʻalahi iā Ajax e hiki ai ke hoʻololi i ka ʻikepili asynchronous ma waena o ka mea kūʻai aku a me ke kikowaena;
  • Hiki iā ʻoe ke hele maʻalahi i ka lāʻau DOM a pau e ʻimi i kekahi mea;
  • Hiki iā ʻoe ke hana maʻalahi i nā hana he nui ma kahi mea me kahi laina code;
  • Hiki iā ʻoe ke loaʻa a hoʻonohonoho paha i ka nui o nā mea HTML.

ʻAʻole pau ka papa inoa ma laila, nui nā mea maikaʻi ʻē aʻe āu e hana ai me jQuery.

Nā pōmaikaʻi o ka hoʻohana ʻana i ka jQuery

Nui nā pono no ke aha e koho ai kekahi no ka hoʻohana ʻana i ka jQuery:

  • E mālama i ka manawa nui: Hiki iā ʻoe ke mālama i ka manawa a me ka hoʻoikaika ʻana ma o ka hoʻohana ʻana i nā hopena i kūkulu ʻia a me nā mea koho o jQuery a nānā i nā ʻano ʻē aʻe o ka hoʻomohala ʻana;
  • E hoʻomaʻamaʻa i nā hana JavaScript maʻamau - hoʻomaʻamaʻa loa ʻo jQuery i nā hana JavaScript maʻamau. I kēia manawa hiki iā ʻoe ke hana maʻalahi i nā ʻaoʻao pūnaewele waiwai nui a pili pū me ka liʻiliʻi o nā laina code. ʻO ka laʻana maʻamau ka hoʻokō ʻana o Ajax e hōʻoluʻolu i ka ʻike o kahi ʻaoʻao, me ka ʻole o ka hōʻoluʻolu;
  • Maʻalahi: He maʻalahi loa ka hoʻohana ʻana i ka jQuery. Hiki i ka mea me ka ʻike hana maʻamau o HTML, CSS, a me JavaScript ke hoʻomaka e hoʻomohala me ka jQuery;
  • Hiki i nā polokalamu kele pūnaewele a pau: Ua hana ʻia ʻo jQuery me nā polokalamu kele pūnaewele hou i ka noʻonoʻo a ua kūpono me nā polokalamu kele pūnaewele nui āpau e like me Chrome, Firefox, Safari, Edge;
  • ʻAʻole manuahi - A ʻo ka hapa maikaʻi loa ʻo ia ka manuahi e hoʻoiho a hoʻohana.

jQuery download

No ka hoʻomaka ʻana, e hoʻoiho mua i kahi kope o jQuery a laila hoʻokomo i loko o kā mākou papahana. Loaʻa nā mana ʻelua o jQuery no ka hoʻoiho: ʻāwīwī e ʻaʻole i hoʻopili ʻia .

ʻOi aku ka maikaʻi o ka faila uncompressed no ka hoʻomohala ʻana a i ʻole ka debugging; ʻoiai, ua ʻōlelo ʻia ka faila liʻiliʻi a paʻi ʻia no ka hana ʻana no ka mea e mālama ana i ka bandwidth a hoʻomaikaʻi i ka hana ma muli o ka liʻiliʻi o ka faila.

Hiki iā mākou ke hoʻoiho i ka jQuery mai ʻaneʻi: https://jquery.com/download/

Ke hoʻoiho ʻoe i ka faila jQuery hiki iā ʻoe ke ʻike he hoʻonui js kona, ʻo ia hoʻi he faila JavaScript. ʻOiaʻiʻo, ʻo JQuery kahi waihona JavaScript wale nō, no laila hiki iā ʻoe ke hoʻokomo i ka faila jQuery i ka palapala HTML me ka mea. e like me kāu hoʻokomo ʻana i nā faila JavaScript maʻamau.

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

E hoʻomanaʻo e hoʻokomo mau i ka faila jQuery ma mua o nā palapala maʻamau; a i ʻole, ʻaʻole e loaʻa nā API jQuery ke hoʻāʻo kāu code jQuery e komo iā lākou.

E like me kāu i ʻike ai, ua hoʻokuʻu mākou i ke ʻano ma ka laʻana mua type="text/javascript" i loko o ka hōʻailona . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefipau i ka HTML5 a me nā polokalamu kele pūnaewele hou.

jQuery mai CDN

Ma kahi ʻokoʻa, hiki iā ʻoe ke hoʻokomo i ka jQuery i kāu palapala ma o nā loulou CDN (Content Delivery Network) i loaʻa manuahi, inā makemake ʻoe e pale i ka hoʻoiho ʻana i ka faila.

Hiki i nā CDN ke hāʻawi i ka pono hana ma ka hoʻemi ʻana i ka manawa hoʻouka, no ka mea, hoʻokipa lākou i ka jQuery ma nā kikowaena lehulehu a puni ka honua, a i ka wā e noi ai ka mea hoʻohana i ka faila, e lawelawe ʻia ia mai ke kikowaena kokoke loa.

Loaʻa iā ia ka pōmaikaʻi inā ua hoʻoiho mua kāu mea kipa ʻaoʻao i kahi kope o jQuery mai ka CDN hoʻokahi i ka wā e kipa ana i nā pūnaewele ʻē aʻe, ʻaʻole pono lākou e hoʻoiho hou iā ia no ka mea aia ia i loko o kā lākou polokalamu kele pūnaewele.

I kēia hihia, pono ʻoe e kākau:

<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>

Ma waho aʻe o ka CDN i hāʻawi ʻia e ka papahana jquery, hiki iā ʻoe ke hoʻokomo i ka jQuery ma o Google e Microsoft cdn.

ʻO ka ʻaoʻao pūnaewele mua e pili ana i ka jQuery

I ka ʻike ʻana i nā pahuhopu o ka waihona jQuery a pehea e hoʻokomo ai i loko o kāu palapala, ʻo ka manawa kēia e hoʻokō ai i ka jQuery.

I kēia manawa e hana mākou i kahi hana jQuery maʻalahi ma ka hoʻololi ʻana i ke kala kikokikona poʻo mai ke kala muadefiʻeleʻele a ʻōmaʻomaʻo.

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

Ma ke code ua hana mākou i kahi hana jQuery maʻalahi ma ka hoʻololi ʻana i ke kala o ke poʻo ʻo ia ka mea me ka hoʻohana ʻana i ka mea koho o ka jQuery a me css() ala ke mākaukau ka palapala, ʻike ʻia ʻo ka hanana palapala mākaukau. 

jQuery syntax

Hoʻomaka ka ʻōlelo jQuery me kahi hōʻailona kālā ( $) a pau me ke kiko kiko ( ;).

Ma jQuery, ka hōʻailona kālā ( $) he inoa inoa wale nō ia no jQuery. E noʻonoʻo i ke code laʻana e hōʻike ana i ka ʻōlelo jQuery maʻalahi.

<script>
    $(document).ready(function(){

        alert("Hello I'm a JQuery sign");
    });
</script>

Hōʻike wale ka laʻana i kahi leka hoʻomaopopo "Hello I'm a JQuery sign” i ka mea hoʻohana. E ʻike kākou i kekahi mau hiʻohiʻona:

  • ʻO ka mea <script>: He waihona JavaScript wale nō ʻo jQuery, hiki ke hoʻokomo ʻia ke code jQuery i loko o ka mea <script>, a i ʻole hiki iā ʻoe ke waiho i loko o kahi faila JavaScript waho;
  • ʻO ka laina $(document).ready(handler); ʻike ʻia he hanana mākaukau. Ma hea ia handler he hana ia i hāʻawi ʻia i ke ʻano e hoʻokō ʻia, i ka wā i mākaukau ai ka palapala, ʻo ia hoʻi, i ka wā i kūkulu ʻia ai ka hierarchy DOM.

ʻO ke ala jQuery ready() hoʻohana mau ʻia me kahi hana inoa ʻole. No laila, hiki ke kākau ʻia ka laʻana i luna ma ka notation pōkole e like me kēia:

<script>
    $(function(){
        alert("Hello I'm a JQuery sign");
    });
</script>

Nā mea koho

I loko o kahi hana hiki iā ʻoe ke kākau i nā ʻōlelo jQuery e hana i kekahi hana ma hope o ka syntax kumu, e like me:

$(selector).action();

Ma hea ia, $(selector) koho ia i nā mea HTML mai ka lāʻau DOM i hiki ke hoʻohana ʻia action() e hoʻopili i kekahi mau hana ma nā mea i koho ʻia, e like me ka hoʻololi ʻana i ka waiwai o ka waiwai CSS, a i ʻole ka hoʻonohonoho ʻana i ka ʻike o ka mea, etc.

I kēia manawa, e nānā kākou i kekahi laʻana e hoʻonohonoho ana i ka paukū paukū:

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

ʻO ka laʻana jQuery e pili ana i ka mea koho p, a koho kēia i nā pauku a pau, a laila ke ʻano text() hoʻonohonoho i ka ʻike kikokikona o ka paukū me ka "Hello World!".

Hoʻololi ʻakomi ʻia ka paukū kikokikona ma ka laʻana mua ke mākaukau ka palapala. Akā, e ʻike kākou pehea e hana ai inā makemake ʻoe e hana i kahi hana ma mua o ka holo ʻana i ke code jQuery, e pani i ka kikokikona o ka paukū. 

E noʻonoʻo kākou i kekahi laʻana hope loa:


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

Ma kēia hiʻohiʻona, hoʻololi wale ʻia ka paukū paukū i ka wā i loaʻa ai kahi hanana kaomi ma ke pihi "Replace Text", ʻo ia hoʻi ke kaomi ʻana o kahi mea hoʻohana i kēia pihi.

Ke koho ʻana i nā mea ma ka ID

Hiki iā ʻoe ke hoʻohana i ka mea koho ID e koho i hoʻokahi mea me ka ID kūʻokoʻa ma ka ʻaoʻao.

No ka laʻana, e koho a hōʻailona ka helu jQuery e pili ana i kahi mea me ka ʻano ID id="markid", ke mākaukau ka palapala.

<script>
$(document).ready(function(){
    // Highlight element with id markid
    $("#markid").css("background", "grey");
});
</script>
Ke koho ʻana i nā mea me ka inoa papa

Hiki ke hoʻohana ʻia ka mea koho papa e koho i nā mea me kahi papa kikoʻī.

No ka laʻana, e koho ka code jQuery aʻe a hōʻike i nā mea me ka ʻano papa class="markclass", ke mākaukau ka palapala.

<script>
$(document).ready(function(){
    // Highlight elements with class markclass
    $(".markclass").css("background", "grey");
});
</script>
Ke koho ʻana i nā mea ma ka inoa

Hiki ke hoʻohana ʻia ka mea koho e koho i nā mea ma ka inoa o ka mea.

No ka laʻana, e koho a hōʻike i ke code jQuery ma hope aʻe i ka paukū āpau, ʻo ia hoʻi nā mea "<p>" o ka palapala ke makaukau.

Nupepa hou
Mai poina i ka nūhou nui loa e pili ana i ka hana hou. E kākau inoa e loaʻa iā lākou ma ka leka uila.
<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $("p").css("background", "grey");
});
</script>
Ke koho ʻana i nā mea ma muli o ke ʻano

Hiki iā ʻoe ke hoʻohana i ka mea koho e koho i kahi mea e pili ana i kekahi o kāna mau ʻano HTML, e like me kahi ʻano loulou targeta i ʻole ke ʻano o kahi hoʻokomo type, etc.

No ka laʻana, e koho a hōʻike i ke code jQuery ma lalo nei i nā mea hoʻokomo kikokikona, e like me nā mea "<input>" Me type="text", ke mākaukau ka palapala.

<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $('input[type="text"]').css("background", "grey");
});
</script>
Koho ʻeleʻele ma o ka mea koho CSS hui

Hiki iā ʻoe ke hoʻohui i nā mea koho CSS e hana pololei i kāu koho.

No ka laʻana, hiki iā ʻoe ke hoʻohui i ka mea koho papa me kahi mea koho e ʻimi i nā mea i loko o kahi palapala i loaʻa kekahi ʻano a me kahi papa.

<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>
jQuery mea koho ma'amau

Ma waho aʻe o nā mea koho defiEia naʻe, hāʻawi ʻo jQuery i kāna mea koho maʻamau e hoʻomaikaʻi hou i ka hiki ke koho i nā mea ma kahi ʻaoʻao.

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

Events

Hoʻomaka pinepine ʻia nā hanana e ka launa pū ʻana o ka mea hoʻohana me ka ʻaoʻao pūnaewele, e like me ke kaomi ʻana i kahi loulou a i ʻole ke pihi, ke hoʻokomo ʻana i ka kikokikona i loko o kahi pahu hoʻokomo a i ʻole wahi kikokikona, koho i kahi pahu koho, kaomi i ke kī ma ka papa keyboard, hoʻoneʻe i ka ʻiole kuhikuhi. , etc. I kekahi mau hihia, hiki i ka polokalamu kele pūnaewele ke hoʻoulu i nā hanana, e like me ka hoʻouka ʻana i ka ʻaoʻao a me ka hoʻoiho ʻana i nā hanana.

Hoʻomaikaʻi ʻo jQuery i nā ʻano hana hoʻokele hanana ma o ka hāʻawi ʻana i nā ala hanana no ka hapa nui o nā hanana polokalamu kele pūnaewele, ʻo kekahi o kēia mau ʻano hana. ready(), click(), keypress(), focus(), blur(), change(), etc.

<script>
$(document).ready(function(){
    // Code to be executed
    alert("Hello World!");
});
</script>

Ma keʻano laulā, hiki ke hoʻokaʻawale ʻia nā hanana i ʻehā mau pūʻulu nui: 

  • nā hanana ʻiole,
  • nā hanana keyboard,
  • hanana module ed
  • palapala / pukaaniani hanana . 

Nā hanana iole

Hoʻomaka ʻia kahi hanana ʻiole ke kaomi ʻana o ka mea hoʻohana i kahi mea, hoʻoneʻe i ka pointer mouse, etc.

Eia kekahi mau ala jQuery maʻamau e mālama i nā hanana ʻiole.

ʻO keʻano click()

Ke ʻano hana click() e hoʻopili i kahi hana hoʻokele hanana i nā mea i koho ʻia no ka hanana "click“. Hoʻokō ka hana pili i ka wā e kaomi ai ka mea hoʻohana i kēlā mea. ʻO kēia hiʻohiʻona e hūnā i nā mea <p> ma kahi ʻaoʻao ke kaomi ʻia.

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>
ʻO keʻano dblclick()

Ke ʻano hana dblclick() e hoʻopili i kahi hana hoʻokele hanana i nā mea i koho ʻia no ka hanana "dblclick“. Hoʻokō ʻia ka hana i hoʻopili ʻia ke kaomi pālua ka mea hoʻohana i kēlā mea. ʻO kēia hiʻohiʻona e hūnā i nā mea <p> ke kaomi pālua iā lākou.

<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>
ʻO keʻano hover()

Ke ʻano hana hover() e hoʻopili i hoʻokahi a ʻelua paha hana hoʻokele hanana i nā mea i koho ʻia e hoʻokō i ka wā e neʻe ai ka mea kuhikuhi ʻiole i loko a i waho o nā mea. Holo ka hana mua i ka wā e kau ai ka mea hoʻohana i ka pointer ʻiole ma luna o kahi mea, a holo ka hana ʻelua ke wehe ka mea hoʻohana i ka pointer ʻiole mai kēlā mea.

E hōʻike ka laʻana ma lalo nei i nā mea <p> ke kau ʻoe i ka cursor ma luna ona, e wehe ʻia ka mea koʻikoʻi ke wehe ʻoe i ka cursor.

<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>
ʻO keʻano mouseenter()

Ke ʻano hana mouseenter() e hoʻopili i kahi hana hoʻokele hanana i nā mea i koho ʻia i hoʻokō ʻia ke komo ka ʻiole i kahi mea. ʻO ka laʻana ma lalo nei e hoʻohui i ka hōʻailona papa i ka mea <p> ke kau ʻoe i ka piko ma luna.

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
});
</script>
ʻO keʻano mouseleave()

Ke ʻano hana mouseleave() e hoʻopili i kahi hana hoʻoponopono hanana i nā mea i koho ʻia e holo ana ke haʻalele ka ʻiole i kahi mea. E hoʻoneʻe ka laʻana ma lalo i ka mea koʻikoʻi o ka papa <p> ke wehe ʻoe i ka pihi mai ia mea.

<script>
$(document).ready(function(){
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>

Nā hanana papa keyboard

Hoʻokiʻekiʻe ʻia kahi hanana keyboard ke kaomi a hoʻokuʻu paha ka mea hoʻohana i kahi kī ma ka papa keyboard. E nānā i kekahi mau ala jQuery i hoʻohana mau ʻia e mālama i nā hanana keyboard.

ʻO keʻano keypress()

Ke ʻano hana keypress() hoʻopili i kahi hana hoʻoponopono hanana i nā mea i koho ʻia (e hana maʻamau i nā mana) e holo ana i ka wā e loaʻa ai i ka polokalamu ke komo ʻana mai ka mea hoʻohana. E hōʻike ana kēia laʻana i kahi memo ke hoʻomaka ka hanana keypress a ehia mau manawa e hoʻomaka ai ke kaomi ʻana i ke kī ma kāu kīpē.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

Ua like ka hanana kī me ka hanana keydown, koe wale nō nā kī hoʻololi a paʻi ʻole e like me Shift, Esc, Backspace a i ʻole Delete, nā kī pua, etc. puhi lākou i nā hanana keydown akā ʻaʻole nā ​​hanana keypress.

ʻO keʻano keydown()

Ke ʻano hana keydown() hoʻopili i kahi hana hoʻoponopono hanana i nā mea i koho ʻia (e hana mau i nā mana) i hoʻokō ʻia i ka wā e kaomi mua ai ka mea hoʻohana i ke kī ma ka kī. E hōʻike ana kēia laʻana i kahi memo ke hoʻomaka ka hanana keydown a ehia mau manawa e hoʻomaka ai ke kaomi ʻana i ke kī ma kāu kīpē.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keydown(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
ʻO keʻano keyup()

Ke ʻano hana keyup() e hoʻopili i kahi hana hoʻokele hanana i nā mea i koho ʻia (e hana mau i nā mana) i hana ʻia i ka wā e hoʻokuʻu ai ka mea hoʻohana i kahi kī ma ka kī. E hōʻike ana kēia laʻana i kahi memo ke hoʻomaka ka hanana keyup a ehia mau manawa e hoʻomaka ai ke kaomi a hoʻokuʻu i kahi kī ma kāu kīpē.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

Hana i nā hanana

Hoʻomaka ʻia kahi hanana puka ke loaʻa a nalowale paha ka manaʻo o ka mea hoʻohana, a i ka wā e hoʻololi ai ka mea hoʻohana i kahi waiwai hoʻomalu puka, e like me ke paʻi ʻana i ke kikokikona i kahi hoʻokomo kikokikona, ke koho ʻana i kahi koho ma kahi pahu koho, etc. Eia kekahi mau ala jQuery i hoʻohana pinepine ʻia e mālama i nā hanana puka.

ʻO keʻano change()

Ke ʻano hana change() hoʻopili i kahi hana hoʻokele hanana i nā mea <input> a hoʻokō ʻia ke hoʻololi ʻia kona waiwai. E hōʻike ana kēia hiʻohiʻona i kahi leka hoʻomaopopo i ke koho ʻana i kahi koho ma ka pahu koho koho.

<script>
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("You have selected - " + selectedOption);
    });
});
</script>

No nā pahu kaomi, pahu pahu, a me nā pihi lekiō, e ʻā koke ka hanana i ka wā e koho ai ka mea hoʻohana i ka ʻiole, akā no ka hoʻokomo kikokikona a me ka ʻāpana kikokikona ke ahi ka hanana ma hope o ka nalowale ʻana o ka mea.

ʻO keʻano focus()

Ke ʻano hana focus() hoʻopili i kahi hana hoʻokele hanana i nā mea i koho ʻia (e hoʻokele maʻamau a hana i nā paʻa) e hoʻokō i ka wā e nānā ai. E hōʻike ana kēia hiʻohiʻona i kahi memo ke loaʻa ka manaʻo o ka kikokikona.

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
ʻO keʻano blur()

Ke ʻano hana blur() e hoʻopili i kahi hana hoʻokele hanana e hana i nā mea e like me <input><textarea><select> i hoʻokō ʻia ke nalowale ka manaʻo. E hōʻike ana kēia laʻana i kahi memo ke nalowale ka manaʻo o ka kikokikona.

<script>
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
ʻO keʻano submit()

Ke ʻano hana submit() hoʻopili i kahi hana hoʻokele hanana i nā mea <form> e holo ana ke ho'āʻo ka mea hoʻohana e hoʻouna i kahi palapala. E hōʻike ana kēia laʻana i kahi memo e pili ana i ka waiwai i hoʻokomo ʻia i ka wā e hoʻāʻo ai e hoʻouna i ka palapala.

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

Nā hanana palapala/puka

Hoʻopau ʻia nā hanana i kahi kūlana kahi i mākaukau ai ka ʻaoʻao DOM (Document Object Model) a i ʻole i ka wā e hoʻololi ai ka mea hoʻohana i ka puka aniani, etc. Eia kekahi mau ala jQuery i hoʻohana pinepine ʻia e mālama i kēia ʻano hanana.

ʻO keʻano ready()

Ke ʻano hana ready() kuhikuhi i kahi hana e hoʻokō i ka wā i hoʻopiha piha ʻia ka DOM.

ʻO ka laʻana ma lalo nei e hoʻololi i ka paukū kikokikona i ka wā i kūkulu piha ʻia ai ka hierarchy DOM a mākaukau e hoʻohana ʻia.

<script>
$(document).ready(function(){
    $("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
ʻO keʻano resize()

Ke ʻano hana resize() e hoʻopili i kahi hana hoʻokele hanana i ka mea puka makani e holo ana ke hoʻololi ka nui o ka puka aniani.

E hōʻike ana kēia hiʻohiʻona i ka laula a me ke kiʻekiʻe o ka puka aniani ke hoʻāʻo ʻoe e hoʻololi i ka nui ma ke kauo ʻana i kona mau kihi.

<script>
$(document).ready(function(){
    $(window).resize(function() {
        $(window).bind("resize", function(){ 
            $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
        });
    });
});
</script>
ʻO keʻano scroll()

Ke ʻano hana scroll() e hoʻopili i kahi hana hoʻokele hanana i ka puka makani a i ʻole ka iframe a me nā mea hiki ke holo i kēlā me kēia manawa ke hoʻololi ke kūlana ʻōwili o ka mea.

E hōʻike ana kēia hiʻohiʻona i kahi memo i ka wā e ʻōwili ai i ka puka aniani.

<script>
$(document).ready(function(){
    $(window).scroll(function() {
        $("p").show().fadeOut("slow");
    });
});
</script>

Ercole Palmeri

.

Nupepa hou
Mai poina i ka nūhou nui loa e pili ana i ka hana hou. E kākau inoa e loaʻa iā lākou ma ka leka uila.

Nā nūpepa hou

Eia ka wā e hiki mai ana: Pehea e hoʻololi ai ka ʻoihana moku i ka hoʻokele waiwai honua

He mana hoʻokele waiwai maoli ka ʻāpana moana, kahi i hoʻokele i kahi mākeke 150 biliona ...

1 Mei 2024

Hoʻopaʻa inoa nā mea hoʻopuka a me OpenAI i nā ʻaelike e hoʻoponopono i ka kahe o ka ʻike i hana ʻia e Artificial Intelligence

I ka Pōʻakahi i hala, ua hoʻolaha ka Financial Times i kahi kuʻikahi me OpenAI. Laikini ʻo FT i kāna nūpepa papa honua…

30ʻApelila 2024

Uku Online: Eia ke ʻano e uku mau ai nā lawelawe Streaming iā ʻoe

E uku ana nā miliona o ka poʻe no nā lawelawe streaming, e uku ana i nā uku kau inoa o kēlā me kēia mahina. He manaʻo maʻamau ʻoe…

29ʻApelila 2024

Hōʻike ʻo Veeam i ke kākoʻo piha loa no ka ransomware, mai ka pale ʻana i ka pane a me ka hoʻihoʻi

E hoʻomau ʻo Coveware e Veeam i ka hoʻolako ʻana i nā lawelawe pane ʻana i ka hanana cyber extortion. E hāʻawi ʻo Coveware i nā forensics a me nā mana hoʻoponopono…

23ʻApelila 2024