Ny famoronana fampiharana mifototra amin'ny Ajax dia lasa tsotra sy haingana amin'ny jQuery.
Ny jQuery dia noforonin'i John Resig tamin'ny fiandohan'ny taona 2006. Ny tetikasa jQuery dia tazonin'ny vondron'ny mpamorona mizara ho toy ny tetikasa open source amin'izao fotoana izao.
Afaka mamonjy fotoana sy ezaka be ianao amin'ny jQuery. Koa ampio ity tranokala ity amin'ny ankafizinao ary tohizo ny famakiana
Misy zavatra maro hafa azonao atao amin'ny jQuery.
Tsy mifarana eo ny lisitra, misy zavatra mahafinaritra maro hafa azonao atao amin'ny jQuery.
Misy tombony maromaro tokony hisafidianana ny fampiasana jQuery:
Hanombohana, andao aloha maka dika mitovy amin'ny jQuery ary ampidiro ao amin'ny tetikasantsika. Misy dikan-teny roa amin'ny jQuery azo alaina: maika e tsy voatsindry .
Ny rakitra tsy voafehy dia mety kokoa amin'ny fampandrosoana na ny debugging; raha toa kosa, ny rakitra minified sy compressed dia atolotra ho an'ny famokarana satria mamonjy bandwidth ary manatsara ny fampisehoana noho ny haben'ny rakitra kely kokoa.
Afaka misintona jQuery eto izahay: https://jquery.com/download/
Rehefa misintona ny rakitra jQuery ianao dia afaka mahita fa manana fanitarana js izy io, izany hoe rakitra JavaScript. Raha ny marina, JQuery dia tsy inona fa tranomboky JavaScript, ka azonao atao ny mampiditra ny rakitra jQuery ao amin'ny rakitra HTML miaraka amin'ny singa. sahala amin'ny fampidiranao rakitra JavaScript mahazatra.
<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>Tsarovy ny hampiditra foana ny rakitra jQuery alohan'ny script manokana; raha tsy izany dia tsy ho hita ny API jQuery rehefa manandrana miditra azy ireo ny code jQuery anao.
Araka ny efa tsikaritrareo, dia nodingantsika ilay toetra tamin'ny ohatra teo aloha type="text/javascript" ao anaty tag . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefivita amin'ny HTML5 sy amin'ny navigateur maoderina rehetra.
Ho solon'izay, azonao atao ny mampiditra jQuery ao anatin'ny antontan-taratasinao amin'ny alàlan'ny rohy CDN (Tambajotra fandefasana votoaty) azo alaina, raha tsy tianao ny misintona ilay rakitra.
Ny CDNs dia afaka manolotra tombony amin'ny fampisehoana amin'ny alàlan'ny fampihenana ny fotoana entana, satria izy ireo dia mampiantrano jQuery amin'ny mpizara maro manerana izao tontolo izao, ary rehefa misy mpampiasa mangataka ilay rakitra, dia halefa amin'ny mpizara akaiky indrindra.
Izany koa dia manana tombony raha toa ka efa naka ny dika mitovy amin'ny jQuery avy amin'ny CDN iray ihany ny mpitsidika ny pejin-tranonkalanao rehefa mitsidika tranokala hafa, dia tsy mila maka izany intsony izy ireo satria efa ao amin'ny cache an'ny navigateur.
Amin'ity tranga ity dia tsy maintsy manoratra ianao:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Ankoatra ny CDN nomen'ny tetikasa jquery, azonao atao ny mampiditra jQuery amin'ny alalan'ny Google e Microsoft cdn.
Rehefa nahita ny tanjon'ny tranomboky jQuery sy ny fomba hampidirana azy ao amin'ny antontan-taratasinao dia izao no fotoana hampiharana ny jQuery.
Andeha isika hanao hetsika jQuery tsotra amin'ny alàlan'ny fanovana ny lokon'ny lahatsoratra amin'ny lohatenin'ny loko mialohadefiloko mainty hatramin'ny maitso.
<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>Ao amin'ny code dia nanao hetsika jQuery tsotra izahay tamin'ny fanovana ny lokon'ny lohapejy izany hoe ny singa mampiasa ny jQuery Element's selector sy css() fomba rehefa vonona ny antontan-taratasy, fantatra amin'ny anarana hoe hetsika efa vonona.
Ny fanambarana jQuery matetika dia manomboka amin'ny famantarana dolara ( $) ary mifarana amin'ny semicolon ( ;).
Ao amin'ny jQuery, ny famantarana dolara ( $) dia anarana fotsiny ho an'ny jQuery. Diniho ity kaody santionany manaraka ity izay mampiseho ny fanambarana jQuery tsotra indrindra.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Ny ohatra dia mampiseho hafatra fampitandremana fotsiny "Hello I'm a JQuery sign” amin'ny mpampiasa. Andeha hojerentsika ny endri-javatra sasany:
<script>: jQuery dia tranomboky JavaScript fotsiny, ny code jQuery dia azo apetraka ao anatin'ilay singa <script>, na azonao apetraka ao anaty rakitra JavaScript ivelany;$(document).ready(handler); fantatra amin'ny hoe hetsika vonona. Aiza ilay izy handler io dia asa ampitaina amin'ny fomba hotanterahina, raha vao vonona ny antontan-taratasy, izany hoe rehefa vita tanteraka ny hierarchy DOM.Ny fomba jQuery ready() matetika izy io dia ampiasaina miaraka amin'ny fiasa tsy mitonona anarana. Noho izany, ny ohatra etsy ambony dia azo soratana amin'ny fanamarihana fohy toy izao:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Ao anatin'ny fiasa iray dia azonao atao ny manoratra fanambarana jQuery hanaovana hetsika manaraka ny syntax fototra, toy ny:
$(selector).action();Aiza ilay izy, $(selector) Izy io dia misafidy ny singa HTML amin'ny hazo DOM mba ahafahana manodinkodina sy action() ampiharo ny hetsika sasany amin'ireo singa voafantina, toy ny fanovana ny sandan'ny fananana CSS, na ny fametrahana ny votoatin'ny singa, sns.
Andeha hojerentsika ohatra iray hafa izay mametraka lahatsoratra paragrafy:
<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>Ny ohatra jQuery dia manondro ny mpifidy p, ary io no mifidy ny fehintsoratra rehetra, avy eo ny fomba text() mametraka ny votoatin'ny lahatsoratra amin'ny paragrafy miaraka amin'ny "Hello World!".
Ny lahatsoratra andalana ao amin'ny ohatra teo aloha dia soloina ho azy rehefa vonona ny antontan-taratasy. Fa andeha hojerentsika ny fomba hanaovana izany raha te hanao hetsika ianao alohan'ny hampandehanana ny code jQuery, hanoloana ny lahatsoratry ny andalana.
Andeha isika handinika ohatra iray farany:
<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>Amin'ity ohatra ity dia soloina ny lahatsoratry ny paragrafy rehefa misy hetsika kitihina eo amin'ny bokotra "Replace Text", izay midika fotsiny hoe rehefa manindry ity bokotra ity ny mpampiasa iray.
Azonao atao ny mampiasa ny ID selector hisafidianana singa tokana miaraka amin'ny ID tokana amin'ny pejy.
Ohatra, ity kaody jQuery manaraka ity dia hifidy sy hanasongadina singa iray misy ny toetra ID id="markid", rehefa vonona ny antontan-taratasy.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Ny mpifidy kilasy dia azo ampiasaina hisafidianana singa misy kilasy manokana.
Ohatra, ity kaody jQuery manaraka ity dia hifidy sy hanasongadina ireo singa misy ny toetran'ny kilasy class="markclass", rehefa vonona ny antontan-taratasy.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Azo ampiasaina hisafidianana zavatra amin'ny anaran'ny singa ny mpifidy entana.
Ohatra, ity code jQuery manaraka ity dia hifidy sy hanasongadina ny fehintsoratra rehetra, izany hoe ireo singa "<p>" ny antontan-taratasy rehefa vonona.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Azonao atao ny mampiasa ny mpifidy toetra hisafidianana singa iray mifototra amin'ny iray amin'ireo toetra HTML-ny, toy ny toetran'ny rohy targetna ny toetran'ny fampidirana type, sns.
Ohatra, ity kaody jQuery manaraka ity dia hifidy sy hanasongadina ny fampidirana lahatsoratra rehetra, toy ny singa "<input>" amin'ny type="text", rehefa vonona ny antontan-taratasy.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Azonao atao koa ny manambatra ireo mpifidy CSS mba hahatonga ny safidinao ho marina kokoa.
Ohatra, azonao atao ny manambatra ny mpifidy kilasy amin'ny mpifidy singa iray mba hahitana singa ao anaty antontan-taratasy manana karazana sy kilasy iray.
<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>Ankoatra ireo mpifidy defiRaha ny marina, ny jQuery dia manome ny mpifidy azy manokana hanatsara bebe kokoa ny fahafaha-mifidy singa amin'ny pejy iray.
<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>Matetika ny hetsika dia ateraky ny fifandraisan'ny mpampiasa amin'ny pejin-tranonkala, toy ny rehefa manindry rohy na bokotra, mampiditra lahatsoratra ao anaty boaty fampidirana na faritra misy lahatsoratra, manaova fifantenana ao anaty boaty fifantenana, manindry fanalahidy eo amin'ny klavier, mamindra ny fanondro ny totozy. , sns. Amin'ny toe-javatra sasany, ny mpitety tranonkala mihitsy dia afaka miteraka hetsika, toy ny fampidinana pejy sy fampidinana hetsika.
jQuery dia manatsara ny fomba fiasa fototra amin'ny fikarakarana hetsika amin'ny alàlan'ny fanolorana fomba hetsika ho an'ny ankamaroan'ny hetsika navigateur teratany, ny sasany amin'ireo fomba ireo dia ready(), click(), keypress(), focus(), blur(), change(), sns.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Amin'ny ankapobeny, ny hetsika dia azo sokajiana ho vondrona lehibe efatra:
Ny hetsika totozy dia mipoitra rehefa manindry singa iray ny mpampiasa, manetsika ny fanondro totozy, sns.
Ireto misy fomba jQuery fampiasa matetika amin'ny fitantanana ny hetsika totozy.
click()Ny fomba click() ampifandraiso amin'ny singa voafantina amin'ny hetsika "click“. Ny asa mifandray dia mandeha rehefa manindry an'io singa io ny mpampiasa. Ity ohatra manaraka ity dia hanafina ireo singa <p> amin'ny pejy rehefa kitihina.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Ny fomba dblclick() ampifandraiso amin'ny singa voafantina amin'ny hetsika "dblclick“. Ny asa mifandray dia mandeha rehefa manindry indroa an'io singa io ny mpampiasa. Ity ohatra manaraka ity dia hanafina ireo singa <p> rehefa kitihina indroa izy ireo.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Ny fomba hover() ampifandraiso amin'ny singa voafantina izay tanterahana rehefa miditra sy mivoaka amin'ny singa ny fanondro ny totozy. Ny asa voalohany dia mandeha rehefa mametraka ny tondro totozy eo ambonin'ny singa iray ny mpampiasa, raha ny asa faharoa kosa mandeha rehefa esorin'ny mpampiasa ny tondro totozy amin'io singa io.
Ity ohatra manaraka ity dia hanasongadina zavatra <p> rehefa apetrakao eo ny cursor dia esorina ny highlight rehefa esorinao ny cursor.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Ny fomba mouseenter() ampifandraiso amin'ny singa voafantina ny asa mpitantana hetsika izay tanterahina rehefa miditra singa iray ny totozy. Ity ohatra manaraka ity dia hanampy fanasongadinana kilasy amin'ilay singa <p> rehefa mametraka ny cursor eo amboniny ianao.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Ny fomba mouseleave() ampifandraiso amin'ny singa voafantina mandeha rehefa mandao singa ny totozy. Ity ohatra manaraka ity dia hanaisotra ny fanasongadinana kilasy amin'ny singa <p> rehefa esorinao ny cursor aminy.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Mitsangana ny hetsika fitendry rehefa manindry na mamoaka lakile eo amin'ny klavier ny mpampiasa. Andeha hojerentsika ny fomba jQuery fampiasa matetika amin'ny fitantanana ny hetsika fitendry.
keypress()Ny fomba keypress() mamehy asa fitantanana hetsika amin'ny singa voafantina (matetika miendrika fanaraha-maso) izay mandeha rehefa mahazo fidirana amin'ny klavier avy amin'ny mpampiasa ny navigateur. Ity ohatra manaraka ity dia hampiseho hafatra rehefa atomboka ny hetsika keypress ary impiry izany no mipoitra rehefa manindry ny lakile eo amin'ny klavier ianao.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Ny hetsika fanerena dia mitovy amin'ny hetsika fanalahidin'ny keydown, afa-tsy ireo fanalahidy fanovana sy tsy fanontana toy ny Shift, Esc, Backspace na Delete, zana-tsipìka, sns. mamono hetsika keydown izy ireo fa tsy hetsika fanerena.
keydown()Ny fomba keydown() mamehy asa fitantanana hetsika amin'ny singa voafantina (matetika miendrika fanaraha-maso) izay tanterahina rehefa manindry fanalahidy voalohany amin'ny klavier ny mpampiasa. Ity ohatra manaraka ity dia hampiseho hafatra rehefa atomboka ny hetsika keydown ary impiry izany no mipoitra rehefa manindry ny lakile eo amin'ny klavier ianao.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Ny fomba keyup() ampifandraiso amin'ny singa voafantina (matetika miendrika fanaraha-maso) izay atao rehefa mamoaka lakile eo amin'ny klavier ny mpampiasa. Ity ohatra manaraka ity dia hampiseho hafatra rehefa atomboka ny hetsika keyup ary impiry izany no mipoitra rehefa manindry sy mamoaka fanalahidy iray eo amin'ny klavier ianao.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Ny hetsika endrika dia mipoitra rehefa mandray na very fifantohana ny fifehezana endrika, na rehefa manova sanda mifehy ny endrika ny mpampiasa, toy ny fanoratana lahatsoratra ho fampidirana lahatsoratra, fifantenana safidy ao anaty boaty voafantina, sns. Ireto misy fomba jQuery sasany ampiasaina matetika amin'ny hetsika endrika.
change()Ny fomba change() ampifandraiso amin'ny singa ny asa mpitantana hetsika <input> ary tanterahina rehefa miova ny sandany. Ity ohatra manaraka ity dia hampiseho hafatra fampitandremana rehefa misafidy safidy iray ao amin'ny boaty fantina midina.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Ho an'ny boaty kitihina, boaty fisavana ary bokotra radio dia mirehitra avy hatrany ny hetsika rehefa misafidy totozy ny mpampiasa, fa ho an'ny fampidirana lahatsoratra sy faritra misy lahatsoratra dia mirehitra ny hetsika rehefa tsy mifantoka ilay singa.
focus()Ny fomba focus() mamehy ny asan'ny mpitantana hetsika amin'ny singa voafantina (matetika mifehy sy mamorona fatorana) izay manatanteraka rehefa mifantoka. Ity ohatra manaraka ity dia hampiseho hafatra rehefa mahazo fifantohana ny fampidirana lahatsoratra.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Ny fomba blur() ampifandraiso amin'ny hetsika mpandrindra hetsika mba hamoronana singa toy ny <input>, <textarea>, <select> izay tanterahina rehefa very fifantohana. Ity ohatra manaraka ity dia hampiseho hafatra rehefa very fifantohana ny fampidirana lahatsoratra.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Ny fomba submit() ampifandraiso amin'ny singa ny asa mpitantana hetsika <form> izay mandeha rehefa manandrana manolotra endrika ny mpampiasa. Ity ohatra manaraka ity dia hampiseho hafatra mifototra amin'ny sanda napetraka rehefa manandrana manolotra ny endrika.
<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>Ny hetsika dia voaroaka ihany koa amin'ny toe-javatra iray izay efa vonona ny pejy DOM (Document Object Model) na rehefa manova ny haben'ny mpampiasa na manodina ny varavarankelin'ny navigateur, sns. Ireto misy fomba jQuery fampiasa matetika hiatrehana ity karazana hetsika ity.
ready()Ny fomba ready() mamaritra asa iray hotanterahina rehefa feno tanteraka ny DOM.
Ity ohatra manaraka ity dia hanolo ny lahatsoratry ny paragrafy raha vantany vao vita tanteraka ny ambaratongan'ny DOM ary vonona ny hosoloina.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Ny fomba resize() ampifandraiso amin'ny singa fikandrana izay mandeha rehefa miova ny haben'ny varavarankelin'ny navigateur.
Ity ohatra manaraka ity dia hampiseho ny sakany sy ny haavon'ny varavarankelin'ny navigateur amin'izao fotoana izao rehefa manandrana manova ny habeny ianao amin'ny alàlan'ny fisintonana ny zorony.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Ny fomba scroll() ampifandraiso amin'ny varavarankely na amin'ny iframe ary zavatra azo scrolling izay mandeha isaky ny miova ny toeran'ny horonam-boky.
Ity ohatra manaraka ity dia hampiseho hafatra rehefa mikoriana ny varavarankelin'ny navigateur.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Ny Coveware avy amin'i Veeam dia hanohy hanome tolotra famaliana trangan-javatra an-tserasera. Ny Coveware dia hanolotra fahaiza-manao forensika sy fanavaozana…
Ny fikojakojana mialoha dia manova ny sehatry ny solika sy entona, miaraka amin'ny fomba fiasa vaovao sy mavitrika amin'ny fitantanana orinasa.…
Ny UK CMA dia namoaka fampitandremana momba ny fihetsik'i Big Tech amin'ny tsenan'ny faharanitan-tsaina artifisialy. Ery…
Ny didim-panjakana "Case Green", novolavolain'ny Vondrona Eoropeana mba hanatsarana ny fahombiazan'ny angovo amin'ny trano, dia namarana ny fizotrany lalàna miaraka amin'ny…