Ajax-based application ကိုဖန်တီးခြင်းသည် jQuery ဖြင့် အလွန်ရိုးရှင်းပြီး မြန်ဆန်ပါသည်။
jQuery ကို 2006 ခုနှစ်အစောပိုင်းတွင် John Resig မှဖန်တီးခဲ့သည်။ jQuery ပရောဂျက်ကို open source ပရောဂျက်တစ်ခုအဖြစ် ဖြန့်ဝေထားသော developer တစ်စုမှ ထိန်းသိမ်းထိန်းသိမ်းထားသည်။
jQuery ဖြင့် အချိန်နှင့် ကြိုးစားအားထုတ်မှုများစွာကို သက်သာစေနိုင်သည်။ ထို့ကြောင့် ဤဆိုဒ်ကို သင့်စိတ်ကြိုက်များထဲသို့ ထည့်ကာ ဆက်လက်ဖတ်ရှုပါ။
jQuery နဲ့ သင်လုပ်နိုင်တာတွေ အများကြီးရှိပါသေးတယ်။
စာရင်းသည် ထိုနေရာတွင် အဆုံးမရှိပါ၊ jQuery ဖြင့် သင်လုပ်နိုင်သော အခြားအမိုက်စားအရာများစွာရှိပါသည်။
jQuery ကိုအသုံးပြုရန် ရွေးချယ်သင့်သည့် အကျိုးကျေးဇူးများစွာရှိပါသည်။
စတင်ရန်အတွက် jQuery မိတ္တူကို ဦးစွာဒေါင်းလုဒ်လုပ်ပြီး ကျွန်ုပ်တို့၏ပရောဂျက်တွင် ထည့်သွင်းလိုက်ကြပါစို့။ jQuery ၏ ဗားရှင်းနှစ်မျိုးကို ဒေါင်းလုဒ်လုပ်နိုင်ပါသည်။ အရင်လို e compressed မဟုတ်ပါ။ .
ချုံ့မထားသောဖိုင်သည် ဖွံ့ဖြိုးတိုးတက်မှု သို့မဟုတ် အမှားရှာပြင်ခြင်းအတွက် ပိုသင့်တော်ပါသည်။ တစ်ချိန်တည်းတွင်၊ ၎င်းသည် bandwidth ကိုသက်သာစေပြီး ဖိုင်အရွယ်အစားသေးငယ်သောကြောင့် စွမ်းဆောင်ရည်ကိုမြှင့်တင်ပေးသောကြောင့် အသေးစားနှင့်ချုံ့ထားသောဖိုင်ကို ထုတ်လုပ်ရန်အတွက် အကြံပြုထားသည်။
jQuery ကို ဤနေရာတွင် ဒေါင်းလုဒ်လုပ်နိုင်ပါသည်။ https://jquery.com/download/
jQuery ဖိုင်ကို ဒေါင်းလုဒ်ဆွဲပြီးသည်နှင့် ၎င်းတွင် js extension တစ်ခုပါရှိသည်၊ ဆိုလိုသည်မှာ ၎င်းသည် JavaScript ဖိုင်ဖြစ်သည်။ တကယ်တော့ JQuery သည် JavaScript စာကြည့်တိုက်မှလွဲ၍ ဘာမှမဖြစ်ပါ၊ ထို့ကြောင့် သင်သည် HTML စာရွက်စာတမ်းတွင် jQuery ဖိုင်ကို element ဖြင့်ထည့်သွင်းနိုင်သည်။ ပုံမှန် 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>စိတ်ကြိုက် script များရှေ့တွင် jQuery ဖိုင်ကို အမြဲထည့်သွင်းရန် မမေ့ပါနှင့်။ မဟုတ်ပါက၊ သင်၏ jQuery ကုဒ်ကို ဝင်ရောက်ရန် ကြိုးစားသောအခါ jQuery APIs များကို မရနိုင်ပါ။
သင်သတိပြုမိသည့်အတိုင်း၊ ကျွန်ုပ်တို့သည် ယခင်ဥပမာတွင် အရည်အချင်းကို ကျော်သွားခဲ့သည်။ type="text/javascript" tag အတွင်း . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiHTML5 နှင့် ခေတ်မီဘရောက်ဆာများအားလုံးတွင် အပြီးသတ်သည်။
အခြားရွေးချယ်စရာအနေဖြင့်၊ သင်သည် ဖိုင်ကိုဒေါင်းလုဒ်ဆွဲခြင်းကို ရှောင်ကြဉ်လိုပါက လွတ်လပ်စွာရရှိနိုင်သော CDN (Content Delivery Network) လင့်ခ်များမှတစ်ဆင့် jQuery ကို သင့်စာရွက်စာတမ်းတွင် ထည့်သွင်းနိုင်သည်။
CDN များသည် ဝန်ချိန်ကို လျှော့ချခြင်းဖြင့် စွမ်းဆောင်ရည် အားသာချက်ကို ပေးစွမ်းနိုင်သည်၊ အကြောင်းမှာ ၎င်းတို့သည် ကမ္ဘာတစ်ဝှမ်းရှိ ဆာဗာများစွာတွင် jQuery ကို လက်ခံဆောင်ရွက်ပေးပြီး အသုံးပြုသူတစ်ဦးမှ ဖိုင်ကို တောင်းဆိုသောအခါ၊ ၎င်းကို အနီးစပ်ဆုံး ဆာဗာမှ ဆောင်ရွက်ပေးမည်ဖြစ်သည်။
အကယ်၍ သင့်ဝဘ်စာမျက်နှာကို လည်ပတ်သူသည် အခြားဆိုက်များသို့လည်ပတ်စဉ် CDN တစ်ခုတည်းမှ jQuery ကော်ပီကို ဒေါင်းလုဒ်လုပ်ပြီးပါက၊ ၎င်းသည် ၎င်းတို့၏ဘရောက်ဆာ၏ cache တွင်ရှိပြီးသားဖြစ်သောကြောင့် ၎င်းတို့သည် ၎င်းကို ထပ်မံဒေါင်းလုဒ်လုပ်ရန် မလိုအပ်တော့ခြင်းလည်းဖြစ်သည်။
ဤကိစ္စတွင်သင်ရေးရပါမည်:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>jquery ပရောဂျက်မှ ပံ့ပိုးပေးသော CDN အပြင်၊ သင်သည် jQuery မှတဆင့် ထည့်သွင်းနိုင်သည်။ Google e Microsoft က CDN
jQuery စာကြည့်တိုက်၏ ရည်မှန်းချက်များနှင့် ၎င်းကို သင့်စာရွက်စာတမ်းတွင် မည်သို့ထည့်သွင်းရမည်ကို တွေ့မြင်ရပြီး၊ ယခုအချိန်သည် jQuery ကို လက်တွေ့လုပ်ဆောင်ရမည့်အချိန်ဖြစ်သည်။
အခု ခေါင်းစီးစာသားအရောင်ကို အကြိုအရောင်ကနေ ပြောင်းပြီး ရိုးရှင်းတဲ့ jQuery လုပ်ဆောင်ချက်ကို လုပ်ကြည့်ရအောင်defiအနက်မှ အစိမ်းရင့်ရောင်။
<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>ကုဒ်တွင် ကျွန်ုပ်တို့သည် ခေါင်းစီး၏အရောင်ကို ပြောင်းလဲခြင်းဖြင့် ရိုးရှင်းသော jQuery လုပ်ဆောင်ချက်ကို လုပ်ဆောင်ခဲ့သည်။ စာရွက်စာတမ်းအဆင်သင့်ဖြစ်သောအခါတွင် jQuery ဒြပ်စင်၏ရွေးချယ်ရေးကိရိယာနှင့် css() နည်းလမ်းကို အသုံးပြု၍ စာရွက်စာတမ်းအဆင်သင့်ဖြစ်ပြီဟု လူသိများသည်။
jQuery ကြေငြာချက်တစ်ခုသည် များသောအားဖြင့် ဒေါ်လာသင်္ကေတဖြင့် စတင်သည် ( $) သည် semicolon ဖြင့် အဆုံးသတ်သည် ( ;).
jQuery တွင် ဒေါ်လာ သင်္ကေတ ( $) သည် jQuery အတွက် alias တစ်ခုသာဖြစ်သည်။ အရိုးရှင်းဆုံး jQuery ထုတ်ပြန်ချက်ကို သရုပ်ပြသည့် အောက်ပါနမူနာကုဒ်ကို သုံးသပ်ကြည့်ပါ။
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>ဥပမာတွင် သတိပေးစာတိုကို ရိုးရိုးရှင်းရှင်း ပြပေးသည်Hello I'm a JQuery sign"အသုံးပြုသူထံသို့။ အင်္ဂါရပ်အချို့ကို ကြည့်ကြပါစို့။
<script>jQuery သည် JavaScript စာကြည့်တိုက်တစ်ခုသာဖြစ်ပြီး jQuery ကုဒ်ကို ဒြပ်စင်အတွင်းတွင် ထားရှိနိုင်ပါသည်။ <script>သို့မဟုတ် ပြင်ပ JavaScript ဖိုင်တွင် ထည့်နိုင်သည်။$(document).ready(handler); Ready event လို့ ခေါ်တယ်။ ဘယ်မှာလဲ handler ၎င်းသည် စာရွက်စာတမ်း အဆင်သင့်ဖြစ်သည်နှင့်တပြိုင်နက်၊ ဆိုလိုသည်မှာ DOM အထက်အောက် အပြီးအသတ်တည်ဆောက်ပြီးသည့်အချိန်တွင် ၎င်းသည် လုပ်ဆောင်ရမည့်နည်းလမ်းသို့ ပေးပို့သည့် လုပ်ဆောင်ချက်တစ်ခုဖြစ်သည်။jQuery နည်းလမ်း ready() ၎င်းကို အများအားဖြင့် အမည်မသိလုပ်ဆောင်ချက်တစ်ခုဖြင့် အသုံးပြုသည်။ ထို့ကြောင့် အထက်ဖော်ပြပါ ဥပမာကို ဤကဲ့သို့သော လက်တိုသင်္ကေတဖြင့် ရေးသားနိုင်သည်။
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>လုပ်ဆောင်ချက်တစ်ခုအတွင်းတွင်၊ ကဲ့သို့သော အခြေခံ syntax တစ်ခုခုကို လုပ်ဆောင်ရန် jQuery ကြေညာချက်များကို သင်ရေးသားနိုင်သည်-
$(selector).action();ချိုးငှက်၊ $(selector) ၎င်းသည် အခြေခံအားဖြင့် DOM သစ်ပင်မှ HTML ဒြပ်စင်များကို ရွေးချယ်ပြီး ၎င်းကို ခြယ်လှယ်နိုင်သည်။ action() CSS ပိုင်ဆိုင်မှုတန်ဖိုးကို ပြောင်းလဲခြင်း၊ သို့မဟုတ် ဒြပ်စင်၏ အကြောင်းအရာကို သတ်မှတ်ခြင်းစသည်ဖြင့် ရွေးချယ်ထားသော ဒြပ်စင်များအပေါ် အချို့သော လုပ်ဆောင်ချက်များကို အသုံးပြုပါ။
ယခု စာပိုဒ်ကို သတ်မှတ်သည့် အခြားဥပမာကို ကြည့်ကြပါစို့။
<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>jQuery ဥပမာသည် ရွေးချယ်သူအား ရည်ညွှန်းသည်။ p၎င်းသည် စာပိုဒ်အားလုံးကို ရွေးသည်၊ ထို့နောက် နည်းလမ်းကို ရွေးသည်။ text() စာပိုဒ်၏ စာသားအကြောင်းအရာကို ""Hello World!"။
စာရွက်စာတမ်းအဆင်သင့်ဖြစ်သောအခါ ယခင်ဥပမာရှိ စာပိုဒ်ကို အလိုအလျောက်အစားထိုးပါသည်။ ဒါပေမယ့် စာပိုဒ်ရဲ့ စာသားကို အစားထိုးဖို့ jQuery ကုဒ်ကို မ run ခင် လုပ်ဆောင်ချက်တစ်ခု လုပ်ဆောင်ချင်ရင် ဘယ်လိုလုပ်ရမလဲဆိုတာ ကြည့်ရအောင်။
နောက်ဆုံး ဥပမာတစ်ခုကို သုံးသပ်ကြည့်ရအောင်။
<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>ဤဥပမာတွင် ခလုတ် """"""""""""""""Replace Text“၊ ဆိုလိုသည်မှာ အသုံးပြုသူတစ်ဦးသည် ဤခလုတ်ကို နှိပ်သည့်အခါ ရိုးရှင်းစွာ ဆိုလိုသည်။
စာမျက်နှာပေါ်ရှိ ထူးခြားသော ID ပါသည့် အကြောင်းအရာတစ်ခုတည်းကို ရွေးချယ်ရန် ID ရွေးချယ်မှုအား သင်အသုံးပြုနိုင်သည်။
ဥပမာအားဖြင့်၊ အောက်ပါ jQuery ကုဒ်သည် ID ရည်ညွှန်းချက်ပါရှိသော အရာတစ်ခုကို ရွေးချယ်ပြီး မီးမောင်းထိုးပြပါမည်။ id="markid"စာရွက်စာတမ်းအဆင်သင့်ဖြစ်သောအခါ။
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>အတန်းရွေးချယ်မှုအား သီးခြားအတန်းတစ်ခုဖြင့် အစိတ်အပိုင်းများကို ရွေးချယ်ရန် အသုံးပြုနိုင်သည်။
ဥပမာအားဖြင့်၊ အောက်ပါ jQuery ကုဒ်သည် class attribute ဖြင့် အစိတ်အပိုင်းများကို ရွေးချယ်ပြီး မီးမောင်းထိုးပြပါမည်။ class="markclass"စာရွက်စာတမ်းအဆင်သင့်ဖြစ်သောအခါ။
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>ပစ္စည်းရွေးချယ်မှုအား အကြောင်းအရာအမည်ဖြင့် ဖိုင်များကို ရွေးချယ်ရန် အသုံးပြုနိုင်သည်။
ဥပမာအားဖြင့်၊ အောက်ပါ jQuery ကုဒ်သည် စာပိုဒ်အားလုံးကို ရွေးချယ်ပြီး ပေါ်လွင်စေမည်၊ ဆိုလိုသည်မှာ အစိတ်အပိုင်းများဖြစ်သည်။ "<p>" စာရွက်စာတမ်းအဆင်သင့်ဖြစ်သောအခါ။
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>လင့်ခ် attribute ကဲ့သို့သော ၎င်း၏ HTML ရည်ညွှန်းချက်တစ်ခုအပေါ် အခြေခံ၍ အင်္ဂါရပ်တစ်ခုအား ရွေးချယ်ရန် attribute ရွေးချယ်ကိရိယာကို သင်အသုံးပြုနိုင်သည်။ targetသို့မဟုတ် ထည့်သွင်းမှုတစ်ခု၏ ရည်ညွှန်းချက် typeစသည်တို့
ဥပမာအားဖြင့်၊ အောက်ပါ jQuery ကုဒ်သည် အစိတ်အပိုင်းများကဲ့သို့သော စာသားထည့်သွင်းမှုများအားလုံးကို ရွေးချယ်ပြီး မီးမောင်းထိုးပြမည်ဖြစ်သည်။ "<input>" နှင့် type="text"စာရွက်စာတမ်းအဆင်သင့်ဖြစ်သောအခါ။
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>သင်၏ရွေးချယ်မှုကို ပိုမိုတိကျစေရန်အတွက် CSS ရွေးချယ်မှုများကိုလည်း ပေါင်းစပ်နိုင်သည်။
ဥပမာအားဖြင့်၊ သင်သည် သတ်မှတ်ထားသော အမျိုးအစားနှင့် အတန်းများပါရှိသော စာရွက်စာတမ်းတစ်ခုရှိ ဒြပ်စင်များကို ရှာဖွေရန် အတန်းရွေးချယ်မှုအား အစိတ်အပိုင်းရွေးချယ်မှုကိရိယာတစ်ခုနှင့် ပေါင်းစပ်နိုင်သည်။
<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>ရွေးချယ်မှုများအပြင် definiti၊ jQuery သည် စာမျက်နှာတစ်ခုပေါ်ရှိ အစိတ်အပိုင်းများကို ရွေးချယ်ခြင်းဆိုင်ရာ စွမ်းရည်များကို ပိုမိုမြှင့်တင်ရန်အတွက် ၎င်း၏ကိုယ်ပိုင်ရွေးချယ်မှုစနစ်ကို ပံ့ပိုးပေးပါသည်။
<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>လင့်ခ် သို့မဟုတ် ခလုတ်ကို နှိပ်သည့်အခါ၊ အဝင်အကွက် သို့မဟုတ် စာသားဧရိယာထဲသို့ စာသားထည့်ခြင်း၊ ရွေးချယ်မှုအကွက်တစ်ခုတွင် ရွေးချယ်ခြင်း၊ ကီးဘုတ်ပေါ်ရှိ ခလုတ်တစ်ခုကို နှိပ်ခြင်း၊ မောက်စ်ညွှန်သူကို ရွှေ့ခြင်းကဲ့သို့သော ဝဘ်စာမျက်နှာနှင့် သုံးစွဲသူ အပြန်အလှန် အပြန်အလှန်တုံ့ပြန်မှုကြောင့် အဖြစ်အပျက်များကို မကြာခဏ ဖြစ်ပေါ်လေ့ရှိသည်။ စသည်တို့ အချို့သောကိစ္စများတွင်၊ ဘရောက်ဆာကိုယ်တိုင်က စာမျက်နှာဖွင့်ခြင်းနှင့် ဒေါင်းလုဒ်လုပ်ခြင်းများကဲ့သို့ ဖြစ်ရပ်များကို အစပျိုးနိုင်သည်။
jQuery သည် မူလဘရောက်ဆာဖြစ်ရပ်အများစုအတွက် အဖြစ်အပျက်နည်းလမ်းများကို ပေးဆောင်ခြင်းဖြင့် အခြေခံဖြစ်ရပ်ကိုင်တွယ်မှု ယန္တရားများကို တိုးတက်ကောင်းမွန်စေသည်၊ အချို့သောနည်းလမ်းများမှာ ready(), click(), keypress(), focus(), blur(), change()စသည်တို့
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>ယေဘူယျအားဖြင့် ပွဲများကို အဓိကအုပ်စုလေးခုအဖြစ် ခွဲခြားနိုင်သည်။
အသုံးပြုသူသည် အရာတစ်ခုကို နှိပ်လိုက်သောအခါ၊ မောက်စ်ညွှန်သူကို ရွှေ့လိုက်သည့်အခါ မောက်စ်ဖြစ်ရပ်တစ်ခု အစပျိုးသည်။
ဤသည်မှာ မောက်စ်ဖြစ်ရပ်များကို ကိုင်တွယ်ရန် အသုံးများသော jQuery နည်းလမ်းအချို့ဖြစ်သည်။
click()အဆိုပါနည်းလမ်း click() Event handler function ကို event အတွက် ရွေးချယ်ထားသော element များသို့ ပူးတွဲပါclick“ အသုံးပြုသူသည် ထိုအရာကို နှိပ်သည့်အခါ လင့်ခ်ချိတ်ထားသော လုပ်ဆောင်ချက်ကို လုပ်ဆောင်သည်။ အောက်ပါဥပမာသည် element များကိုဝှက်ထားလိမ့်မည်။ <p> နှိပ်လိုက်သောအခါ စာမျက်နှာတစ်ခုပေါ်တွင်
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()အဆိုပါနည်းလမ်း dblclick() Event handler function ကို event အတွက် ရွေးချယ်ထားသော element များသို့ ပူးတွဲပါdblclick“ အသုံးပြုသူက ထိုအရာကို နှစ်ချက်နှိပ်လိုက်သောအခါ လင့်ခ်ချိတ်ထားသော လုပ်ဆောင်ချက်ကို လုပ်ဆောင်သည်။ အောက်ပါဥပမာသည် element များကိုဝှက်ထားလိမ့်မည်။ <p> သူတို့ကို double-click လုပ်တဲ့အခါ။
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()အဆိုပါနည်းလမ်း hover() mouse pointer သည် element များအတွင်းနှင့်အပြင်သို့ရွေ့လျားသောအခါလုပ်ဆောင်သည့်ရွေးချယ်ထားသောဒြပ်စင်များသို့ event handler function တစ်ခု သို့မဟုတ် နှစ်ခုကို ပူးတွဲပါ။ အသုံးပြုသူသည် အရာတစ်ခုအပေါ် မောက်စ်ညွှန်သူကို နေရာချသည့်အခါ ပထမလုပ်ဆောင်ချက်သည် လုပ်ဆောင်နေပြီး၊ အသုံးပြုသူသည် ထိုအရာမှ မောက်စ်ညွှန်သူကို ဖယ်ရှားသည့်အခါ ဒုတိယလုပ်ဆောင်ချက်ကို လုပ်ဆောင်သည်။
အောက်ပါဥပမာသည် အကြောင်းအရာများကို မီးမောင်းထိုးပြပါမည်။ <p> ကာဆာကို သင်တင်လိုက်သောအခါ၊ ကာဆာကို ဖယ်ရှားလိုက်သောအခါတွင် မီးမောင်းထိုးပြမှုကို ဖယ်ရှားမည်ဖြစ်သည်။
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()အဆိုပါနည်းလမ်း mouseenter() မောက်စ်သည် ဒြပ်စင်တစ်ခုသို့ ဝင်ရောက်သောအခါ လုပ်ဆောင်သည့် ရွေးချယ်ထားသော အစိတ်အပိုင်းများသို့ ဖြစ်ရပ်ကိုင်တွယ်သူ လုပ်ဆောင်ချက်ကို ပူးတွဲပါ။ အောက်ဖော်ပြပါ ဥပမာသည် အတန်းအစား အသားပေးဖော်ပြခြင်းကို ပေါင်းထည့်ပါမည်။ <p> ကာဆာကို အဲဒီအပေါ်မှာ သင်တင်လိုက်တဲ့အခါ။
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()အဆိုပါနည်းလမ်း mouseleave() မောက်စ်မှ အရာတစ်ခုကို ထွက်သွားသည့်အခါ လုပ်ဆောင်သည့် ရွေးချယ်ထားသော အရာများသို့ ဖြစ်ရပ်ကိုင်တွယ်သူ လုပ်ဆောင်ချက်ကို ပူးတွဲပါ။ အောက်ဖော်ပြပါ ဥပမာသည် အတန်း၏ အသားပေးဖော်ပြမှုကို အစိတ်အပိုင်းမှ ဖယ်ရှားပါမည်။ <p> ကာဆာကို ၎င်းမှဖယ်ရှားသောအခါ။
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>အသုံးပြုသူက ကီးဘုတ်ပေါ်ရှိ သော့တစ်ခုကို နှိပ်သောအခါ သို့မဟုတ် လွှတ်လိုက်သောအခါ ကီးဘုတ်ဖြစ်ရပ်တစ်ခု ပေါ်လာသည်။ ကီးဘုတ်ဖြစ်ရပ်များကို ကိုင်တွယ်ရန် အသုံးများသော jQuery နည်းလမ်းအချို့ကို ကြည့်ကြပါစို့။
keypress()အဆိုပါနည်းလမ်း keypress() ဘရောက်ဆာသည် အသုံးပြုသူထံမှ ကီးဘုတ်ထည့်သွင်းမှုကို လက်ခံရရှိသောအခါ လုပ်ဆောင်သည့် ရွေးချယ်ထားသော အစိတ်အပိုင်းများ (ပုံမှန်အားဖြင့် ပုံစံထိန်းချုပ်မှုများ) တွင် ဖြစ်ရပ်ကိုင်တွယ်ခြင်းလုပ်ဆောင်ချက်ကို ပူးတွဲလုပ်ဆောင်သည်။ အောက်ပါဥပမာသည် အဖြစ်အပျက်ကို အစပျိုးသောအခါတွင် မက်ဆေ့ချ်တစ်ခု ပြသမည်ဖြစ်သည်။ keypress နှင့် သင့်ကီးဘုတ်ပေါ်ရှိ ခလုတ်ကို နှိပ်သောအခါ မည်မျှ အစပျိုးသည်။
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>သော့နှိပ်ခြင်းဖြစ်ရပ်သည် Shift၊ Esc၊ Backspace သို့မဟုတ် Delete၊ မြှားခလုတ်များ စသည်တို့ကဲ့သို့သော ပြုပြင်မွမ်းမံခြင်းနှင့် ပုံနှိပ်ခြင်းမဟုတ်သောသော့များမှလွဲ၍ သော့နှိပ်ခြင်းဖြစ်ရပ်နှင့် ဆင်တူသည်။ ၎င်းတို့သည် သော့ပိတ်ဖြစ်ရပ်များကို ဖျက်ပစ်သော်လည်း ခလုတ်နှိပ်သည့် ဖြစ်ရပ်များ မဟုတ်ပါ။
keydown()အဆိုပါနည်းလမ်း keydown() အသုံးပြုသူသည် ကီးဘုတ်ပေါ်တွင် ပထမဆုံးသော့ကို နှိပ်သည့်အခါ ရွေးချယ်ထားသော အရာများ (ပုံမှန်အားဖြင့် ပုံစံထိန်းချုပ်မှုများ) တွင် ဖြစ်ရပ်ကိုင်တွယ်ခြင်းလုပ်ဆောင်ချက်ကို ပူးတွဲလုပ်ဆောင်သည်။ အောက်ပါဥပမာသည် အဖြစ်အပျက်ကို အစပျိုးသောအခါတွင် မက်ဆေ့ချ်တစ်ခု ပြသမည်ဖြစ်သည်။ keydown နှင့် သင့်ကီးဘုတ်ပေါ်ရှိ ခလုတ်ကို နှိပ်သောအခါ မည်မျှ အစပျိုးသည်။
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()အဆိုပါနည်းလမ်း keyup() အသုံးပြုသူကီးဘုတ်ပေါ်ရှိ သော့တစ်ခုထုတ်လိုက်သောအခါတွင် ရွေးချယ်ထားသော အစိတ်အပိုင်းများ (ပုံမှန်အားဖြင့် ပုံစံထိန်းချုပ်မှုများ) တွင် ဖြစ်ရပ်ကိုင်တွယ်ခြင်းလုပ်ဆောင်ချက်ကို ပူးတွဲပါရှိသည်။ အောက်ပါဥပမာသည် အဖြစ်အပျက်ကို အစပျိုးသောအခါတွင် မက်ဆေ့ချ်တစ်ခု ပြသမည်ဖြစ်သည်။ keyup နှင့် သင့်ကီးဘုတ်ပေါ်ရှိ သော့တစ်ခုကို နှိပ်ပြီး လွှတ်လိုက်သောအခါ ၎င်းကို အကြိမ်မည်မျှ အစပျိုးသည်။
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>ဖောင်ထိန်းချုပ်မှုတစ်ခုက အာရုံစူးစိုက်မှုကို လက်ခံရရှိခြင်း သို့မဟုတ် ဆုံးရှုံးသွားသည့်အခါ သို့မဟုတ် အသုံးပြုသူက စာသားထည့်သွင်းမှုတစ်ခုသို့ စာရိုက်ထည့်ခြင်း၊ ရွေးချယ်မှုအကွက်တွင် ရွေးချယ်မှုတစ်ခုရွေးချယ်ခြင်း စသည်တို့ကဲ့သို့သော ဖောင်ထိန်းချုပ်မှုတန်ဖိုးကို အသုံးပြုသူမှ ဖောင်ပုံစံထိန်းချုပ်မှုတန်ဖိုးကို ပြောင်းလဲသည့်အခါ ဖောင်ဖြစ်ရပ်တစ်ခု အစပျိုးသည်။ ဤသည်မှာ ပုံစံဖြစ်ရပ်များကို ကိုင်တွယ်ရန် အသုံးများသော jQuery နည်းလမ်းအချို့ဖြစ်သည်။
change()အဆိုပါနည်းလမ်း change() Event handler လုပ်ဆောင်ချက်ကို ဒြပ်စင်များသို့ ပူးတွဲပါ။ <input> ၎င်း၏တန်ဖိုးပြောင်းလဲသောအခါတွင် လုပ်ဆောင်သည်။ အောက်ဖော်ပြပါနမူနာသည် drop down ရွေးချယ်မှုအကွက်တွင် ရွေးချယ်မှုတစ်ခုကို ရွေးချယ်သည့်အခါ သတိပေးချက်မက်ဆေ့ချ်ကို ပြသမည်ဖြစ်သည်။
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>ကလစ်ဘောက်စ်များ၊ အမှတ်ခြစ်ဘောက်စ်များနှင့် ရေဒီယိုခလုတ်များအတွက်၊ အသုံးပြုသူသည် မောက်စ်ရွေးချယ်မှုပြုလုပ်သည့်အခါ အဖြစ်အပျက်သည် ချက်ချင်းစတင်သော်လည်း စာသားထည့်သွင်းမှုနှင့် စာသားဧရိယာအတွက် ဒြပ်စင်အာရုံဆုံးရှုံးပြီးနောက် ဖြစ်ရပ်သည် မီးလောင်သွားပါသည်။
focus()အဆိုပါနည်းလမ်း focus() အာရုံစူးစိုက်မှုရရှိသည့်အခါ လုပ်ဆောင်သည့် ရွေးချယ်ထားသော အစိတ်အပိုင်းများ (ပုံမှန်အားဖြင့် ထိန်းချုပ်မှုနှင့် ဖောင်နှောင်မှုများ) တွင် ဖြစ်ရပ်ကိုင်တွယ်သူလုပ်ဆောင်ချက်ကို ပူးတွဲလုပ်ဆောင်သည်။ စာသားထည့်သွင်းမှုကို အာရုံစူးစိုက်မှုရရှိသောအခါ အောက်ပါဥပမာသည် မက်ဆေ့ချ်တစ်ခု ပြသမည်ဖြစ်သည်။
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()အဆိုပါနည်းလမ်း blur() အစရှိသော အစိတ်အပိုင်းများ ဖွဲ့စည်းရန်အတွက် event handler function ကို ပူးတွဲပါ။ <input>, <textarea>, <select> ၎င်းသည် အာရုံစူးစိုက်မှု ပျက်သွားသောအခါ လုပ်ဆောင်သည်။ စာသားထည့်သွင်းမှု အာရုံစူးစိုက်မှု ဆုံးရှုံးသည့်အခါ အောက်ပါဥပမာသည် မက်ဆေ့ချ်တစ်ခု ပြသမည်ဖြစ်သည်။
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()အဆိုပါနည်းလမ်း submit() Event handler လုပ်ဆောင်ချက်ကို ဒြပ်စင်များသို့ ပူးတွဲပါ။ <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>DOM (Document Object Model) စာမျက်နှာ အဆင်သင့်ဖြစ်နေသည့် အခြေအနေတွင် သို့မဟုတ် အသုံးပြုသူသည် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းခြင်း သို့မဟုတ် လှိမ့်လိုက်သည့်အခါတွင်လည်း ဖြစ်ရပ်များကို ဖယ်ရှားပါသည်။ ဤဖြစ်ရပ်မျိုးကို ကိုင်တွယ်ရန် အသုံးများသော jQuery နည်းလမ်းအချို့ဖြစ်သည်။
ready()အဆိုပါနည်းလမ်း ready() DOM ကို အပြည့်အ၀ တင်သည့်အခါ လုပ်ဆောင်ရန် လုပ်ဆောင်ချက်ကို သတ်မှတ်သည်။
DOM အထက်တန်းအဆင့်ကို အပြည့်အဝတည်ဆောက်ပြီး ခြယ်လှယ်ရန် အသင့်ဖြစ်နေသည်နှင့်တပြိုင်နက် အောက်ပါဥပမာသည် စာပိုဒ်စာသားကို အစားထိုးမည်ဖြစ်သည်။
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()အဆိုပါနည်းလမ်း resize() ဘရောက်ဆာဝင်းဒိုး၏အရွယ်အစားပြောင်းလဲသောအခါတွင်လည်ပတ်သည့်ဝင်းဒိုးဒြပ်စင်သို့ event handler function ကို ပူးတွဲပါ။
အောက်ဖော်ပြပါ ဥပမာသည် ၎င်း၏ထောင့်များကို ဆွဲယူခြင်းဖြင့် ၎င်းကို အရွယ်အစားပြောင်းလဲရန် ကြိုးစားသောအခါတွင် ဘရောက်ဆာဝင်းဒိုး၏ လက်ရှိအကျယ်နှင့် အမြင့်ကို ပြသမည်ဖြစ်သည်။
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()အဆိုပါနည်းလမ်း scroll() အဖြစ်အပျက်ကိုင်တွယ်သူ လုပ်ဆောင်ချက်ကို ဝင်းဒိုး သို့မဟုတ် ၎င်းတွင် ပူးတွဲပါ။ iframe နှင့် အရာဝတ္ထု၏ လှိမ့်ရွှေ့အနေအထား ပြောင်းလဲသည့်အခါတိုင်း လည်ပတ်နိုင်သော အရာများ။
အောက်ဖော်ပြပါ ဥပမာသည် ဘရောက်ဆာဝင်းဒိုးကို လှိမ့်လိုက်သောအခါတွင် မက်ဆေ့ချ်တစ်ခု ပြသမည်ဖြစ်သည်။
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
ဆေးရောင်ခြယ်ခြင်းမှတစ်ဆင့် ကောင်းမွန်သော မော်တာစွမ်းရည်ကို ပြုစုပျိုးထောင်ခြင်းသည် ကလေးများကို စာရေးခြင်းကဲ့သို့ ပိုမိုရှုပ်ထွေးသောစွမ်းရည်များအတွက် ပြင်ဆင်ပေးသည်။ အရောင်ခြယ်ရန်…
ရေတပ်ကဏ္ဍသည် ကမ္ဘာလုံးဆိုင်ရာ စီးပွားရေးအင်အားကြီးဖြစ်ပြီး၊ ဘီလီယံ ၁၅၀ ရှိသော စျေးကွက်ဆီသို့ လျှောက်လှမ်းနေသော...
ပြီးခဲ့သည့်တနင်္လာနေ့တွင် Financial Times သည် OpenAI နှင့်သဘောတူညီချက်တစ်ခုကြေငြာခဲ့သည်။ FT သည် ၎င်း၏ ကမ္ဘာ့အဆင့်မီ သတင်းစာပညာကို လိုင်စင်ထုတ်ပေးသည်...
သန်းပေါင်းများစွာသောလူများသည် streaming ဝန်ဆောင်မှုများအတွက်ပေးဆောင်ပြီးလစဉ်စာရင်းသွင်းမှုအခကြေးငွေပေးဆောင်သည်။ အများအမြင်မှာ သင်...