Ko te hanga i tetahi tono-a Ajax ka tino ngawari me te tere me te jQuery.
Ko te jQuery i hanga tuatahi e John Resig i te timatanga o te tau 2006. Ko te kaupapa jQuery kei te pupuri tonu, kei te pupurihia e tetahi roopu kaiwhakawhanake kua tohatoha hei kaupapa tuwhera.
Ka taea e koe te penapena i te wa me te whakapau kaha me te jQuery. Na, taapirihia tenei pae ki o tino pai ka haere tonu te panui
He maha atu nga mea ka taea e koe ki te jQuery.
Kare te rarangi e mutu ki reira, he maha atu nga mea pai ka taea e koe ki te jQuery.
He maha nga painga me whiriwhiri tetahi mo te whakamahi jQuery:
Hei timata, me tango tuatahi he kape o te jQuery ka whakauru ki roto i ta maatau kaupapa. E rua nga putanga o te jQuery e waatea ana mo te tango: i te tere e kāore i kōpeke .
He pai ake te konae karekau i kopaki mo te whanaketanga, te patuiro ranei; i te mea, ko te konae kua whakaitihia me te konae kua tohua mo te hanga na te mea ka penapena te bandwidth me te whakapai ake i nga mahi na te mea he iti ake te rahi o te konae.
Ka taea e matou te tango i te jQuery mai i konei: https://jquery.com/download/
Ina tango koe i te konae jQuery ka kite koe he toronga js tona, ara he konae JavaScript. Inaa he mea noa a JQuery engari he whare pukapuka JavaScript, na ka taea e koe te whakauru i te konae jQuery ki te tuhinga HTML me te huānga. pera ano me whakauru koe i nga konae 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>Kia mahara ki te whakauru tonu i te konae jQuery i mua i nga tuhinga ritenga; ki te kore, ka kore nga jQuery API e waatea ina ngana to waehere jQuery ki te uru atu.
I kite pea koe, i pekehia e matou te huanga i te tauira o mua type="text/javascript" roto te tohu . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefikua oti i te HTML5 me nga kaitirotiro hou katoa.
Hei rereke, ka taea e koe te whakauru i te jQuery ki roto i to tuhinga ma nga hononga CDN (Content Delivery Network) e waatea ana, mena ka pai koe ki te karo i te tango i te konae.
Ka taea e nga CDN te tuku painga mahi ma te whakaiti i te wa uta, na te mea kei te manaaki ratou i te jQuery i runga i nga tuunga maha huri noa i te ao, a ka tono te kaiwhakamahi ki te konae, ka tukuna mai i te tūmau tata.
He painga ano tenei ki te mea kua tikina kee e to manuhiri wharangi paetukutuku he kape o te jQuery mai i te CDN kotahi i a ia e toro ana ki etahi atu pae, karekau ratou e tango ano i te mea kei roto kee i te keteroki o to raatau tirotiro.
I tenei keehi me tuhi koe:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>I tua atu i te CDN e whakaratohia ana e te kaupapa jquery, ka taea e koe te whakauru i te jQuery ma Google e Microsoft cdn.
Kua kite koe i nga whainga o te whare pukapuka jQuery me pehea te whakauru ki roto i to tuhinga, koinei te wa ki te whakatinana i te jQuery.
Inaianei me mahi he mahi jQuery ngawari ma te huri i te tae o te kupu pane mai i te tae o muadefihe pango ki te tae matomato.
<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>I roto i te waehere i mahia e matou he mahi jQuery ngawari ma te huri i te tae o te pane ara ko te huānga te whakamahi i te kaiwhiriwhiri a te huānga jQuery me te css() tikanga ina reri te tuhinga, e mohiotia ana ko te takahanga rite tuhinga.
Ka timata te tauākī jQuery ki te tohu tāra ( $) ka mutu ki te tohu kopa ( ;).
I roto i te jQuery, te tohu taara ( $) he ingoa ingoa noa mo jQuery. Whakaarohia te tauira waehere e whai ake nei e whakaatu ana i te korero jQuery ngawari.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Ka whakaatu noa te tauira i te karere whakatupato "Hello I'm a JQuery sign” ki te kaiwhakamahi. Kia kite tatou i etahi ahuatanga:
<script>: He whare pukapuka JavaScript noa te jQuery, ka taea te whakauru waehere jQuery ki roto i te huānga <script>, ka taea ranei e koe te whakauru ki roto i te konae JavaScript o waho;$(document).ready(handler); e mohiotia ana he huihuinga rite. Kei hea handler he mahi ka tukuna ki te tikanga ka mahia, ina rite tonu te tuhinga, ara i te wa kua oti te hanga te hierarchy DOM.Ko te tikanga jQuery ready() ka whakamahia me te mahi ingoamuna. Na, ko te tauira i runga ake nei ka taea te tuhi ki te tuhi poto penei:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>I roto i tetahi mahi ka taea e koe te tuhi i nga korero jQuery ki te mahi i tetahi mahi e whai ake nei i te wetereo taketake, penei:
$(selector).action();Kei hea, $(selector) ka tohua e ia nga huānga HTML mai i te rakau DOM kia taea te raweke me te action() whakamahia etahi mahi ki runga i nga huānga kua tohua, penei i te whakarereke i te uara o te taonga CSS, te whakarite ranei i nga ihirangi o te huānga, aha atu.
Inaianei ka titiro tatou ki tetahi atu tauira e whakatakoto ana i nga kupu parawae:
<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>Ko te tauira jQuery e pa ana ki te kaiwhiriwhiri p, a ka tohua e tenei nga kowae katoa, katahi ko te tikanga text() tautuhia te ihirangi kuputuhi o te kōwae ki te "Hello World!".
Ko te kuputuhi kōwae i te tauira o mua ka whakakapi aunoa ina reri te tuhinga. Engari kia kite tatou me pehea te mahi mena ka hiahia koe ki te mahi i tetahi mahi i mua i te whakahaere i te waehere jQuery, hei whakakapi i te tuhinga o te kowae.
Ka whakaarohia e tatou tetahi tauira whakamutunga:
<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>I roto i tenei tauira ka whakakapihia te tuhinga o te parawae ina puta he takahanga paato i runga i te paatene "Replace Text", ko te tikanga ka paatohia e te kaiwhakamahi tenei paatene.
Ka taea e koe te whakamahi i te kaiwhiri ID ki te kowhiri i tetahi mea me te ID ahurei kei te wharangi.
Hei tauira, ko te waehere jQuery e whai ake nei ka tohua me te whakanui i tetahi huānga me te huanga ID id="markid", ina reri te tuhinga.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Ka taea te whakamahi i te kaiwhiri akomanga ki te kowhiri i nga huānga me tetahi akomanga motuhake.
Hei tauira, ko te waehere jQuery e whai ake nei ka tohua me te whakanui i nga huānga me te huanga o te akomanga class="markclass", ina reri te tuhinga.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Ka taea te whakamahi i te kaiwhiri tuemi ki te kowhiri i nga taonga ma te ingoa o nga taonga.
Hei tauira, ko te waehere jQuery e whai ake nei ka kowhiri me te whakaatu i nga waahanga katoa, ara ko nga huānga "<p>" o te tuhinga ina reri.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Ka taea e koe te whakamahi i te kaiwhiri huanga hei kowhiri i tetahi huānga i runga i tetahi o ona huanga HTML, penei i te huanga hono targette huanga ranei o te whakaurunga type, etc.
Hei tauira, ko te waehere jQuery e whai ake nei ka tohua me te whakaatu i nga whakaurunga kuputuhi katoa, penei i nga huānga "<input>" con type="text", ina reri te tuhinga.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Ka taea hoki e koe te whakakotahi i nga kaiwhiriwhiri CSS kia tino tika ake to whiringa.
Hei tauira, ka taea e koe te whakakotahi i te kaikowhiri akomanga me tetahi kaikowhiri huānga ki te kimi i nga huānga o te tuhinga he momo momo me tetahi karaehe.
<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>Hei taapiri atu ki nga kaiwhiriwhiri defiHeoi, ka whakarato a jQuery i tana ake kaikowhiri ritenga hei whakarei ake i te kaha ki te kowhiri i nga huānga o te wharangi.
<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>I te nuinga o nga wa ka puta nga huihuinga e te taunekeneke a te kaiwhakamahi ki te wharangi paetukutuku, penei i te panui i te hono, i te paatene ranei, te whakauru i te kuputuhi ki roto i te pouaka whakauru, te waahi kuputuhi ranei, te kowhiringa ki roto i te pouaka whiriwhiri, te pehi i te paatene ki te papapātuhi, te neke i te tohu kiore. , etc. I etahi wa, ka taea e te kaitirotiro ake te whakaoho i nga huihuinga, penei i te utaina o te whaarangi me te tango takahanga.
Ka whakapai ake a jQuery i nga tikanga whakahaere kaupapa ma te tuku tikanga takahanga mo te nuinga o nga huihuinga tirotiro taketake, ko etahi o enei tikanga he ready(), click(), keypress(), focus(), blur(), change(), etc.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>I te nuinga o te waa, ka taea te wehewehe i nga huihuinga ki nga roopu matua e wha:
Ka puta he takahanga kiore ka pao te kaiwhakamahi ki runga i tetahi mea, ka nukuhia te atatohu kiore, aha atu.
Anei etahi tikanga jQuery e whakamahia ana hei hapai i nga huihuinga kiore.
click()Te tikanga click() whakapirihia he mahi kaihautu kaupapa ki nga huānga kua tohua mo te huihuinga "click“. Ka mahia te mahi hono ina pao te kaiwhakamahi ki taua mea. Ko te tauira e whai ake nei ka huna nga huānga <p> i runga i te wharangi ina pawhiria.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Te tikanga dblclick() whakapirihia he mahi kaihautu kaupapa ki nga huānga kua tohua mo te huihuinga "dblclick“. Ka mahia te mahi hono ina pawhiri-rua e te kaiwhakamahi taua mea. Ko te tauira e whai ake nei ka huna nga huānga <p> ina pawhiri-rua ratou.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Te tikanga hover() whakapirihia kia kotahi, kia rua ranei nga mahi kaikawe takahanga ki nga huānga kua tohua ka mahia ina neke te atatohu kiore ki roto me waho o nga huānga. Ka haere te mahi tuatahi ina tuu te kaiwhakamahi i te atatohu kiore ki runga i tetahi mea, ka haere te mahi tuarua ina tangohia e te kaiwhakamahi te atatohu kiore mai i taua mea.
Ko te tauira e whai ake nei ka tohu i nga mea <p> ka tuu koe i te pehu ki runga, ka tangohia te miramira ina tangohia e koe te pehu.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Te tikanga mouseenter() whakapirihia he mahi kaihautu takahanga ki nga huānga kua tohua ka mahia ina uru te kiore ki tetahi huānga. Ko te tauira e whai ake nei ka taapiri i te tohu karaehe ki te huānga <p> ina tuu koe i te pehu ki runga.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Te tikanga mouseleave() whakapirihia he mahi kaihautu takahanga ki nga mea kua tohua ka haere ina wehe te kiore i tetahi mea. Ko te tauira e whai ake nei ka tango i te tohu karaehe mai i te huānga <p> ina tangohia e koe te pehu mai i reira.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Ka whakaarahia he takahanga papapātuhi ina pehia, ka tukuna ranei e te kaiwhakamahi tetahi ki runga papapātuhi. Me titiro ki etahi tikanga jQuery e whakamahia ana hei hapai i nga kaupapa papapātuhi.
keypress()Te tikanga keypress() ka piri he mahi whakahaere takahanga ki nga huānga kua tohua (te nuinga o nga mana whakahaere) ka haere ina whiwhi te kaitirotiro i te whakauru papapātuhi mai i te kaiwhakamahi. Ko te tauira e whai ake nei ka whakaatu i te karere ina whakaohohia te takahanga keypress me te maha o nga wa e paoho ana ina pehia e koe te ki o to papapātuhi.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>He rite te takahanga perehi ki te takahanga patuhi, engari ko nga taviri whakakē me te taviri kore penei i te Shift, Esc, Backspace, Mukua ranei, nga taviri pere, etc. ka tahuna e ratou nga kaupapa ki raro engari kaua ki nga kaupapa peehi.
keydown()Te tikanga keydown() ka whakapiri i tetahi mahi whakahaere takahanga ki nga mea kua tohua (te nuinga o nga mana whakahaere) ka mahia i te wa e pehi tuatahi ai te kaiwhakamahi i tetahi ki runga papapātuhi. Ko te tauira e whai ake nei ka whakaatu i te karere ina whakaohohia te takahanga keydown me te maha o nga wa e paoho ana ina pehia e koe te ki o to papapātuhi.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Te tikanga keyup() whakapirihia he mahi whakahaere takahanga ki nga huānga kua tohua (te nuinga o nga mana whakahaere) ka mahia ina tukuna e te kaiwhakamahi tetahi ki runga papapātuhi. Ko te tauira e whai ake nei ka whakaatu i te karere ina whakaohohia te takahanga keyup me te maha o nga wa e paoho ana ina pehia e koe me te tuku i tetahi ki runga i to papapātuhi.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Ka puta he takahanga puka ina whiwhi te mana puka, ka ngaro ranei te aro, ka huri ranei te kaiwhakamahi i tetahi uara mana puka, penei i te pato kupu ki roto i te whakauru kuputuhi, te kowhiri i tetahi whiringa ki te pouaka kua tohua, me era atu. Anei etahi tikanga jQuery e whakamahia nuitia ana hei hapai i nga huihuinga puka.
change()Te tikanga change() whakapirihia he mahi kaihautu kaupapa ki nga huānga <input> ka mahia ina huri tona uara. Ko te tauira e whai ake nei ka whakaatu i te panui whakatupato i te wa e kowhiri ana i tetahi whiringa i te pouaka whiriwhiringa taka-iho.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Mo nga pouaka paato, pouaka taki, me nga patene reo irirangi, ka mura tonu te takahanga ina kowhiria e te kaiwhakamahi te kowhiringa kiore, engari mo te whakauru kuputuhi me te waahi kuputuhi ka mura te takahanga i muri i te ngaronga o te aro o te huānga.
focus()Te tikanga focus() ka whakapiri i te mahi kaikawe takahanga ki nga huānga kua tohua (te nuinga ka whakahaere me te hanga i nga here) ka mahia ina ka aro. Ko te tauira e whai ake nei ka whakaatu i te karere ina whiwhi te urunga kuputuhi ki te arotahi.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Te tikanga blur() apitihia he mahi kaikawe takahanga hei hanga huānga penei <input>, <textarea>, <select> ka mahia ina ngaro te aro. Ko te tauira e whai ake nei ka whakaatu i te karere ina ngaro te aro o te whakauru kuputuhi.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Te tikanga submit() whakapirihia he mahi kaihautu kaupapa ki nga huānga <form> ka rere i te wa e ngana ana te kaiwhakamahi ki te tuku puka. Ko te tauira e whai ake nei ka whakaatu i tetahi karere i runga i te uara i whakauruhia i te wa e ngana ana ki te tuku i te puka.
<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>Ka puhia ano nga kaupapa i roto i te ahuatanga kua reri te wharangi DOM (Tauira Ahanoa Tuhinga) i te wa ka huri te kaiwhakamahi, ka panuku ranei te matapihi tirotiro, aha atu. Anei etahi tikanga jQuery e whakamahia ana hei hapai i tenei momo huihuinga.
ready()Te tikanga ready() he taumahi hei mahi ina utaina te DOM.
Ko te tauira e whai ake nei ka whakakapi i te tuhinga o te whiti ina oti te hanganga o te hierarchy DOM me te reri ki te raweke.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Te tikanga resize() āpitihia he mahi kaihautu takahanga ki te huānga matapihi ka rere ina huri te rahi o te matapihi tirotiro.
Ko te tauira e whai ake nei ka whakaatu i te whanui me te teitei o naianei o te matapihi tirotiro ka ngana koe ki te whakarereke i te rahi ma te toia ona kokonga.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Te tikanga scroll() āpitihia he mahi kaihautū takahanga ki te matapihi, ki te iframe me nga mea ka taea te panuku ka rere i nga wa katoa ka huri te tuunga panuku o te taonga.
Ko te tauira e whai ake nei ka whakaatu i te karere ina panuku i te matapihi tirotiro.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Ko te whakawhanake i nga pukenga motuka pai na roto i te tae ka whakarite i nga tamariki mo nga pukenga uaua ake penei i te tuhi. Ki te tae…
Ko te waahanga moana he mana ohaoha pono o te ao, kua whakatere ki te maakete 150 piriona ...
I te Mane kua hipa, i panuitia e te Financial Times tetahi mahi me OpenAI. Ka raihana a FT i tana kairipoata o te ao…
E hia miriona nga taangata e utu ana mo nga ratonga rerema, e utu ana i nga utu ohaurunga ia marama. Ko te whakaaro noa ko koe…