Ang paglikha ng isang Ajax-based na application ay nagiging napaka-simple at mabilis sa jQuery.
Ang jQuery ay orihinal na nilikha ni John Resig noong unang bahagi ng 2006. Ang proyekto ng jQuery ay kasalukuyang pinananatili at pinananatili ng isang distributed na grupo ng mga developer bilang isang open source na proyekto.
Makakatipid ka ng maraming oras at pagsisikap sa jQuery. Kaya idagdag ang site na ito sa iyong mga paborito at magpatuloy sa pagbabasa
Marami pang bagay na maaari mong gawin sa jQuery.
Ang listahan ay hindi nagtatapos doon, mayroong maraming iba pang mga cool na bagay na maaari mong gawin sa jQuery.
Mayroong ilang mga pakinabang kung bakit dapat pumili ang isa para sa paggamit ng jQuery:
Upang makapagsimula, mag-download muna tayo ng kopya ng jQuery at pagkatapos ay isama ito sa ating proyekto. Dalawang bersyon ng jQuery ang magagamit para sa pag-download: nagmamadali e hindi naka-compress .
Ang hindi naka-compress na file ay mas angkop para sa pagbuo o pag-debug; habang, ang minified at naka-compress na file ay inirerekomenda para sa produksyon dahil nakakatipid ito ng bandwidth at nagpapahusay sa pagganap dahil sa mas maliit na laki ng file.
Maaari naming i-download ang jQuery mula dito: https://jquery.com/download/
Kapag na-download mo na ang jQuery file, makikita mo na mayroon itong extension ng js, ibig sabihin, isa itong JavaScript file. Sa katunayan ang JQuery ay walang iba kundi isang JavaScript library, kaya maaari mong isama ang jQuery file sa HTML na dokumento na may elemento tulad ng pagsasama mo ng mga regular na JavaScript file.
<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>Tandaan na palaging isama ang jQuery file bago ang mga custom na script; kung hindi, ang mga jQuery API ay hindi magiging available kapag sinubukan ng iyong jQuery code na i-access ang mga ito.
Tulad ng napansin mo, nilaktawan namin ang katangian sa nakaraang halimbawa type="text/javascript" sa loob ng tag . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefitapos sa HTML5 at sa lahat ng modernong browser.
Bilang alternatibo, maaari mong i-embed ang jQuery sa iyong dokumento sa pamamagitan ng malayang magagamit na mga link ng CDN (Content Delivery Network), kung mas gugustuhin mong iwasan ang pag-download ng file.
Ang mga CDN ay maaaring mag-alok ng kalamangan sa pagganap sa pamamagitan ng pagbabawas ng oras ng pagkarga, dahil nagho-host sila ng jQuery sa maraming server sa buong mundo, at kapag hiniling ng isang user ang file, ihahatid ito mula sa pinakamalapit na server.
Ito rin ay may kalamangan na kung ang iyong bisita sa web page ay nag-download na ng kopya ng jQuery mula sa parehong CDN habang bumibisita sa ibang mga site, hindi na nila ito kailangang i-download muli dahil ito ay nasa cache ng kanilang browser.
Sa kasong ito kailangan mong isulat:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Bilang karagdagan sa CDN na ibinigay ng jquery project, maaari mong isama ang jQuery sa pamamagitan ng Google e microsoft cdn.
Nang makita ang mga layunin ng library ng jQuery at kung paano ito isama sa iyong dokumento, ngayon na ang oras upang isabuhay ang jQuery.
Ngayon gawin natin ang isang simpleng operasyon ng jQuery sa pamamagitan ng pagpapalit ng kulay ng teksto ng header mula sa pre colordefikulay itim hanggang berde.
<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>Sa code ay nagsagawa kami ng isang simpleng operasyon ng jQuery sa pamamagitan ng pagpapalit ng kulay ng header i.e. ang elemento gamit ang tagapili ng elemento ng jQuery at css() na pamamaraan kapag handa na ang dokumento, na kilala bilang kaganapang handa na ng dokumento.
Karaniwang nagsisimula ang isang pahayag ng jQuery sa isang dollar sign ( $) at nagtatapos sa semicolon ( ;).
Sa jQuery, ang dollar sign ( $) ay isang alias lamang para sa jQuery. Isaalang-alang ang sumusunod na sample code na nagpapakita ng pinakasimpleng pahayag ng jQuery.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Ang halimbawa ay nagpapakita lamang ng mensahe ng babala "Hello I'm a JQuery sign” sa gumagamit. Tingnan natin ang ilang mga tampok:
<script>: Ang jQuery ay isang JavaScript library lamang, ang jQuery code ay maaaring ilagay sa loob ng elemento <script>, o maaari mo itong ilagay sa isang panlabas na JavaScript file;$(document).ready(handler); ay kilala bilang isang handa na kaganapan. Saan iyon handler ito ay isang function na ipapasa sa paraan na isasagawa, sa sandaling handa na ang dokumento, ibig sabihin, kapag ang hierarchy ng DOM ay ganap nang naitayo.Ang paraan ng jQuery ready() ito ay karaniwang ginagamit sa isang hindi kilalang function. Kaya, ang halimbawa sa itaas ay maaari ding isulat sa shorthand notation tulad nito:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Sa loob ng isang function maaari kang magsulat ng mga pahayag ng jQuery upang maisagawa ang anumang aksyon na sumusunod sa pangunahing syntax, tulad ng:
$(selector).action();Saan iyon, $(selector) karaniwang pinipili nito ang mga elemento ng HTML mula sa puno ng DOM upang maaari itong manipulahin at action() maglapat ng ilang pagkilos sa mga napiling elemento, gaya ng pagbabago ng value ng CSS property, o pagtatakda ng content ng elemento, atbp.
Ngayon tingnan natin ang isa pang halimbawa na nagtatakda ng teksto ng talata:
<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>Ang halimbawa ng jQuery ay tumutukoy sa tagapili p, at pinipili nito ang lahat ng mga talata, pagkatapos ay ang pamamaraan text() itakda ang nilalaman ng teksto ng talata na may "Hello World!".
Ang teksto ng talata sa nakaraang halimbawa ay awtomatikong papalitan kapag handa na ang dokumento. Ngunit tingnan natin kung paano ito gagawin kung sakaling gusto mong magsagawa ng aksyon bago patakbuhin ang jQuery code, upang palitan ang teksto ng talata.
Isaalang-alang natin ang isang huling halimbawa:
<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>Sa halimbawang ito ang teksto ng talata ay papalitan lamang kapag naganap ang isang kaganapan sa pag-click sa button na "Replace Text“, na ang ibig sabihin ay kapag nag-click ang isang user sa button na ito.
Maaari mong gamitin ang tagapili ng ID upang pumili ng isang item na may natatanging ID sa page.
Halimbawa, ang sumusunod na jQuery code ay pipili at magha-highlight ng isang elemento na may ID attribute id="markid", kapag handa na ang dokumento.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Maaaring gamitin ang tagapili ng klase upang pumili ng mga elemento na may partikular na klase.
Halimbawa, ang sumusunod na jQuery code ay pipili at magha-highlight ng mga elemento na may katangian ng klase class="markclass", kapag handa na ang dokumento.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Maaaring gamitin ang tagapili ng item upang pumili ng mga item ayon sa pangalan ng item.
Halimbawa, pipiliin at iha-highlight ng sumusunod na jQuery code ang lahat ng talata, ibig sabihin, ang mga elemento "<p>" ng dokumento kapag handa na ito.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Maaari mong gamitin ang tagapili ng katangian upang pumili ng isang elemento batay sa isa sa mga katangian ng HTML nito, tulad ng isang katangian ng link targeto ang katangian ng isang input type, ecc
Halimbawa, pipiliin at iha-highlight ng sumusunod na jQuery code ang lahat ng text input, gaya ng mga elemento "<input>" sa type="text", kapag handa na ang dokumento.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Maaari mo ring pagsamahin ang mga tagapili ng CSS upang gawing mas tumpak ang iyong pagpili.
Halimbawa, maaari mong pagsamahin ang tagapili ng klase sa isang tagapili ng elemento upang mahanap ang mga elemento sa isang dokumento na may partikular na uri at klase.
<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>Bilang karagdagan sa mga pumipili defiGayunpaman, ang jQuery ay nagbibigay ng sarili nitong custom na tagapili upang higit pang mapahusay ang mga kakayahan sa pagpili ng mga elemento sa isang pahina.
<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>Ang mga kaganapan ay madalas na na-trigger ng pakikipag-ugnayan ng user sa web page, tulad ng pag-click sa isang link o button, pagpasok ng text sa isang input box o text area, pagpili sa isang selection box, pagpindot ng key sa keyboard, paglipat ng mouse pointer , atbp. Sa ilang mga kaso, ang browser mismo ay maaaring mag-trigger ng mga kaganapan, tulad ng pag-load ng pahina at pag-download ng mga kaganapan.
Ang jQuery ay nagpapabuti sa mga pangunahing mekanismo ng pangangasiwa ng kaganapan sa pamamagitan ng pag-aalok ng mga pamamaraan ng kaganapan para sa karamihan ng mga kaganapan sa katutubong browser, ang ilan sa mga pamamaraang ito ay ready(), click(), keypress(), focus(), blur(), change(), ecc
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Sa pangkalahatan, ang mga kaganapan ay maaaring uriin sa apat na pangunahing pangkat:
Nati-trigger ang event ng mouse kapag nag-click ang user sa isang item, ginalaw ang pointer ng mouse, atbp.
Narito ang ilang karaniwang ginagamit na mga pamamaraan ng jQuery upang pangasiwaan ang mga kaganapan sa mouse.
click()Ang paraan click() mag-attach ng function handler ng kaganapan sa mga napiling elemento para sa kaganapan "click“. Isinasagawa ang naka-link na function kapag nag-click ang user sa item na iyon. Itatago ng sumusunod na halimbawa ang mga elemento <p> sa isang pahina kapag na-click.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Ang paraan dblclick() mag-attach ng function handler ng kaganapan sa mga napiling elemento para sa kaganapan "dblclick“. Isinasagawa ang naka-link na function kapag na-double click ng user ang item na iyon. Itatago ng sumusunod na halimbawa ang mga elemento <p> kapag nag-double click sa kanila.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Ang paraan hover() mag-attach ng isa o dalawang event handler function sa mga napiling elemento na ipapatupad kapag ang mouse pointer ay gumagalaw papasok at palabas ng mga elemento. Gumagana ang unang function kapag inilagay ng user ang mouse pointer sa isang item, habang tumatakbo ang pangalawang function kapag inalis ng user ang mouse pointer mula sa item na iyon.
Ang sumusunod na halimbawa ay magha-highlight ng mga item <p> kapag inilagay mo ang cursor dito, ang highlight ay aalisin kapag tinanggal mo ang cursor.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Ang paraan mouseenter() mag-attach ng function ng event handler sa mga napiling elemento na ipapatupad kapag ang mouse ay pumasok sa isang elemento. Ang sumusunod na halimbawa ay magdaragdag ng pag-highlight ng klase sa elemento <p> kapag inilagay mo ang cursor sa ibabaw nito.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Ang paraan mouseleave() mag-attach ng event handler function sa mga napiling item na tumatakbo kapag umalis ang mouse sa isang item. Aalisin ng sumusunod na halimbawa ang highlight ng klase mula sa elemento <p> kapag tinanggal mo ang cursor dito.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Ang isang kaganapan sa keyboard ay itataas kapag pinindot o binitawan ng user ang isang key sa keyboard. Tingnan natin ang ilang karaniwang ginagamit na mga pamamaraan ng jQuery upang pangasiwaan ang mga kaganapan sa keyboard.
keypress()Ang paraan keypress() nag-a-attach ng function sa pangangasiwa ng kaganapan sa mga napiling elemento (karaniwang bumubuo ng mga kontrol) na tumatakbo kapag nakatanggap ang browser ng keyboard input mula sa user. Ang sumusunod na halimbawa ay magpapakita ng mensahe kapag na-trigger ang kaganapan keypress at kung gaano karaming beses ito na-trigger kapag pinindot mo ang key sa iyong keyboard.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Ang event ng keypress ay katulad ng keydown event, maliban sa modifier at nonprinting key gaya ng Shift, Esc, Backspace o Delete, mga arrow key, atbp. pinapagana nila ang mga event ng keydown ngunit hindi ang mga event ng keypress.
keydown()Ang paraan keydown() nag-a-attach ng function sa pangangasiwa ng kaganapan sa mga napiling item (karaniwang bumubuo ng mga kontrol) na isinasagawa kapag unang pinindot ng user ang isang key sa keyboard. Ang sumusunod na halimbawa ay magpapakita ng mensahe kapag na-trigger ang kaganapan keydown at kung gaano karaming beses ito na-trigger kapag pinindot mo ang key sa iyong keyboard.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Ang paraan keyup() mag-attach ng function sa pangangasiwa ng kaganapan sa mga napiling elemento (karaniwang bumubuo ng mga kontrol) na isinasagawa kapag naglabas ang user ng key sa keyboard. Ang sumusunod na halimbawa ay magpapakita ng mensahe kapag na-trigger ang kaganapan keyup at kung gaano karaming beses ito na-trigger kapag pinindot at binitawan mo ang isang key sa iyong keyboard.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Nati-trigger ang isang kaganapan sa form kapag natanggap o nawalan ng focus ang isang form control, o kapag binago ng user ang isang value ng control ng form, gaya ng pag-type ng text sa isang text input, pagpili ng opsyon sa isang piling kahon, atbp. Narito ang ilang karaniwang ginagamit na mga pamamaraan ng jQuery upang mahawakan ang mga kaganapan sa form.
change()Ang paraan change() mag-attach ng function ng event handler sa mga elemento <input> at ipapatupad kapag nagbago ang halaga nito. Ang sumusunod na halimbawa ay magpapakita ng mensahe ng babala kapag pumipili ng opsyon sa drop down na kahon ng pagpili.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Para sa mga click box, check box, at radio button, gagana kaagad ang event kapag pumipili ng mouse ang user, ngunit para sa text input at text area, gagana ang event pagkatapos mawalan ng focus ang elemento.
focus()Ang paraan focus() nag-a-attach ng function ng handler ng kaganapan sa mga napiling elemento (karaniwang kumokontrol at bumubuo ng mga binding) na ipapatupad kapag nakakuha ito ng focus. Ang sumusunod na halimbawa ay magpapakita ng mensahe kapag ang text input ay nakatanggap ng focus.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Ang paraan blur() mag-attach ng function handler ng kaganapan upang bumuo ng mga elemento tulad ng <input>, <textarea>, <select> na isinasagawa kapag nawalan ito ng pokus. Ang sumusunod na halimbawa ay magpapakita ng mensahe kapag nawalan ng focus ang text input.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Ang paraan submit() mag-attach ng function ng event handler sa mga elemento <form> na tumatakbo kapag sinubukan ng user na magsumite ng isang form. Ang sumusunod na halimbawa ay magpapakita ng mensahe batay sa halagang inilagay kapag sinusubukang isumite ang form.
<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>Ang mga kaganapan ay pinapagana din sa isang sitwasyon kung saan ang pahina ng DOM (Document Object Model) ay handa na o kapag ang user ay nag-resize o nag-scroll sa browser window, atbp. Narito ang ilang karaniwang ginagamit na mga pamamaraan ng jQuery upang mahawakan ang ganitong uri ng kaganapan.
ready()Ang paraan ready() tumutukoy ng isang function na isasagawa kapag ang DOM ay ganap na na-load.
Papalitan ng sumusunod na halimbawa ang teksto ng talata sa sandaling ganap nang mabuo ang hierarchy ng DOM at handa nang manipulahin.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Ang paraan resize() mag-attach ng event handler function sa window element na tumatakbo kapag nagbago ang laki ng browser window.
Ipapakita ng sumusunod na halimbawa ang kasalukuyang lapad at taas ng window ng browser kapag sinubukan mong baguhin ang laki nito sa pamamagitan ng pag-drag sa mga sulok nito.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Ang paraan scroll() mag-attach ng function ng event handler sa window o sa iframe at mga na-scroll na item na tumatakbo sa tuwing nagbabago ang posisyon ng pag-scroll ng item.
Ang sumusunod na halimbawa ay magpapakita ng mensahe kapag nag-scroll sa window ng browser.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Ang UK CMA ay naglabas ng babala tungkol sa gawi ng Big Tech sa merkado ng artificial intelligence. doon…
Ang "Case Green" Decree, na binuo ng European Union upang mapahusay ang kahusayan ng enerhiya ng mga gusali, ay nagtapos sa proseso ng pambatasan nito sa…
Iniharap ang taunang ulat ng Casaleggio Associati sa Ecommerce sa Italy. Ulat na pinamagatang “AI-Commerce: the frontiers of Ecommerce with Artificial Intelligence”.…
Resulta ng patuloy na pagbabago sa teknolohiya at pangako sa kapaligiran at kapakanan ng mga tao. Inihahandog ng Bandalux ang Airpure®, isang tolda…