Tsim ib daim ntawv thov raws li Ajax dhau los ua qhov yooj yim thiab nrawm nrog jQuery.
jQuery yog Ameslikas tsim los ntawm John Resig thaum ntxov 2006. Lub jQuery project tam sim no tswj thiab tswj los ntawm ib pab pawg neeg tsim tawm raws li qhov qhib qhov project.
Koj tuaj yeem txuag sijhawm ntau thiab siv zog nrog jQuery. Yog li ntxiv qhov chaw no rau koj nyiam thiab nyeem ntxiv
Muaj ntau ntau yam uas koj tuaj yeem ua nrog jQuery.
Daim ntawv teev npe tsis xaus rau ntawd, muaj ntau lwm yam uas koj tuaj yeem ua nrog jQuery.
Muaj ntau qhov zoo vim li cas ib tus yuav tsum xaiv siv jQuery:
Txhawm rau pib, cia peb xub rub tawm ib daim qauv ntawm jQuery thiab tom qab ntawd suav nrog hauv peb qhov project. Ob versions ntawm jQuery muaj rau rub tawm: nrawm heev e tsis compressed .
Cov ntaub ntawv uncompressed zoo dua rau kev txhim kho lossis kev debugging; thaum, cov ntaub ntawv minified thiab compressed raug pom zoo rau ntau lawm vim nws txuag bandwidth thiab txhim kho kev ua tau zoo vim cov ntaub ntawv me me.
Peb tuaj yeem rub tawm jQuery los ntawm no: https://jquery.com/download/
Thaum koj rub tawm cov ntaub ntawv jQuery koj tuaj yeem pom tias nws muaj js txuas ntxiv, piv txwv li nws yog cov ntaub ntawv JavaScript. Qhov tseeb JQuery tsis muaj dab tsi tab sis lub tsev qiv ntawv JavaScript, yog li koj tuaj yeem suav nrog cov ntaub ntawv jQuery hauv HTML daim ntawv nrog lub caij ib yam li koj suav nrog cov ntaub ntawv JavaScript tsis tu ncua.
<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>Nco ntsoov ib txwm suav nrog cov ntaub ntawv jQuery ua ntej kev cai sau ntawv; txwv tsis pub, jQuery APIs yuav tsis muaj thaum koj jQuery code sim nkag mus rau lawv.
Raws li koj tau pom, peb hla tus cwj pwm hauv qhov piv txwv dhau los type="text/javascript" hauv tag . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiua tiav hauv HTML5 thiab hauv txhua qhov browser niaj hnub.
Raws li lwm txoj hauv kev, koj tuaj yeem embed jQuery rau hauv koj cov ntaub ntawv los ntawm kev pub dawb CDN (Cov ntsiab lus xa tawm Network) txuas, yog tias koj xav kom tsis txhob rub tawm cov ntaub ntawv.
CDNs tuaj yeem muab qhov ua tau zoo dua los ntawm kev txo lub sijhawm thauj khoom, vim tias lawv tuav jQuery ntawm ntau lub servers thoob ntiaj teb, thiab thaum tus neeg siv thov cov ntaub ntawv, nws yuav tau txais kev pabcuam los ntawm cov servers ze tshaj plaws.
Qhov no kuj muaj qhov zoo dua yog tias koj tus neeg tuaj saib nplooj ntawv web twb tau rub tawm ib daim qauv ntawm jQuery los ntawm tib CDN thaum mus saib lwm qhov chaw, lawv yuav tsis tas yuav rub tawm nws dua vim nws twb nyob hauv lawv lub browser cache.
Hauv qhov no koj yuav tsum sau:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Ntxiv rau CDN muab los ntawm jquery project, koj tuaj yeem suav nrog jQuery ntawm Google e Microsoft cdn.
Tau pom cov hom phiaj ntawm lub tsev qiv ntawv jQuery thiab yuav ua li cas muab tso rau hauv koj cov ntaub ntawv, tam sim no yog lub sijhawm los tso jQuery rau hauv kev xyaum.
Tam sim no cia peb ua ib qho yooj yim jQuery ua haujlwm los ntawm kev hloov cov ntawv header xim los ntawm cov xim ua ntejdefinished dub rau ntsuab xim.
<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>Hauv cov cai peb tau ua haujlwm yooj yim jQuery los ntawm kev hloov xim ntawm header piv txwv li lub caij siv lub jQuery element tus selector thiab css() txoj kev thaum cov ntaub ntawv npaj txhij, hu ua cov ntaub ntawv npaj kev tshwm sim.
Ib nqe lus jQuery feem ntau pib nrog tus lej kos npe ( $) thiab xaus nrog ib tug semicolon ( ;).
Hauv jQuery, tus lej kos npe ( $) tsuas yog lub npe hu ua jQuery. Xav txog cov qauv hauv qab no uas qhia tau hais tias jQuery yooj yim tshaj plaws.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Qhov piv txwv tsuas yog qhia cov lus ceeb toom "Hello I'm a JQuery sign"rau tus neeg siv. Cia peb saib qee qhov nta:
<script>: jQuery tsuas yog lub tsev qiv ntawv JavaScript xwb, jQuery code tuaj yeem muab tso rau hauv lub caij <script>, lossis koj tuaj yeem muab tso rau hauv cov ntaub ntawv JavaScript sab nraud;$(document).ready(handler); yog lub npe hu ua kev npaj txhij. Nws nyob qhov twg handler nws yog ib txoj haujlwm uas dhau mus rau txoj kev ua kom tiav, sai li sai tau raws li cov ntaub ntawv npaj tau, piv txwv li thaum DOM hierarchy tau ua tiav.Txoj kev jQuery ready() nws feem ntau yog siv nrog kev ua haujlwm tsis qhia npe. Yog li, piv txwv saum toj no kuj tseem tuaj yeem sau ua luv luv xws li no:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Hauv kev ua haujlwm koj tuaj yeem sau jQuery nqe lus los ua ib qho kev nqis tes ua raws li cov lus qhia yooj yim, xws li:
$(selector).action();Nws nyob qhov twg, $(selector) nws yeej xaiv cov ntsiab lus HTML los ntawm tsob ntoo DOM kom nws tuaj yeem tswj tau thiab action() siv qee qhov kev ua ntawm cov ntsiab lus xaiv, xws li hloov tus nqi ntawm CSS cov cuab yeej, lossis teeb tsa cov ntsiab lus ntawm lub caij, thiab lwm yam.
Tam sim no cia saib lwm qhov piv txwv uas teev cov kab lus:
<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>Cov piv txwv jQuery hais txog tus xaiv p, thiab qhov no xaiv tag nrho cov kab lus, ces txoj kev text() teeb tsa cov ntsiab lus ntawm kab lus nrog "Hello World!".
Cov kab lus hauv qhov piv txwv dhau los tau hloov pauv thaum cov ntaub ntawv npaj txhij. Tab sis cia saib yuav ua li cas yog tias koj xav ua ib qho kev txiav txim ua ntej khiav jQuery code, hloov cov ntawv ntawm kab lus.
Cia peb xav txog ib qho piv txwv kawg:
<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>Hauv qhov piv txwv no cov kab lus ntawv tau hloov tsuas yog thaum muaj kev tshwm sim nyem tshwm sim ntawm lub pob "Replace Text", uas tsuas yog txhais tau tias thaum tus neeg siv nyem lub pob no.
Koj tuaj yeem siv tus ID xaiv los xaiv ib yam khoom nrog tus ID tshwj xeeb ntawm nplooj ntawv.
Piv txwv li, jQuery code hauv qab no yuav xaiv thiab hais txog ib lub caij nrog tus cwj pwm ID id="markid", thaum cov ntaub ntawv npaj txhij.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Tus neeg xaiv chav kawm tuaj yeem siv los xaiv cov ntsiab lus nrog cov chav kawm tshwj xeeb.
Piv txwv li, jQuery code hauv qab no yuav xaiv thiab qhia cov ntsiab lus nrog rau chav kawm attribute class="markclass", thaum cov ntaub ntawv npaj txhij.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Cov khoom xaiv tuaj yeem siv los xaiv cov khoom los ntawm cov npe khoom.
Piv txwv li, jQuery code hauv qab no yuav xaiv thiab qhia tag nrho cov kab lus, piv txwv li cov ntsiab lus "<p>" ntawm cov ntaub ntawv thaum nws npaj txhij.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Koj tuaj yeem siv tus cwj pwm xaiv los xaiv cov khoom raws li ib qho ntawm nws cov cwj pwm HTML, xws li tus cwj pwm txuas targetlos yog tus cwj pwm ntawm kev nkag type, thiab lwm yam.
Piv txwv li, jQuery code hauv qab no yuav xaiv thiab qhia tag nrho cov ntawv nkag, xws li cov ntsiab lus "<input>" con type="text", thaum cov ntaub ntawv npaj txhij.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Koj tuaj yeem ua ke CSS selectors los ua kom koj cov kev xaiv ntau dua.
Piv txwv li, koj tuaj yeem muab cov chav kawm xaiv nrog cov khoom xaiv los nrhiav cov ntsiab lus hauv cov ntaub ntawv uas muaj qee hom thiab chav kawm.
<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>Ntxiv nrog rau cov selectors definiti, jQuery muab nws tus kheej kev xaiv xaiv los txhim kho lub peev xwm ntawm kev xaiv cov ntsiab lus ntawm nplooj ntawv.
<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>Cov xwm txheej feem ntau tshwm sim los ntawm cov neeg siv kev sib cuam tshuam nrog nplooj ntawv web, xws li thaum nyem qhov txuas lossis khawm, nkag mus rau hauv cov ntawv sau rau hauv lub thawv ntawv lossis cheeb tsam ntawv, xaiv lub thawv xaiv, nias tus yuam sij ntawm cov keyboard, txav tus nas pointer , lwm. Qee zaum, qhov browser nws tus kheej tuaj yeem ua rau muaj xwm txheej, xws li nplooj ntawv thauj khoom thiab rub tawm cov xwm txheej.
jQuery txhim kho ntawm cov xwm txheej yooj yim tuav cov txheej txheem los ntawm kev muab cov txheej txheem tshwm sim rau feem ntau cov xwm txheej hauv browser, qee yam ntawm cov txheej txheem no yog ready(), click(), keypress(), focus(), blur(), change(), thiab lwm yam.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Feem ntau, cov xwm txheej tuaj yeem muab faib ua plaub pawg loj:
Kev tshwm sim nas tshwm sim thaum tus neeg siv nyem rau ntawm ib yam khoom, txav tus nas pointer, thiab lwm yam.
Nov yog qee txoj hauv kev siv jQuery los daws cov xwm txheej nas.
click()Txoj kev click() xa ib qho kev tshwm sim handler muaj nuj nqi rau cov khoom xaiv rau qhov kev tshwm sim "click". Txoj haujlwm txuas txuas ua haujlwm thaum tus neeg siv nyem rau ntawm qhov khoom ntawd. Cov piv txwv hauv qab no yuav zais cov ntsiab lus <p> ntawm ib nplooj ntawv thaum nias.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Txoj kev dblclick() xa ib qho kev tshwm sim handler muaj nuj nqi rau cov khoom xaiv rau qhov kev tshwm sim "dblclick". Cov haujlwm txuas txuas ua haujlwm thaum tus neeg siv ob-nias cov khoom ntawd. Cov piv txwv hauv qab no yuav zais cov ntsiab lus <p> thaum ob-nias lawv.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Txoj kev hover() xa ib lossis ob qhov xwm txheej handler ua haujlwm rau cov khoom xaiv uas ua tiav thaum tus nas pointer txav mus rau hauv thiab tawm ntawm cov khoom. Thawj qhov ua haujlwm khiav thaum tus neeg siv tso tus nas pointer hla ib yam khoom, thaum lub luag haujlwm thib ob khiav thaum tus neeg siv tshem tus nas pointer ntawm cov khoom ntawd.
Cov piv txwv hauv qab no yuav qhia txog cov khoom <p> Thaum koj tso tus cursor rau nws, qhov tseem ceeb yuav raug tshem tawm thaum koj tshem tus cursor.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Txoj kev mouseenter() xa ib qho kev tshwm sim handler muaj nuj nqi rau cov khoom xaiv uas raug tua thaum tus nas nkag rau hauv ib lub caij. Cov piv txwv hauv qab no yuav ntxiv cov ntsiab lus hauv chav kawm rau lub caij <p> thaum koj tso tus cursor rau nws.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Txoj kev mouseleave() txuas ib qho kev tshwm sim handler muaj nuj nqi rau cov khoom xaiv uas khiav thaum tus nas tawm ib yam khoom. Cov piv txwv hauv qab no yuav tshem tawm cov chav kawm tseem ceeb ntawm lub caij <p> thaum koj tshem tus cursor ntawm nws.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Ib qho kev tshwm sim ntawm cov keyboard raug tsa thaum tus neeg siv nias lossis tso tus yuam sij ntawm cov keyboard. Cia peb saib qee txoj kev siv jQuery los tswj cov xwm txheej keyboard.
keypress()Txoj kev keypress() txuas qhov kev tshwm sim-kawg muaj nuj nqi rau cov ntsiab lus xaiv (feem ntau daim ntawv tswj) uas khiav thaum lub browser tau txais cov keyboard nkag los ntawm tus neeg siv. Cov piv txwv hauv qab no yuav tso tawm cov lus thaum qhov xwm txheej tshwm sim keypress thiab pes tsawg zaus nws tau tshwm sim thaum koj nias tus yuam sij ntawm koj cov keyboard.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Cov keypress tshwm sim zoo ib yam li cov xwm txheej tseem ceeb, tshwj tsis yog qhov hloov pauv thiab tsis luam cov yuam sij xws li Shift, Esc, Backspace lossis Delete, xub yuam sij, thiab lwm yam. lawv tua cov xwm txheej tseem ceeb tab sis tsis yog keypress txheej xwm.
keydown()Txoj kev keydown() txuas ib qho kev tshwm sim-kawg muaj nuj nqi rau cov khoom xaiv (feem ntau daim ntawv tswj) uas raug tua thaum tus neeg siv thawj nias tus yuam sij ntawm cov keyboard. Cov piv txwv hauv qab no yuav tso tawm cov lus thaum qhov xwm txheej tshwm sim keydown thiab pes tsawg zaus nws tau tshwm sim thaum koj nias tus yuam sij ntawm koj cov keyboard.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Txoj kev keyup() xa ib qho kev tshwm sim-kawg muaj nuj nqi rau cov ntsiab lus xaiv (feem ntau daim ntawv tswj) uas raug tua thaum tus neeg siv tso tus yuam sij ntawm cov keyboard. Cov piv txwv hauv qab no yuav tso tawm cov lus thaum qhov xwm txheej tshwm sim keyup thiab ntau npaum li cas nws tshwm sim thaum koj nias thiab tso tus yuam sij ntawm koj cov keyboard.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Ib daim ntawv tshwm sim tshwm sim thaum daim ntawv tswj tau txais lossis tsis pom tseeb, lossis thaum tus neeg siv hloov pauv tus nqi tswj daim ntawv, xws li ntaus ntawv rau hauv cov ntawv sau, xaiv qhov kev xaiv hauv lub thawv xaiv, thiab lwm yam. Nov yog qee txoj hauv kev siv jQuery los lis cov xwm txheej.
change()Txoj kev change() txuas qhov kev tshwm sim handler muaj nuj nqi rau cov khoom <input> thiab raug tua thaum nws tus nqi hloov pauv. Cov piv txwv hauv qab no yuav tso tawm cov lus ceeb toom thaum xaiv ib qho kev xaiv hauv lub npov xaiv xaiv.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Rau cov ntawv nyem, kos lub thawv, thiab cov xov tooj cua, qhov xwm txheej tshwm sim tam sim ntawd thaum tus neeg siv xaiv tus nas, tab sis rau cov ntawv sau thiab cov ntawv hauv cheeb tsam qhov xwm txheej hluav taws kub tom qab lub caij poob tsom.
focus()Txoj kev focus() txuas ib qho kev tshwm sim handler muaj nuj nqi rau cov ntsiab lus xaiv (feem ntau yog tswj thiab daim ntawv khi) uas ua tiav thaum nws tau ua kom pom tseeb. Cov piv txwv hauv qab no yuav tso tawm cov lus thaum cov ntawv nkag tau txais kev tsom.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Txoj kev blur() txuas qhov kev tshwm sim handler muaj nuj nqi los tsim cov ntsiab lus xws li <input>, <textarea>, <select> uas raug tua thaum nws poob tsom. Cov piv txwv hauv qab no yuav tso tawm cov lus thaum cov ntawv nyeem tsis pom tseeb.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Txoj kev submit() txuas qhov kev tshwm sim handler muaj nuj nqi rau cov khoom <form> uas khiav thaum tus neeg siv sim xa daim foos. Cov piv txwv hauv qab no yuav tso tawm cov lus raws li tus nqi nkag thaum sim xa daim ntawv.
<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>Cov xwm txheej tseem raug rho tawm haujlwm nyob rau hauv qhov xwm txheej uas DOM (Cov Ntaub Ntawv Hom Qauv) nplooj ntawv npaj tau lossis thaum tus neeg siv hloov pauv lossis scrolls lub qhov rais browser, thiab lwm yam. Nov yog qee txoj hauv kev siv jQuery los daws cov xwm txheej no.
ready()Txoj kev ready() qhia meej txog kev ua haujlwm kom ua tiav thaum DOM tau thauj khoom tag nrho.
Cov piv txwv hauv qab no yuav hloov cov kab lus sai li sai tau thaum DOM hierarchy tau ua tiav thiab npaj txhij los tswj.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Txoj kev resize() xa ib qho kev tshwm sim handler muaj nuj nqi rau lub qhov rais caij uas khiav thaum qhov loj ntawm qhov browser qhov rais hloov.
Cov piv txwv hauv qab no yuav qhia qhov dav tam sim no thiab qhov siab ntawm qhov browser qhov rai thaum koj sim hloov nws los ntawm rub nws cov ces kaum.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Txoj kev scroll() txuas ib qho kev tshwm sim handler muaj nuj nqi rau lub qhov rais los yog rau lub iframe thiab cov khoom scrollable uas khiav thaum twg lub scroll txoj hauj lwm ntawm cov khoom hloov.
Cov piv txwv hauv qab no yuav tso tawm cov lus thaum scrolling lub qhov rais browser.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Coveware los ntawm Veeam yuav txuas ntxiv muab kev pabcuam cyber extortion xwm txheej teb. Coveware yuav muaj peev xwm ua pov thawj thiab kho…
Kev kwv yees kev saib xyuas yog hloov pauv cov roj & roj sector, nrog rau txoj hauv kev tshiab thiab muaj txiaj ntsig rau kev tswj cov nroj tsuag.…
UK CMA tau tshaj tawm lus ceeb toom txog Big Tech tus cwj pwm hauv kev lag luam kev txawj ntse. Nyob ntawd…
Txoj Cai "Case Green", tsim los ntawm European Union los txhim kho lub zog ua haujlwm ntawm cov tsev, tau xaus nws txoj kev cai lij choj nrog…