jQuery ပွဲနည်းလမ်းများ

jQuery သည် HTML စာမျက်နှာရှိ အဖြစ်အပျက်များကို တုံ့ပြန်ရန်အတွက် အံဝင်ခွင်ကျဖြစ်စေသည်။

Events တွေက ဘာတွေလဲ။

ဝဘ်စာမျက်နှာတစ်ခုမှ တုံ့ပြန်နိုင်သည့် မတူညီသော ဧည့်သည်များ၏ လုပ်ဆောင်ချက်အားလုံးကို ဖြစ်ရပ်များဟုခေါ်သည်။

အဖြစ်အပျက်တစ်ခုသည် တစ်စုံတစ်ခုဖြစ်ပျက်လာသောအခါ တိကျသောအခိုက်အတန့်ကို ကိုယ်စားပြုသည်။

ဥပမာများ-

မောက်စ်ကို ဒြပ်စင်တစ်ခုပေါ်တွင် ရွှေ့ပါ။
ရေဒီယိုခလုတ်ကို ရွေးချယ်ခြင်း။
အစိတ်အပိုင်းတစ်ခုကိုနှိပ်ပါ။

"မီးလောင်မှု/ပစ်ခတ်ခြင်း" ဟူသော ဝေါဟာရကို ဖြစ်ရပ်များနှင့် မကြာခဏ သုံးသည်။ ဥပမာ- "သော့နှိပ်သည့်ကိစ္စ၊ သင် သော့ကို နှိပ်လိုက်သည်"။

ဤသည်မှာ အချို့သော DOM ဖြစ်ရပ်များ-

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

အစီအစဉ်နည်းလမ်းများအတွက် jQuery Syntax

jQuery တွင်၊ DOM ဖြစ်ရပ်အများစုတွင် တူညီသော jQuery နည်းလမ်းတစ်ခုရှိသည်။

စာမျက်နှာတစ်ခုပေါ်ရှိ စာပိုဒ်အားလုံးတွင် ကလစ်ဖြစ်ရပ်တစ်ခု သတ်မှတ်ရန်၊ သင်သည် ဤအရာကို လုပ်ဆောင်နိုင်သည်-

$("p").click();

နောက်တစ်ဆင့်ကတော့ အဖြစ်အပျက် မီးလောင်တဲ့အခါ ဘာတွေဖြစ်သင့်တယ်ဆိုတာ သတ်မှတ်ဖို့ပါပဲ။ သင်သည် ပွဲသို့ လုပ်ဆောင်ချက်တစ်ခုကို ဖြတ်သန်းရမည်-

$("p").click(function(){
// action goes here!!
});

အသုံးများသော jQuery Event Methods

$(document).ready()

ဤ $(document).ready()နည်းလမ်းသည် စာရွက်စာတမ်းကို အပြည့်အ၀တင်သောအခါတွင် လုပ်ဆောင်ချက်တစ်ခုကို လုပ်ဆောင်နိုင်စေပါသည်။ ဤဖြစ်ရပ်ကို jQuery Syntax အခန်း တွင် ရှင်းပြထားပြီးဖြစ်သည် ။

ကလစ်()

click()နည်းလမ်းသည် အဖြစ်အပျက်ကိုင်တွယ်သူ လုပ်ဆောင်ချက်ကို HTML အစိတ်အပိုင်းတစ်ခုသို့ ပူးတွဲပေးသည် ။

HTML ဒြပ်စင်ကို အသုံးပြုသူ ကလစ်သောအခါ လုပ်ဆောင်ချက်ကို လုပ်ဆောင်သည်။

အောက်ပါဥပမာကပြောသည်- ကလစ်ဖြစ်ရပ်တစ်ခုသည် <p>ဒြပ်စင်တစ်ခုပေါ်တွင် မီးလောင်သောအခါ၊ လက်ရှိ <p>ဒြပ်စင်ကို ဝှက်ထားရန်-

ဥပမာ

$("p").click(function(){
$(this).hide();
});

dblclick()

dblclick()နည်းလမ်းသည် အဖြစ်အပျက်ကိုင်တွယ်သူ လုပ်ဆောင်ချက်ကို HTML အစိတ်အပိုင်းတစ်ခုသို့ ပူးတွဲပေးသည် ။

အသုံးပြုသူက HTML အစိတ်အပိုင်းကို နှစ်ချက်နှိပ်လိုက်သောအခါ လုပ်ဆောင်ချက်ကို လုပ်ဆောင်သည်-

ဥပမာ

$("p").dblclick(function(){
$(this).hide();
});

mouseenter()

mouseenter()နည်းလမ်းသည် အဖြစ်အပျက်ကိုင်တွယ်သူ လုပ်ဆောင်ချက်ကို HTML အစိတ်အပိုင်းတစ်ခုသို့ ပူးတွဲပေးသည် ။

mouse pointer သည် HTML အစိတ်အပိုင်းသို့ ဝင်ရောက်သောအခါ လုပ်ဆောင်မှုအား လုပ်ဆောင်သည်-

ဥပမာ

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

mouseleave()

mouseleave()နည်းလမ်းသည် အဖြစ်အပျက်ကိုင်တွယ်သူ လုပ်ဆောင်ချက်ကို HTML အစိတ်အပိုင်းတစ်ခုသို့ ပူးတွဲပေးသည် ။

mouse pointer သည် HTML element မှထွက်ခွာသောအခါ function ကိုလုပ်ဆောင်သည်-

ဥပမာ

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

mousedown()

mousedown()နည်းလမ်းသည် အဖြစ်အပျက်ကိုင်တွယ်သူ လုပ်ဆောင်ချက်ကို HTML အစိတ်အပိုင်းတစ်ခုသို့ ပူးတွဲပေးသည် ။

မောက်စ်သည် HTML ဒြပ်စင်ကိုကျော်နေချိန်တွင် ဘယ်၊ အလယ် သို့မဟုတ် ညာဘက် မောက်စ်ခလုတ်ကို နှိပ်လိုက်သည့်အခါ လုပ်ဆောင်ချက်ကို လုပ်ဆောင်သည်-

ဥပမာ

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

mouseup()

mouseup()နည်းလမ်းသည် အဖြစ်အပျက်ကိုင်တွယ်သူ လုပ်ဆောင်ချက်ကို HTML အစိတ်အပိုင်းတစ်ခုသို့ ပူးတွဲပေးသည် ။

မောက်စ်သည် HTML ဒြပ်စင်ကိုကျော်နေချိန်တွင် ဘယ်၊ အလယ် သို့မဟုတ် ညာဘက် မောက်စ်ခလုတ်ကို လွှတ်ပေးသည့်အခါ လုပ်ဆောင်ချက်ကို လုပ်ဆောင်သည်-

ဥပမာ

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

hover()

hover()method သည် function နှစ်ခုကိုယူပြီး method mouseenter()နှင့် method များကိုပေါင်းစပ်ထားသည် mouseleave() ။

မောက်စ်သည် HTML ဒြပ်စင်သို့ ဝင်ရောက်သည့်အခါ ပထမလုပ်ဆောင်ချက်ကို လုပ်ဆောင်ပြီး မောက်စ်သည် HTML အစိတ်အပိုင်းမှ ထွက်သွားသည့်အခါ ဒုတိယလုပ်ဆောင်ချက်ကို လုပ်ဆောင်သည်-

ဥပမာ

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

အာရုံစိုက်()

focus()နည်းလမ်းသည် အဖြစ်အပျက်ကိုင်တွယ်သူလုပ်ဆောင်ချက်ကို HTML ဖောင်အကွက်တစ်ခုသို့ ပူးတွဲပေးသည် ။

ဖောင်အကွက်သည် အာရုံစူးစိုက်မှုရရှိသောအခါ လုပ်ဆောင်ချက်ကို လုပ်ဆောင်သည်-

ဥပမာ

$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

မှုန်ဝါးခြင်း()

blur()နည်းလမ်းသည် အဖြစ်အပျက်ကိုင်တွယ်သူလုပ်ဆောင်ချက်ကို HTML ဖောင်အကွက်တစ်ခုသို့ ပူးတွဲပေးသည် ။

ဖောင်အကွက်သည် အာရုံစူးစိုက်မှု ဆုံးရှုံးသောအခါ လုပ်ဆောင်ချက်ကို လုပ်ဆောင်သည်-

ဥပမာ

$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

on() နည်းလမ်း

နည်းလမ်း သည် on()ရွေးချယ်ထားသော ဒြပ်စင်များအတွက် တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော ဖြစ်ရပ်ကိုင်တွယ်သူကို ပူးတွဲထားသည်။

ကလစ်ဖြစ်ရပ်ကို ဒြပ်စင်တစ်ခုသို့ ပူးတွဲပါ <p>-

ဥပမာ

$("p").on("click", function(){
$(this).hide();
});

<p>ဖြစ်ရပ်ကိုင်တွယ်သူအများအပြားကို အစိတ်အပိုင်း တစ်ခုသို့ ပူးတွဲပါ -

ဥပမာ

$("p").on({
mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

jQuery လေ့ကျင့်ခန်းများ